update with working output formated

app/backend/api/chatbot.py

@@ -473,7 +473,7 @@ async def websocket_endpoint(websocket: WebSocket):
                                     json.dumps({
                                         "type": "intermediate",
                                         "title": "Step",
-                                        "payload": str(chunk)[:500]
+                                        "payload": str(chunk)
                                     }),
                                     websocket,
                                 )
@@ -483,10 +483,11 @@ async def websocket_endpoint(websocket: WebSocket):
                                 json.dumps({
                                     "type": "intermediate",
                                     "title": "Step",
-                                    "payload": str(chunk)[:500]
+                                    "payload": str(chunk)
                                 }),
                                 websocket,
                             )
+                    print("Final output:", chunk)
                     # Send a final 'done' message to signal completion
                     await manager.send_personal_message(
                         json.dumps({"type": "done"}),

app/backend/models/adaptive_rag/prompts_library.py

@@ -33,68 +33,7 @@ You must not use any information that is not present in the provided context to
 If you don't know the answer, just say that you don't know.\n
 Provide the answer in a concise and organized manner. \n
 
-Reformat the answer in a human-readable markdown format, include underlined or new lines to improve readability if needed.\n
-
 Question: {question} \n
 Context: {context} \n
 Answer:
 """
-
-
-# Evaluation
-CORRECTNESS_PROMPT = """You are an impartial judge. Evaluate Student Answer against Ground Truth for conceptual similarity and correctness. 
-You may also be given additional information that was used by the model to generate the output.
-
-Your task is to determine a numerical score called correctness based on the Student Answer and Ground Truth.
-A definition of correctness and a grading rubric are provided below.
-You must use the grading rubric to determine your score.
-
-Metric definition:
-Correctness assesses the degree to which a provided Student Answer aligns with factual accuracy, completeness, logical 
-consistency, and precise terminology of the Ground Truth. It evaluates the intrinsic validity of the Student Answer , independent of any 
-external context. A higher score indicates a higher adherence to factual accuracy, completeness, logical consistency, 
-and precise terminology of the Ground Truth.
-
-Grading rubric:
-Correctness: Below are the details for different scores: 
- - 1: Major factual errors, highly incomplete, illogical, and uses incorrect terminology.
- - 2: Significant factual errors, incomplete, noticeable logical flaws, and frequent terminology errors.
- - 3: Minor factual errors, somewhat incomplete, minor logical inconsistencies, and occasional terminology errors.
- - 4: Few to no factual errors, mostly complete, strong logical consistency, and accurate terminology.
- - 5: Accurate, complete, logically consistent, and uses precise terminology.
- 
- Reminder:
-  - Carefully read the Student Answer and Ground Truth
-  - Check for factual accuracy and completeness of Student Answer compared to the Ground Truth
-  - Focus on correctness of information rather than style or verbosity
-  - The goal is to evaluate factual correctness and completeness of the Student Answer.
-  - Please provide your answer score only with the numerical number between 1 and 5. No score: or other text is allowed.
-
-"""
-
-FAITHFULNESS_PROMPT = """You are an impartial judge. Evaluate output against context for faithfulness. 
-You may also be given additional information that was used by the model to generate the Output.
-
-Your task is to determine a numerical score called faithfulness based on the output and context.
-A definition of faithfulness and a grading rubric are provided below.
-You must use the grading rubric to determine your score.
-
-Metric definition:
-Faithfulness is only evaluated with the provided output and context. Faithfulness assesses how much of the 
-provided output is factually consistent with the provided context. A higher score indicates that a higher proportion of 
-claims present in the output can be derived from the provided context. Faithfulness does not consider how much extra 
-information from the context is not present in the output.
-
-Grading rubric:
-Faithfulness: Below are the details for different scores:
-- Score 1: None of the claims in the output can be inferred from the provided context.
-- Score 2: Some of the claims in the output can be inferred from the provided context, but the majority of the output is missing from, inconsistent with, or contradictory to the provided context.
-- Score 3: Half or more of the claims in the output can be inferred from the provided context.
-- Score 4: Most of the claims in the output can be inferred from the provided context, with very little information that is not directly supported by the provided context.
-- Score 5: All of the claims in the output are directly supported by the provided context, demonstrating high faithfulness to the provided context.
-
-Reminder:
-- Carefully read the output and context
-- Focus on the information instead of the writing style or verbosity.
-- Please provide your answer score only with the numerical number between 1 and 5, according to the grading rubric above. No score: or other text is allowed.  
-"""

app/frontend/package.json

@@ -12,10 +12,12 @@
     "test:run": "vitest run"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "daisyui": "^5.0.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

app/frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 const BASE_DOMAIN_NAME_PORT = import.meta.env.REACT_APP_DOMAIN_NAME_PORT || 'localhost:8004';
 
-
 interface Message {
   sender: 'user' | 'bot';
   text: string;
@@ -18,15 +18,14 @@ interface ChatTurn {
 }
 
 const App: React.FC = () => {
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [chatTurns, setChatTurns] = useState<ChatTurn[]>([]);
-  const [intermediateMessages, setIntermediateMessages] = useState<{title: string, payload: string}[]>([]);
-  const [finalAnswer, setFinalAnswer] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [showIntermediate, setShowIntermediate] = useState(false);
   const [newMessage, setNewMessage] = useState('');
   const [socket, setSocket] = useState<WebSocket | null>(null);
   const mounted = useRef(false);
 
+  // Disable input/button if any job is running
+  const isJobRunning = chatTurns.some(turn => turn.isLoading);
+
   useEffect(() => {
     mounted.current = true;
     const ws = new WebSocket(`ws://${BASE_DOMAIN_NAME_PORT}/ws`);
@@ -37,26 +36,40 @@ const App: React.FC = () => {
     ws.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data);
-                if (data.type === 'message' && data.payload && mounted.current) {
+        setChatTurns((prevTurns) => {
-                    // legacy support, treat as final
+          if (prevTurns.length === 0) return prevTurns;
-                    setMessages((prevMessages) => {
+          const lastTurn = prevTurns[prevTurns.length - 1];
-                        const lastMessage = prevMessages[prevMessages.length - 1];
+          if (data.type === 'intermediate') {
-                        if (lastMessage && lastMessage.sender === 'bot') {
+            // Add intermediate message to the last turn
-                            return [...prevMessages.slice(0, -1), { ...lastMessage, text: lastMessage.text + data.payload }];
+            const updatedTurn = {
-                        } else {
+              ...lastTurn,
-                            return [...prevMessages, { sender: 'bot', text: data.payload }];
+              intermediateMessages: [...lastTurn.intermediateMessages, { title: data.title, payload: data.payload }],
-                        }
+            };
-                    });
+            return [...prevTurns.slice(0, -1), updatedTurn];
-                    setFinalAnswer(data.payload);
-                } else if (data.type === 'intermediate') {
-                    setIntermediateMessages((prev) => [...prev, { title: data.title, payload: data.payload }]);
           } else if (data.type === 'final') {
-                    setFinalAnswer(data.payload);
+            // Set final answer for the last turn
+            const updatedTurn = {
+              ...lastTurn,
+              finalAnswer: data.payload,
+            };
+            return [...prevTurns.slice(0, -1), updatedTurn];
           } else if (data.type === 'done') {
-                    setIsLoading(false);
+            // Mark last turn as not loading
-                } else {
+            const updatedTurn = {
-                    console.error('Unexpected message format:', data);
+              ...lastTurn,
+              isLoading: false,
+            };
+            return [...prevTurns.slice(0, -1), updatedTurn];
+          } else if (data.type === 'message' && data.payload && mounted.current) {
+            // legacy support, treat as final
+            const updatedTurn = {
+              ...lastTurn,
+              finalAnswer: (lastTurn.finalAnswer || '') + data.payload,
+            };
+            return [...prevTurns.slice(0, -1), updatedTurn];
           }
+          return prevTurns;
+        });
       } catch (error) {
         console.error('Error parsing message:', error);
       }
@@ -74,34 +87,43 @@ const App: React.FC = () => {
   }, []);
 
   const sendMessage = () => {
-    if (newMessage.trim() !== '' && !isLoading) {
+    if (newMessage.trim() !== '') {
-      setIsLoading(true);
+      setChatTurns((prev) => [
-      setIntermediateMessages([]);
+        ...prev,
-      setFinalAnswer(null);
+        {
-      setMessages((prevMessages) => [...prevMessages, { sender: 'user', text: newMessage }]);
+          question: newMessage,
+          intermediateMessages: [],
+          finalAnswer: null,
+          isLoading: true,
+          showIntermediate: false,
+        },
+      ]);
       const message = [{ role: 'user', content: newMessage }];
       socket?.send(JSON.stringify(message));
       setNewMessage('');
     }
   };
 
+  const toggleShowIntermediate = (idx: number) => {
+    setChatTurns((prev) => prev.map((turn, i) => i === idx ? { ...turn, showIntermediate: !turn.showIntermediate } : turn));
+  };
+
   return (
     <div className="flex flex-col h-screen bg-gray-100">
       <div className="p-4">
         <h1 className="text-3xl font-bold text-center text-gray-800">Simple Chatbot</h1>
       </div>
       <div className="flex-grow overflow-y-auto p-4">
-        {messages.map((msg, index) => (
+        {chatTurns.map((turn, idx) => (
-          <div key={index} className={`p-4 rounded-lg mb-2 ${msg.sender === 'user' ? 'bg-blue-100 text-blue-800' : 'bg-gray-200 text-gray-800'}`}>
+          <React.Fragment key={idx}>
-            {msg.text}
+            {/* User question */}
-          </div>
+            <div className="p-4 rounded-lg mb-2 bg-blue-100 text-blue-800">{turn.question}</div>
-        ))}
+            {/* Status box for this question */}
-        {/* Status box for intermediate steps */}
+            {turn.intermediateMessages.length > 0 && (
-        {intermediateMessages.length > 0 && (
               <div className="mb-4">
                 <div className="bg-blue-50 border border-blue-300 rounded-lg p-3 shadow-sm flex items-center">
                   {/* Spinner icon */}
-              {isLoading && (
+                  {turn.isLoading && (
                     <svg className="animate-spin h-5 w-5 text-blue-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                       <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                       <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
@@ -110,24 +132,34 @@ const App: React.FC = () => {
                   <span className="font-semibold text-blue-700 mr-2">Working on:</span>
                   {/* Key steps summary */}
                   <div className="flex flex-wrap gap-2">
-                {intermediateMessages.map((msg, idx) => (
+                    {turn.intermediateMessages.map((msg, i) => (
-                  <span key={idx} className="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-medium border border-blue-200">
+                      <span key={i} className="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-medium border border-blue-200">
                         {msg.title}
                       </span>
                     ))}
                   </div>
                   <button
-                className="ml-auto text-xs text-blue-600 underline focus:outline-none"
+                    className="ml-auto text-xs text-blue-600 flex items-center gap-1 px-2 py-1 rounded hover:bg-blue-100 focus:outline-none border border-transparent focus:border-blue-300 transition"
-                onClick={() => setShowIntermediate((v) => !v)}
+                    onClick={() => toggleShowIntermediate(idx)}
+                    aria-expanded={turn.showIntermediate}
+                    title={turn.showIntermediate ? 'Hide details' : 'Show details'}
                   >
-                {showIntermediate ? 'Hide details' : 'Show details'}
+                    <svg
+                      className={`w-4 h-4 transition-transform duration-200 ${turn.showIntermediate ? 'rotate-180' : ''}`}
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+                    </svg>
                   </button>
                 </div>
                 {/* Expanded details */}
-            {showIntermediate && (
+                {turn.showIntermediate && (
                   <div className="bg-white border border-blue-200 rounded-b-lg p-3 mt-1 text-xs max-h-64 overflow-y-auto">
-                {intermediateMessages.map((msg, idx) => (
+                    {turn.intermediateMessages.map((msg, i) => (
-                  <div key={idx} className="mb-3">
+                      <div key={i} className="mb-3">
                         <div className="font-bold text-blue-700 mb-1">{msg.title}</div>
                         <pre className="whitespace-pre-wrap break-words text-gray-800">{msg.payload}</pre>
                       </div>
@@ -137,11 +169,12 @@ const App: React.FC = () => {
               </div>
             )}
             {/* Final answer for this question */}
-        {finalAnswer && (
+            {turn.finalAnswer && (
-          <div className="p-4 rounded-lg mb-2 bg-gray-200 text-gray-800 prose max-w-none">
+              <div className="prose p-4 rounded-lg mb-2 bg-gray-200 text-gray-800">
-            <ReactMarkdown>{finalAnswer}</ReactMarkdown>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{turn.finalAnswer}</ReactMarkdown>              </div>
-          </div>
             )}
+          </React.Fragment>
+        ))}
       </div>
       <div className="p-4 border-t border-gray-300">
         <div className="flex">
@@ -150,10 +183,14 @@ const App: React.FC = () => {
             value={newMessage}
             onChange={(e) => setNewMessage(e.target.value)}
             className="flex-grow p-2 border border-gray-300 rounded-lg mr-2"
-            disabled={isLoading}
+            disabled={isJobRunning}
           />
-          <button onClick={sendMessage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg" disabled={isLoading}>
+          <button 
-            {isLoading ? 'Sending...' : 'Send'}
+            onClick={sendMessage} 
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"
+            disabled={isJobRunning}
+          >
+            Send
           </button>
         </div>
       </div>

app/frontend/tailwind.config.js

@@ -6,6 +6,9 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [require("daisyui")],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require("daisyui"),
+  ],
 }