bundle43.min.js

(() => {
  // Markdown parser with proper handling of special characters and patterns
  function createMarkdownParser() {
    // Helper to safely escape HTML but preserve markdown
    function escapeHTML(text) {
      const replacements = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
      };
      return text.replace(/[&<>"']/g, char => replacements[char]);
    }

    // Helper to create link cards
    function createLinkCard(title, url) {
      try {
        const domain = new URL(url).hostname.replace('www.', '');
        const favicon = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
        return {
          html: `
            <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">${escapeHTML(title)}</div>
                <div class="link-domain">${domain}</div>
              </div>
            </div>
          `,
          link: { title, url }
        };
      } catch {
        return {
          html: `<a href="${url}" target="_blank" rel="noopener noreferrer">${escapeHTML(title)}</a>`,
          link: { title, url }
        };
      }
    }

    return function parseMarkdown(text) {
      // Store links for the sources section
      const links = [];
      
      // First escape the HTML but preserve markdown patterns
      let html = escapeHTML(text);

      // Process markdown patterns in specific order
      const patterns = [
        // Links with link cards - process first to collect all links
        {
          pattern: /\[([^\]]+)\]\$\$([^\s$][^$]*?)\$\$/g,
          replace: (match, title, url) => {
            const { html, link } = createLinkCard(title.trim(), url.trim());
            links.push(link);
            return html;
          }
        },
        // Images
        {
          pattern: /!\[([^\]]*)\]\$\$([^\s$][^$]*?)\$\$/g,
          replace: (match, alt, src) => 
            `<img src="${src.trim()}" alt="${alt.trim()}" class="message-image" onclick="this.getRootNode().host.showImageModal('${src.trim()}', '${alt.trim()}')">`
        },
        // Code blocks
        {
          pattern: /```([\s\S]+?)```/g,
          replace: (match, code) => `<pre><code>${code.trim()}</code></pre>`
        },
        // Inline code
        {
          pattern: /`([^`]+)`/g,
          replace: (match, code) => `<code>${code}</code>`
        },
        // Bold text
        {
          pattern: /\*\*([^*]+)\*\*/g,
          replace: (match, text) => `<strong>${text}</strong>`
        },
        // List items
        {
          pattern: /^[\s]*[-*+][\s](.+)$/gm,
          replace: (match, item) => `<li>${item}</li>`
        }
      ];

      // Apply each pattern
      patterns.forEach(({ pattern, replace }) => {
        html = html.replace(pattern, replace);
      });

      // Wrap lists in <ul> tags
      html = html
        .split('\n')
        .map(line => {
          if (line.includes('<li>')) {
            return `<ul>${line}</ul>`;
          }
          return line;
        })
        .join('\n');

      // Handle paragraphs - but skip special blocks
      html = html
        .split('\n\n')
        .map(block => {
          if (!block.trim()) return '';
          if (
            block.includes('<ul>') ||
            block.includes('<pre>') ||
            block.includes('<div class="link-card"') ||
            block.includes('<img')
          ) {
            return block;
          }
          return `<p>${block.trim()}</p>`;
        })
        .filter(Boolean)
        .join('\n');

      // If there are links, add the sources section
      if (links.length > 0) {
        html += `
          <div class="sources-section">
            <div class="sources-title">Sources</div>
            ${links.map(link => 
              `<a href="${link.url}" target="_blank" rel="noopener noreferrer" class="source-link">${escapeHTML(link.title)}</a>`
            ).join('')}
          </div>
        `;
      }

      return { html, links };
    };
  }

  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;
      this.parseMarkdown = createMarkdownParser();
    }

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

        .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: 12px;
          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: 24px;
          height: 24px;
          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;
          margin-bottom: 2px;
        }

        .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;
          color: inherit;
        }

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

        .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 } = this.parseMarkdown(content);
      message.innerHTML = html;
      
      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');
})();