bundle38.min.js

;(() => {
  // Markdown parsing utility
  function parseMarkdown(text) {
    const linkRegex = /\[([^\]]+)\]$$([^)]+)$$/g
    const boldRegex = /\*\*([^*]+)\*\*/g
    const imageRegex = /!\[([^\]]*)\]$$([^)]+)$$/g
    const listRegex = /^[\s]*[-*+][\s](.+)/gm

    // Collect links for the Sources section
    const links = []
    text = text.replace(linkRegex, (_, title, url) => {
      links.push({ title, url })
      return createLinkCard(title, url)
    })

    // Parse other markdown elements
    text = text
      .replace(boldRegex, "<strong>$1</strong>")
      .replace(imageRegex, (_, alt, src) => createImageElement(alt, src))
      .replace(listRegex, "<li>$1</li>")
      .split("\n")
      .map((line) => {
        if (line.startsWith("<li>")) {
          return `<ul>${line}</ul>`
        }
        return line
      })
      .join("\n")

    return { html: text, links }
  }

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

  function createImageElement(alt, src) {
    return `<img src="${src}" alt="${alt}" class="message-image" onclick="this.getRootNode().host.showImageModal('${src}', '${alt}')">`
  }

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

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

        /* Add these new styles for markdown elements */
        .message img.message-image {
          max-width: 100%;
          border-radius: 8px;
          cursor: pointer;
          transition: opacity 0.2s;
        }

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

        .message strong {
          font-weight: 600;
        }

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

        .message li {
          margin: 4px 0;
        }

        .link-card {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px;
          background: #f3f4f6;
          border-radius: 8px;
          margin: 8px 0;
          cursor: pointer;
          transition: background-color 0.2s;
        }

        .link-card:hover {
          background: #e5e7eb;
        }

        .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: #6b7280;
        }

        .sources-section {
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid #e5e7eb;
        }

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

        /* Dark mode additions */
        :host(.dark) .link-card {
          background: #374151;
        }

        :host(.dark) .link-card:hover {
          background: #4b5563;
        }

        :host(.dark) .link-card .link-domain {
          color: #9ca3af;
        }

        :host(.dark) .sources-section {
          border-color: #374151;
        }
      `}
  
  /* Markdown specific 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;
  }

  .message strong {
    font-weight: 600;
  }

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

  .message li {
    margin: 4px 0;
  }

  .link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #f3f4f6;
    border-radius: 8px;
    margin: 8px 0;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .link-card:hover {
    background: #e5e7eb;
  }

  .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: #6b7280;
  }

  .sources-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
  }

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

  /* Dark mode additions */
  :host(.dark) .link-card {
    background: #374151;
  }

  :host(.dark) .link-card:hover {
    background: #4b5563;
  }

  :host(.dark) .link-card .link-domain {
    color: #9ca3af;
  }

  :host(.dark) .sources-section {
    border-color: #374151;
  }
`
      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>
            <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)

      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"

      // Parse markdown and add content
      const { html, links } = 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) => createLinkCard(link.title, link.url)).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")
})()