example_frontend_usage.js

// Example: Using conversation history from a JavaScript frontend

class ChatClient {
  constructor(baseUrl = 'http://127.0.0.1:7860') {
    this.baseUrl = baseUrl;
    this.sessionId = null;
  }

  // Send a message and maintain conversation history
  async ask(query, metadata = {}) {
    const payload = {
      query: query,
      metadata: metadata
    };

    // Include session_id if we have one (for conversation continuity)
    if (this.sessionId) {
      payload.session_id = this.sessionId;
    }

    const response = await fetch(`${this.baseUrl}/ask`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });

    const data = await response.json();
    
    // Store session_id for future messages
    if (data.session_id) {
      this.sessionId = data.session_id;
    }

    return data;
  }

  // Stream a response with conversation history
  async askStream(query, metadata = {}, onChunk, onDone) {
    const payload = {
      query: query,
      metadata: metadata
    };

    if (this.sessionId) {
      payload.session_id = this.sessionId;
    }

    const response = await fetch(`${this.baseUrl}/ask_stream`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value);
      const lines = chunk.split('\n');

      for (const line of lines) {
        if (line.startsWith('event: session')) {
          const sessionLine = lines[lines.indexOf(line) + 1];
          if (sessionLine && sessionLine.startsWith('data: ')) {
            this.sessionId = sessionLine.substring(6).trim();
          }
        } else if (line.startsWith('data: ')) {
          const data = line.substring(6);
          if (data === '[DONE]') {
            if (onDone) onDone();
          } else if (onChunk) {
            onChunk(data);
          }
        }
      }
    }
  }

  // Code assistance with history
  async codeAssist(query, metadata = {}) {
    const payload = {
      query: query,
      metadata: metadata
    };

    if (this.sessionId) {
      payload.session_id = this.sessionId;
    }

    const response = await fetch(`${this.baseUrl}/code_assist`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });

    const data = await response.json();
    
    if (data.session_id) {
      this.sessionId = data.session_id;
    }

    return data;
  }

  // Get conversation history
  async getHistory() {
    if (!this.sessionId) {
      throw new Error('No active session');
    }

    const response = await fetch(`${this.baseUrl}/get_history`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ session_id: this.sessionId })
    });

    return await response.json();
  }

  // Clear current conversation
  async clearHistory() {
    if (!this.sessionId) return;

    const response = await fetch(`${this.baseUrl}/clear_history`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ session_id: this.sessionId })
    });

    this.sessionId = null;
    return await response.json();
  }

  // Start a new conversation
  newConversation() {
    this.sessionId = null;
  }
}

// Usage example:
async function example() {
  const chat = new ChatClient();

  // Turn 1: Start conversation
  console.log('User: Write a function to calculate factorial');
  const response1 = await chat.ask('Write a function to calculate factorial');
  console.log('AI:', response1.reply);
  console.log('Session ID:', chat.sessionId);

  // Turn 2: Follow-up (AI remembers the factorial function)
  console.log('\nUser: Can you optimize it using memoization?');
  const response2 = await chat.ask('Can you optimize it using memoization?');
  console.log('AI:', response2.reply);

  // Turn 3: Another follow-up
  console.log('\nUser: Add error handling for negative numbers');
  const response3 = await chat.ask('Add error handling for negative numbers');
  console.log('AI:', response3.reply);

  // View history
  const history = await chat.getHistory();
  console.log('\nConversation history:', history.message_count, 'messages');

  // Start new conversation
  chat.newConversation();
  console.log('\nStarting new conversation...');
  const response4 = await chat.ask('Hello! Can you help me with Python?');
  console.log('AI:', response4.reply);
  console.log('New Session ID:', chat.sessionId);
}

// Example with streaming:
async function streamExample() {
  const chat = new ChatClient();

  console.log('User: Explain async/await in JavaScript');
  
  let fullResponse = '';
  await chat.askStream(
    'Explain async/await in JavaScript',
    {},
    (chunk) => {
      // Parse chunk if it's JSON
      try {
        const parsed = JSON.parse(chunk);
        if (parsed.choices && parsed.choices[0].delta.content) {
          process.stdout.write(parsed.choices[0].delta.content);
          fullResponse += parsed.choices[0].delta.content;
        }
      } catch {
        // Raw text chunk
        process.stdout.write(chunk);
        fullResponse += chunk;
      }
    },
    () => {
      console.log('\n\nStreaming complete!');
      console.log('Session ID:', chat.sessionId);
    }
  );

  // Continue the conversation
  console.log('\nUser: Can you show me an example?');
  const response = await chat.ask('Can you show me an example?');
  console.log('AI:', response.reply);
}

// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
  module.exports = ChatClient;
}