feat: show rewritten query in chat UI

When query rewriter changes the original question, display a badge
"Query được viết lại: ..." below the user bubble to make the
rewriting step visible in the pipeline.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

api.py

@@ -38,6 +38,7 @@ class Source(BaseModel):
 class QueryResponse(BaseModel):
     answer: str
     sources: list[Source]
+    rewritten_query: str = ""
 
 
 @app.get("/", response_class=HTMLResponse)
@@ -52,6 +53,7 @@ def query(req: QueryRequest):
     return QueryResponse(
         answer=result["answer"],
         sources=[Source(**s) for s in result["sources"]],
+        rewritten_query=result.get("rewritten_query", ""),
     )
 
 
@@ -83,9 +85,9 @@ async def stream(req: QueryRequest):
         await asyncio.sleep(0)
 
         loop = asyncio.get_event_loop()
-        contexts, sources = await loop.run_in_executor(None, retrieve, req.question, req.top_k)
+        contexts, sources, rewritten = await loop.run_in_executor(None, retrieve, req.question, req.top_k)
 
-        yield f"data: {json.dumps({'type': 'sources', 'sources': sources})}\n\n"
+        yield f"data: {json.dumps({'type': 'sources', 'sources': sources, 'rewritten_query': rewritten})}\n\n"
         await asyncio.sleep(0)
 
         prompt = build_prompt(req.question, contexts)
@@ -113,7 +115,7 @@ async def stream(req: QueryRequest):
 def compare(req: QueryRequest):
     """So sánh Text RAG vs ColPali retrieval trên cùng câu hỏi."""
     from src.colpali_retriever import query as colpali_query
-    _, text_sources = retrieve(req.question, top_k=req.top_k)
+    _, text_sources, _ = retrieve(req.question, top_k=req.top_k)
     try:
         colpali_hits = colpali_query(req.question, top_k=req.top_k)
     except Exception as e:

src/rag.py

@@ -32,7 +32,7 @@ TRẢ LỜI:"""
 
 
 def retrieve(question: str, top_k: int = 5):
-    """Rewrite -> embed -> hybrid retrieve -> rerank. Returns (contexts, sources)."""
+    """Rewrite -> embed -> hybrid retrieve -> rerank. Returns (contexts, sources, rewritten_query)."""
     rewritten = rewrite_query(question)
     if rewritten != question:
         print(f"Query rewritten: {rewritten}")
@@ -53,12 +53,12 @@ def retrieve(question: str, top_k: int = 5):
         }
         for c in contexts
     ]
-    return contexts, sources
+    return contexts, sources, rewritten
 
 
 def answer(question: str, top_k: int = 5) -> dict:
     """RAG pipeline: rewrite -> embed -> hybrid retrieve -> rerank -> generate."""
-    contexts, sources = retrieve(question, top_k)
+    contexts, sources, rewritten = retrieve(question, top_k)
     prompt = build_prompt(question, contexts)
     response = client.chat.completions.create(
         model=LLM_MODEL,
@@ -68,4 +68,5 @@ def answer(question: str, top_k: int = 5) -> dict:
         "answer": response.choices[0].message.content,
         "contexts": [c["text"] for c in contexts],
         "sources": sources,
+        "rewritten_query": rewritten,
     }

static/index.html

@@ -122,6 +122,8 @@
     .uploaded-badge { display: inline-block; background: var(--green-bg); color: var(--green-text); border-radius: 4px; padding: 1px 5px; font-size: 0.68rem; font-weight: 600; margin-left: 4px; }
     .ctx-badge { display: inline-block; background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 5px; font-size: 0.65rem; font-weight: 600; margin-left: 4px; }
     [data-theme="dark"] .ctx-badge { background: #3a2a0a; color: #fbbf24; }
+    .rewrite-badge { font-size: 0.74rem; color: var(--text3); font-style: italic; padding: 3px 0 0 4px; }
+    .rewrite-badge span { color: var(--primary); font-style: normal; font-weight: 600; }
     .expand-btn { background: none; border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; font-size: 0.68rem; color: var(--text3); cursor: pointer; margin-top: 4px; transition: all 0.15s; }
     .expand-btn:hover { border-color: var(--primary); color: var(--primary); }
     .source-text { display: none; margin-top: 8px; padding: 8px 10px; background: var(--surface2); border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0; font-size: 0.76rem; line-height: 1.7; color: var(--text2); white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; }
@@ -450,6 +452,7 @@
         });
 
         const bubble = item.querySelector('.bubble-a');
+        const bubbleQ = item.querySelector('.bubble-q');
         let fullText = '', sources = [];
         let copyBtn = null;
 
@@ -471,6 +474,10 @@
               sources = msg.sources;
               bubble.innerHTML = '<div class="answer-text"></div>';
               copyBtn = addCopyBtn(bubble, () => fullText);
+              if (msg.rewritten_query && msg.rewritten_query !== q) {
+                bubbleQ.insertAdjacentHTML('afterend',
+                  `<div class="rewrite-badge">🔄 Query được viết lại: <span>"${msg.rewritten_query}"</span></div>`);
+              }
             } else if (msg.type === 'token') {
               fullText += msg.text;
               bubble.querySelector('.answer-text').innerHTML = highlightCitations(fullText) + '<span class="cursor">▋</span>';