bundle33.min.js

(() => {
  // Utility functions
  function extractDomain(url) {
    try {
      const urlObject = new URL(url)
      return urlObject.hostname.replace('www.', '')
    } catch {
      return url
    }
  }

  function createMarkdownElement(text, role, onImageClick) {
    const container = document.createElement('div')
    const lines = text.split('\n')
    const collectedLinks = []

    // ... (rest of the markdown parsing logic, same as our current implementation)
    // Note: Keeping the same markdown parsing logic we developed

    return container
  }

  // Custom Web Component
  class AutomatioChat extends HTMLElement {
    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
      this.messages = []
      this.isTyping = false
      this.isDark = 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.createStyles()
      this.createUI(agentName, agentDescription)
      this.setupEventListeners()

      // Initialize with a welcome message
      this.addMessage({
        id: '1',
        role: 'assistant',
        content: 'Hello! How can I help you today?',
        timestamp: new Date()
      })
    }

    createStyles() {
      const style = document.createElement('style')
      style.textContent = `
        :host {
          --chat-width: 400px;
          --chat-border-radius: 8px;
          --chat-bg: #ffffff;
          --chat-dark-bg: #1f2937;
          --chat-border: #e5e7eb;
          --chat-dark-border: #374151;
        }

        .chat-container {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: var(--chat-width);
          background: var(--chat-bg);
          border-radius: var(--chat-border-radius);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          font-family: system-ui, -apple-system, sans-serif;
          border: 1px solid var(--chat-border);
          overflow: hidden;
        }

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

        /* ... rest of the styles from our current implementation ... */
      `
      this.shadowRoot.appendChild(style)
    }

    createUI(agentName, agentDescription) {
      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(container)
    }

    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', (e) => {
        e.preventDefault()
        this.handleSubmit(input.value)
        input.value = ''
      })

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

    async handleSubmit(message) {
      if (!message.trim()) return

      const userMessage = {
        id: Date.now().toString(),
        role: 'user',
        content: message,
        timestamp: new Date()
      }

      this.addMessage(userMessage)
      this.showTypingIndicator()

      try {
        const response = await this.sendMessage(message)
        this.hideTypingIndicator()
        
        const assistantMessage = {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: response,
          timestamp: new Date()
        }

        this.addMessage(assistantMessage)
      } catch (error) {
        console.error('Error sending message:', error)
        this.hideTypingIndicator()
        
        const errorMessage = {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: 'I apologize, but I encountered an error processing your message. Please try again.',
          timestamp: new Date()
        }

        this.addMessage(errorMessage)
      }
    }

    async sendMessage(message) {
      // This should be replaced with actual API call logic
      await new Promise(resolve => setTimeout(resolve, 1000))
      return `I received your message: "${message}"\n\nThis is a default response. Configure the API endpoint to get real responses.`
    }

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

      const contentElement = document.createElement('div')
      contentElement.className = 'message'
      
      const markdownElement = createMarkdownElement(
        message.content,
        message.role,
        (src, alt) => this.showImageModal(src, alt)
      )
      
      contentElement.appendChild(markdownElement)
      messageElement.appendChild(contentElement)
      container.appendChild(messageElement)
      container.scrollTop = container.scrollHeight
    }

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

      const container = this.shadowRoot.querySelector('.messages-container')
      const typingElement = document.createElement('div')
      typingElement.className = 'message-wrapper assistant typing'
      
      typingElement.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(typingElement)
      container.scrollTop = container.scrollHeight
    }

    hideTypingIndicator() {
      if (!this.isTyping) return
      this.isTyping = false

      const typingElement = this.shadowRoot.querySelector('.typing')
      if (typingElement) {
        typingElement.remove()
      }
    }

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

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