Frontend Integration

// React Chat Component
function ChatUI() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleSend = async () => {
    // Add user message
    setMessages(prev => [...prev, { role: 'user', content: input }]);

    // Stream response
    const response = await fetch('/api/query', {
      method: 'POST',
      body: JSON.stringify({ query: input }),
      headers: { 'Content-Type': 'application/json' }
    });

    const reader = response.body.getReader();
    let assistantMessage = '';

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      assistantMessage += new TextDecoder().decode(value);
      setMessages(prev => [
        ...prev.slice(0, -1),
        { role: 'assistant', content: assistantMessage }
      ]);
    }
  };

  return (
    <div className="chat">
      {messages.map((msg, i) => (
        <div key={i} className={msg.role}>
          {msg.content}
        </div>
      ))}
      <input onChange={e => setInput(e.target.value)} />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

// Server (Python)
@app.post("/api/query")
async def stream_query(query: str):
    async def generate():
        # Retrieve docs
        docs = await retrieve(query)

        # Stream LLM response
        async for chunk in llm.stream(query, docs):
            yield f"data: {json.dumps({'text': chunk})}\n\n"

    return StreamingResponse(generate(), media_type="text/event-stream")

// Client (JS)
const eventSource = new EventSource('/api/query?q=question');
eventSource.onmessage = (event) => {
  const { text } = JSON.parse(event.data);
  document.getElementById('response').textContent += text;
};

// Show retrieved sources
const response = {
  answer: "Self-employed people must file quarterly...",
  sources: [
    {
      title: "Tax Guide 2024",
      url: "https://...",
      excerpt: "Self-employed people must...",
      relevance: 0.95
    },
    {
      title: "IRS FAQ",
      url: "https://...",
      excerpt: "Estimated taxes are...",
      relevance: 0.82
    }
  ],
  confidence: 0.92
};

// UI
<div className="sources">
  <h3>Sources ({response.sources.length})</h3>
  {response.sources.map(src => (
    <a key={src.title} href={src.url}>
      {src.title}
      <span className="relevance">{Math.round(src.relevance * 100)}%</span>
    </a>
  ))}
  <span className="confidence">Answer confidence: {Math.round(response.confidence * 100)}%</span>
</div>

// Feedback buttons
<div className="feedback">
  <button onClick={() => submitFeedback('helpful')}>👍 Helpful</button>
  <button onClick={() => submitFeedback('not_helpful')}>👎 Not helpful</button>
  <textarea placeholder="Comments..." />
</div>

// Server logs feedback for improvement
async def submit_feedback(query_id, feedback, comments):
    db.insert({
        "query_id": query_id,
        "feedback": feedback,
        "comments": comments,
        "timestamp": time.time()
    })
    # Use feedback to retrain/improve RAG