bundle44.min.js

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

  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 `
        <a href="${url}" target="_blank" rel="noopener noreferrer" class="link-card">
          <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>
        </a>
      `;
    } catch {
      return `<a href="${url}" target="_blank" rel="noopener noreferrer">${escapeHTML(title)}</a>`;
    }
  }

  return function parseMarkdown(text) {
    // First escape HTML but preserve our special markers
    let html = text.replace(/[&<>"']/g, char => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[char]));

    // Process markdown patterns
    const patterns = [
      // Links with link cards - must be processed first
      {
        pattern: /\[([^\]]+)\]\$\$([^$]+?)\$\$/g,
        replace: (_, title, url) => createLinkCard(title.trim(), url.trim())
      },
      // Images
      {
        pattern: /!\[([^\]]*)\]\$\$([^$]+?)\$\$/g,
        replace: (_, 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: (_, code) => `<pre><code>${code.trim()}</code></pre>`
      },
      // Inline code
      {
        pattern: /`([^`]+)`/g,
        replace: (_, code) => `<code>${code}</code>`
      },
      // Bold text
      {
        pattern: /\*\*([^*]+)\*\*/g,
        replace: (_, text) => `<strong>${text}</strong>`
      },
      // List items
      {
        pattern: /^[\s]*[-*+][\s](.+)$/gm,
        replace: (_, item) => `<li>${item}</li>`
      }
    ];

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

    // 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(block => {
      if (!block.trim()) return '';
      if (
        block.includes('<ul>') ||
        block.includes('<pre>') ||
        block.includes('class="link-card"') ||
        block.includes('<img')
      ) {
        return block;
      }
      return `<p>${block.trim()}</p>`;
    }).filter(Boolean).join('\n');

    return { html };
  };
}

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: 8px;
        padding: 8px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 6px;
        margin: 4px 0;
        cursor: pointer;
        transition: background-color 0.2s;
        text-decoration: none;
        color: inherit;
      }

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

      .link-card .favicon {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        flex-shrink: 0;
      }

      .link-card .link-content {
        flex: 1;
        min-width: 0;
        font-size: 13px;
        line-height: 1.4;
      }

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

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

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