Improve UI: Add table support (GFM), professional CSS styling, and refine AI output formatting

frontend/package.json

@@ -12,7 +12,9 @@
         "lucide-react": "^0.395.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-markdown": "^9.0.1"
+        "react-markdown": "^9.0.1",
+        "remark-gfm": "^4.0.0",
+        "rehype-raw": "^7.0.0"
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^4.3.1",

frontend/src/App.jsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 import { Send, User, Bot, Loader2 } from 'lucide-react';
 
 const App = () => {
@@ -124,7 +126,12 @@ const App = () => {
                     <span></span>
                   </div>
                 ) : (
-                  <ReactMarkdown>{msg.content}</ReactMarkdown>
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
+                  >
+                    {msg.content}
+                  </ReactMarkdown>
                 )}
               </div>
             </div>

frontend/src/index.css

@@ -233,6 +233,41 @@ pre {
   margin: 1rem 0;
 }
 
+/* Table styling */
+.assistant .message-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  font-size: 0.9rem;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+}
+
+.assistant .message-bubble th {
+  background-color: #f8f9fa;
+  color: var(--primary);
+  font-weight: 600;
+  text-align: left;
+  padding: 0.75rem;
+  border-bottom: 2px solid var(--border-color);
+}
+
+.assistant .message-bubble td {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  line-height: 1.4;
+}
+
+.assistant .message-bubble tr:last-child td {
+  border-bottom: none;
+}
+
+.assistant .message-bubble tr:hover {
+  background-color: #fff9f9;
+}
+
 /* Typing Indicator Animation */
 .typing-indicator {
   display: flex;

llm.py

@@ -30,6 +30,9 @@ Rules:
 - If you still don't know, suggest visiting a UBA branch or calling the official help line.
 - Use proper formatting (paragraphs, bullet points) for readability.
 - Maintain a helpful and polite tone.
+- When comparing products or listing details, use standard Markdown tables.
+- Use subheadings and bullet points for structured information.
+- Avoid cluttered text; ensure there is adequate whitespace.
 """
 
 async def get_streaming_response(messages: List[Dict[str, str]]) -> AsyncGenerator[str, None]: