bundle14.min.js

(() => {
  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,
          credentials: 'include'
        });

        if (!response.ok) {
          console.error('[ChatClient] Health check failed:', {
            status: response.status,
            statusText: response.statusText
          });
          throw new Error(`HTTP error! status: ${response.status}`);
        }

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

    getHeaders() {
      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
      // Add API key in both formats to ensure compatibility
      headers.append('x-api-key', this.apiKey);
      headers.append('api-key', this.apiKey);
      headers.append('Authorization', `Bearer ${this.apiKey}`);
      console.log('[ChatClient] Headers set:', headers);
      return headers;
    }

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

      try {
        console.log('[ChatClient] Making request to:', `${this.hostUrl}/api/v1/process/${this.flowId}`);
        const response = await fetch(`${this.hostUrl}/api/v1/process/${this.flowId}`, {
          method: 'POST',
          headers: headers,
          credentials: 'include',
          body: JSON.stringify({
            inputs: {
              question: message
            },
            conversation_id: null,
            history: []
          })
        });

        if (!response.ok) {
          console.error('[ChatClient] Request failed:', {
            status: response.status,
            statusText: response.statusText
          });
          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;
      }
    }
  }

  // Rest of the code remains unchanged...
  [Previous LangFlowChat class implementation]

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