From 400e4d98bc9c0a428a45486b21775fd35bb80952 Mon Sep 17 00:00:00 2001
From: Arnav Jaiswal <40910587+ShadowMasterAJ@users.noreply.github.com>
Date: Sun, 13 Apr 2025 19:23:33 -0400
Subject: [PATCH] feat(ChatWidget): add markdown table+code rendering for bot
messages
---
.../src/components/widgets/ChatWidget.jsx | 58 +-
package-lock.json | 1638 ++++++++++++++++-
package.json | 4 +-
3 files changed, 1621 insertions(+), 79 deletions(-)
diff --git a/frontend/src/components/widgets/ChatWidget.jsx b/frontend/src/components/widgets/ChatWidget.jsx
index 7400d9a1d..a546917d7 100644
--- a/frontend/src/components/widgets/ChatWidget.jsx
+++ b/frontend/src/components/widgets/ChatWidget.jsx
@@ -1,8 +1,10 @@
'use client';
import { Bot, Loader2, Send, Settings, User } from 'lucide-react';
+import remarkGfm from 'remark-gfm';
import { useEffect, useMemo, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
@@ -108,7 +110,7 @@ const ChatWidget = ({
- Include specific examples from the dataset when relevant
- Highlight any assumptions or limitations in your analysis
- When answering questions, always reference specific data points to support your conclusions.`;
+ When answering questions, always reference specific data points to support your conclusions and when asked for data, show as markdown table format`;
} catch (error) {
console.error('Error formatting source context:', error);
return null;
@@ -281,9 +283,57 @@ const ChatWidget = ({
: 'bg-muted/50 text-foreground ring-border/50 rounded-tl-sm'
)}
>
-
- {message.content}
-
+ {message.role === 'user' ? (
+
+ {message.content}
+
+ ) : (
+
+
(
+
+ ),
+ thead: (props) => ,
+ tr: (props) => |
,
+ th: (props) => (
+ |
+ ),
+ td: (props) => (
+ |
+ ),
+ code: ({ node, inline, className, children, ...props }) => {
+ return inline ? (
+
+ {children}
+
+ ) : (
+
+
+ {children}
+
+
+ );
+ },
+ }}
+ >
+ {message.content}
+
+