bundle41.min.js

(() => {
  // Chat client for handling API requests
  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,
          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;
    }

    parseMarkdown(text) {
      // First, escape any HTML to prevent XSS
      text = text.replace(/[&<>"']/g, char => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
      }[char]));
    
      // Collect links for the Sources section
      const links = [];
      
      // Process markdown patterns
      let html = text;
    
      // Fix: Properly escape the $$ separator in the regex
      const linkPattern = /\[([^\]]+)\]\$\$([^\$]+)\$\$/g;
      const matches = Array.from(text.matchAll(linkPattern));
      
      // First collect all links
      matches.forEach(match => {
        const [_, title, url] = match;
        links.push({ title, url });
      });
    
      // Then replace links with link cards
      html = html.replace(linkPattern, (_, title, url) => {
        try {
          const domain = new URL(url).hostname.replace('www.', '');
          const favicon = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
          return `
            <div class="link-card" onclick="window.open('${url}', '_blank')">
              <img class="favicon" src="${favicon}" alt="${domain} favicon" />
              <div class="link-content">
                <div class="link-title">${title}</div>
                <div class="link-domain">${domain}</div>
              </div>
            </div>
          `;
        } catch {
          return `<a href="${url}" target="_blank" rel="noopener noreferrer">${title}</a>`;
        }
      });
    
      // Images with proper $$ separator
      html = html.replace(/!\[([^\]]*)\]\$\$([^\$]+)\$\$/g, (_, alt, src) => 
        `<img src="${src}" alt="${alt}" class="message-image" onclick="this.getRootNode().host.showImageModal('${src}', '${alt}')">`
      );
    
      // Rest of the markdown processing
      html = html
        .replace(/```([^`]+)```/g, (_, code) => `<pre><code>${code}</code></pre>`)
        .replace(/`([^`]+)`/g, (_, code) => `<code>${code}</code>`)
        .replace(/\*\*([^*]+)\*\*/g, (_, text) => `<strong>${text}</strong>`)
        .replace(/^[\s]*[-*+][\s](.+)/gm, (_, item) => `<li>${item}</li>`);
    
      // Wrap lists in <ul>
      html = html.split('\n').map(line => {
        if (line.includes('<li>')) {
          return `<ul>${line}</ul>`;
        }
        return line;
      }).join('\n');
    
      // Handle paragraphs
      html = html.split('\n\n').map(para => {
        if (!para.trim()) return '';
        if (
          para.includes('<ul>') || 
          para.includes('<pre>') || 
          para.includes('<div class="link-card"') ||
          para.includes('<img')
        ) {
          return para;
        }
        return `<p>${para.trim()}</p>`;
      }).filter(Boolean).join('\n');
    
      return { html, links };
    }

    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;
          white-space: pre-wrap;
        }

        .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);
        }

        .message p {
          margin: 0 0 8px 0;
        }

        .message p:last-child {
          margin-bottom: 0;
        }

        .message pre {
          background: #1a1a1a;
          padding: 12px;
          border-radius: 6px;
          overflow-x: auto;
          color: #fff;
          margin: 8px 0;
        }

        .message code {
          background: rgba(0, 0, 0, 0.1);
          padding: 2px 4px;
          border-radius: 4px;
          font-family: monospace;
          font-size: 0.9em;
        }

        .message ul {
          margin: 8px 0;
          padding-left: 20px;
        }

        .message li {
          margin: 4px 0;
        }

        .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;
        }

        /* Link card styles */
        .link-card {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 8px;
          margin: 8px 0;
          cursor: pointer;
          transition: background-color 0.2s;
        }

        .link-card:hover {
          background: rgba(0, 0, 0, 0.1);
        }

        .link-card .favicon {
          width: 20px;
          height: 20px;
          border-radius: 4px;
        }

        .link-card .link-content {
          flex: 1;
          min-width: 0;
        }

        .link-card .link-title {
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .link-card .link-domain {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
        }

        /* Sources section */
        .sources-section {
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .sources-title {
          font-weight: 600;
          margin-bottom: 8px;
        }

        .source-link {
          color: #2563eb;
          text-decoration: none;
          display: block;
          margin: 4px 0;
          font-size: 14px;
        }

        .source-link:hover {
          text-decoration: underline;
        }

        /* Image styles */
        .message img.message-image {
          max-width: 100%;
          border-radius: 8px;
          cursor: pointer;
          transition: opacity 0.2s;
        }

        .message img.message-image:hover {
          opacity: 0.9;
        }

        /* Image modal */
        .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;
        }

        /* 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) .message code {
          background: rgba(255, 255, 255, 0.1);
          color: #f9fafb;
        }

        :host(.dark) .link-card {
          background: rgba(255, 255, 255, 0.1);
        }

        :host(.dark) .link-card:hover {
          background: rgba(255, 255, 255, 0.15);
        }

        :host(.dark) .link-card .link-domain {
          color: rgba(255, 255, 255, 0.5);
        }

        :host(.dark) .sources-section {
          border-color: rgba(255, 255, 255, 0.1);
        }

        :host(.dark) .source-link {
          color: #60a5fa;
        }

        :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;
        }
      `;

      this.shadowRoot.appendChild(style);

      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>
          </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(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');

      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();
      });
    }

    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';
      
      // Parse markdown and add content
      const { html, links } = this.parseMarkdown(content);
      message.innerHTML = html;

      // Add sources section if there are links
      if (links.length > 0) {
        const sourcesSection = document.createElement('div');
        sourcesSection.className = 'sources-section';
        sourcesSection.innerHTML = `
          <div class="sources-title">Sources</div>
          ${links.map(link => 
            `<a href="${link.url}" target="_blank" rel="noopener noreferrer" class="source-link">${link.title}</a>`
          ).join('')}
        `;
        message.appendChild(sourcesSection);
      }
      
      wrapper.appendChild(message);
      container.appendChild(wrapper);
      container.scrollTop = container.scrollHeight;

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

    showImageModal(src, alt) {
      const modal = document.createElement('div');
      modal.className = 'image-modal';
      
      modal.innerHTML = `
        <div class="modal-content">
          <img src="${src}" alt="${alt}">
          <button class="close-modal">×</button>
        </div>
      `;

      modal.addEventListener('click', (e) => {
        if (e.target === modal) {
          modal.remove();
        }
      });

      modal.querySelector('.close-modal').addEventListener('click', () => {
        modal.remove();
      });

      this.shadowRoot.appendChild(modal);
    }

    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);
      });
    }
  }

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