feat: #637 Live updates supports markdown (#684)

Author: jakubduda-dsai

packages/ragbits-chat/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Live updates support markdown (#684)
 - Added custom styling for multiline and inline-code (#668)
 - Changed toggling darkmode for tailwind class selector (#668)
 - Loading indicator, delayed message buttons, integrated abort controller (#641)
@@ -140,7 +141,6 @@
 
 ## 0.9.0 (2025-02-25)
 
-
 ### Changed
 
 - ragbits-core updated to version v0.9.0
@@ -162,4 +162,3 @@
 
 - Initial release of the package (#271).
 - Added last message recontextualization (#271).
-

packages/ragbits-chat/src/ragbits/chat/ui-build/assets/FeedbackForm-B2jE9w2w.js renamed to packages/ragbits-chat/src/ragbits/chat/ui-build/assets/FeedbackForm-CNnmBvHx.js

@@ -0,0 +1 @@
+import{aE as a,aF as e,aG as t}from"./index-fG0lDAUt.js";const n={renderer:t,...e,...a};var o=n;export{o as default};

packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-BpIqU8OV.js

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/assets/ragbits-9U4hpuUb.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ragbits</title>
-    <script type="module" crossorigin src="/assets/index-uZ3FrnOp.js"></script>
+    <script type="module" crossorigin src="/assets/index-fG0lDAUt.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Sq7Wkmt7.css">
   </head>
 

packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-uZ3FrnOp.js renamed to packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-fG0lDAUt.js

@@ -16,6 +16,7 @@ export type ChatMessageProps = {
     wrapper?: string;
     innerWrapper?: string;
     content?: string;
+    liveUpdates?: string;
   };
   chatMessage: ChatMessageType;
   isLoading: boolean;
@@ -88,14 +89,17 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
                   <LiveUpdates
                     isLoading={isLoading}
                     liveUpdates={liveUpdates}
+                    classNames={{ liveUpdates: classNames?.liveUpdates }}
                   />
                   {isLoading && !liveUpdates && (
                     <>
                       <Icon
                         icon="heroicons:arrow-path"
                         className="animate-spin"
                       />
-                      <span>Thinking...</span>
+                      <span>
+                        {content.length > 0 ? "Generating..." : "Thinking..."}
+                      </span>
                     </>
                   )}
                 </div>

packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-usobDMOl.js

@@ -1,18 +1,25 @@
 import { useCallback, useState } from "react";
-import { ChatMessage } from "../../types/history";
-import { motion } from "framer-motion";
 import { Icon } from "@iconify/react";
 import { Button, cn } from "@heroui/react";
+import { motion } from "framer-motion";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { ChatMessage } from "../../types/history";
 import ShimmerText from "./ShimmerText";
 
 interface LiveUpdatesProps {
   isLoading: boolean;
   liveUpdates: ChatMessage["liveUpdates"];
+  classNames?: {
+    liveUpdates?: string;
+  };
 }
 
 export default function LiveUpdates({
   isLoading,
   liveUpdates,
+  classNames,
 }: LiveUpdatesProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const updates = liveUpdates ? Array.from(liveUpdates.values()) : null;
@@ -55,9 +62,15 @@ export default function LiveUpdates({
               style={{ pointerEvents: isExpanded ? "auto" : "none" }}
             >
               <div className="text-default-500">{update.label}</div>
-              <div className="text-sm text-default-400">
+              <Markdown
+                className={cn(
+                  "markdown-container prose max-w-full text-sm text-default-400 dark:prose-invert",
+                  classNames?.liveUpdates,
+                )}
+                remarkPlugins={[remarkGfm]}
+              >
                 {update.description}
-              </div>
+              </Markdown>
             </motion.div>
           ))}
         </div>
@@ -68,14 +81,28 @@ export default function LiveUpdates({
           {isLoading ? (
             <ShimmerText duration={shimmerDuration}>
               <div>{lastUpdate.label}</div>
-              <div className="text-sm">{lastUpdate.description}</div>
+              <Markdown
+                className={cn(
+                  "markdown-container prose max-w-full text-sm text-transparent dark:prose-invert",
+                  classNames?.liveUpdates,
+                )}
+                remarkPlugins={[remarkGfm]}
+              >
+                {lastUpdate.description}
+              </Markdown>
             </ShimmerText>
           ) : (
             <>
               <div className="text-default-500">{lastUpdate.label}</div>
-              <div className="text-sm text-default-400">
+              <Markdown
+                className={cn(
+                  "markdown-container prose max-w-full text-sm text-default-400 dark:prose-invert",
+                  classNames?.liveUpdates,
+                )}
+                remarkPlugins={[remarkGfm]}
+              >
                 {lastUpdate.description}
-              </div>
+              </Markdown>
             </>
           )}
         </div>

packages/ragbits-chat/src/ragbits/chat/ui-build/index.html

@@ -1,3 +1,8 @@
+/**
+ * Note: Children components should have `text-transparent` class applied for
+ * the shimmer effect to be displayed correctly.
+ */
+
 import { cn } from "@heroui/react";
 import { motion } from "framer-motion";
 import { PropsWithChildren } from "react";