updated templates

Author: marketcalls

client/app.py

@@ -241,6 +241,13 @@ async def get_mcp_client(client_id: str):
 - Respond in human-like conversational, friendly, and professional tone in concise manner.
 - When market data is requested, always present it in a clean, easy-to-read format.
 - For numerical values like prices and quantities, always display them with appropriate units.
+- IMPORTANT: When displaying tables of data (orders, positions, etc.), format them using markdown tables with clear headers and aligned columns. For example:
+
+```
+| Order ID | Symbol | Action | Quantity | Price | Status |
+|----------|--------|--------|----------|-------|--------|
+| 12345678 | RELIANCE | BUY | 10 | 1426.5 | complete |
+```
 - Help users construct proper symbol formats based on OpenAlgo's standardized conventions.
 
 # Responsibilities:

client/static/script.js

@@ -442,7 +442,55 @@ class TradingAssistant {
 
     parseMarkdown(content) {
         if (typeof marked !== 'undefined') {
-            return marked.parse(content);
+            // Configure marked for better table rendering
+            marked.setOptions({
+                gfm: true,  // GitHub Flavored Markdown
+                breaks: true,
+                tables: true,
+                headerIds: false
+            });
+            
+            // Process table-specific content for better formatting
+            let processedContent = content;
+            
+            // Fix malformed tables from GROQ responses
+            // Check for table-like content and ensure proper formatting
+            if (content.includes('|') && !content.includes('```')) {
+                const lines = content.split('\n');
+                const tableLines = [];
+                let inTable = false;
+                
+                for (let i = 0; i < lines.length; i++) {
+                    const line = lines[i].trim();
+                    if (line.startsWith('|') && line.endsWith('|')) {
+                        if (!inTable) {
+                            inTable = true;
+                            // If this is first line of table and next line isn't a separator, add one
+                            if (i + 1 < lines.length) {
+                                const nextLine = lines[i + 1].trim();
+                                if (!nextLine.includes('---') && !nextLine.includes('===')) {
+                                    // Count columns and create separator
+                                    const colCount = (line.match(/\|/g) || []).length - 1;
+                                    tableLines.push(line);
+                                    tableLines.push('|' + Array(colCount).fill(' --- |').join(''));
+                                    continue;
+                                }
+                            }
+                        }
+                        tableLines.push(line);
+                    } else if (inTable && line.includes('|')) {
+                        // Handle malformed table rows that don't start/end with |
+                        tableLines.push('|' + line + (line.endsWith('|') ? '' : '|'));
+                    } else if (line === '' && inTable) {
+                        inTable = false;
+                    } else {
+                        tableLines.push(line);
+                    }
+                }
+                processedContent = tableLines.join('\n');
+            }
+            
+            return marked.parse(processedContent);
         }
         return this.escapeHtml(content).replace(/\n/g, '<br>');
     }

client/static/style.css

@@ -424,6 +424,68 @@
 }
 
 /* Print Styles */
+/* Enhanced Table Styles for Chat Messages */
+.chat-bubble table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 10px 0;
+    font-size: 0.9em;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.chat-bubble th {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: var(--color-text-bright);
+    font-weight: 600;
+    text-align: left;
+    padding: 8px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.chat-bubble td {
+    padding: 8px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Removed redundant border-bottom rule */
+
+.chat-bubble tr:nth-child(even) {
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+.chat-bubble tr:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Fixed width columns for specific data types */
+.chat-bubble table th:nth-child(1), 
+.chat-bubble table td:nth-child(1) {
+    min-width: 100px;
+}
+
+.chat-bubble table th:nth-child(3), 
+.chat-bubble table td:nth-child(3),
+.chat-bubble table th:nth-child(4), 
+.chat-bubble table td:nth-child(4) {
+    text-align: center;
+}
+
+/* Responsive tables */
+@media (max-width: 768px) {
+    .chat-bubble table {
+        font-size: 0.8em;
+    }
+    
+    .chat-bubble th, 
+    .chat-bubble td {
+        padding: 6px 8px;
+    }
+}
+
 @media print {
     .sidebar-modern,
     .navbar-modern,