Add mode selection for query submission and update streaming logic

backend/api.py

@@ -58,6 +58,8 @@ app.add_middleware(
 # ---------------------------------------------------------------------------
 class QueryRequest(BaseModel):
     question: str
+    # Optional override for retrieval mode (naive, local, global, hybrid, mix)
+    mode: str | None = None
 
 
 # ---------------------------------------------------------------------------
@@ -482,7 +484,10 @@ async def _generate_followup_questions(
 # ---------------------------------------------------------------------------
 # Core streaming generator
 # ---------------------------------------------------------------------------
-async def _stream_pipeline(question: str) -> AsyncGenerator[str, None]:
+async def _stream_pipeline(
+    question: str,
+    mode_override: str | None = None,
+) -> AsyncGenerator[str, None]:
     rag = None
     try:
         # ── Stage: Intent Router ──────────────────────────────────────────
@@ -530,8 +535,17 @@ async def _stream_pipeline(question: str) -> AsyncGenerator[str, None]:
         )
 
         # ── Stage: Retrieval (with retries, data only — no LLM) ──────────
-        mode = os.getenv("CHAINLIT_MODE", "hybrid")
-        attempt_modes = [mode, mode, "mix"] if mode != "mix" else ["mix", "mix"]
+        selected_mode = (
+            mode_override or os.getenv("CHAINLIT_MODE") or "hybrid"
+        ).lower()
+        if selected_mode not in {"naive", "local", "global", "hybrid", "mix"}:
+            selected_mode = "hybrid"
+
+        attempt_modes = (
+            [selected_mode, selected_mode, "mix"]
+            if selected_mode != "mix"
+            else ["mix", "mix"]
+        )
         selected_data: dict[str, Any] | None = None
         references: list[dict[str, str]] = []
         chunks: list[dict[str, Any]] = []

frontend/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import dynamic from "next/dynamic";
 import ReactMarkdown from "react-markdown";
 import QuestionInput from "@/components/QuestionInput";
@@ -10,10 +11,11 @@ const FlowCanvas = dynamic(() => import("@/components/FlowCanvas"), { ssr: false
 
 export default function Home() {
   const { nodes, answer, streamingAnswer, streaming, error, submit, reset, followUps } = useQueryStream();
+  const [mode, setMode] = useState<string>("hybrid");
 
   const handleSubmit = (question: string) => {
     reset();
-    submit(question);
+    submit(question, mode);
   };
 
   const hasStarted = nodes.some((n) => n.status !== "idle");
@@ -31,15 +33,32 @@ export default function Home() {
             </p>
           </div>
         </div>
-        {hasStarted && (
-          <button
-            onClick={reset}
-            disabled={streaming}
-            className="text-xs px-3 py-1.5 rounded-lg border border-zinc-700 text-zinc-400 hover:text-zinc-200 hover:border-zinc-500 transition-colors disabled:opacity-40"
-          >
-            Reset
-          </button>
-        )}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-[11px] text-zinc-500">
+            <span>Mode</span>
+            <select
+              value={mode}
+              onChange={(e) => setMode(e.target.value)}
+              disabled={streaming}
+              className="bg-zinc-900 border border-zinc-700 rounded-md px-2 py-1 text-[11px] text-zinc-200 focus:outline-none focus:border-indigo-500 disabled:opacity-40"
+            >
+              <option value="naive">naive</option>
+              <option value="local">local</option>
+              <option value="global">global</option>
+              <option value="hybrid">hybrid</option>
+              <option value="mix">mix</option>
+            </select>
+          </div>
+          {hasStarted && (
+            <button
+              onClick={reset}
+              disabled={streaming}
+              className="text-xs px-3 py-1.5 rounded-lg border border-zinc-700 text-zinc-400 hover:text-zinc-200 hover:border-zinc-500 transition-colors disabled:opacity-40"
+            >
+              Reset
+            </button>
+          )}
+        </div>
       </header>
 
       {/* ── Body ── */}

frontend/components/QuestionInput.tsx

@@ -59,7 +59,7 @@ export default function QuestionInput({ onSubmit, disabled }: QuestionInputProps
         />
         <button
           onClick={handleSubmit}
-          disabled={disabled || !value.trim()}
+          disabled={disabled}
           className="
             flex-shrink-0 h-12 px-5 rounded-xl text-sm font-semibold
             bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700

frontend/hooks/useQueryStream.ts

@@ -46,7 +46,7 @@ export function useQueryStream() {
   }, []);
 
   const submit = useCallback(
-    async (question: string) => {
+    async (question: string, mode?: string) => {
       // Cancel any in-flight request
       abortRef.current?.abort();
       abortRef.current = new AbortController();
@@ -55,10 +55,15 @@ export function useQueryStream() {
       setStreaming(true);
 
       try {
+        const payload: Record<string, unknown> = { question };
+        if (mode) {
+          payload.mode = mode;
+        }
+
         const response = await fetch(`${API_URL}/query`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ question }),
+          body: JSON.stringify(payload),
           signal: abortRef.current.signal,
         });