@wealthx/shadcn 1.5.39 → 1.5.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.39",
+  "version": "1.5.40",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/support-agent/support-agent-panel.tsx

@@ -1,4 +1,7 @@
 import * as React from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import { Bot, ChevronLeft, ChevronRight, SquarePen, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
@@ -66,6 +69,12 @@ export interface SupportAgentMessage {
   richContent?: SupportAgentRichContent;
   /** True while the assistant response is streaming in. */
   isStreaming?: boolean;
+  /**
+   * Status text shown beside the animated dots while the response streams
+   * (e.g. "Checking the help center"). Rendered only while the bubble is empty
+   * and streaming. The trailing "…" animates on its own — do not include dots here.
+   */
+  streamingLabel?: string;
   /** True if the message errored. */
   isErrored?: boolean;
 }
@@ -153,6 +162,28 @@ function SupportTypingIndicator() {
   );
 }
 
+// ---------------------------------------------------------------------------
+// StreamingStatus — optional status label with an animated "…" ellipsis
+// (e.g. "Checking the help center" + animated dots), shown while streaming.
+// ---------------------------------------------------------------------------
+
+function StreamingStatus({ label }: { label?: string }) {
+  // No label → the standard DS typing indicator (3 bouncing dots).
+  if (!label) return <SupportTypingIndicator />;
+
+  // With label → status text + the same DS typing dots: "Checking the help center • • •"
+  return (
+    <span
+      className="flex items-center gap-1.5 text-sm text-muted-foreground"
+      role="status"
+      aria-label={`${label}…`}
+    >
+      <span>{label}</span>
+      <SupportTypingIndicator />
+    </span>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // MessageBubble — renders a single message with optional rich content
 // ---------------------------------------------------------------------------
@@ -185,11 +216,24 @@ function MessageBubble({ message }: MessageBubbleProps) {
         data-role={message.role}
       >
         {isEmpty && message.isStreaming ? (
-          <SupportTypingIndicator />
-        ) : (
+          <StreamingStatus label={message.streamingLabel} />
+        ) : isUser ? (
           <span className="whitespace-pre-wrap break-words leading-relaxed">
             {message.content}
           </span>
+        ) : (
+          <div className="break-words text-sm leading-relaxed [&_a]:text-primary [&_a]:underline [&_p]:m-0 [&_p:not(:last-child)]:mb-2 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-0.5">
+            <ReactMarkdown
+              rehypePlugins={[rehypeRaw, [rehypeSanitize, defaultSchema]]}
+              components={{
+                a: ({ node, ...props }) => (
+                  <a {...props} target="_blank" rel="noopener noreferrer" />
+                ),
+              }}
+            >
+              {message.content}
+            </ReactMarkdown>
+          </div>
         )}
         {message.isErrored && (
           <p className="mt-1 text-xs opacity-70">