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,130 +18,163 @@ interface ChatTurn {
 }
 
 const App: React.FC = () => {
-  const [messages, setMessages] = useState<Message[]>([]);
-  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 [chatTurns, setChatTurns] = useState<ChatTurn[]>([]);
   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`);
-        setSocket(ws);
-        ws.onopen = () => {
-            console.log('WebSocket connection opened');
-        };
-        ws.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data);
-                if (data.type === 'message' && data.payload && mounted.current) {
-                    // legacy support, treat as final
-                    setMessages((prevMessages) => {
-                        const lastMessage = prevMessages[prevMessages.length - 1];
-                        if (lastMessage && lastMessage.sender === 'bot') {
-                            return [...prevMessages.slice(0, -1), { ...lastMessage, text: lastMessage.text + data.payload }];
-                        } else {
-                            return [...prevMessages, { sender: 'bot', text: data.payload }];
-                        }
-                    });
-                    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);
-                } else if (data.type === 'done') {
-                    setIsLoading(false);
-                } else {
-                    console.error('Unexpected message format:', data);
-                }
-            } catch (error) {
-                console.error('Error parsing message:', error);
-            }
-        };
-        ws.onclose = () => {
-            console.log('WebSocket connection closed');
-        };
-        ws.onerror = (error) => {
-            console.error('WebSocket error:', error);
-        };
-        return () => {
-            mounted.current = false;
-            ws.close();
-        };
-    }, []);
+    mounted.current = true;
+    const ws = new WebSocket(`ws://${BASE_DOMAIN_NAME_PORT}/ws`);
+    setSocket(ws);
+    ws.onopen = () => {
+      console.log('WebSocket connection opened');
+    };
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        setChatTurns((prevTurns) => {
+          if (prevTurns.length === 0) return prevTurns;
+          const lastTurn = prevTurns[prevTurns.length - 1];
+          if (data.type === 'intermediate') {
+            // Add intermediate message to the last turn
+            const updatedTurn = {
+              ...lastTurn,
+              intermediateMessages: [...lastTurn.intermediateMessages, { title: data.title, payload: data.payload }],
+            };
+            return [...prevTurns.slice(0, -1), updatedTurn];
+          } else if (data.type === 'final') {
+            // Set final answer for the last turn
+            const updatedTurn = {
+              ...lastTurn,
+              finalAnswer: data.payload,
+            };
+            return [...prevTurns.slice(0, -1), updatedTurn];
+          } else if (data.type === 'done') {
+            // Mark last turn as not loading
+            const updatedTurn = {
+              ...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);
+      }
+    };
+    ws.onclose = () => {
+      console.log('WebSocket connection closed');
+    };
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+    return () => {
+      mounted.current = false;
+      ws.close();
+    };
+  }, []);
 
   const sendMessage = () => {
-    if (newMessage.trim() !== '' && !isLoading) {
-      setIsLoading(true);
-      setIntermediateMessages([]);
-      setFinalAnswer(null);
-      setMessages((prevMessages) => [...prevMessages, { sender: 'user', text: newMessage }]);
+    if (newMessage.trim() !== '') {
+      setChatTurns((prev) => [
+        ...prev,
+        {
+          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) => (
-          <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'}`}>
-            {msg.text}
-          </div>
-        ))}
-        {/* Status box for intermediate steps */}
-        {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 && (
-                <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>
-                </svg>
-              )}
-              <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) => (
-                  <span key={idx} 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"
-                onClick={() => setShowIntermediate((v) => !v)}
-              >
-                {showIntermediate ? 'Hide details' : 'Show details'}
-              </button>
-            </div>
-            {/* Expanded details */}
-            {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) => (
-                  <div key={idx} 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>
+        {chatTurns.map((turn, idx) => (
+          <React.Fragment key={idx}>
+            {/* User question */}
+            <div className="p-4 rounded-lg mb-2 bg-blue-100 text-blue-800">{turn.question}</div>
+            {/* Status box for this question */}
+            {turn.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 */}
+                  {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>
+                    </svg>
+                  )}
+                  <span className="font-semibold text-blue-700 mr-2">Working on:</span>
+                  {/* Key steps summary */}
+                  <div className="flex flex-wrap gap-2">
+                    {turn.intermediateMessages.map((msg, i) => (
+                      <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 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={() => toggleShowIntermediate(idx)}
+                    aria-expanded={turn.showIntermediate}
+                    title={turn.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 */}
+                {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">
+                    {turn.intermediateMessages.map((msg, i) => (
+                      <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>
+                    ))}
+                  </div>
+                )}
               </div>
             )}
-          </div>
-        )}
-        {/* Final answer for this question */}
-        {finalAnswer && (
-          <div className="p-4 rounded-lg mb-2 bg-gray-200 text-gray-800 prose max-w-none">
-            <ReactMarkdown>{finalAnswer}</ReactMarkdown>
-          </div>
-        )}
+            {/* Final answer for this question */}
+            {turn.finalAnswer && (
+              <div className="prose p-4 rounded-lg mb-2 bg-gray-200 text-gray-800">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{turn.finalAnswer}</ReactMarkdown>              </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}>
-            {isLoading ? 'Sending...' : 'Send'}
+          <button 
+            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"),
+  ],
 }