bundle34.min.js

(() => {
  class ChatClient {
    constructor(hostUrl, apiKey, flowId) {
      this.hostUrl = hostUrl;
      this.apiKey = apiKey;
      this.flowId = flowId;
      console.log('[ChatClient] Initialized with:', { hostUrl, flowId });
    }

    async sendMessage(message) {
      console.log('[ChatClient] Sending message:', message);
      const headers = {
        'Content-Type': 'application/json',
        'x-api-key': this.apiKey
      };

      try {
        const response = await fetch(`${this.hostUrl}/api/v1/run/${this.flowId}`, {
          method: 'POST',
          headers: headers,
          body: JSON.stringify({
            input_type: "chat",
            input_value: message,
            output_type: "chat",
            session_id: crypto.randomUUID()
          })
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log('[ChatClient] Received response:', data);
        return data.outputs[0].outputs[0].results.message.text;
      } catch (error) {
        console.error('[ChatClient] Error sending message:', error);
        throw error;
      }
    }
  }

  class AutomatioChat extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.messages = [];
      this.isTyping = false;
      this.isDark = false;
      this.isMuted = false;
    }

    connectedCallback() {
      const hostUrl = this.getAttribute('host_url');
      const apiKey = this.getAttribute('api_key');
      const flowId = this.getAttribute('flow_id');
      const agentName = this.getAttribute('agent_name') || 'AI Assistant';
      const agentDescription = this.getAttribute('agent_description') || 'Powered by Automatio';

      this.client = new ChatClient(hostUrl, apiKey, flowId);
      
      const style = document.createElement('style');
      style.textContent = `
        :host {
          --chat-width: 400px;
          --chat-radius: 12px;
          --chat-bg: #ffffff;
          --chat-dark-bg: #1f2937;
          --chat-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .chat-container {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: var(--chat-width);
          background: var(--chat-bg);
          border-radius: var(--chat-radius);
          box-shadow: var(--chat-shadow);
          font-family: system-ui, -apple-system, sans-serif;
          z-index: 10000;
          overflow: hidden;
          border: 1px solid #e5e7eb;
        }

        .chat-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px;
          border-bottom: 1px solid #e5e7eb;
          background: var(--chat-bg);
        }

        .agent-info {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .agent-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          background: #f3f4f6;
        }

        .agent-avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .agent-details {
          line-height: 1.3;
        }

        .agent-name {
          font-weight: 600;
          color: #111827;
        }

        .agent-description {
          font-size: 12px;
          color: #6b7280;
        }

        .chat-controls {
          display: flex;
          gap: 8px;
        }

        .chat-controls button {
          background: none;
          border: none;
          font-size: 18px;
          cursor: pointer;
          padding: 4px;
          color: #6b7280;
          transition: color 0.2s;
        }

        .chat-controls button:hover {
          color: #111827;
        }

        .messages-container {
          height: 400px;
          overflow-y: auto;
          padding: 16px;
          background: #f9fafb;
          scroll-behavior: smooth;
        }

        .message-wrapper {
          display: flex;
          gap: 12px;
          margin-bottom: 16px;
        }

        .message-wrapper.user {
          justify-content: flex-end;
        }

        .message {
          padding: 12px 16px;
          border-radius: 12px;
          max-width: 85%;
          line-height: 1.5;
          font-size: 14px;
        }

        .message-wrapper.user .message {
          background: #2563eb;
          color: white;
          border-bottom-right-radius: 4px;
        }

        .message-wrapper.assistant .message {
          background: white;
          color: #111827;
          border-bottom-left-radius: 4px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
        }

        .avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .typing-indicator {
          background: white;
          padding: 12px 16px;
          border-radius: 12px;
          border-bottom-left-radius: 4px;
          display: flex;
          gap: 4px;
          align-items: center;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .typing-indicator span {
          width: 6px;
          height: 6px;
          background: #6b7280;
          border-radius: 50%;
          animation: typing 1.4s infinite;
          opacity: 0.3;
        }

        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-4px); }
        }

        .input-form {
          padding: 16px;
          display: flex;
          gap: 8px;
          background: var(--chat-bg);
          border-top: 1px solid #e5e7eb;
        }

        .message-input {
          flex: 1;
          padding: 8px 16px;
          border: 1px solid #e5e7eb;
          border-radius: 9999px;
          outline: none;
          font-size: 14px;
          transition: border-color 0.2s;
        }

        .message-input:focus {
          border-color: #2563eb;
        }

        .send-button {
          padding: 8px 20px;
          background: #2563eb;
          color: white;
          border: none;
          border-radius: 9999px;
          font-size: 14px;
          cursor: pointer;
          transition: background-color 0.2s;
        }

        .send-button:hover {
          background: #1d4ed8;
        }

        .send-button:disabled {
          background: #93c5fd;
          cursor: not-allowed;
        }

        /* Dark mode styles */
        :host(.dark) .chat-container {
          background: var(--chat-dark-bg);
          border-color: #374151;
        }

        :host(.dark) .chat-header {
          background: var(--chat-dark-bg);
          border-color: #374151;
        }

        :host(.dark) .agent-name {
          color: #f9fafb;
        }

        :host(.dark) .agent-description {
          color: #9ca3af;
        }

        :host(.dark) .messages-container {
          background: #111827;
        }

        :host(.dark) .message-wrapper.assistant .message {
          background: #1f2937;
          color: #f9fafb;
        }

        :host(.dark) .typing-indicator {
          background: #1f2937;
        }

        :host(.dark) .input-form {
          background: var(--chat-dark-bg);
          border-color: #374151;
        }

        :host(.dark) .message-input {
          background: #374151;
          border-color: #4b5563;
          color: #f9fafb;
        }

        :host(.dark) .message-input::placeholder {
          color: #9ca3af;
        }

        /* Image modal styles */
        .image-modal {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10001;
        }

        .modal-content {
          position: relative;
          max-width: 90vw;
          max-height: 90vh;
        }

        .modal-content img {
          max-width: 100%;
          max-height: 90vh;
          border-radius: 8px;
        }

        .close-modal {
          position: absolute;
          top: -40px;
          right: 0;
          background: none;
          border: none;
          color: white;
          font-size: 24px;
          cursor: pointer;
        }
      `;

      const container = document.createElement('div');
      container.className = 'chat-container';
      
      container.innerHTML = `
        <div class="chat-header">
          <div class="agent-info">
            <div class="agent-avatar">
              <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/879-cQrx9a2kw2d0VO4ZsOtv1rMMJpo912.png" alt="${agentName}">
            </div>
            <div class="agent-details">
              <div class="agent-name">${agentName}</div>
              <div class="agent-description">${agentDescription}</div>
            </div>
          </div>
          <div class="chat-controls">
            <button class="sound-toggle">🔊</button>
            <button class="theme-toggle">🌙</button>
            <button class="close-button">×</button>
          </div>
        </div>
        <div class="messages-container"></div>
        <form class="input-form">
          <input type="text" class="message-input" placeholder="Type a message...">
          <button type="submit" class="send-button">Send</button>
        </form>
      `;

      this.shadowRoot.appendChild(style);
      this.shadowRoot.appendChild(container);

      this.setupEventListeners();
      
      // Add initial message
      this.addMessage({
        role: 'assistant',
        content: 'Hello! How can I help you today?'
      });
    }

    setupEventListeners() {
      const form = this.shadowRoot.querySelector('.input-form');
      const input = this.shadowRoot.querySelector('.message-input');
      const soundToggle = this.shadowRoot.querySelector('.sound-toggle');
      const themeToggle = this.shadowRoot.querySelector('.theme-toggle');
      const closeButton = this.shadowRoot.querySelector('.close-button');

      form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const message = input.value.trim();
        if (!message) return;

        input.value = '';
        input.disabled = true;
        this.shadowRoot.querySelector('.send-button').disabled = true;

        this.addMessage({ role: 'user', content: message });
        this.showTypingIndicator();

        try {
          const response = await this.client.sendMessage(message);
          this.hideTypingIndicator();
          this.addMessage({ role: 'assistant', content: response });
        } catch (error) {
          console.error('Error:', error);
          this.hideTypingIndicator();
          this.addMessage({
            role: 'assistant',
            content: 'I apologize, but I encountered an error. Please try again.'
          });
        }

        input.disabled = false;
        this.shadowRoot.querySelector('.send-button').disabled = false;
        input.focus();
      });

      soundToggle.addEventListener('click', () => {
        this.isMuted = !this.isMuted;
        soundToggle.textContent = this.isMuted ? '🔇' : '🔊';
      });

      themeToggle.addEventListener('click', () => {
        this.isDark = !this.isDark;
        themeToggle.textContent = this.isDark ? '🌞' : '🌙';
        this.toggleTheme();
      });

      closeButton.addEventListener('click', () => {
        this.remove();
      });
    }

    toggleTheme() {
      if (this.isDark) {
        this.classList.add('dark');
      } else {
        this.classList.remove('dark');
      }
    }

    addMessage({ role, content }) {
      const container = this.shadowRoot.querySelector('.messages-container');
      const wrapper = document.createElement('div');
      wrapper.className = `message-wrapper ${role}`;
      
      if (role === 'assistant') {
        wrapper.innerHTML = `
          <div class="avatar">
            <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/879-cQrx9a2kw2d0VO4ZsOtv1rMMJpo912.png" alt="Assistant">
          </div>
        `;
      }

      const message = document.createElement('div');
      message.className = 'message';
      message.textContent = content;
      
      wrapper.appendChild(message);
      container.appendChild(wrapper);
      container.scrollTop = container.scrollHeight;

      if (!this.isMuted) {
        this.playMessageSound();
      }
    }

    showTypingIndicator() {
      if (this.isTyping) return;
      this.isTyping = true;

      const container = this.shadowRoot.querySelector('.messages-container');
      const wrapper = document.createElement('div');
      wrapper.className = 'message-wrapper assistant typing';
      
      wrapper.innerHTML = `
        <div class="avatar">
          <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/879-cQrx9a2kw2d0VO4ZsOtv1rMMJpo912.png" alt="Assistant">
        </div>
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      `;

      container.appendChild(wrapper);
      container.scrollTop = container.scrollHeight;
    }

    hideTypingIndicator() {
      const typingIndicator = this.shadowRoot.querySelector('.typing');
      if (typingIndicator) {
        typingIndicator.remove();
      }
      this.isTyping = false;
    }

    playMessageSound() {
      const audio = new Audio('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/strange-notification-36458-ZNCJXwWYYmTGnCIiU5bh99h9OzbFjT.mp3');
      audio.volume = 0.3;
      audio.play().catch(error => {
        console.log('Audio playback failed:', error);
      });
    }
  }

  // Register the web component
  customElements.define('automatio-chat', AutomatioChat);
  console.log('[Bundle] Automatio Chat Widget loaded and registered');
})();