bundle7.min.js

(()=>{
  class EventEmitter {
    constructor() {
      this.listeners = new Map();
    }
    
    on(event, callback) {
      if (!this.listeners.has(event)) {
        this.listeners.set(event, []);
      }
      this.listeners.get(event).push(callback);
    }
    
    emit(event, ...args) {
      if (this.listeners.has(event)) {
        this.listeners.get(event).forEach(callback => callback(...args));
      }
    }
  }

  class ChatClient extends EventEmitter {
    constructor(baseURL, apiKey) {
      super();
      this.baseURL = baseURL;
      this.apiKey = apiKey;
      this.status = 'DISCONNECTED';
    }

    async connect() {
      try {
        this.status = 'CONNECTING';
        this.emit('status', this.status);
        
        await this.testConnection();
        
        this.status = 'CONNECTED';
        this.emit('status', this.status);
      } catch (error) {
        console.error('Connection failed:', error);
        this.status = 'DISCONNECTED';
        this.emit('status', this.status);
      }
    }

    async testConnection() {
      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) {
      if (this.status !== 'CONNECTED') {
        throw new Error('Not connected');
      }

      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('apikey', this.apiKey);

      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();
      this.emit('message', data);
      return data;
    }
  }

  class ChatWidget {
    constructor(containerId, baseURL, apiKey) {
      this.containerId = containerId;
      this.client = new ChatClient(baseURL, apiKey);
      this.messages = [];
      this.initialize();
    }

    initialize() {
      // Create container if it doesn't exist
      this.container = document.getElementById(this.containerId);
      if (!this.container) {
        this.container = document.createElement('div');
        this.container.id = this.containerId;
        document.body.appendChild(this.container);
      }

      // Create chat UI
      this.createChatUI();

      // Set up event listeners
      this.client.on('message', (response) => {
        this.addMessage('assistant', response.choices[0].message.content);
      });

      this.client.on('status', (status) => {
        this.updateStatus(status);
      });

      // Connect to the server
      this.client.connect();
    }

    createChatUI() {
      this.container.innerHTML = `
        <div 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); 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;">
              <div id="${this.containerId}-status" style="width: 8px; height: 8px; border-radius: 50%; background: #ccc; margin-right: 10px;"></div>
              <span style="font-weight: bold;">Chat</span>
            </div>
            <button id="${this.containerId}-close" style="background: none; border: none; font-size: 18px; cursor: pointer;">×</button>
          </div>
          <div id="${this.containerId}-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 id="${this.containerId}-input" type="text" placeholder="Type your message..." 
                style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; outline: none;">
              <button id="${this.containerId}-send" 
                style="padding: 8px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Send
              </button>
            </div>
          </div>
        </div>
      `;

      // Add event listeners
      document.getElementById(`${this.containerId}-close`).onclick = () => this.close();
      document.getElementById(`${this.containerId}-send`).onclick = () => this.sendMessage();
      document.getElementById(`${this.containerId}-input`).onkeypress = (e) => {
        if (e.key === 'Enter') this.sendMessage();
      };
    }

    updateStatus(status) {
      const statusElement = document.getElementById(`${this.containerId}-status`);
      if (statusElement) {
        const colors = {
          CONNECTED: '#28a745',
          CONNECTING: '#ffc107',
          DISCONNECTED: '#dc3545'
        };
        statusElement.style.background = colors[status] || '#ccc';
      }
    }

    addMessage(role, content) {
      const messagesContainer = document.getElementById(`${this.containerId}-messages`);
      if (!messagesContainer) return;

      const messageElement = document.createElement('div');
      messageElement.style.marginBottom = '10px';
      messageElement.style.padding = '8px';
      messageElement.style.borderRadius = '4px';
      messageElement.style.maxWidth = '80%';
      messageElement.style.wordBreak = 'break-word';

      if (role === 'user') {
        messageElement.style.marginLeft = 'auto';
        messageElement.style.background = '#007bff';
        messageElement.style.color = 'white';
      } else {
        messageElement.style.marginRight = 'auto';
        messageElement.style.background = '#f1f1f1';
      }

      messageElement.textContent = content;
      messagesContainer.appendChild(messageElement);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    async sendMessage() {
      const input = document.getElementById(`${this.containerId}-input`);
      if (!input || !input.value.trim()) return;

      const message = input.value;
      input.value = '';

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

    close() {
      if (this.container) {
        this.container.remove();
      }
    }
  }

  window.ChatWidget = ChatWidget;
})();