bundle26.min.js

(() => {
  // Import marked at the top of the bundle
  const marked = require('marked');
  
  // Configure marked for security and features
  marked.setOptions({
    gfm: true, // GitHub Flavored Markdown
    breaks: true, // Convert \n to <br>
    sanitize: false, // We'll sanitize HTML ourselves
    silent: true // Don't throw errors on invalid markdown
  });

  // Simple HTML sanitizer
  function sanitizeHtml(html) {
    const div = document.createElement('div');
    div.textContent = html;
    return div.innerHTML;
  }

  // Replace the complex renderMarkdown function with this simple one
  function renderMarkdown(text) {
    // First sanitize the input
    const sanitized = sanitizeHtml(text);
    // Then parse markdown and return HTML
    return marked(sanitized);
  }

  class ChatClient {
    constructor(hostUrl, apiKey, flowId) {
      this.hostUrl = hostUrl;
      this.apiKey = apiKey;
      this.flowId = flowId;
      this.callbacks = {
        onMessage: null,
        onStatusChange: null
      };
      console.log('[ChatClient] Initialized with:', { hostUrl, flowId });
    }

    setCallbacks(callbacks) {
      this.callbacks = { ...this.callbacks, ...callbacks };
    }

    async connect() {
      console.log('[ChatClient] Connecting...');
      try {
        await this.testConnection();
        if (this.callbacks.onStatusChange) {
          this.callbacks.onStatusChange('CONNECTED');
        }
        return true;
      } catch (error) {
        console.error('[ChatClient] Connection failed:', error);
        if (this.callbacks.onStatusChange) {
          this.callbacks.onStatusChange('DISCONNECTED');
        }
        return false;
      }
    }

    async testConnection() {
      console.log('[ChatClient] Testing connection...');
      const headers = this.getHeaders();

      try {
        const response = await fetch(`${this.hostUrl}/health`, {
          method: 'GET',
          headers: headers
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        return await response.json();
      } catch (error) {
        console.error('[ChatClient] Health check error:', error);
        throw error;
      }
    }

    getHeaders() {
      return {
        'Content-Type': 'application/json',
        'x-api-key': this.apiKey
      };
    }

    async sendMessage(message) {
      console.log('[ChatClient] Sending message:', message);
      const headers = this.getHeaders();

      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) {
          const errorText = await response.text();
          console.error('[ChatClient] Error response:', errorText);
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log('[ChatClient] Received response:', data);

        if (this.callbacks.onMessage) {
          this.callbacks.onMessage(data);
        }

        return data;
      } catch (error) {
        console.error('[ChatClient] Error sending message:', error);
        throw error;
      }
    }
  }

  class LangFlowChat extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.isTyping = false;
    }

    connectedCallback() {
      console.log('[LangFlowChat] Connected to DOM');
      const hostUrl = this.getAttribute('host_url');
      const apiKey = this.getAttribute('api_key');
      const flowId = this.getAttribute('flow_id');
      const windowTitle = this.getAttribute('window_title') || 'Chat';

      this.client = new ChatClient(hostUrl, apiKey, flowId);
      this.messages = [];
      this.status = 'DISCONNECTED';

      this.client.setCallbacks({
        onMessage: (response) => this.handleMessage(response),
        onStatusChange: (status) => this.handleStatusChange(status)
      });

      this.createChatUI(windowTitle);
      this.client.connect();
    }

    createChatUI(windowTitle) {
      console.log('[LangFlowChat] Creating UI');
      const style = `
        .chat-widget {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 350px;
          background: white;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
          font-family: Arial, sans-serif;
          z-index: 1000;
        }
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          border-bottom: 1px solid #eee;
        }
        .status-container {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .status-indicator {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ccc;
        }
        .close-button {
          background: none;
          border: none;
          font-size: 18px;
          cursor: pointer;
          padding: 5px;
        }
        .messages {
          height: 300px;
          overflow-y: auto;
          padding: 15px;
        }
        .message-container {
          display: flex;
          gap: 12px;
          margin-bottom: 15px;
          align-items: flex-start;
        }
        .message {
          padding: 12px;
          border-radius: 12px;
          max-width: 80%;
          word-break: break-word;
          line-height: 1.4;
        }
        .message.user {
          margin-left: auto;
          background: #007bff;
          color: white;
          border-bottom-right-radius: 4px;
        }
        .message.assistant {
          margin-right: auto;
          background: #f1f1f1;
          color: #333;
          border-bottom-left-radius: 4px;
        }
        .message a.chat-link {
          color: inherit;
          text-decoration: underline;
          word-break: break-all;
        }
        .message img {
          max-width: 100%;
          border-radius: 4px;
          margin: 5px 0;
        }
        .message code {
          background: rgba(0,0,0,0.1);
          padding: 2px 4px;
          border-radius: 4px;
          font-family: monospace;
          font-size: 0.9em;
        }
        .message pre {
          background: rgba(0,0,0,0.05);
          padding: 10px;
          border-radius: 4px;
          overflow-x: auto;
        }
        .message pre code {
          background: none;
          padding: 0;
        }
        .avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: #eee;
          flex-shrink: 0;
          overflow: hidden;
        }
        .avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .typing-indicator {
          display: flex;
          gap: 4px;
          padding: 12px;
          background: #f1f1f1;
          border-radius: 12px;
          border-bottom-left-radius: 4px;
          margin-bottom: 15px;
          width: fit-content;
        }
        .typing-dot {
          width: 8px;
          height: 8px;
          background: #666;
          border-radius: 50%;
          opacity: 0.6;
          animation: typing 1.4s infinite;
        }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        @keyframes typing {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-4px); }
        }
        .input-container {
          padding: 15px;
          border-top: 1px solid #eee;
          display: flex;
          gap: 10px;
        }
        .message-input {
          flex: 1;
          padding: 8px 12px;
          border: 1px solid #ddd;
          border-radius: 20px;
          outline: none;
          font-size: 14px;
        }
        .message-input:focus {
          border-color: #007bff;
        }
        .send-button {
          padding: 8px 16px;
          background: #007bff;
          color: white;
          border: none;
          border-radius: 20px;
          cursor: pointer;
          font-size: 14px;
          transition: background-color 0.2s;
        }
        .send-button:hover {
          background: #0056b3;
        }
      `;

      const html = `
        <style>${style}</style>
        <div class="chat-widget">
          <div class="header">
            <div class="status-container">
              <div class="status-indicator"></div>
              <span class="title">${windowTitle}</span>
            </div>
            <button class="close-button">×</button>
          </div>
          <div class="messages"></div>
          <div class="input-container">
            <input type="text" class="message-input" placeholder="Type your message...">
            <button class="send-button">Send</button>
          </div>
        </div>
      `;

      this.shadowRoot.innerHTML = html;
      this.setupEventListeners();
    }

    setupEventListeners() {
      console.log('[LangFlowChat] Setting up event listeners');
      const input = this.shadowRoot.querySelector('.message-input');
      const sendButton = this.shadowRoot.querySelector('.send-button');
      const closeButton = this.shadowRoot.querySelector('.close-button');

      sendButton.addEventListener('click', () => this.sendMessage());
      closeButton.addEventListener('click', () => this.close());
      input.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          this.sendMessage();
        }
      });
    }

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

      const messagesContainer = this.shadowRoot.querySelector('.messages');
      const typingContainer = document.createElement('div');
      typingContainer.className = 'message-container typing-message';
      typingContainer.innerHTML = `
        <div class="avatar">
          <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/879-cQrx9a2kw2d0VO4ZsOtv1rMMJpo912.png" alt="Assistant Avatar">
        </div>
        <div class="typing-indicator">
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
        </div>
      `;

      messagesContainer.appendChild(typingContainer);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

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

      const typingMessage = this.shadowRoot.querySelector('.typing-message');
      if (typingMessage) {
        typingMessage.remove();
      }
    }

    handleStatusChange(status) {
      console.log('[LangFlowChat] Status changed:', status);
      this.status = status;
      const statusIndicator = this.shadowRoot.querySelector('.status-indicator');
      if (statusIndicator) {
        const colors = {
          CONNECTED: '#28a745',
          CONNECTING: '#ffc107',
          DISCONNECTED: '#dc3545'
        };
        statusIndicator.style.background = colors[status] || '#ccc';
      }
    }

    handleMessage(response) {
      console.log('[LangFlowChat] Handling message:', response);
      try {
        const messageText = response.outputs[0].outputs[0].results.message.text;
        if (messageText) {
          this.hideTypingIndicator();
          this.addMessage('assistant', messageText);
        } else {
          console.error('[LangFlowChat] Could not find message text in response');
          this.hideTypingIndicator();
          this.addMessage('assistant', 'Sorry, I could not process the response properly.');
        }
      } catch (error) {
        console.error('[LangFlowChat] Error parsing message:', error);
        this.hideTypingIndicator();
        this.addMessage('assistant', 'Sorry, I could not process the response properly.');
      }
    }

    addMessage(role, content) {
      console.log('[LangFlowChat] Adding message:', { role, content });
      const messagesContainer = this.shadowRoot.querySelector('.messages');
      const messageContainer = document.createElement('div');
      messageContainer.className = 'message-container';

      let html = '';

      if (role === 'assistant') {
        html += `
          <div class="avatar">
            <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/879-cQrx9a2kw2d0VO4ZsOtv1rMMJpo912.png" alt="Assistant Avatar">
          </div>
        `;
      }

      const messageElement = document.createElement('div');
      messageElement.className = `message ${role}`;
      messageElement.innerHTML = renderMarkdown(content);

      if (role === 'user') {
        messageContainer.appendChild(messageElement);
      } else {
        messageContainer.innerHTML = html;
        messageContainer.appendChild(messageElement);
      }

      messagesContainer.appendChild(messageContainer);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    async sendMessage() {
      const input = this.shadowRoot.querySelector('.message-input');
      const message = input.value.trim();

      if (!message) return;

      console.log('[LangFlowChat] Sending message:', message);
      input.value = '';

      this.addMessage('user', message);
      this.showTypingIndicator();

      try {
        await this.client.sendMessage(message);
      } catch (error) {
        console.error('[LangFlowChat] Failed to send message:', error);
        this.hideTypingIndicator();
        this.addMessage('assistant', 'Sorry, there was an error sending your message.');
      }
    }

    close() {
      console.log('[LangFlowChat] Closing widget');
      this.remove();
    }
  }

  customElements.define('langflow-chat', LangFlowChat);
  console.log('[Bundle] LangFlow Chat Widget loaded and registered');
})();