Migrate chatbot to Socratic sentiment tutor with Gemini Live Voice Session capability

backend/benchmark_b.py

@@ -74,10 +74,10 @@ for idx, (cat, q) in enumerate(samples, 1):
             results.append({
                 "category": cat,
                 "query": q,
-                "latency_b": res_data["latency_b"],
-                "tokens_b": res_data["tokens_b"]
+                "latency_b": res_data["latency"],
+                "tokens_b": res_data["tokens"]
             })
-            print(f"    Done: B ({res_data['latency_b']}s, {res_data['tokens_b']}t)")
+            print(f"    Done: B ({res_data['latency']}s, {res_data['tokens']}t)")
             # Add a small delay between requests
             time.sleep(1.5)
     except Exception as e:

backend/main.py

@@ -1,25 +1,23 @@
-from fastapi import FastAPI, HTTPException
+from fastapi import FastAPI, HTTPException, WebSocket, WebSocketDisconnect
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 import time
 import os
-import threading
-import csv
 import re
+import asyncio
+import base64
 from datetime import datetime
-from typing import List, Optional, Dict, Any, TypedDict
-from pydantic import BaseModel, Field
+from typing import List, Optional, Any
+from pydantic import BaseModel
 from dotenv import load_dotenv
 
-# LangChain / LangGraph imports
+# LangChain / Google GenAI imports
 from langchain_google_genai import ChatGoogleGenerativeAI
 from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
-from langchain_core.prompts import ChatPromptTemplate
-from langgraph.graph import StateGraph, END
 
 load_dotenv()
 
-app = FastAPI(title="Educational Sentiment Chatbot API")
+app = FastAPI(title="Socratic Sentiment Chatbot API")
 
 # Enable CORS for frontend integration
 app.add_middleware(
@@ -30,88 +28,6 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# HuggingFace model state variables (DistilRoBERTa)
-classifier = None
-model_status = "loading"
-model_error = None
-
-# HuggingFace NER state variables
-ner_classifier = None
-ner_status = "loading"
-ner_error = None
-
-def load_distilroberta():
-    global classifier, model_status, model_error
-    try:
-        print("Loading j-hartmann/emotion-english-distilroberta-base model...")
-        # Import transformers inside the loader function to make startup instantaneous
-        from transformers import pipeline
-        classifier = pipeline(
-            "text-classification",
-            model="j-hartmann/emotion-english-distilroberta-base",
-            top_k=None
-        )
-        model_status = "ready"
-        print("DistilRoBERTa model loaded successfully!")
-    except Exception as e:
-        model_error = str(e)
-        model_status = "failed"
-        print(f"Error loading DistilRoBERTa model: {model_error}")
-
-def load_ner_model():
-    global ner_classifier, ner_status, ner_error
-    try:
-        print("Loading NER model (dslim/distilbert-NER)...")
-        from transformers import pipeline
-        ner_classifier = pipeline(
-            "ner",
-            model="dslim/distilbert-NER",
-            aggregation_strategy="simple"
-        )
-        ner_status = "ready"
-        print("NER model loaded successfully!")
-    except Exception as e:
-        ner_error = str(e)
-        ner_status = "failed"
-        print(f"Error loading NER model: {ner_error}")
-
-def scrub_pii(text: str) -> str:
-    if not text:
-        return text
-
-    # 1. Regex PII scrubbing
-    # Email addresses
-    text = re.sub(r'[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+', '[EMAIL]', text)
-    # Phone numbers (safe regex for standard forms like 555-555-5555, +1-555-555-5555, (555) 555-5555)
-    text = re.sub(r'\b(?:\+?\d{1,3}[-.\s]?)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}\b', '[PHONE]', text)
-    # IP Addresses
-    text = re.sub(r'\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b', '[IP_ADDRESS]', text)
-    # SSNs
-    text = re.sub(r'\b\d{3}-\d{2}-\d{4}\b', '[SSN]', text)
-
-    # 2. NER PII scrubbing (Person, Location, Organization)
-    global ner_classifier
-    if ner_classifier is not None:
-        try:
-            entities = ner_classifier(text)
-            # Sort from right to left (reverse index order) to avoid shift offset issues
-            entities = sorted(entities, key=lambda x: x["start"], reverse=True)
-            for ent in entities:
-                ent_type = ent["entity_group"]
-                if ent_type in ["PER", "LOC", "ORG"]:
-                    start = ent["start"]
-                    end = ent["end"]
-                    text = text[:start] + f"[{ent_type}]" + text[end:]
-        except Exception as e:
-            print(f"NER PII scrub error: {e}")
-
-    return text
-
-@app.on_event("startup")
-def startup_event():
-    threading.Thread(target=load_distilroberta, daemon=True).start()
-    threading.Thread(target=load_ner_model, daemon=True).start()
-
 # Pydantic Schemas
 class ChatMessage(BaseModel):
     role: str  # "user" or "assistant"
@@ -120,69 +36,15 @@ class ChatMessage(BaseModel):
 class ChatRequest(BaseModel):
     message: str
     gemini_api_key: Optional[str] = None
-    system_prompt: Optional[str] = None
-    history_a: Optional[List[ChatMessage]] = None
-    history_b: Optional[List[ChatMessage]] = None
-    history_c: Optional[List[ChatMessage]] = None
-    history_d: Optional[List[ChatMessage]] = None
-    selected_option: Optional[str] = "all"  # "all", "A", "B", "C", "D"
-
-class EmotionScore(BaseModel):
-    label: str
-    score: float
-
-class SentimentDetailsA(BaseModel):
-    detected_sentiment: str
-    explanation: str
-
-class SentimentDetailsB(BaseModel):
-    mapped_sentiment: str
-    raw_emotions: List[EmotionScore]
+    history: Optional[List[ChatMessage]] = None
 
 class ChatResponse(BaseModel):
-    sentiment_a: Optional[SentimentDetailsA] = None
-    response_a: Optional[str] = None
-    latency_a: Optional[float] = None
-    prompt_context_a: Optional[str] = None
-
-    sentiment_b: Optional[SentimentDetailsB] = None
-    response_b: Optional[str] = None
-    latency_b: Optional[float] = None
-    prompt_context_b: Optional[str] = None
-    
-    response_c: Optional[str] = None
-    latency_c: Optional[float] = None
-    prompt_context_c: Optional[str] = None
-
-    sentiment_d: Optional[SentimentDetailsB] = None
-    response_d: Optional[str] = None
-    latency_d: Optional[float] = None
-    prompt_context_d: Optional[str] = None
-
-    tokens_a: Optional[int] = None
-    tokens_b: Optional[int] = None
-    tokens_c: Optional[int] = None
-    tokens_d: Optional[int] = None
-
-# State definition for LangGraph
-class AgentState(TypedDict):
-    message: str
-    system_prompt: str
     sentiment: str
-    explanation: str
     response: str
-    input_tokens: int
-    output_tokens: int
-    history: List[ChatMessage]
-
-# Pydantic model for LangChain Structured Output
-class SentimentAnalysis(BaseModel):
-    detected_sentiment: str = Field(description="Must be strictly one of: 'confusion', 'frustration', 'boredom', 'confidence', 'sadness', or 'neutral'.")
-    explanation: str = Field(description="An extremely concise, single-sentence explanation of why this sentiment was chosen to minimize tokens.")
-
-class SentimentAndResponseB(BaseModel):
-    detected_sentiment: str = Field(description="Must be strictly one of: 'confusion', 'frustration', 'boredom', 'confidence', 'sadness', or 'neutral'.")
-    response: str = Field(description="Your Socratic tutor response. Adjust tone based on the detected sentiment. Keep it under 2 brief paragraphs.")
+    latency: float
+    prompt_context: str
+    tokens: int
+    cost: float
 
 # Token estimation helper (using standard ~4 characters per token multiplier for English)
 def estimate_tokens(text: str) -> int:
@@ -195,116 +57,7 @@ def calculate_cost(input_tokens: int, output_tokens: int) -> float:
     output_cost = (output_tokens / 1_000_000.0) * 0.30
     return input_cost + output_cost
 
-# Markdown Logging helper
-MD_FILE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "sentiment_log.md")
-MD_FILE_B = os.path.join(os.path.dirname(os.path.abspath(__file__)), "sentiment_log_b.md")
-
-def log_to_md(question, sentiment_a, sentiment_b, sentiment_d, latency_a, latency_b, latency_c, latency_d, cost_a, cost_b, cost_c, cost_d, tokens_in_a, tokens_out_a, tokens_in_b, tokens_out_b, tokens_in_c, tokens_out_c, tokens_in_d, tokens_out_d, answer_a, answer_b, answer_c, answer_d, selected_option="all"):
-    target_file = MD_FILE_B if selected_option == "b" else MD_FILE
-    file_exists = os.path.exists(target_file)
-    try:
-        with open(target_file, mode="a", encoding="utf-8") as f:
-            if not file_exists:
-                if selected_option == "b":
-                    f.write("# Sentiment Analysis Option B Log\n\n")
-                    f.write("This file tracks Option B (Gemini Single-Pass) user queries, detected sentiments, latencies, estimated costs, and responses.\n\n")
-                else:
-                    f.write("# Sentiment Analysis & Response Comparison Log\n\n")
-                    f.write("This file tracks and compares user queries, detected sentiments, latencies, estimated costs, and responses across all options.\n\n")
-            
-            timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-            
-            f.write(f"## [{timestamp}] Query: \"{question}\"\n\n")
-            if selected_option == "b":
-                total_tokens_b = tokens_in_b + tokens_out_b
-                f.write("<table>\n")
-                f.write("  <thead>\n")
-                f.write("    <tr>\n")
-                f.write("      <th align=\"left\">Metric</th>\n")
-                f.write("      <th align=\"left\">Option B (Gemini Single-Pass)</th>\n")
-                f.write("    </tr>\n")
-                f.write("  </thead>\n")
-                f.write("  <tbody>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Detected Sentiment</strong></td>\n")
-                f.write(f"      <td><code>{sentiment_b}</code></td>\n")
-                f.write("    </tr>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Latency</strong></td>\n")
-                f.write(f"      <td>{round(latency_b, 3)}s</td>\n")
-                f.write("    </tr>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Estimated Cost</strong></td>\n")
-                f.write(f"      <td><code>${cost_b:.7f}</code></td>\n")
-                f.write("    </tr>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Tokens Used</strong></td>\n")
-                f.write(f"      <td>{total_tokens_b} ({tokens_in_b} in / {tokens_out_b} out)</td>\n")
-                f.write("    </tr>\n")
-                f.write("  </tbody>\n")
-                f.write("</table>\n\n")
-                f.write("### Option B Response\n")
-                f.write(f"{answer_b}\n\n")
-                f.write("---\n\n")
-            else:
-                total_tokens_a = tokens_in_a + tokens_out_a
-                total_tokens_b = tokens_in_b + tokens_out_b
-                total_tokens_c = tokens_in_c + tokens_out_c
-                total_tokens_d = tokens_in_d + tokens_out_d
-                f.write("<table>\n")
-                f.write("  <thead>\n")
-                f.write("    <tr>\n")
-                f.write("      <th align=\"left\">Metric</th>\n")
-                f.write("      <th align=\"left\">Option A (Gemini 3.1 Flash Lite Double-Pass)</th>\n")
-                f.write("      <th align=\"left\">Option B (Gemini Single-Pass)</th>\n")
-                f.write("      <th align=\"left\">Option C (DistilRoBERTa Distribution + Gemini)</th>\n")
-                f.write("      <th align=\"left\">Option D (DistilRoBERTa Classifier + Gemini)</th>\n")
-                f.write("    </tr>\n")
-                f.write("  </thead>\n")
-                f.write("  <tbody>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Detected Sentiment</strong></td>\n")
-                f.write(f"      <td><code>{sentiment_a}</code></td>\n")
-                f.write(f"      <td><code>{sentiment_b}</code></td>\n")
-                f.write(f"      <td><code>Distribution Context</code></td>\n")
-                f.write(f"      <td><code>{sentiment_d}</code></td>\n")
-                f.write("    </tr>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Latency</strong></td>\n")
-                f.write(f"      <td>{round(latency_a, 3)}s</td>\n")
-                f.write(f"      <td>{round(latency_b, 3)}s</td>\n")
-                f.write(f"      <td>{round(latency_c, 3)}s</td>\n")
-                f.write(f"      <td>{round(latency_d, 3)}s</td>\n")
-                f.write("    </tr>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Estimated Cost</strong></td>\n")
-                f.write(f"      <td><code>${cost_a:.7f}</code></td>\n")
-                f.write(f"      <td><code>${cost_b:.7f}</code></td>\n")
-                f.write(f"      <td><code>${cost_c:.7f}</code></td>\n")
-                f.write(f"      <td><code>${cost_d:.7f}</code></td>\n")
-                f.write("    </tr>\n")
-                f.write("    <tr>\n")
-                f.write(f"      <td><strong>Tokens Used</strong></td>\n")
-                f.write(f"      <td>{total_tokens_a} ({tokens_in_a} in / {tokens_out_a} out)</td>\n")
-                f.write(f"      <td>{total_tokens_b} ({tokens_in_b} in / {tokens_out_b} out)</td>\n")
-                f.write(f"      <td>{total_tokens_c} ({tokens_in_c} in / {tokens_out_c} out)</td>\n")
-                f.write(f"      <td>{total_tokens_d} ({tokens_in_d} in / {tokens_out_d} out)</td>\n")
-                f.write("    </tr>\n")
-                f.write("  </tbody>\n")
-                f.write("</table>\n\n")
-                f.write("### Option A Response\n")
-                f.write(f"{answer_a}\n\n")
-                f.write("### Option B Response\n")
-                f.write(f"{answer_b}\n\n")
-                f.write("### Option C Response\n")
-                f.write(f"{answer_c}\n\n")
-                f.write("### Option D Response\n")
-                f.write(f"{answer_d}\n\n")
-                f.write("---\n\n")
-    except Exception as e:
-        print(f"Error writing to MD log: {e}")
-
-# Helper to extract text from LangChain message content (which may be a list of dicts for Gemini models)
+# Helper to extract text from LangChain message content
 def get_text_content(content: Any) -> str:
     if isinstance(content, str):
         return content
@@ -318,208 +71,111 @@ def get_text_content(content: Any) -> str:
         return "".join(text_parts)
     return str(content)
 
-# Emotion Mapping for DistilRoBERTa
-def map_distilroberta_emotions(raw_emotions: List[Any]) -> str:
-    emo_dict = {}
-    for item in raw_emotions:
-        if isinstance(item, dict):
-            label = item.get("label", "").lower()
-            score = float(item.get("score", 0.0))
-        else:
-            label = getattr(item, "label", "").lower()
-            score = float(getattr(item, "score", 0.0))
-        emo_dict[label] = score
-
-    # Define target sentiments based on combinations of raw emotions
-    # Confusion: high surprise and fear
-    confusion_score = emo_dict.get("surprise", 0.0) * 1.2 + emo_dict.get("fear", 0.0) * 0.8
-    
-    # Frustration: high anger and disgust
-    frustration_score = emo_dict.get("anger", 0.0) * 1.2 + emo_dict.get("disgust", 0.0) * 0.8
-    
-    # Boredom: high neutral, and if sadness is minor combined with high neutral
-    boredom_score = emo_dict.get("neutral", 0.0) * 1.3 + emo_dict.get("sadness", 0.0) * 0.2
-    
-    # Confidence: driven by joy
-    confidence_score = emo_dict.get("joy", 0.0) * 1.2
-    
-    # Sadness: driven by sadness
-    sadness_score = emo_dict.get("sadness", 0.0) * 1.2
+# Regex PII scrubbing helper
+def scrub_pii(text: str) -> str:
+    if not text:
+        return text
+    # Email addresses
+    text = re.sub(r'[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+', '[EMAIL]', text)
+    # Phone numbers
+    text = re.sub(r'\b(?:\+?\d{1,3}[-.\s]?)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}\b', '[PHONE]', text)
+    # IP Addresses
+    text = re.sub(r'\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b', '[IP_ADDRESS]', text)
+    # SSNs
+    text = re.sub(r'\b\d{3}-\d{2}-\d{4}\b', '[SSN]', text)
+    return text
 
-    scores = {
-        "confusion": confusion_score,
-        "frustration": frustration_score,
-        "boredom": boredom_score,
-        "confidence": confidence_score,
-        "sadness": sadness_score
-    }
-    
-    return max(scores, key=scores.get)
+# Markdown Logging helper
+MD_FILE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "sentiment_log.md")
 
-# LangGraph Flow A Executor
-def run_flow_a_langgraph(message: str, system_prompt: Optional[str], api_key: str, history: Optional[List[ChatMessage]] = None):
-    llm = ChatGoogleGenerativeAI(
-        model="gemini-3.1-flash-lite",
-        google_api_key=api_key,
-        temperature=0.0,
-        max_tokens=300
-    )
-    structured_llm = llm.with_structured_output(SentimentAnalysis)
-    
-    def detect_sentiment_node(state: AgentState) -> dict:
-        prompt = ChatPromptTemplate.from_messages([
-            ("system", "Analyze the user's educational query. Determine their emotional state. Classify it strictly as one of: 'confusion', 'frustration', 'boredom', 'confidence', 'sadness', or 'neutral'. Keep the explanation extremely short and concise (under 10 words)."),
-            ("human", "{message}")
-        ])
-        chain = prompt | structured_llm
-        res = chain.invoke({"message": state["message"]})
-        
-        # Estimate input & output tokens
-        # Estimate input & output tokens
-        input_prompt = f"Analyze the user's educational query. Determine their emotional state. Classify it strictly as one of: 'confusion', 'frustration', 'boredom', 'confidence', 'sadness', or 'neutral'. {state['message']}"
-        est_input = estimate_tokens(input_prompt)
-        est_output = 40  # Sentiment response is very short
-        
-        return {
-            "sentiment": res.detected_sentiment.lower(),
-            "explanation": res.explanation,
-            "input_tokens": est_input,
-            "output_tokens": est_output
-        }
-        
-    def generate_response_node(state: AgentState) -> dict:
-        custom_system = state.get("system_prompt") or (
-            "You are a concise, Socratic educational tutor. Your focus is strictly to teach. "
-            "NEVER give the user the direct answer or solution. Instead, guide them, nudge them, and ask leading questions to help them figure it out. "
-            "Adjust your behavior and tone based on the user's sentiment. Keep responses brief (max 5 sentences)."
-        )
-        
-        sentiment = state["sentiment"]
-        tone_instruction = (
-            "IMPORTANT: You are a Socratic tutor. NEVER directly state the answer, definition, or solution. "
-            "Instead, nudge the user and guide them to find the answer themselves through questions. "
-            "Be extremely concise and direct (strictly limit your response to max 5 sentences).\n"
-        )
-        if sentiment == "confusion":
-            tone_instruction += "The user is confused. Give them a stronger, clearer hint to guide them, and ask a direct question to help them take the next step towards the answer without telling it to them."
-        elif sentiment == "sadness":
-            tone_instruction += "The user is sad. Give them brief, warm, empathetic encouragement and practical tips to overcome it (like taking a micro-break or focusing on progress), and ask a gentle guiding question to continue."
-        elif sentiment == "frustration":
-            tone_instruction += "The user is frustrated. Empathetically acknowledge their frustration, give them a helpful hint or alternative perspective, and ask a guiding question to help them work through it."
-        elif sentiment == "boredom":
-            tone_instruction += "The user is bored. Suggest a completely different way to learn this concept (e.g., through a hands-on project, analogy, or challenge) to spark interest, and ask a guiding question to get them started."
-        elif sentiment == "confidence":
-            tone_instruction += "The user is confident. Celebrate their success briefly, and offer a quick challenge or question to test their understanding."
-        else:
-            tone_instruction += "Ask a guiding question to nudge them towards the answer."
+def log_to_md(question: str, sentiment: str, latency: float, cost: float, tokens_in: int, tokens_out: int, reply: str):
+    file_exists = os.path.exists(MD_FILE)
+    try:
+        with open(MD_FILE, mode="a", encoding="utf-8") as f:
+            if not file_exists:
+                f.write("# Socratic Chatbot Sentiment & Response Log\n\n")
+                f.write("This file tracks detected user sentiments, response latencies, costs, and Socratic replies.\n\n")
             
-        prompt_context = f"{tone_instruction}\n\nUser Query: {state['message']}"
-        
-        messages = [SystemMessage(content=custom_system)]
-        
-        # Prepend history if exists
-        if state.get("history"):
-            for msg in state["history"]:
-                if msg.role == "user":
-                    messages.append(HumanMessage(content=msg.content))
-                else:
-                    messages.append(AIMessage(content=msg.content))
-                    
-        messages.append(HumanMessage(content=prompt_context))
-        
-        res = llm.invoke(messages)
-        response_text = get_text_content(res.content)
-        
-        est_input = estimate_tokens(custom_system) + estimate_tokens(prompt_context)
-        est_output = estimate_tokens(response_text)
-        
-        return {
-            "response": response_text,
-            "input_tokens": state.get("input_tokens", 0) + est_input,
-            "output_tokens": state.get("output_tokens", 0) + est_output
-        }
-        
-    builder = StateGraph(AgentState)
-    builder.add_node("detect_sentiment", detect_sentiment_node)
-    builder.add_node("generate_response", generate_response_node)
-    builder.set_entry_point("detect_sentiment")
-    builder.add_edge("detect_sentiment", "generate_response")
-    builder.add_edge("generate_response", END)
-    
-    graph = builder.compile()
-    
-    initial_state = {
-        "message": message,
-        "system_prompt": system_prompt or "",
-        "sentiment": "",
-        "explanation": "",
-        "response": "",
-        "input_tokens": 0,
-        "output_tokens": 0,
-        "history": history or []
-    }
-    
-    return graph.invoke(initial_state)
+            timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+            f.write(f"## [{timestamp}] Query: \"{question}\"\n\n")
+            f.write("<table>\n")
+            f.write("  <thead>\n")
+            f.write("    <tr><th align=\"left\">Metric</th><th align=\"left\">Value</th></tr>\n")
+            f.write("  </thead>\n")
+            f.write("  <tbody>\n")
+            f.write(f"    <tr><td><strong>Detected Sentiment</strong></td><td><code>{sentiment}</code></td></tr>\n")
+            f.write(f"    <tr><td><strong>Latency</strong></td><td>{round(latency, 3)}s</td></tr>\n")
+            f.write(f"    <tr><td><strong>Estimated Cost</strong></td><td><code>${cost:.7f}</code></td></tr>\n")
+            f.write(f"    <tr><td><strong>Tokens</strong></td><td>{tokens_in + tokens_out} ({tokens_in} in / {tokens_out} out)</td></tr>\n")
+            f.write("  </tbody>\n")
+            f.write("</table>\n\n")
+            f.write(f"### Socratic Tutor Reply\n{reply}\n\n")
+            f.write("---\n\n")
+    except Exception as e:
+        print(f"Error writing to MD log: {e}")
 
 # Option B response helper doing both sentiment detection and response generation in one pass
-def run_flow_b(message: str, system_prompt: Optional[str], api_key: str, history: Optional[List[ChatMessage]] = None):
+def run_flow_b(message: str, api_key: str, history: Optional[List[ChatMessage]] = None):
     import json
-    from datetime import datetime
     
-    # OPTIMIZATION 1: Enforce structural JSON natively. Drops formatting fluff from prompt.
+    # Enforce structural JSON natively.
     llm = ChatGoogleGenerativeAI(
         model="gemini-3.1-flash-lite",
         google_api_key=api_key,
-        temperature=0.0,
+        temperature=0.4,
         max_tokens=350,
         generation_config={"response_mime_type": "application/json"}
     )
     
-    # Cleaned up core system prompt
-    custom_system = system_prompt or "Socratic tutor. Never give direct answers. Guide using leading questions."
+    custom_system = (
+        "Socratic tutor: guide with clear, substantial hints (no tiny nudges) to solve faster. "
+        "Confidence is not mastery—continue Socratic hints unless they are close. "
+        "Only when close to the solution, give the final answer & ask: 'Do you want to learn something else?'"
+    )
     
-    # OPTIMIZATION 2: Condensed to minimize prompt tokens while retaining response style constraints.
     tone_instruction = (
-        "JSON: {\"state\": \"confusion|frustration|boredom|confidence\", \"reply\": \"string\"}\n"
-        "Rules: Socratic reply (max 5 sentences, no direct solutions). Acknowledge sentiment (confusion/frustration/boredom/confidence) with natural, varied phrasing. NEVER repeat the same acknowledgment templates (e.g., 'I understand', 'It's normal', 'Understandable').\n"
-        "- confusion: Acknowledge confusion + hint + guiding question.\n"
-        "- frustration: Validate frustration + alternative view + guiding question.\n"
-        "- boredom: Acknowledge boredom + analogy/challenge + guiding question.\n"
-        "- confidence: Praise + challenge question."
+        "JSON format: {\"s\": \"confusion|frustration|confused_but_engaged|confused_and_frustrated|starting_to_get_bored|confident_and_engaged|neutral\", \"r\": \"string\"}\n"
+        "Rules:\n"
+        "- No robotic templates (e.g. 'I understand', 'it can be frustrating').\n"
+        "- NEVER use the phrase 'if you' anywhere in your response (e.g. do not say 'if you think', 'if you were', etc.). Instead, frame instructions or scenarios directly (e.g., say 'think about', 'imagine', 'when looking at', or 'sometimes').\n"
+        "- Only ask one question at a time to avoid overwhelming the user.\n"
+        "- Close to answer: give final answer directly, ask: 'Do you want to learn something else?'\n"
+        "- Not close (including confident_and_engaged): Socratic guidance (substantial hint + question).\n"
+        "Replies by state:\n"
+        "  * confusion: hint + question.\n"
+        "  * frustration: simplify step + question.\n"
+        "  * starting_to_get_bored: puzzle/analogy + question.\n"
+        "  * confident_and_engaged / neutral: guide with hint + question."
     )
     
-    messages = [SystemMessage(content=f"{custom_system}\n{tone_instruction}")]
+    messages = [SystemMessage(content=f"{custom_system}\n\n{tone_instruction}")]
     
+    # Minimize tokens: slice history to last 4 messages and truncate to 60 characters
     if history:
-        for msg in history:
+        compact_history = history[-4:]
+        for msg in compact_history:
+            content = msg.content
+            if len(content) > 60:
+                content = content[:60] + "..."
+            
             if msg.role == "user":
-                messages.append(HumanMessage(content=msg.content))
+                messages.append(HumanMessage(content=content))
             else:
-                messages.append(AIMessage(content=msg.content))
+                messages.append(AIMessage(content=content))
                 
     messages.append(HumanMessage(content=message))
     
     res = llm.invoke(messages)
     raw_response = get_text_content(res.content)
-    
-    # OPTIMIZATION 3: With response_mime_type active, markdown fences (```json) are bypassed entirely.
     cleaned_json = raw_response.strip()
     
     try:
         parsed = json.loads(cleaned_json)
-        state_val = parsed.get("state", "confusion")
-        reply_val = parsed.get("reply", "")
-        
-        supabase_payload = {
-            "state": state_val,
-            "reply": reply_val,
-            "query": message,
-            "timestamp": datetime.now().isoformat()
-        }
-        print(f"[Supabase Prototype] Directly writing payload to tracking table: {json.dumps(supabase_payload)}")
+        state_val = parsed.get("s", "neutral")
+        reply_val = parsed.get("r", "")
     except Exception as e:
         print(f"Failed to parse LLM JSON response: {e}. Raw response: {raw_response}")
-        state_val = "confusion"
+        state_val = "neutral"
         reply_val = "Let's take a look at this concept step by step. What do you think is the first part?"
         
     prompt_context = f"{custom_system}\n{tone_instruction}\nUser Query: {message}"
@@ -528,115 +184,11 @@ def run_flow_b(message: str, system_prompt: Optional[str], api_key: str, history
     
     return state_val, reply_val, prompt_context, est_in, est_out
 
-
-# Option C response helper using raw DistilRoBERTa emotion scores directly as LLM prompt context
-def run_flow_c(message: str, system_prompt: Optional[str], api_key: str, raw_emotions: List[EmotionScore], history: Optional[List[ChatMessage]] = None):
-    llm = ChatGoogleGenerativeAI(
-        model="gemini-3.1-flash-lite",
-        google_api_key=api_key,
-        temperature=0.0,
-        max_tokens=300
-    )
-    custom_system = system_prompt or (
-        "You are a concise, Socratic educational tutor. Your focus is strictly to teach. "
-        "NEVER give the user the direct answer or solution. Instead, guide them, nudge them, and ask leading questions to help them figure it out. "
-        "Adjust your behavior and tone based on the user's emotional state. Keep responses brief (max 5 sentences)."
-    )
-    
-    # Format raw emotions nicely for the model's context
-    emotion_context_str = ", ".join([f"{item.label}: {item.score:.3f}" for item in raw_emotions])
-    
-    tone_instruction = (
-        "IMPORTANT: Socratic tutor. NEVER state answer/definition/solution. Nudge/guide using questions. "
-        "Max 5 sentences.\n"
-        f"User emotions: {emotion_context_str}.\n"
-        "Synthesize: If confusion (surprise/fear), give a stronger hint. If frustration (anger/disgust), be empathetic. "
-        "If boredom (neutral), suggest alternative hands-on/analogy path. If sadness, offer quick warm tips. If confidence (joy), challenge them."
-    )
-    
-    prompt_context = f"{tone_instruction}\n\nUser Query: {message}"
-    
-    messages = [SystemMessage(content=custom_system)]
-    
-    # Prepend history if exists
-    if history:
-        for msg in history:
-            if msg.role == "user":
-                messages.append(HumanMessage(content=msg.content))
-            else:
-                messages.append(AIMessage(content=msg.content))
-                
-    messages.append(HumanMessage(content=prompt_context))
-    
-    res = llm.invoke(messages)
-    response_text = get_text_content(res.content)
-    
-    # Estimate tokens
-    est_input = estimate_tokens(custom_system) + estimate_tokens(prompt_context)
-    est_output = estimate_tokens(response_text)
-    
-    return response_text, prompt_context, est_input, est_output
-
-# Option D response helper using DistilRoBERTa mapped sentiment
-def run_flow_d(message: str, system_prompt: Optional[str], api_key: str, mapped_sentiment: str, history: Optional[List[ChatMessage]] = None):
-    llm = ChatGoogleGenerativeAI(
-        model="gemini-3.1-flash-lite",
-        google_api_key=api_key,
-        temperature=0.0,
-        max_tokens=300
-    )
-    custom_system = system_prompt or (
-        "You are a concise, Socratic educational tutor. Your focus is strictly to teach. "
-        "NEVER give the user the direct answer or solution. Instead, guide them, nudge them, and ask leading questions to help them figure it out. "
-        "Adjust your behavior and tone based on the user's sentiment. Keep responses brief (max 5 sentences)."
-    )
-    
-    tone_instruction = (
-        "IMPORTANT: You are a Socratic tutor. NEVER directly state the answer, definition, or solution. "
-        "Instead, nudge the user and guide them to find the answer themselves through questions. "
-        "Be extremely concise and direct (strictly limit your response to max 5 sentences).\n"
-    )
-    if mapped_sentiment == "confusion":
-        tone_instruction += "The user is confused. Give them a stronger, clearer hint to guide them, and ask a direct question to help them take the next step towards the answer without telling it to them."
-    elif mapped_sentiment == "sadness":
-        tone_instruction += "The user is sad. Give them brief, warm, empathetic encouragement and practical tips to overcome it (like taking a micro-break or focusing on progress), and ask a gentle guiding question to continue."
-    elif mapped_sentiment == "frustration":
-        tone_instruction += "The user is frustrated. Empathetically acknowledge their frustration, give them a helpful hint or alternative perspective, and ask a guiding question to help them work through it."
-    elif mapped_sentiment == "boredom":
-        tone_instruction += "The user is bored. Suggest a completely different way to learn this concept (e.g., through a hands-on project, analogy, or challenge) to spark interest, and ask a guiding question to get them started."
-    elif mapped_sentiment == "confidence":
-        tone_instruction += "The user is confident. Celebrate their success briefly, and offer a quick challenge or question to test their understanding."
-    else:
-        tone_instruction += "Ask a guiding question to nudge them towards the answer."
-        
-    prompt_context = f"{tone_instruction}\n\nUser Query: {message}"
-    
-    messages = [SystemMessage(content=custom_system)]
-    if history:
-        for msg in history:
-            if msg.role == "user":
-                messages.append(HumanMessage(content=msg.content))
-            else:
-                messages.append(AIMessage(content=msg.content))
-    messages.append(HumanMessage(content=prompt_context))
-    
-    res = llm.invoke(messages)
-    response_text = get_text_content(res.content)
-    
-    est_input = estimate_tokens(custom_system) + estimate_tokens(prompt_context)
-    est_output = estimate_tokens(response_text)
-    
-    return response_text, prompt_context, est_input, est_output
-
-
 # API Routes
 @app.get("/api/status")
 def get_status():
     return {
-        "roberta_status": model_status,
-        "roberta_error": model_error,
-        "ner_status": ner_status,
-        "ner_error": ner_error,
+        "status": "ready",
         "gemini_api_key_configured": bool(os.environ.get("GEMINI_API_KEY"))
     }
 
@@ -647,273 +199,149 @@ def chat_endpoint(request: ChatRequest):
     if not api_key:
         raise HTTPException(
             status_code=400,
-            detail="Gemini API Key is missing. Please provide it in the Settings panel."
+            detail="Gemini API Key is missing. Please provide it in the Settings panel or environment."
         )
     
-    # Scrub PII from user query
-    request.message = scrub_pii(request.message)
+    start_time = time.time()
     
-    # Initialize all option return variables
-    sentiment_details_a = None
-    response_a = None
-    latency_a = None
-    prompt_context_a = None
-    tokens_a = None
-
-    sentiment_details_b = None
-    response_b = None
-    latency_b = None
-    prompt_context_b = None
-    tokens_b = None
-
-    response_c = None
-    latency_c = None
-    prompt_context_c = None
-    tokens_c = None
-
-    sentiment_details_d = None
-    response_d = None
-    latency_d = None
-    prompt_context_d = None
-    tokens_d = None
-
-    # Track metrics for logging
-    detected_sentiment_a = "N/A"
-    mapped_sentiment_b = "N/A"
-    mapped_sentiment_d = "N/A"
-    cost_a = 0.0
-    cost_b = 0.0
-    cost_c = 0.0
-    cost_d = 0.0
-    est_in_b = 0
-    est_out_b = 0
-    est_in_c = 0
-    est_out_c = 0
-    est_in_d = 0
-    est_out_d = 0
-
-    selected = request.selected_option.lower() if request.selected_option else "all"
-    run_a = (selected == "all" or selected == "a")
-    run_b = (selected == "all" or selected == "b")
-    run_c = (selected == "all" or selected == "c")
-    run_d = (selected == "all" or selected == "d")
-
-    # ------------------
-    # FLOW A: LangGraph + LangChain Sentiment & Response
-    # ------------------
-    if run_a:
-        start_a = time.time()
-        try:
-            final_state_a = run_flow_a_langgraph(
-                message=request.message,
-                system_prompt=request.system_prompt,
-                api_key=api_key,
-                history=request.history_a
-            )
-            
-            detected_sentiment_a = final_state_a["sentiment"]
-            explanation_a = final_state_a["explanation"]
-            response_a = final_state_a["response"]
-            
-            prompt_context_a = f"Detected Sentiment (LangGraph): {detected_sentiment_a}\nExplanation: {explanation_a}"
-            tokens_a = final_state_a.get("input_tokens", 0) + final_state_a.get("output_tokens", 0)
-            cost_a = calculate_cost(final_state_a["input_tokens"], final_state_a["output_tokens"])
-            
-            sentiment_details_a = SentimentDetailsA(
-                detected_sentiment=detected_sentiment_a,
-                explanation=explanation_a
-            )
-        except Exception as e:
-            print(f"Error in Flow A (LangGraph): {e}")
-            detected_sentiment_a = "neutral"
-            explanation_a = f"Error: {str(e)}"
-            response_a = "An error occurred during Flow A generation."
-            prompt_context_a = "N/A"
-            cost_a = 0.0
-            sentiment_details_a = SentimentDetailsA(
-                detected_sentiment="neutral",
-                explanation=explanation_a
-            )
-        latency_a = time.time() - start_a
-
-    # ------------------
-    # FLOW B: Gemini Single-Pass (Sentiment & Response in one call)
-    # ------------------
-    if run_b:
-        start_b = time.time()
-        try:
-            mapped_sentiment_b, response_b, prompt_context_b, est_in_b, est_out_b = run_flow_b(
-                message=request.message,
-                system_prompt=request.system_prompt,
-                api_key=api_key,
-                history=request.history_b
-            )
-            cost_b = calculate_cost(est_in_b, est_out_b)
-            tokens_b = est_in_b + est_out_b
-            sentiment_details_b = SentimentDetailsB(
-                mapped_sentiment=mapped_sentiment_b,
-                raw_emotions=[]
-            )
-        except Exception as e:
-            print(f"Flow B single-pass error: {e}")
-            mapped_sentiment_b = "neutral"
-            response_b = "An error occurred during Flow B generation."
-            prompt_context_b = "N/A"
-            cost_b = 0.0
-            est_in_b = 0
-            est_out_b = 0
-            sentiment_details_b = SentimentDetailsB(
-                mapped_sentiment="neutral",
-                raw_emotions=[]
-            )
-        latency_b = time.time() - start_b
-
-    # ------------------
-    # FLOW C & D: DistilRoBERTa Classifier Setup
-    # ------------------
-    raw_emotions = []
-    classifier_ran = False
+    # Scrub PII
+    scrubbed_message = scrub_pii(request.message)
     
-    if run_c or run_d:
-        try:
-            if model_status == "loading":
-                raise HTTPException(
-                    status_code=503,
-                    detail="DistilRoBERTa model is still downloading/loading. Please wait a few seconds and try again."
-                )
-            elif model_status == "failed" or classifier is None:
-                raise HTTPException(
-                    status_code=500,
-                    detail=f"DistilRoBERTa model is unavailable. Load error: {model_error}"
-                )
-                
-            # Run local classifier once
-            classifier_results = classifier(request.message)[0]
-            raw_emotions = [
-                EmotionScore(label=item["label"], score=float(item["score"]))
-                for item in classifier_results
-            ]
-            mapped_sentiment_d = map_distilroberta_emotions(classifier_results)
-            classifier_ran = True
-        except HTTPException as he:
-            raise he
-        except Exception as e:
-            print(f"DistilRoBERTa classification error: {e}")
-
-    # ------------------
-    # FLOW C: Local DistilRoBERTa Raw Scores + Gemini Reply
-    # ------------------
-    if run_c:
-        start_c = time.time()
-        try:
-            if not classifier_ran:
-                raise Exception("Classifier did not run successfully.")
-            response_c, prompt_context_c, est_in_c, est_out_c = run_flow_c(
-                message=request.message,
-                system_prompt=request.system_prompt,
-                api_key=api_key,
-                raw_emotions=raw_emotions,
-                history=request.history_c
-            )
-            cost_c = calculate_cost(est_in_c, est_out_c)
-            tokens_c = est_in_c + est_out_c
-        except Exception as e:
-            print(f"Flow C error: {e}")
-            response_c = "An error occurred during Flow C generation."
-            prompt_context_c = "N/A"
-            cost_c = 0.0
-            est_in_c = 0
-            est_out_c = 0
-        latency_c = time.time() - start_c
-
-    # ------------------
-    # FLOW D: Local DistilRoBERTa Classifier + Gemini Reply (Old Option B)
-    # ------------------
-    if run_d:
-        start_d = time.time()
-        try:
-            if not classifier_ran:
-                raise Exception("Classifier did not run successfully.")
-            response_d, prompt_context_d, est_in_d, est_out_d = run_flow_d(
-                message=request.message,
-                system_prompt=request.system_prompt,
-                api_key=api_key,
-                mapped_sentiment=mapped_sentiment_d,
-                history=request.history_d
-            )
-            cost_d = calculate_cost(est_in_d, est_out_d)
-            tokens_d = est_in_d + est_out_d
-            sentiment_details_d = SentimentDetailsB(
-                mapped_sentiment=mapped_sentiment_d,
-                raw_emotions=raw_emotions
-            )
-        except Exception as e:
-            print(f"Flow D error: {e}")
-            response_d = "An error occurred during Flow D generation."
-            prompt_context_d = "N/A"
-            cost_d = 0.0
-            est_in_d = 0
-            est_out_d = 0
-            sentiment_details_d = SentimentDetailsB(
-                mapped_sentiment="neutral",
-                raw_emotions=[]
-            )
-        latency_d = time.time() - start_d
-
-    # Log to Markdown file asynchronously or directly (only log values if ran)
-    log_to_md(
-        question=request.message,
-        sentiment_a=detected_sentiment_a,
-        sentiment_b=mapped_sentiment_b,
-        sentiment_d=mapped_sentiment_d,
-        latency_a=latency_a or 0.0,
-        latency_b=latency_b or 0.0,
-        latency_c=latency_c or 0.0,
-        latency_d=latency_d or 0.0,
-        cost_a=cost_a,
-        cost_b=cost_b,
-        cost_c=cost_c,
-        cost_d=cost_d,
-        tokens_in_a=final_state_a.get("input_tokens", 0) if (run_a and "final_state_a" in locals()) else 0,
-        tokens_out_a=final_state_a.get("output_tokens", 0) if (run_a and "final_state_a" in locals()) else 0,
-        tokens_in_b=est_in_b,
-        tokens_out_b=est_out_b,
-        tokens_in_c=est_in_c,
-        tokens_out_c=est_out_c,
-        tokens_in_d=est_in_d,
-        tokens_out_d=est_out_d,
-        answer_a=response_a or "Skipped",
-        answer_b=response_b or "Skipped",
-        answer_c=response_c or "Skipped",
-        answer_d=response_d or "Skipped",
-        selected_option=selected
-    )
-
-    return ChatResponse(
-        sentiment_a=sentiment_details_a,
-        response_a=response_a,
-        latency_a=round(latency_a, 3) if latency_a is not None else None,
-        prompt_context_a=prompt_context_a,
-        
-        sentiment_b=sentiment_details_b,
-        response_b=response_b,
-        latency_b=round(latency_b, 3) if latency_b is not None else None,
-        prompt_context_b=prompt_context_b,
+    try:
+        sentiment, reply, prompt_context, est_in, est_out = run_flow_b(
+            message=scrubbed_message,
+            api_key=api_key,
+            history=request.history
+        )
+        latency = time.time() - start_time
+        cost = calculate_cost(est_in, est_out)
+        tokens = est_in + est_out
         
-        response_c=response_c,
-        latency_c=round(latency_c, 3) if latency_c is not None else None,
-        prompt_context_c=prompt_context_c,
+        # Log to Markdown
+        log_to_md(
+            question=request.message,
+            sentiment=sentiment,
+            latency=latency,
+            cost=cost,
+            tokens_in=est_in,
+            tokens_out=est_out,
+            reply=reply
+        )
         
-        sentiment_d=sentiment_details_d,
-        response_d=response_d,
-        latency_d=round(latency_d, 3) if latency_d is not None else None,
-        prompt_context_d=prompt_context_d,
+        return ChatResponse(
+            sentiment=sentiment,
+            response=reply,
+            latency=round(latency, 3),
+            prompt_context=prompt_context,
+            tokens=tokens,
+            cost=cost
+        )
+    except Exception as e:
+        print(f"Chat endpoint error: {e}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"An error occurred: {str(e)}"
+        )
+
+# WebSocket Endpoint for Socratic voice dialogue via Gemini Multimodal Live API
+@app.websocket("/api/live-ws")
+async def websocket_live_endpoint(websocket: WebSocket):
+    await websocket.accept()
+    
+    # Retrieve Gemini API Key from query params or environment
+    api_key = websocket.query_params.get("api_key") or os.environ.get("GEMINI_API_KEY")
+    if not api_key:
+        await websocket.close(code=4000, reason="GEMINI_API_KEY is missing.")
+        return
         
-        tokens_a=tokens_a,
-        tokens_b=tokens_b,
-        tokens_c=tokens_c,
-        tokens_d=tokens_d
+    try:
+        from google import genai
+        from google.genai import types
+    except ImportError:
+        await websocket.close(code=4001, reason="google-genai SDK not installed.")
+        return
+
+    client = genai.Client(api_key=api_key)
+    
+    # Configure Socratic Tutor instruction for Gemini Live API
+    config = types.LiveConnectConfig(
+        response_modalities=["AUDIO"], # Audio modality
+        system_instruction=types.Content(
+            parts=[types.Part.from_text(
+                text="Socratic tutor: guide with clear, substantial hints (no tiny nudges) to solve faster. "
+                     "Confidence is not mastery—continue Socratic hints unless they are close. "
+                     "Only when close to the solution, give the final answer & ask: 'Do you want to learn something else?' "
+                     "NEVER use the phrase 'if you' anywhere in your response (e.g. do not say 'if you think', 'if you were', etc.). Instead, frame instructions or scenarios directly (e.g., say 'think about', 'imagine', 'when looking at', or 'sometimes'). "
+                     "Only ask one question at a time to avoid overwhelming the user. "
+                     "Keep replies extremely concise (maximum 3 brief sentences) and conversational."
+            )]
+        )
     )
+    
+    try:
+        # Establish async WebSocket connection to Gemini Live using the Gemini 3.1 Flash Live model
+        async with client.aio.live.connect(model="gemini-3.1-flash-live-preview", config=config) as session:
+            
+            async def receive_from_client():
+                try:
+                    while True:
+                        # Receive JSON from browser client
+                        message = await websocket.receive_json()
+                        msg_type = message.get("type")
+                        
+                        if msg_type == "audio":
+                            # Decode base64 PCM audio chunk sent from frontend
+                            audio_bytes = base64.b64decode(message["data"])
+                            # Stream real-time audio (using 'audio' instead of deprecated 'media')
+                            await session.send_realtime_input(
+                                audio=types.Blob(data=audio_bytes, mime_type="audio/pcm;rate=16000")
+                            )
+                        elif msg_type == "text":
+                            # Send real-time text input
+                            await session.send_realtime_input(text=message["data"])
+                except WebSocketDisconnect:
+                    pass
+                except Exception as e:
+                    print(f"[WebSocket Proxy Client -> Gemini] Error: {e}")
+
+            async def send_to_client():
+                try:
+                    async for response in session.receive():
+                        server_content = response.server_content
+                        if server_content is not None:
+                            model_turn = server_content.model_turn
+                            if model_turn is not None:
+                                for part in model_turn.parts:
+                                    if part.inline_data is not None:
+                                        # Stream PCM audio output back to client as Base64
+                                        audio_b64 = base64.b64encode(part.inline_data.data).decode('utf-8')
+                                        await websocket.send_json({
+                                            "type": "audio",
+                                            "data": audio_b64
+                                        })
+                                    elif part.text is not None:
+                                        # Stream text transcription back to client
+                                        await websocket.send_json({
+                                            "type": "text",
+                                            "data": part.text
+                                        })
+                            
+                            # Handle turn completion (model finished speaking)
+                            if server_content.turn_complete:
+                                await websocket.send_json({"type": "turn_complete"})
+                except Exception as e:
+                    print(f"[WebSocket Proxy Gemini -> Client] Error: {e}")
+
+            # Run both tasks concurrently
+            await asyncio.gather(receive_from_client(), send_to_client())
+            
+    except Exception as e:
+        print(f"WebSocket Gemini Live connection failed: {e}")
+    finally:
+        try:
+            await websocket.close()
+        except Exception:
+            pass
 
 # Mount frontend static files in production if dist folder is built
 frontend_dist_path = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), "frontend", "dist")

frontend/src/App.css

@@ -345,7 +345,7 @@ body {
   border-radius: 16px;
   display: flex;
   flex-direction: column;
-  min-height: 500px;
+  min-height: auto;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   transition: var(--transition);
@@ -412,28 +412,34 @@ body {
   letter-spacing: 0.5px;
 }
 
-.sentiment-badge.happy {
-  background-color: var(--color-happy-bg);
-  border: 1px solid var(--color-happy);
-  color: var(--color-happy);
+.sentiment-badge.confused_but_engaged, .sentiment-badge.confusion {
+  background-color: rgba(245, 158, 11, 0.1);
+  border: 1px solid #f59e0b;
+  color: #f59e0b;
 }
 
-.sentiment-badge.sad {
-  background-color: var(--color-sad-bg);
-  border: 1px solid var(--color-sad);
-  color: var(--color-sad);
+.sentiment-badge.confused_and_frustrated, .sentiment-badge.frustration {
+  background-color: rgba(244, 63, 94, 0.1);
+  border: 1px solid #f43f5e;
+  color: #f43f5e;
 }
 
-.sentiment-badge.frustrated {
-  background-color: var(--color-frustrated-bg);
-  border: 1px solid var(--color-frustrated);
-  color: var(--color-frustrated);
+.sentiment-badge.starting_to_get_bored {
+  background-color: rgba(168, 85, 247, 0.1);
+  border: 1px solid #a855f7;
+  color: #a855f7;
+}
+
+.sentiment-badge.confident_and_engaged {
+  background-color: rgba(16, 185, 129, 0.1);
+  border: 1px solid #10b981;
+  color: #10b981;
 }
 
 .sentiment-badge.neutral {
-  background-color: var(--color-neutral-bg);
-  border: 1px solid var(--color-neutral);
-  color: var(--color-neutral);
+  background-color: rgba(156, 163, 175, 0.1);
+  border: 1px solid #9ca3af;
+  color: #9ca3af;
 }
 
 /* Chat Body Response */
@@ -678,3 +684,206 @@ body {
   line-height: 1.5;
   color: var(--text-muted);
 }
+
+/* Voice Session Modal */
+.voice-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(11, 12, 16, 0.85);
+  backdrop-filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+  animation: fadeIn 0.3s ease;
+}
+
+.voice-modal-content {
+  background: rgba(22, 24, 33, 0.95);
+  border: 1px solid rgba(168, 85, 247, 0.25);
+  box-shadow: 0 20px 80px rgba(168, 85, 247, 0.15);
+  border-radius: 24px;
+  width: 90%;
+  max-width: 460px;
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.voice-modal-close {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 50%;
+  transition: var(--transition);
+}
+
+.voice-modal-close:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+}
+
+.voice-modal-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.voice-modal-header h2 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--text-primary), var(--secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 0.3rem;
+}
+
+.voice-modal-header p {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.voice-visualizer-container {
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.voice-status-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.pulse-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  transition: var(--transition);
+}
+
+.pulse-circle.active {
+  background: linear-gradient(135deg, var(--color-happy), #34d399);
+  box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
+  animation: float 3s ease-in-out infinite;
+}
+
+.pulse-circle.speaking-pulse {
+  background: linear-gradient(135deg, var(--secondary), #a855f7);
+  box-shadow: 0 0 35px rgba(168, 85, 247, 0.5);
+}
+
+.pulse-ring {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 2px solid var(--color-happy);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.pulse-ring.speaking-ring {
+  border-color: var(--secondary);
+}
+
+.pulse-ring.ring-1 {
+  animation: ripple 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
+}
+
+.pulse-ring.ring-2 {
+  animation: ripple 2s cubic-bezier(0.1, 0.8, 0.3, 1) 0.6s infinite;
+}
+
+.voice-transcript-box {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 1rem 1.25rem;
+  width: 100%;
+  max-height: 100px;
+  overflow-y: auto;
+  margin-bottom: 2rem;
+  text-align: center;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.voice-transcript-box p {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  font-style: italic;
+  color: var(--text-primary);
+}
+
+.voice-modal-controls {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.voice-control-btn {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.8rem 1.8rem;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: var(--transition);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.voice-control-btn:hover {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.voice-control-btn.muted {
+  border-color: rgba(244, 63, 94, 0.3);
+  background: rgba(244, 63, 94, 0.08);
+  color: var(--color-frustrated);
+}
+
+.voice-control-btn.muted:hover {
+  background: rgba(244, 63, 94, 0.15);
+}
+
+@keyframes ripple {
+  0% { transform: scale(1); opacity: 0.8; }
+  100% { transform: scale(2.2); opacity: 0; }
+}
+
+@keyframes scaleUp {
+  from { transform: scale(0.9); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}

frontend/src/App.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Send, Settings as SettingsIcon, GraduationCap, AlertCircle, HelpCircle } from 'lucide-react';
+import { Send, Settings as SettingsIcon, GraduationCap, Mic } from 'lucide-react';
 import Settings from './components/Settings';
 import ChatWindow from './components/ChatWindow';
+import VoiceSessionModal from './components/VoiceSessionModal';
 import './App.css';
 
 const API_BASE = window.location.origin === 'http://localhost:5173' ? 'http://localhost:8000' : '';
@@ -61,21 +62,15 @@ const samples = {
 
 export default function App() {
   const [apiKey, setApiKeyState] = useState(() => localStorage.getItem('gemini_api_key') || '');
-  const [systemPrompt, setSystemPromptState] = useState(() => localStorage.getItem('system_prompt') || '');
   const [selectedSampleCategory, setSelectedSampleCategory] = useState('confusion');
   const [message, setMessage] = useState('');
-  const [result, setResult] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [historyA, setHistoryA] = useState([]);
-  const [historyB, setHistoryB] = useState([]);
-  const [historyC, setHistoryC] = useState([]);
-  const [historyD, setHistoryD] = useState([]);
-  const [selectedOption, setSelectedOption] = useState('all');
+  const [history, setHistory] = useState([]);
   const [showSettings, setShowSettings] = useState(false);
+  const [showVoiceModal, setShowVoiceModal] = useState(false);
   const [backendStatus, setBackendStatus] = useState({
-    roberta_status: 'loading',
-    roberta_error: null,
+    status: 'loading',
     gemini_api_key_configured: false
   });
 
@@ -84,10 +79,6 @@ export default function App() {
     localStorage.setItem('gemini_api_key', val);
   };
 
-  const setSystemPrompt = (val) => {
-    setSystemPromptState(val);
-    localStorage.setItem('system_prompt', val);
-  };
 
   const checkBackendStatus = async () => {
     try {
@@ -95,31 +86,21 @@ export default function App() {
       if (res.ok) {
         const data = await res.json();
         setBackendStatus(data);
-        return data.roberta_status;
+        return data.status;
       }
     } catch (err) {
       console.error("Failed to fetch backend status:", err);
       setBackendStatus({
-        roberta_status: 'failed',
-        roberta_error: 'Backend is offline or unreachable',
+        status: 'failed',
         gemini_api_key_configured: false
       });
     }
     return 'failed';
   };
 
-  // Poll status on startup if model is loading
+  // Poll status on startup
   useEffect(() => {
     checkBackendStatus();
-
-    const interval = setInterval(async () => {
-      const status = await checkBackendStatus();
-      if (status === 'ready' || status === 'failed') {
-        clearInterval(interval);
-      }
-    }, 4000);
-
-    return () => clearInterval(interval);
   }, []);
 
   const handleSubmit = async (e, followUpText = null) => {
@@ -131,48 +112,31 @@ export default function App() {
     setLoading(true);
     setError(null);
 
-    // Reset histories and results on a brand new query
-    let currentHistoryA = historyA;
-    let currentHistoryB = historyB;
-    let currentHistoryC = historyC;
-    let currentHistoryD = historyD;
-
+    // If starting a brand new topic (not a follow-up), clear history
+    let currentHistory = history;
     if (followUpText === null) {
-      setResult(null);
-      currentHistoryA = [];
-      currentHistoryB = [];
-      currentHistoryC = [];
-      currentHistoryD = [];
-      setHistoryA([]);
-      setHistoryB([]);
-      setHistoryC([]);
-      setHistoryD([]);
+      currentHistory = [];
+      setHistory([]);
     }
 
-    // Prepend user message locally to create optimistic user bubble
-    const nextHistoryA = [...currentHistoryA, { role: 'user', content: activeMessage }];
-    const nextHistoryB = [...currentHistoryB, { role: 'user', content: activeMessage }];
-    const nextHistoryC = [...currentHistoryC, { role: 'user', content: activeMessage }];
-    const nextHistoryD = [...currentHistoryD, { role: 'user', content: activeMessage }];
-
-    setHistoryA(nextHistoryA);
-    setHistoryB(nextHistoryB);
-    setHistoryC(nextHistoryC);
-    setHistoryD(nextHistoryD);
+    // Append optimistic user bubble
+    const nextHistory = [...currentHistory, { role: 'user', content: activeMessage }];
+    setHistory(nextHistory);
 
     try {
+      // Minimize context token usage: send only role and content to the API
+      const optimizedHistoryPayload = currentHistory.map(msg => ({
+        role: msg.role,
+        content: msg.content
+      }));
+
       const res = await fetch(`${API_BASE}/api/chat`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           message: activeMessage,
           gemini_api_key: apiKey || null,
-          system_prompt: systemPrompt || null,
-          history_a: currentHistoryA,
-          history_b: currentHistoryB,
-          history_c: currentHistoryC,
-          history_d: currentHistoryD,
-          selected_option: selectedOption
+          history: optimizedHistoryPayload
         })
       });
 
@@ -182,13 +146,20 @@ export default function App() {
       }
 
       const data = await res.json();
-      setResult(data);
 
-      // Append backend assistant responses to respective histories
-      setHistoryA([...nextHistoryA, { role: 'assistant', content: data.response_a }]);
-      setHistoryB([...nextHistoryB, { role: 'assistant', content: data.response_b }]);
-      setHistoryC([...nextHistoryC, { role: 'assistant', content: data.response_c }]);
-      setHistoryD([...nextHistoryD, { role: 'assistant', content: data.response_d }]);
+      // Append assistant bubble along with sentiment analysis details & metrics
+      setHistory([
+        ...nextHistory, 
+        { 
+          role: 'assistant', 
+          content: data.response,
+          sentiment: data.sentiment,
+          latency: data.latency,
+          tokens: data.tokens,
+          cost: data.cost,
+          prompt_context: data.prompt_context
+        }
+      ]);
 
       if (followUpText === null) {
         setMessage('');
@@ -205,7 +176,10 @@ export default function App() {
     setMessage(promptText);
   };
 
-  const isRobertaReady = backendStatus.roberta_status === 'ready';
+  const clearChat = () => {
+    setHistory([]);
+    setError(null);
+  };
 
   return (
     <div className="app-container">
@@ -214,25 +188,24 @@ export default function App() {
         <div className="header-title-section">
           <h1 style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
             <GraduationCap size={36} color="var(--primary)" />
-            Sentiment Detection
+            Socratic Sentiment Tutor
           </h1>
-          <p>Sentiment Analysis Comparison (Gemini vs. DistilRoBERTa)</p>
+          <p>Context-aware sentiment detection & guidance chatbot (Option B)</p>
         </div>
 
         <div className="header-status">
-          <div className="status-badge" style={{ padding: '0.4rem 0.8rem' }}>
-            <span className={`status-dot ${isRobertaReady ? 'ready' : 'loading'}`}></span>
-            <span style={{ fontSize: '0.85rem' }}>
-              DistilRoBERTa: {isRobertaReady ? 'Loaded' : 'Initializing...'}
-            </span>
-          </div>
+          {history.length > 0 && (
+            <button className="settings-toggle-btn" onClick={clearChat} style={{ border: '1px solid rgba(244, 63, 94, 0.2)', color: 'var(--color-frustrated)' }}>
+              Clear Conversation
+            </button>
+          )}
 
           <button 
             className="settings-toggle-btn"
             onClick={() => setShowSettings(!showSettings)}
           >
             <SettingsIcon size={18} />
-            Config Settings
+            Configure Tutor
           </button>
         </div>
       </header>
@@ -242,50 +215,15 @@ export default function App() {
         <Settings 
           apiKey={apiKey}
           setApiKey={setApiKey}
-          systemPrompt={systemPrompt}
-          setSystemPrompt={setSystemPrompt}
           backendStatus={backendStatus}
           checkBackendStatus={checkBackendStatus}
         />
       )}
 
       {/* Main Grid */}
-      <main className="main-grid">
+      <main className="main-grid" style={{ gridTemplateColumns: '1fr' }}>
         {/* Chat input box */}
         <section className="query-card">
-          {/* Pipeline Selector */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '0.8rem' }}>
-            <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', fontWeight: 600, textTransform: 'uppercase' }}>Active Pipeline:</span>
-            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
-              {[
-                { id: 'all', label: 'All (Compare)' },
-                { id: 'A', label: 'Option A (LangGraph 2-Pass)' },
-                { id: 'B', label: 'Option B (Gemini Single-Pass)' },
-                { id: 'C', label: 'Option C (DistilRoBERTa Dist.)' },
-                { id: 'D', label: 'Option D (DistilRoBERTa Class.)' }
-              ].map((opt) => (
-                <button
-                  key={opt.id}
-                  type="button"
-                  onClick={() => setSelectedOption(opt.id)}
-                  style={{
-                    background: selectedOption === opt.id ? 'var(--primary)' : 'rgba(255,255,255,0.03)',
-                    border: '1px solid ' + (selectedOption === opt.id ? 'var(--primary)' : 'var(--border-color)'),
-                    color: selectedOption === opt.id ? '#fff' : 'var(--text-secondary)',
-                    padding: '0.4rem 0.8rem',
-                    borderRadius: '8px',
-                    fontSize: '0.85rem',
-                    fontWeight: 600,
-                    cursor: 'pointer',
-                    transition: 'var(--transition)'
-                  }}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
           <form onSubmit={handleSubmit} className="query-input-wrapper">
             <textarea
               value={message}
@@ -299,20 +237,35 @@ export default function App() {
                 }
               }}
             />
-            <button 
-              type="submit" 
-              className="send-button"
-              disabled={loading || !message.trim()}
-            >
-              <Send size={18} />
-              Analyze & Chat
-            </button>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <button 
+                type="submit" 
+                className="send-button"
+                disabled={loading || !message.trim()}
+              >
+                <Send size={18} />
+                Start Conversation
+              </button>
+              <button 
+                type="button" 
+                className="send-button voice-btn"
+                onClick={() => setShowVoiceModal(true)}
+                title="Start voice session"
+                style={{
+                  background: 'linear-gradient(135deg, var(--secondary), #7c3aed)',
+                  padding: '0.6rem 1.1rem'
+                }}
+              >
+                <Mic size={18} />
+                Voice Session
+              </button>
+            </div>
           </form>
 
           {/* Quick prompts */}
           <div className="quick-prompts-section" style={{ display: 'flex', flexDirection: 'column', gap: '0.8rem', marginTop: '0.5rem' }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem', flexWrap: 'wrap', borderBottom: '1px solid var(--border-color)', paddingBottom: '0.6rem' }}>
-              <span className="quick-prompt-label" style={{ marginRight: 'auto' }}>8th Grade Sample Prompts:</span>
+              <span className="quick-prompt-label" style={{ marginRight: 'auto' }}>Sample Initial Inquiries:</span>
               <div style={{ display: 'flex', gap: '0.4rem' }}>
                 {Object.keys(samples).map((cat) => (
                   <button
@@ -353,21 +306,23 @@ export default function App() {
           </div>
         </section>
 
-        {/* Comparison Chat Output */}
-        <section>
+        {/* Conversation Chat Output */}
+        <section style={{ width: '100%' }}>
           <ChatWindow 
-            result={result}
+            history={history}
             loading={loading}
             error={error}
-            historyA={historyA}
-            historyB={historyB}
-            historyC={historyC}
-            historyD={historyD}
-            selectedOption={selectedOption}
             onSubmitFollowUp={(text) => handleSubmit(null, text)}
           />
         </section>
       </main>
+
+      {/* Voice Session Overlay Modal */}
+      <VoiceSessionModal 
+        isOpen={showVoiceModal}
+        onClose={() => setShowVoiceModal(false)}
+        apiKey={apiKey}
+      />
     </div>
   );
 }

frontend/src/components/ChatWindow.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Sparkles, Cpu, Clock, Terminal, ChevronDown, ChevronUp, AlertCircle, Brain } from 'lucide-react';
-import EmotionChart from './EmotionChart';
+import { Sparkles, Clock, Terminal, ChevronDown, ChevronUp, AlertCircle, Brain, Cpu } from 'lucide-react';
 
 // Render LaTeX and text mixed together
 function RenderLatex({ text }) {
@@ -32,7 +31,6 @@ function RenderLatex({ text }) {
             {inlineParts.map((ip, ipIdx) => {
               if (ip.startsWith('$') && ip.endsWith('$')) {
                 const formula = ip.slice(1, -1);
-                // Make sure it's not a lonely single dollar sign or empty
                 if (formula.trim()) {
                   try {
                     if (window.katex) {
@@ -46,7 +44,6 @@ function RenderLatex({ text }) {
                 return <span key={ipIdx}>{ip}</span>;
               }
               
-              // Non-math text, run standard inline formatting
               return <span key={ipIdx} dangerouslySetInnerHTML={{ __html: formatInline(ip) }} />;
             })}
           </React.Fragment>
@@ -56,53 +53,17 @@ function RenderLatex({ text }) {
   );
 }
 
-// Renders the scrollable thread of chat bubbles for a column
-function ChatThread({ history, title }) {
-  const assistantMessages = history.filter(msg => msg.role === 'assistant');
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.8rem', flex: 1, overflowY: 'auto', maxHeight: '420px', paddingRight: '0.25rem' }}>
-      {assistantMessages.map((msg, idx) => (
-        <div
-          key={idx}
-          style={{
-            alignSelf: 'flex-start',
-            background: 'rgba(255, 255, 255, 0.02)',
-            border: '1px solid var(--border-color)',
-            borderRadius: '12px',
-            padding: '0.75rem 1rem',
-            maxWidth: '100%',
-          }}
-        >
-          <span style={{
-            fontSize: '0.7rem',
-            fontWeight: 700,
-            textTransform: 'uppercase',
-            color: 'var(--text-secondary)',
-            display: 'block',
-            marginBottom: '0.3rem'
-          }}>
-            {title}
-          </span>
-          <SafeMarkdown content={msg.content} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 // A simple local Markdown parser that converts basic markdown elements to safe HTML
 function SafeMarkdown({ content }) {
   if (!content) return null;
 
-  // Split by code blocks first
   const parts = content.split(/(```[\s\S]*?```)/g);
 
   return (
     <div className="chat-response-content">
       {parts.map((part, index) => {
         if (part.startsWith('```') && part.endsWith('```')) {
-          // It's a code block
-          const code = part.slice(3, -3).replace(/^\w+\n/, ''); // remove language identifier if present
+          const code = part.slice(3, -3).replace(/^\w+\n/, ''); 
           return (
             <pre key={index}>
               <code>{code}</code>
@@ -110,7 +71,6 @@ function SafeMarkdown({ content }) {
           );
         }
 
-        // It's normal text, format paragraph breaks, bold, inline code, and lists
         const formatted = part
           .split('\n\n')
           .map((para, paraIdx) => {
@@ -122,7 +82,6 @@ function SafeMarkdown({ content }) {
               return (
                 <ul key={paraIdx} style={{ marginBottom: '1rem', paddingLeft: '1.5rem' }}>
                   {items.map((item, itemIdx) => {
-                    // strip initial bullet from first item if split didn't catch it
                     let cleanItem = item;
                     if (itemIdx === 0) {
                       cleanItem = item.replace(/^\s*[-*]\s+/, '');
@@ -138,7 +97,6 @@ function SafeMarkdown({ content }) {
               );
             }
 
-            // Normal paragraph
             return (
               <p key={paraIdx}>
                 <RenderLatex text={para} />
@@ -155,137 +113,49 @@ function SafeMarkdown({ content }) {
 // Format bold (**), italics (*), and inline code (`)
 function formatInline(text) {
   return text
-    // Bold
     .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    // Italics
     .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-    // Inline code
     .replace(/`([^`]+)`/g, '<code>$1</code>')
-    // Replace newlines within a paragraph with breaks
     .replace(/\n/g, '<br />');
 }
 
 export default function ChatWindow({ 
-  result, 
+  history = [], 
   loading, 
   error,
-  historyA = [],
-  historyB = [],
-  historyC = [],
-  historyD = [],
-  selectedOption = 'all',
   onSubmitFollowUp
 }) {
-  const [showPromptA, setShowPromptA] = useState(false);
-  const [showPromptB, setShowPromptB] = useState(false);
-  const [showPromptC, setShowPromptC] = useState(false);
-  const [showPromptD, setShowPromptD] = useState(false);
-  const [showDistC, setShowDistC] = useState(false);
-  const [showDistD, setShowDistD] = useState(false);
+  const [openInspectors, setOpenInspectors] = useState({});
 
-  // Render loading skeleton
-  if (loading) {
-    const showA = selectedOption === 'all' || selectedOption === 'A';
-    const showB = selectedOption === 'all' || selectedOption === 'B';
-    const showC = selectedOption === 'all' || selectedOption === 'C';
-    const showD = selectedOption === 'all' || selectedOption === 'D';
+  const toggleInspector = (idx) => {
+    setOpenInspectors(prev => ({
+      ...prev,
+      [idx]: !prev[idx]
+    }));
+  };
 
+  // Render loading skeleton
+  if (loading && history.length === 0) {
     return (
-      <div 
-        className="comparison-grid"
-        style={{
-          gridTemplateColumns: selectedOption !== 'all' ? '1fr' : undefined,
-          maxWidth: selectedOption !== 'all' ? '700px' : undefined,
-          margin: selectedOption !== 'all' ? '0 auto' : undefined
-        }}
-      >
-        {/* Skeleton Column A */}
-        {showA && (
-          <div className="column-card">
-            <div className="column-header">
-              <div className="column-title-wrapper">
-                <h2><Sparkles size={18} color="var(--primary)" /> Output A</h2>
-                <p>Analyzing Sentiment...</p>
-              </div>
-              <div className="latency-badge">--s</div>
-            </div>
-            <div className="column-body">
-              <div className="skeleton-box" />
-              <div className="skeleton-wrapper">
-                <div className="skeleton-line long" />
-                <div className="skeleton-line medium" />
-                <div className="skeleton-line long" />
-                <div className="skeleton-line short" />
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Skeleton Column B */}
-        {showB && (
-          <div className="column-card">
-            <div className="column-header">
-              <div className="column-title-wrapper">
-                <h2><Cpu size={18} color="var(--secondary)" /> Output B</h2>
-                <p>Analyzing Sentiment...</p>
-              </div>
-              <div className="latency-badge">--s</div>
-            </div>
-            <div className="column-body">
-              <div className="skeleton-box" />
-              <div className="skeleton-wrapper">
-                <div className="skeleton-line long" />
-                <div className="skeleton-line medium" />
-                <div className="skeleton-line long" />
-                <div className="skeleton-line short" />
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Skeleton Column C */}
-        {showC && (
-          <div className="column-card">
-            <div className="column-header">
-              <div className="column-title-wrapper">
-                <h2><Brain size={18} color="var(--color-happy)" /> Output C</h2>
-                <p>Analyzing Sentiment...</p>
-              </div>
-              <div className="latency-badge">--s</div>
-            </div>
-            <div className="column-body">
-              <div className="skeleton-box" />
-              <div className="skeleton-wrapper">
-                <div className="skeleton-line long" />
-                <div className="skeleton-line medium" />
-                <div className="skeleton-line long" />
-                <div className="skeleton-line short" />
-              </div>
+      <div className="single-column-chat">
+        <div className="column-card">
+          <div className="column-header">
+            <div className="column-title-wrapper">
+              <h2><Cpu size={18} color="var(--primary)" /> Socratic Tutor</h2>
+              <p>Analyzing Sentiment...</p>
             </div>
+            <div className="latency-badge">--s</div>
           </div>
-        )}
-
-        {/* Skeleton Column D */}
-        {showD && (
-          <div className="column-card">
-            <div className="column-header">
-              <div className="column-title-wrapper">
-                <h2><Brain size={18} color="var(--secondary)" /> Output D</h2>
-                <p>Analyzing Sentiment...</p>
-              </div>
-              <div className="latency-badge">--s</div>
-            </div>
-            <div className="column-body">
-              <div className="skeleton-box" />
-              <div className="skeleton-wrapper">
-                <div className="skeleton-line long" />
-                <div className="skeleton-line medium" />
-                <div className="skeleton-line long" />
-                <div className="skeleton-line short" />
-              </div>
+          <div className="column-body">
+            <div className="skeleton-box" />
+            <div className="skeleton-wrapper">
+              <div className="skeleton-line long" />
+              <div className="skeleton-line medium" />
+              <div className="skeleton-line long" />
+              <div className="skeleton-line short" />
             </div>
           </div>
-        )}
+        </div>
       </div>
     );
   }
@@ -301,7 +171,8 @@ export default function ChatWindow({
         display: 'flex',
         alignItems: 'flex-start',
         gap: '1rem',
-        color: 'var(--color-frustrated)'
+        color: 'var(--color-frustrated)',
+        marginBottom: '1rem'
       }}>
         <AlertCircle size={24} style={{ flexShrink: 0 }} />
         <div>
@@ -313,328 +184,227 @@ export default function ChatWindow({
   }
 
   // Render empty state
-  if (!result) {
+  if (history.length === 0) {
     return (
       <div className="empty-state">
-        <Terminal size={48} className="empty-state-icon" />
-        <h3>Awaiting your query</h3>
-        <p>Type an educational question above. The chatbot will process the query in two separate pipelines, show the classified sentiment, and respond using custom emotional contexts.</p>
+        <Brain size={48} className="empty-state-icon" style={{ color: 'var(--primary)' }} />
+        <h3>Welcome to Socratic Sentiment Tutor</h3>
+        <p>Ask any question about math, science, or programming. The Socratic tutor will detect your mood and guide you towards the answers without giving them away directly.</p>
       </div>
     );
   }
 
   return (
-    <>
-      {/* Student Question Card */}
-      <div 
-        style={{
-          background: 'rgba(99, 102, 241, 0.04)',
-          border: '1px solid var(--border-color)',
-          borderRadius: '16px',
-          padding: '1.25rem 1.5rem',
-          marginBottom: '1.5rem',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '0.4rem',
-          boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.15)',
-          position: 'relative',
-          overflow: 'hidden'
-        }}
-      >
-        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, var(--primary), var(--secondary))' }} />
-        <span style={{ fontSize: '0.75rem', fontWeight: 800, textTransform: 'uppercase', color: 'var(--primary)', letterSpacing: '0.5px' }}>
-          Student Question
-        </span>
-        <p style={{ fontSize: '1.05rem', fontWeight: 500, lineHeight: 1.5, margin: 0, color: 'var(--text-primary)' }}>
-          {historyA.length > 0 ? historyA[historyA.length - 2]?.content || historyA[0]?.content : '...'}
-        </p>
-      </div>
-
-      <div 
-        className="comparison-grid"
-        style={{
-          gridTemplateColumns: selectedOption !== 'all' ? '1fr' : undefined,
-          maxWidth: selectedOption !== 'all' ? '700px' : undefined,
-          margin: selectedOption !== 'all' ? '0 auto' : undefined
-        }}
-      >
-      {/* Column A: Gemini Sentiment */}
-      {result.response_a && (
-        <div className="column-card">
-          <div className="column-header">
-            <div className="column-title-wrapper">
-              <h2><Sparkles size={18} color="var(--primary)" /> Output A</h2>
-              <p>Gemini 2.5 Flash Lite Sentiment</p>
-            </div>
-            <div className="column-meta">
-              <span className={`sentiment-badge ${result.sentiment_a.detected_sentiment}`}>
-                {result.sentiment_a.detected_sentiment}
-              </span>
-              <div className="latency-badge" title="Response Latency & Tokens">
-                <Clock size={12} style={{ display: 'inline', marginRight: '4px', verticalAlign: 'middle' }} />
-                {result.sentiment_a.latency_a || result.latency_a}s
-                {result.tokens_a !== undefined && result.tokens_a !== null && (
-                  <>
-                    <span style={{ margin: '0 6px', opacity: 0.4 }}>|</span>
-                    <span>{result.tokens_a} tokens</span>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="column-body">
-            <div className="sentiment-analysis-box" style={{ marginBottom: '0.5rem' }}>
-              <h3>Gemini Sentiment Analysis</h3>
-              <p>{result.sentiment_a.explanation}</p>
-            </div>
-
-            <ChatThread history={historyA} title="Tutor A" />
-          </div>
-
-          {/* Prompt Context A Inspector */}
-          <div className="inspector-section">
-            <div className="inspector-header" onClick={() => setShowPromptA(!showPromptA)}>
-              <span>
-                <Terminal size={12} />
-                Prompt Context Context (Flow A)
-              </span>
-              {showPromptA ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-            </div>
-            {showPromptA && (
-              <div className="inspector-body">
-                {result.prompt_context_a}
+    <div className="single-column-chat" style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+      
+      {/* Scrollable Conversation Thread */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem', width: '100%' }}>
+        {history.map((msg, idx) => {
+          const isUser = msg.role === 'user';
+          
+          if (isUser) {
+            return (
+              <div
+                key={idx}
+                style={{
+                  alignSelf: 'flex-end',
+                  background: 'linear-gradient(135deg, var(--primary-dark), var(--primary))',
+                  border: '1px solid rgba(255, 255, 255, 0.1)',
+                  borderRadius: '16px 16px 4px 16px',
+                  padding: '0.9rem 1.25rem',
+                  maxWidth: '85%',
+                  boxShadow: '0 4px 12px rgba(99, 102, 241, 0.15)',
+                }}
+              >
+                <span style={{
+                  fontSize: '0.65rem',
+                  fontWeight: 800,
+                  textTransform: 'uppercase',
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  display: 'block',
+                  marginBottom: '0.25rem',
+                  letterSpacing: '0.5px'
+                }}>
+                  You
+                </span>
+                <p style={{ margin: 0, fontSize: '0.975rem', lineHeight: 1.5, color: '#fff' }}>
+                  {msg.content}
+                </p>
               </div>
-            )}
-          </div>
-        </div>
-      )}
+            );
+          }
 
-      {/* Column B: Gemini Single-Pass Sentiment */}
-      {result.response_b && (
-        <div className="column-card">
-          <div className="column-header">
-            <div className="column-title-wrapper">
-              <h2><Cpu size={18} color="var(--secondary)" /> Output B</h2>
-              <p>Gemini Single-Pass</p>
-            </div>
-            <div className="column-meta">
-              <span className={`sentiment-badge ${result.sentiment_b.mapped_sentiment}`}>
-                {result.sentiment_b.mapped_sentiment}
-              </span>
-              <div className="latency-badge" title="Response Latency & Tokens">
-                <Clock size={12} style={{ display: 'inline', marginRight: '4px', verticalAlign: 'middle' }} />
-                {result.sentiment_b.latency_b || result.latency_b}s
-                {result.tokens_b !== undefined && result.tokens_b !== null && (
-                  <>
-                    <span style={{ margin: '0 6px', opacity: 0.4 }}>|</span>
-                    <span>{result.tokens_b} tokens</span>
-                  </>
+          // Assistant / Tutor Bubble
+          return (
+            <div
+              key={idx}
+              className="column-card"
+              style={{
+                alignSelf: 'flex-start',
+                width: '100%',
+                maxWidth: '90%',
+                margin: 0,
+                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
+              }}
+            >
+              {/* Card Header with sentiment state & metrics */}
+              <div className="column-header" style={{ padding: '0.8rem 1.25rem', borderBottom: '1px solid var(--border-color)' }}>
+                <div className="column-title-wrapper">
+                  <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.95rem', fontWeight: 700, margin: 0 }}>
+                    <Sparkles size={15} color="var(--secondary)" /> 
+                    Socratic Tutor
+                  </h3>
+                </div>
+                
+                {msg.sentiment && (
+                  <div className="column-meta" style={{ gap: '0.6rem' }}>
+                    <div className="latency-badge" title="Response Latency & Tokens">
+                      <Clock size={12} style={{ display: 'inline', marginRight: '4px', verticalAlign: 'middle' }} />
+                      {msg.latency}s
+                      {msg.tokens !== undefined && (
+                        <>
+                          <span style={{ margin: '0 4px', opacity: 0.3 }}>|</span>
+                          <span>{msg.tokens}t</span>
+                        </>
+                      )}
+                      {msg.cost !== undefined && (
+                        <>
+                          <span style={{ margin: '0 4px', opacity: 0.3 }}>|</span>
+                          <span>${msg.cost.toFixed(5)}</span>
+                        </>
+                      )}
+                    </div>
+                  </div>
                 )}
               </div>
-            </div>
-          </div>
-
-          <div className="column-body">
-            <div className="sentiment-analysis-box" style={{ marginBottom: '0.5rem' }}>
-              <h3>Gemini Single-Pass Analysis</h3>
-              <p>Detected Sentiment and Socratic response generated in one pass: <strong>{result.sentiment_b.mapped_sentiment}</strong></p>
-            </div>
-
-            <ChatThread history={historyB} title="Tutor B" />
-          </div>
-
-          {/* Prompt Context B Inspector */}
-          <div className="inspector-section">
-            <div className="inspector-header" onClick={() => setShowPromptB(!showPromptB)}>
-              <span>
-                <Terminal size={12} />
-                Prompt Context Context (Flow B)
-              </span>
-              {showPromptB ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-            </div>
-            {showPromptB && (
-              <div className="inspector-body">
-                {result.prompt_context_b}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
 
-      {/* Column C: DistilRoBERTa Raw Scores -> Gemini */}
-      {result.response_c && (
-        <div className="column-card">
-          <div className="column-header">
-            <div className="column-title-wrapper">
-              <h2><Brain size={18} color="var(--color-happy)" /> Output C</h2>
-              <p>RoBERTa Raw Scores + Gemini</p>
-            </div>
-            <div className="column-meta">
-              <span className="sentiment-badge happy">
-                Distribution
-              </span>
-              <div className="latency-badge" title="Response Latency & Tokens">
-                <Clock size={12} style={{ display: 'inline', marginRight: '4px', verticalAlign: 'middle' }} />
-                {result.latency_c}s
-                {result.tokens_c !== undefined && result.tokens_c !== null && (
-                  <>
-                    <span style={{ margin: '0 6px', opacity: 0.4 }}>|</span>
-                    <span>{result.tokens_c} tokens</span>
-                  </>
-                )}
+              {/* Chat Bubble Body */}
+              <div className="column-body" style={{ padding: '1.25rem', gap: '1rem' }}>
+                <SafeMarkdown content={msg.content} />
               </div>
-            </div>
-          </div>
 
-          <div className="column-body">
-            <div className="sentiment-analysis-box" style={{ marginBottom: '0.5rem' }}>
-              <div 
-                onClick={() => setShowDistC(!showDistC)} 
-                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}
-              >
-                <h3 style={{ margin: 0 }}>DistilRoBERTa Full Distribution</h3>
-                {showDistC ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-              </div>
-              {showDistC && (
-                <div style={{ marginTop: '0.5rem' }}>
-                  <p>All probability scores passed directly to Gemini for adaptive synthesis:</p>
-                  {result.sentiment_d && result.sentiment_d.raw_emotions && (
-                    <EmotionChart rawEmotions={result.sentiment_d.raw_emotions} modelName="DistilRoBERTa" />
+              {/* Prompt Context Inspector Toggle */}
+              {msg.prompt_context && (
+                <div className="inspector-section" style={{ borderTop: '1px solid var(--border-color)', borderRadius: '0 0 12px 12px' }}>
+                  <div 
+                    className="inspector-header" 
+                    onClick={() => toggleInspector(idx)}
+                    style={{ padding: '0.6rem 1.25rem', fontSize: '0.8rem', background: 'rgba(255,255,255,0.01)' }}
+                  >
+                    <span style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                      <Terminal size={12} />
+                      View Socratic Context Inspector
+                    </span>
+                    {openInspectors[idx] ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                  </div>
+                  {openInspectors[idx] && (
+                    <div className="inspector-body" style={{ fontSize: '0.8rem', whiteSpace: 'pre-wrap', borderTop: '1px solid var(--border-color)', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                        <strong>Detected Student Sentiment:</strong>
+                        <span className={`sentiment-badge ${msg.sentiment}`} style={{ fontSize: '0.75rem', padding: '0.2rem 0.5rem', borderRadius: '4px' }}>
+                          {msg.sentiment.replace(/_/g, ' ')}
+                        </span>
+                      </div>
+                      <div>
+                        <strong>Prompt Context:</strong>
+                        <div style={{ marginTop: '0.25rem', opacity: 0.8 }}>
+                          {msg.prompt_context}
+                        </div>
+                      </div>
+                    </div>
                   )}
                 </div>
               )}
             </div>
-
-            <ChatThread history={historyC} title="Tutor C" />
-          </div>
-
-          {/* Prompt Context C Inspector */}
-          <div className="inspector-section">
-            <div className="inspector-header" onClick={() => setShowPromptC(!showPromptC)}>
-              <span>
-                <Terminal size={12} />
-                Prompt Context Context (Flow C)
-              </span>
-              {showPromptC ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-            </div>
-            {showPromptC && (
-              <div className="inspector-body">
-                {result.prompt_context_c}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Column D: DistilRoBERTa Mapped -> Gemini */}
-      {result.response_d && (
-        <div className="column-card">
-          <div className="column-header">
-            <div className="column-title-wrapper">
-              <h2><Brain size={18} color="var(--secondary)" /> Output D</h2>
-              <p>DistilRoBERTa Classifier + Gemini</p>
-            </div>
-            <div className="column-meta">
-              <span className={`sentiment-badge ${result.sentiment_d.mapped_sentiment}`}>
-                {result.sentiment_d.mapped_sentiment}
-              </span>
-              <div className="latency-badge" title="Response Latency & Tokens">
-                <Clock size={12} style={{ display: 'inline', marginRight: '4px', verticalAlign: 'middle' }} />
-                {result.sentiment_d.latency_d || result.latency_d}s
-                {result.tokens_d !== undefined && result.tokens_d !== null && (
-                  <>
-                    <span style={{ margin: '0 6px', opacity: 0.4 }}>|</span>
-                    <span>{result.tokens_d} tokens</span>
-                  </>
-                )}
+          );
+        })}
+
+        {/* Loading Bubble when generating */}
+        {loading && (
+          <div
+            className="column-card"
+            style={{
+              alignSelf: 'flex-start',
+              width: '100%',
+              maxWidth: '90%',
+              margin: 0,
+              opacity: 0.7
+            }}
+          >
+            <div className="column-header" style={{ padding: '0.8rem 1.25rem' }}>
+              <div className="column-title-wrapper">
+                <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.95rem', fontWeight: 700, margin: 0 }}>
+                  <Cpu size={15} color="var(--primary)" />
+                  Socratic Tutor thinking...
+                </h3>
               </div>
             </div>
-          </div>
-
-          <div className="column-body">
-            <div className="sentiment-analysis-box" style={{ marginBottom: '0.5rem' }}>
-              <div 
-                onClick={() => setShowDistD(!showDistD)} 
-                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}
-              >
-                <h3 style={{ margin: 0 }}>DistilRoBERTa Mapped Category</h3>
-                {showDistD ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+            <div className="column-body" style={{ padding: '1.25rem' }}>
+              <div className="skeleton-wrapper">
+                <div className="skeleton-line long" />
+                <div className="skeleton-line medium" />
+                <div className="skeleton-line short" />
               </div>
-              {showDistD && (
-                <div style={{ marginTop: '0.5rem' }}>
-                  <p>Mapped top-scoring emotions into high-level state: <strong>{result.sentiment_d.mapped_sentiment}</strong></p>
-                  <EmotionChart rawEmotions={result.sentiment_d.raw_emotions} modelName="DistilRoBERTa" />
-                </div>
-              )}
-            </div>
-
-            <ChatThread history={historyD} title="Tutor D" />
-          </div>
-
-          {/* Prompt Context D Inspector */}
-          <div className="inspector-section">
-            <div className="inspector-header" onClick={() => setShowPromptD(!showPromptD)}>
-              <span>
-                <Terminal size={12} />
-                Prompt Context Context (Flow D)
-              </span>
-              {showPromptD ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
             </div>
-            {showPromptD && (
-              <div className="inspector-body">
-                {result.prompt_context_d}
-              </div>
-            )}
           </div>
-        </div>
-      )}
+        )}
+      </div>
 
-      {/* Follow-up central conversation area */}
-      <div className="query-card" style={{ gridColumn: '1 / -1', marginTop: '1rem', background: 'rgba(99, 102, 241, 0.05)', borderColor: 'var(--primary-glow)' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', marginBottom: '0.8rem' }}>
-          <h3 style={{ fontSize: '1.05rem', fontWeight: 800, display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-            <Brain size={18} color="var(--primary)" />
-            Continue the Conversation on this Topic
-          </h3>
-          <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
-            Reply to the tutors' questions. Active tutors will formulate their next Socratic nudges using their independent histories.
-          </p>
-        </div>
-        <form 
-          onSubmit={(e) => {
-            e.preventDefault();
-            const inputEl = e.target.elements.followUpText;
-            const val = inputEl.value.trim();
-            if (val && !loading) {
-              onSubmitFollowUp(val);
-              inputEl.value = '';
-            }
+      {/* Follow-up / Reply Area */}
+      {history.length > 0 && !loading && (
+        <div 
+          className="query-card" 
+          style={{ 
+            marginTop: '1.5rem', 
+            background: 'rgba(99, 102, 241, 0.03)', 
+            borderColor: 'var(--primary-glow)',
+            boxShadow: 'none',
+            padding: '1.25rem'
           }}
-          className="query-input-wrapper"
         >
-          <textarea
-            name="followUpText"
-            placeholder="Type your response to the Socratic tutor..."
-            className="query-textarea"
-            disabled={loading}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                e.target.form.requestSubmit();
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem', marginBottom: '0.8rem' }}>
+            <h3 style={{ fontSize: '0.95rem', fontWeight: 800, display: 'flex', alignItems: 'center', gap: '0.4rem', margin: 0 }}>
+              <Brain size={16} color="var(--primary)" />
+              Socratic Dialogue
+            </h3>
+            <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', margin: 0 }}>
+              Reply to the Socratic tutor's guide question to continue exploring the concept.
+            </p>
+          </div>
+          <form 
+            onSubmit={(e) => {
+              e.preventDefault();
+              const inputEl = e.target.elements.followUpText;
+              const val = inputEl.value.trim();
+              if (val) {
+                onSubmitFollowUp(val);
+                inputEl.value = '';
               }
             }}
-          />
-          <button 
-            type="submit" 
-            className="send-button"
-            disabled={loading}
+            className="query-input-wrapper"
           >
-            Send Reply
-          </button>
-        </form>
-      </div>
+            <textarea
+              name="followUpText"
+              placeholder="Provide your Socratic response..."
+              className="query-textarea"
+              style={{ minHeight: '60px' }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  e.target.form.requestSubmit();
+                }
+              }}
+            />
+            <button 
+              type="submit" 
+              className="send-button"
+              style={{ padding: '0.6rem 1.25rem' }}
+            >
+              Reply
+            </button>
+          </form>
+        </div>
+      )}
     </div>
-    </>
   );
 }

frontend/src/components/EmotionChart.jsx

@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-import { ChevronDown, ChevronUp, BarChart2 } from 'lucide-react';
-
-export default function EmotionChart({ rawEmotions, modelName = "RoBERTa" }) {
-  const [showAll, setShowAll] = useState(false);
-
-  if (!rawEmotions || rawEmotions.length === 0) {
-    return <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No emotional details available.</p>;
-  }
-
-  // Sort by score descending
-  const sorted = [...rawEmotions].sort((a, b) => b.score - a.score);
-  
-  // Decide how many to display
-  const displayedEmotions = showAll ? sorted : sorted.slice(0, 5);
-
-  // Group emotions for coloring
-  const happySet = new Set(["joy", "amusement", "excitement", "pride", "optimism", "relief", "love", "admiration", "gratitude", "approval"]);
-  const sadSet = new Set(["sadness", "grief", "remorse", "disappointment", "embarrassment"]);
-  const frustratedSet = new Set(["anger", "annoyance", "disapproval", "disgust", "fear", "nervousness"]);
-
-  const getBarColor = (label) => {
-    if (happySet.has(label)) return 'var(--color-happy)';
-    if (sadSet.has(label)) return 'var(--color-sad)';
-    if (frustratedSet.has(label)) return 'var(--color-frustrated)';
-    return 'var(--color-neutral)';
-  };
-
-  return (
-    <div className="emotion-chart-container">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
-        <h4 style={{ 
-          fontSize: '0.8rem', 
-          color: 'var(--text-muted)', 
-          textTransform: 'uppercase', 
-          letterSpacing: '0.5px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '0.3rem'
-        }}>
-          <BarChart2 size={12} />
-          Local {modelName} Model Emotion Breakdown
-        </h4>
-        <button
-          onClick={() => setShowAll(!showAll)}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: 'var(--primary)',
-            fontSize: '0.75rem',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.2rem',
-            fontWeight: 600
-          }}
-        >
-          {showAll ? (
-            <>
-              Show Top 5 <ChevronUp size={12} />
-            </>
-          ) : (
-            <>
-              Show All 28 <ChevronDown size={12} />
-            </>
-          )}
-        </button>
-      </div>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
-        {displayedEmotions.map((item, idx) => {
-          const percentage = (item.score * 100).toFixed(1);
-          return (
-            <div key={idx} className="emotion-bar-row">
-              <div className="emotion-bar-label" title={item.label}>
-                {item.label}
-              </div>
-              <div className="emotion-bar-track">
-                <div 
-                  className="emotion-bar-fill" 
-                  style={{ 
-                    width: `${percentage}%`,
-                    backgroundColor: getBarColor(item.label),
-                    boxShadow: `0 0 6px ${getBarColor(item.label)}33`
-                  }}
-                />
-              </div>
-              <div className="emotion-bar-value">
-                {percentage}%
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

frontend/src/components/Settings.jsx

@@ -1,34 +1,19 @@
 import React, { useState } from 'react';
-import { Eye, EyeOff, Key, Sparkles, RefreshCw } from 'lucide-react';
+import { Eye, EyeOff, Key, RefreshCw } from 'lucide-react';
 
 export default function Settings({ 
   apiKey, 
   setApiKey, 
-  systemPrompt, 
-  setSystemPrompt, 
   backendStatus, 
   checkBackendStatus 
 }) {
   const [showKey, setShowKey] = useState(false);
 
-  const getModelStatusText = (status, error) => {
-    if (status === 'loading') return 'Downloading/Loading...';
-    if (status === 'ready') return 'Ready';
-    if (status === 'failed') return `Error: ${error || 'Failed to load model'}`;
-    return 'Connecting...';
-  };
-
-  const getModelStatusClass = (status) => {
-    if (status === 'ready') return 'ready';
-    if (status === 'failed') return 'failed';
-    return 'loading';
-  };
-
   return (
     <div className="settings-drawer">
       <div className="settings-group">
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <label style={{ display: 'flex', alignStatus: 'center', gap: '0.5rem' }}>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
             <Key size={16} color="var(--primary)" />
             Gemini API Key
           </label>
@@ -63,19 +48,6 @@ export default function Settings({
         </div>
       </div>
 
-      <div className="settings-group">
-        <label style={{ display: 'flex', alignStatus: 'center', gap: '0.5rem' }}>
-          <Sparkles size={16} color="var(--secondary)" />
-          Chatbot System Instruction
-        </label>
-        <textarea
-          value={systemPrompt}
-          onChange={(e) => setSystemPrompt(e.target.value)}
-          placeholder="You are a helpful educational AI assistant..."
-          rows={3}
-        />
-      </div>
-
       <div style={{ 
         display: 'flex', 
         justifyContent: 'space-between', 
@@ -85,17 +57,19 @@ export default function Settings({
         marginTop: '0.5rem'
       }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-          <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Backend DistilRoBERTa Status:</span>
+          <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Gemini Connection:</span>
           <span className={`status-badge`} style={{ padding: '0.2rem 0.6rem' }}>
-            <span className={`status-dot ${getModelStatusClass(backendStatus.roberta_status)}`}></span>
-            <span style={{ marginLeft: '4px', fontSize: '0.8rem' }}>{getModelStatusText(backendStatus.roberta_status, backendStatus.roberta_error)}</span>
+            <span className={`status-dot ${backendStatus.gemini_api_key_configured || apiKey ? 'ready' : 'loading'}`}></span>
+            <span style={{ marginLeft: '4px', fontSize: '0.8rem' }}>
+              {backendStatus.gemini_api_key_configured || apiKey ? 'Configured' : 'Missing API Key'}
+            </span>
           </span>
         </div>
         <button 
           onClick={checkBackendStatus} 
           className="settings-toggle-btn"
           style={{ padding: '0.35rem 0.75rem' }}
-          title="Refresh Backend Status"
+          title="Refresh connection status"
         >
           <RefreshCw size={14} />
           Refresh

frontend/src/components/VoiceSessionModal.jsx

@@ -0,0 +1,227 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Mic, X, MicOff, AlertCircle } from 'lucide-react';
+
+export default function VoiceSessionModal({ isOpen, onClose, apiKey }) {
+  const [status, setStatus] = useState('connecting'); // 'connecting', 'listening', 'speaking', 'error'
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isMuted, setIsMuted] = useState(false);
+  
+  const wsRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const playbackContextRef = useRef(null);
+  const streamRef = useRef(null);
+  const processorRef = useRef(null);
+  const nextPlayTimeRef = useRef(0);
+  const textTranscriptRef = useRef('');
+  const [transcript, setTranscript] = useState('');
+
+  // Helper: Convert ArrayBuffer to Base64
+  const base64ArrayBuffer = (arrayBuffer) => {
+    let binary = '';
+    const bytes = new Uint8Array(arrayBuffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setStatus('connecting');
+    setTranscript('');
+    textTranscriptRef.current = '';
+
+    // Determine WebSocket URL
+    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const host = window.location.host === 'localhost:5173' ? 'localhost:8000' : window.location.host;
+    const wsUrl = `${protocol}${host}/api/live-ws?api_key=${apiKey || ''}`;
+
+    // Establish WebSocket Connection
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = async () => {
+      try {
+        // Request Microphone access
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        streamRef.current = stream;
+
+        // Initialize Audio contexts
+        audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
+        playbackContextRef.current = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000 });
+        nextPlayTimeRef.current = playbackContextRef.current.currentTime;
+
+        // Capture Mic Input
+        const source = audioContextRef.current.createMediaStreamSource(stream);
+        const processor = audioContextRef.current.createScriptProcessor(2048, 1, 1);
+        processorRef.current = processor;
+
+        processor.onaudioprocess = (e) => {
+          if (isMuted) return;
+
+          const inputData = e.inputBuffer.getChannelData(0);
+          // Convert Float32 to Int16 PCM
+          const pcmData = new Int16Array(inputData.length);
+          for (let i = 0; i < inputData.length; i++) {
+            pcmData[i] = Math.max(-1, Math.min(1, inputData[i])) * 0x7FFF;
+          }
+
+          // Send chunk to server
+          if (ws.readyState === WebSocket.OPEN) {
+            const base64Audio = base64ArrayBuffer(pcmData.buffer);
+            ws.send(JSON.stringify({ type: 'audio', data: base64Audio }));
+          }
+        };
+
+        source.connect(processor);
+        processor.connect(audioContextRef.current.destination);
+
+        setStatus('listening');
+      } catch (err) {
+        console.error("Microphone access failed:", err);
+        setStatus('error');
+        setErrorMessage("Microphone access is required for voice session. Please allow mic permissions.");
+      }
+    };
+
+    ws.onmessage = async (event) => {
+      const message = JSON.parse(event.data);
+
+      if (message.type === 'audio') {
+        setStatus('speaking');
+        
+        // Decode base64 24kHz PCM back to Float32 for Web Audio playback
+        const binary = window.atob(message.data);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) {
+          bytes[i] = binary.charCodeAt(i);
+        }
+
+        const int16Data = new Int16Array(bytes.buffer);
+        const float32Data = new Float32Array(int16Data.length);
+        for (let i = 0; i < int16Data.length; i++) {
+          float32Data[i] = int16Data[i] / 0x7FFF;
+        }
+
+        const pContext = playbackContextRef.current;
+        if (pContext && pContext.state !== 'suspended') {
+          const audioBuffer = pContext.createBuffer(1, float32Data.length, 24000);
+          audioBuffer.getChannelData(0).set(float32Data);
+
+          const bufferSource = pContext.createBufferSource();
+          bufferSource.buffer = audioBuffer;
+          bufferSource.connect(pContext.destination);
+
+          // Gapless scheduling
+          const startTime = Math.max(pContext.currentTime, nextPlayTimeRef.current);
+          bufferSource.start(startTime);
+          nextPlayTimeRef.current = startTime + audioBuffer.duration;
+        }
+      } else if (message.type === 'text') {
+        // Handle incoming Socratic tutor speech transcription
+        textTranscriptRef.current += message.data;
+        setTranscript(textTranscriptRef.current);
+      } else if (message.type === 'turn_complete') {
+        setStatus('listening');
+        textTranscriptRef.current = '';
+      }
+    };
+
+    ws.onerror = (err) => {
+      console.error("WebSocket error:", err);
+      setStatus('error');
+      setErrorMessage("Lost connection to Gemini Live server.");
+    };
+
+    ws.onclose = () => {
+      setStatus('connecting');
+    };
+
+    return () => {
+      // Clean up connections and audio context on unmount
+      if (wsRef.current) wsRef.current.close();
+      if (processorRef.current) processorRef.current.disconnect();
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach(track => track.stop());
+      }
+      if (audioContextRef.current) audioContextRef.current.close();
+      if (playbackContextRef.current) playbackContextRef.current.close();
+    };
+  }, [isOpen, isMuted]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="voice-modal-backdrop">
+      <div className="voice-modal-content">
+        <button className="voice-modal-close" onClick={onClose}>
+          <X size={20} />
+        </button>
+
+        <div className="voice-modal-header">
+          <h2>Socratic Voice Space</h2>
+          <p>Real-Time Bidirectional Dialogue</p>
+        </div>
+
+        {/* Pulse Animations and Mic States */}
+        <div className="voice-visualizer-container">
+          {status === 'connecting' && (
+            <div className="voice-status-indicator connecting">
+              <div className="pulse-circle" />
+              <span>Connecting to Gemini Live...</span>
+            </div>
+          )}
+
+          {status === 'listening' && (
+            <div className="voice-status-indicator listening">
+              <div className="pulse-circle active" />
+              <div className="pulse-ring ring-1" />
+              <div className="pulse-ring ring-2" />
+              <span style={{ color: 'var(--color-happy)' }}>Listening to you... Go ahead and speak!</span>
+            </div>
+          )}
+
+          {status === 'speaking' && (
+            <div className="voice-status-indicator speaking">
+              <div className="pulse-circle active speaking-pulse" />
+              <div className="pulse-ring ring-1 speaking-ring" />
+              <div className="pulse-ring ring-2 speaking-ring" />
+              <span style={{ color: 'var(--secondary)' }}>Socratic Tutor is speaking...</span>
+            </div>
+          )}
+
+          {status === 'error' && (
+            <div className="voice-status-indicator error" style={{ gap: '0.8rem' }}>
+              <AlertCircle size={40} color="var(--color-frustrated)" />
+              <p style={{ color: 'var(--color-frustrated)', fontSize: '0.9rem', textAlign: 'center', maxWidth: '300px' }}>
+                {errorMessage}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Transcription Display */}
+        {status === 'speaking' && transcript && (
+          <div className="voice-transcript-box">
+            <p>"{transcript}"</p>
+          </div>
+        )}
+
+        {/* Control Buttons */}
+        <div className="voice-modal-controls">
+          <button 
+            className={`voice-control-btn ${isMuted ? 'muted' : ''}`}
+            onClick={() => setIsMuted(!isMuted)}
+            disabled={status === 'error' || status === 'connecting'}
+            title={isMuted ? "Unmute microphone" : "Mute microphone"}
+          >
+            {isMuted ? <MicOff size={22} /> : <Mic size={22} />}
+            <span>{isMuted ? "Muted" : "Active"}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}