bundle8.min.js

(() => {
  // Debug logging
  const debug = {
    log: function(...args) {
      console.log('[ChatWidget]', ...args);
    },
    error: function(...args) {
      console.error('[ChatWidget]', ...args);
    }
  };

  class ChatClient {
    constructor(baseURL, apiKey) {
      this.baseURL = baseURL;
      this.apiKey = apiKey;
      this.callbacks = {
        onMessage: null,
        onStatusChange: null
      };
      debug.log('ChatClient initialized with baseURL:', baseURL);
    }

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

    async connect() {
      debug.log('Attempting to connect...');
      try {
        const response = await this.testConnection();
        debug.log('Connection successful:', response);
        if (this.callbacks.onStatusChange) {
          this.callbacks.onStatusChange('CONNECTED');
        }
        return true;
      } catch (error) {
        debug.error('Connection failed:', error);
        if (this.callbacks.onStatusChange) {
          this.callbacks.onStatusChange('DISCONNECTED');
        }
        return false;
      }
    }

    async testConnection() {
      debug.log('Testing connection...');
      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('apikey', this.apiKey);

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

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

      return await response.json();
    }

    async sendMessage(message) {
      debug.log('Sending message:', message);
      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('apikey', this.apiKey);

      try {
        const response = await fetch(`${this.baseURL}/chat/completions`, {
          method: 'POST',
          headers: headers,
          body: JSON.stringify({
            messages: [{
              role: 'user',
              content: message
            }]
          })
        });

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

        const data = await response.json();
        debug.log('Received response:', data);
        
        if (this.callbacks.onMessage) {
          this.callbacks.onMessage(data);
        }
        
        return data;
      } catch (error) {
        debug.error('Error sending message:', error);
        throw error;
      }
    }
  }

  class ChatWidget {
    constructor(containerId, baseURL, apiKey) {
      debug.log('Initializing ChatWidget...');
      this.containerId = containerId;
      this.client = new ChatClient(baseURL, apiKey);
      this.messages = [];
      this.status = 'DISCONNECTED';
      
      // Set up client callbacks
      this.client.setCallbacks({
        onMessage: (response) => this.handleMessage(response),
        onStatusChange: (status) => this.handleStatusChange(status)
      });

      this.initialize();
    }

    initialize() {
      debug.log('Creating chat container...');
      // Create container if it doesn't exist
      this.container = document.getElementById(this.containerId);
      if (!this.container) {
        debug.log('Container not found, creating new one...');
        this.container = document.createElement('div');
        this.container.id = this.containerId;
        document.body.appendChild(this.container);
      }

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

    createChatUI() {
      debug.log('Creating chat UI...');
      const chatHtml = `
        <div class="chat-widget" style="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;">
          <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #eee;">
            <div style="display: flex; align-items: center; gap: 8px;">
              <div class="status-indicator" style="width: 8px; height: 8px; border-radius: 50%; background: #ccc;"></div>
              <span style="font-weight: bold;">Chat</span>
            </div>
            <button class="close-button" style="background: none; border: none; font-size: 18px; cursor: pointer; padding: 5px;">×</button>
          </div>
          <div class="messages" style="height: 300px; overflow-y: auto; padding: 15px;"></div>
          <div style="padding: 15px; border-top: 1px solid #eee;">
            <div style="display: flex; gap: 10px;">
              <input type="text" class="message-input" placeholder="Type your message..." 
                style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; outline: none;">
              <button class="send-button" 
                style="padding: 8px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Send
              </button>
            </div>
          </div>
        </div>
      `;

      this.container.innerHTML = chatHtml;
      this.setupEventListeners();
    }

    setupEventListeners() {
      debug.log('Setting up event listeners...');
      const widget = this.container.querySelector('.chat-widget');
      const input = widget.querySelector('.message-input');
      const sendButton = widget.querySelector('.send-button');
      const closeButton = widget.querySelector('.close-button');

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

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

    handleMessage(response) {
      debug.log('Handling message:', response);
      if (response.choices && response.choices[0]) {
        this.addMessage('assistant', response.choices[0].message.content);
      }
    }

    addMessage(role, content) {
      debug.log('Adding message:', { role, content });
      const messagesContainer = this.container.querySelector('.messages');
      const messageElement = document.createElement('div');
      
      messageElement.style.cssText = `
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 4px;
        max-width: 80%;
        word-break: break-word;
        ${role === 'user' 
          ? 'margin-left: auto; background: #007bff; color: white;' 
          : 'margin-right: auto; background: #f1f1f1;'}
      `;
      
      messageElement.textContent = content;
      messagesContainer.appendChild(messageElement);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    async sendMessage() {
      const input = this.container.querySelector('.message-input');
      const message = input.value.trim();
      
      if (!message) return;
      
      debug.log('Sending message:', message);
      input.value = '';
      
      this.addMessage('user', message);
      
      try {
        await this.client.sendMessage(message);
      } catch (error) {
        debug.error('Failed to send message:', error);
        this.addMessage('assistant', 'Sorry, there was an error sending your message.');
      }
    }

    close() {
      debug.log('Closing widget...');
      if (this.container) {
        this.container.remove();
      }
    }
  }

  // Make ChatWidget available globally
  window.ChatWidget = ChatWidget;
  debug.log('ChatWidget loaded and ready to use');
})();