Merge branch 'claude/zen-greider'

Spectual · Spectual · commit dcb6209b09b4 · 2026-03-27T20:03:13.000-07:00
diff --git a/backend/app.py b/backend/app.py
@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify
+from flask import Flask, request, jsonify, Response, stream_with_context
 from flask_cors import CORS
 from openai import OpenAI
 import os
@@ -243,6 +243,121 @@ def chat():
             'success': False
         }), 500
 
+@app.route('/api/chat/stream', methods=['POST'])
+def chat_stream():
+    """Streaming chat endpoint using SSE"""
+    try:
+        data = request.get_json()
+        message = data.get('message', '')
+
+        if not message:
+            return jsonify({'error': 'Message is required'}), 400
+
+        user_id = get_user_id()
+        log_message(user_id, message, is_user=True)
+
+        if not api_key:
+            return jsonify({'error': 'OpenAI API key not configured', 'success': False}), 500
+
+        if not rag_system:
+            return jsonify({'error': 'RAG system not initialized', 'success': False}), 500
+
+        personal_info = rag_system.get_personal_info()
+        profile_summary = rag_system.get_summary_document()
+
+        # Refine query (non-streaming step)
+        query_refiner_prompt = f"""
+You are a world-class AI research assistant. Your task is to refine a user's question into a highly effective search query for a vector database.
+The user is asking about a person named {personal_info['name']}.
+Here is a high-level summary of their profile:
+---
+{profile_summary}
+---
+Based on this summary and the user's original question, generate a concise and focused search query.
+Do not answer the user's question, only generate the search query.
+
+User's Original Question: "{message}"
+Refined Search Query:
+"""
+        try:
+            query_refiner_response = client.chat.completions.create(
+                model="gpt-4o-mini",
+                messages=[{"role": "system", "content": query_refiner_prompt}],
+                temperature=0,
+                max_tokens=100,
+            )
+            refined_query = query_refiner_response.choices[0].message.content.strip()
+        except Exception:
+            refined_query = message
+
+        try:
+            relevant_context = rag_system.search_relevant_context(refined_query, k=4)
+        except Exception:
+            relevant_context = "Unable to retrieve relevant information from the knowledge base."
+
+        final_answer_prompt = f"""You are a helpful and professional AI assistant representing {personal_info['name']}.
+Your goal is to provide a comprehensive and accurate answer based on the provided information.
+
+First, here is a high-level summary of {personal_info['name']}'s profile for your general understanding:
+<SUMMARY>
+{profile_summary}
+</SUMMARY>
+
+Now, here is the user's question and the specific, detailed information retrieved from the knowledge base to help you answer it:
+<USER_QUESTION>
+{message}
+</USER_QUESTION>
+
+<DETAILED_CONTEXT>
+{relevant_context}
+</DETAILED_CONTEXT>
+
+INSTRUCTIONS:
+- Synthesize the information from both the SUMMARY and the DETAILED_CONTEXT to formulate your final answer.
+- Answer the user's question directly and accurately based *only* on the information provided.
+- If the detailed context does not contain the answer, you can rely on the summary. If neither contains the answer, state that you don't have enough information.
+- Always respond in the same language as the user's question and respond as if you are {personal_info['name']}.
+"""
+
+        # Capture user_id in closure before streaming
+        captured_user_id = user_id
+        captured_message = message
+
+        def generate():
+            full_response = []
+            try:
+                stream = client.chat.completions.create(
+                    model="gpt-4o-mini",
+                    messages=[{"role": "system", "content": final_answer_prompt}],
+                    temperature=0.5,
+                    max_tokens=1000,
+                    stream=True,
+                )
+                for chunk in stream:
+                    content = chunk.choices[0].delta.content
+                    if content:
+                        full_response.append(content)
+                        yield f"data: {json.dumps({'content': content})}\n\n"
+
+                log_message(captured_user_id, captured_message, is_user=False, response="".join(full_response))
+                yield f"data: {json.dumps({'done': True})}\n\n"
+
+            except Exception as e:
+                yield f"data: {json.dumps({'error': str(e)})}\n\n"
+
+        return Response(
+            stream_with_context(generate()),
+            mimetype='text/event-stream',
+            headers={
+                'Cache-Control': 'no-cache',
+                'X-Accel-Buffering': 'no',
+            },
+        )
+
+    except Exception as e:
+        return jsonify({'error': str(e), 'success': False}), 500
+
+
 @app.route('/api/health', methods=['GET'])
 def health_check():
     """Health check endpoint"""
diff --git a/src/components/ChatSection.tsx b/src/components/ChatSection.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "react";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, Download } from "lucide-react";
 import MessageBubble from "./MessageBubble";
-import { sendMessage, checkHealth } from "@/utils/api";
+import { sendMessageStream, checkHealth } from "@/utils/api";
 import { toast } from "sonner";
 import type { Message } from "@/types/chat";
 
@@ -65,7 +65,7 @@ const ChatSection = () => {
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isServerOnline, setIsServerOnline] = useState(true);
-  const [typingMessageId, setTypingMessageId] = useState<string | null>(null);
+  const [streamingMessageId, setStreamingMessageId] = useState<string | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const isInitialLoad = useRef(true);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -107,14 +107,33 @@ const ChatSection = () => {
     return () => clearInterval(interval);
   }, []);
 
+  const handleExport = () => {
+    if (messages.length <= 1) {
+      toast.info("Nothing to export yet — start a conversation first!");
+      return;
+    }
+    const lines = messages.map((m) => {
+      const time = m.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+      return m.isUser
+        ? `**[${time}] You:** ${m.text}`
+        : `**[${time}] AI:** ${m.text}`;
+    });
+    const content = `# Chat Export\n\n_Exported on ${new Date().toLocaleString()}_\n\n---\n\n${lines.join("\n\n---\n\n")}`;
+    const blob = new Blob([content], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `chat-${new Date().toISOString().slice(0, 10)}.md`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
   const handleSendMessage = async (messageText: string) => {
     if (!messageText.trim()) return;
     if (!isServerOnline) {
       toast.error("AI server is currently offline. Please try again later.");
       return;
     }
-    // Finish any ongoing typewriter immediately
-    setTypingMessageId(null);
 
     historyRef.current = [messageText, ...historyRef.current];
     historyIndexRef.current = -1;
@@ -132,36 +151,55 @@ const ChatSection = () => {
     setIsLoading(true);
     requestAnimationFrame(scrollChatToBottom);
 
-    try {
-      const response = await sendMessage(messageText);
-      const aiId = crypto.randomUUID();
-      const aiMessage: Message = {
-        id: aiId,
-        text: response.success
-          ? response.response
-          : response.response || "Sorry, I'm having trouble connecting right now. Please try again later.",
-        isUser: false,
-        timestamp: new Date(),
-      };
-      if (!response.success) toast.error("Failed to get response. Please try again.");
-      setMessages((prev) => [...prev, aiMessage]);
-      setTypingMessageId(aiId);
-    } catch (error) {
-      console.error("Error getting AI response:", error);
-      toast.error("Failed to get response. Please try again later.");
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: crypto.randomUUID(),
-          text: "Sorry, I'm having trouble connecting right now. Please try again later.",
-          isUser: false,
-          timestamp: new Date(),
-        },
-      ]);
-    } finally {
-      setIsLoading(false);
-      inputRef.current?.focus();
-    }
+    const aiId = crypto.randomUUID();
+
+    await sendMessageStream(
+      messageText,
+      // onChunk: first chunk creates the message, subsequent ones append
+      (chunk) => {
+        setIsLoading(false);
+        setMessages((prev) => {
+          const existing = prev.find((m) => m.id === aiId);
+          if (existing) {
+            return prev.map((m) => (m.id === aiId ? { ...m, text: m.text + chunk } : m));
+          }
+          // First chunk — add message and mark it streaming
+          setStreamingMessageId(aiId);
+          requestAnimationFrame(scrollChatToBottom);
+          return [
+            ...prev,
+            { id: aiId, text: chunk, isUser: false, timestamp: new Date() },
+          ];
+        });
+      },
+      // onDone
+      () => {
+        setIsLoading(false);
+        setStreamingMessageId(null);
+        inputRef.current?.focus();
+      },
+      // onError
+      (error) => {
+        console.error("Stream error:", error);
+        setIsLoading(false);
+        setStreamingMessageId(null);
+        toast.error("Failed to get response. Please try again later.");
+        setMessages((prev) => {
+          const hasAiMessage = prev.some((m) => m.id === aiId);
+          if (hasAiMessage) return prev; // partial response already shown, keep it
+          return [
+            ...prev,
+            {
+              id: aiId,
+              text: "Sorry, I'm having trouble connecting right now. Please try again later.",
+              isUser: false,
+              timestamp: new Date(),
+            },
+          ];
+        });
+        inputRef.current?.focus();
+      }
+    );
   };
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
@@ -222,28 +260,52 @@ const ChatSection = () => {
                 {isServerOnline ? "online" : "offline"}
               </span>
             </span>
-            {/* Server status dot */}
-            <span
-              style={{
-                fontSize: "11px",
-                color: isServerOnline ? "var(--term-green)" : "var(--term-red)",
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-              }}
-            >
+            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              {/* Server status dot */}
               <span
                 style={{
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  backgroundColor: isServerOnline ? "var(--term-green)" : "var(--term-red)",
-                  display: "inline-block",
-                  animation: isServerOnline ? "neuralPulse 2s ease-in-out infinite" : "none",
+                  fontSize: "11px",
+                  color: isServerOnline ? "var(--term-green)" : "var(--term-red)",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
                 }}
-              />
-              {isServerOnline ? "server:online" : "server:offline"}
-            </span>
+              >
+                <span
+                  style={{
+                    width: "6px",
+                    height: "6px",
+                    borderRadius: "50%",
+                    backgroundColor: isServerOnline ? "var(--term-green)" : "var(--term-red)",
+                    display: "inline-block",
+                    animation: isServerOnline ? "neuralPulse 2s ease-in-out infinite" : "none",
+                  }}
+                />
+                {isServerOnline ? "server:online" : "server:offline"}
+              </span>
+              {/* Export button */}
+              <button
+                onClick={handleExport}
+                title="Export chat as Markdown"
+                style={{
+                  background: "transparent",
+                  border: "1px solid var(--term-border)",
+                  color: "var(--term-dim)",
+                  cursor: "pointer",
+                  padding: "2px 6px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "11px",
+                  fontFamily: "inherit",
+                  transition: "color 0.15s, border-color 0.15s",
+                }}
+                className="chat-quick-btn"
+              >
+                <Download size={11} />
+                export
+              </button>
+            </div>
           </div>
 
           {/* Header command */}
@@ -296,8 +358,7 @@ const ChatSection = () => {
               <div key={message.id} className="msg-slide-up">
                 <MessageBubble
                   message={message}
-                  isTyping={typingMessageId === message.id}
-                  onTypingComplete={() => setTypingMessageId(null)}
+                  isStreaming={streamingMessageId === message.id}
                 />
               </div>
             ))}
diff --git a/src/components/MessageBubble.tsx b/src/components/MessageBubble.tsx
@@ -6,6 +6,7 @@ import type { Message } from "@/types/chat";
 interface MessageBubbleProps {
   message: Message;
   isTyping?: boolean;
+  isStreaming?: boolean;
   onTypingComplete?: () => void;
 }
 
@@ -46,7 +47,7 @@ const markdownComponents = {
   ),
 };
 
-const MessageBubble = ({ message, isTyping = false, onTypingComplete }: MessageBubbleProps) => {
+const MessageBubble = ({ message, isTyping = false, isStreaming = false, onTypingComplete }: MessageBubbleProps) => {
   const time = message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   const onCompleteRef = useRef(onTypingComplete);
   onCompleteRef.current = onTypingComplete;
@@ -77,9 +78,10 @@ const MessageBubble = ({ message, isTyping = false, onTypingComplete }: MessageB
     );
   }
 
-  // Determine what text to render
-  const renderText = isTyping ? displayed : message.text;
-  const showCursor = isTyping && !done;
+  // Streaming: render message.text directly (chunks provide the animation)
+  // Typing: use typewriter effect on the full text
+  const renderText = isStreaming ? message.text : (isTyping ? displayed : message.text);
+  const showCursor = isStreaming || (isTyping && !done);
 
   return (
     <div ref={ref} style={{ marginBottom: "12px" }}>
diff --git a/src/utils/api.ts b/src/utils/api.ts
