@wealthx/shadcn 1.5.39 → 1.5.41

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">
@@ -240,6 +284,54 @@ function RichContentRenderer({ richContent }: RichContentRendererProps) {
   return null;
 }
 
+// ---------------------------------------------------------------------------
+// Local sub-components
+// ---------------------------------------------------------------------------
+
+/** Reusable close button — consistent across all panel header variants. */
+function CloseButton({ onClick }: { onClick: () => void }) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="size-7 shrink-0"
+      onClick={onClick}
+      title="Close"
+    >
+      <X className="size-3.5" />
+      <span className="sr-only">Close</span>
+    </Button>
+  );
+}
+
+/** Single conversation row — used in both home recents and all-conversations list. */
+function ConversationRow({
+  conv,
+  onClick,
+  className,
+}: {
+  conv: SupportAgentRecentConversation;
+  onClick: () => void;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center justify-between gap-2 text-left text-sm text-foreground hover:bg-muted/50",
+        className,
+      )}
+    >
+      <span className="flex-1 truncate">{conv.title}</span>
+      <ChevronRight
+        className="size-3.5 shrink-0 text-muted-foreground"
+        aria-hidden="true"
+      />
+    </button>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // SupportAgentPanel
 // ---------------------------------------------------------------------------
@@ -264,6 +356,7 @@ export function SupportAgentPanel({
   className,
 }: SupportAgentPanelProps) {
   const [inputValue, setInputValue] = React.useState("");
+  const [showAllConversations, setShowAllConversations] = React.useState(false);
   const messagesEndRef = React.useRef<HTMLDivElement>(null);
 
   const hasMessages = messages.length > 0;
@@ -271,6 +364,11 @@ export function SupportAgentPanel({
   // Chat header mode: has messages AND a conversation title
   const isChatMode = hasMessages && !!conversationTitle;
 
+  // Reset "all conversations" view when panel closes
+  React.useEffect(() => {
+    if (!open) setShowAllConversations(false);
+  }, [open]);
+
   // Auto-scroll to latest message
   React.useEffect(() => {
     if (!messagesEndRef.current) return;
@@ -296,6 +394,16 @@ export function SupportAgentPanel({
   );
 
   const hasRecents = !!recentConversations?.length;
+  // Home state shows only the 3 most recent; "View all" expands to the full list.
+  const recentsPreview = React.useMemo(
+    () => recentConversations?.slice(0, 3) ?? [],
+    [recentConversations],
+  );
+
+  const handleViewAll = React.useCallback(() => {
+    setShowAllConversations(true);
+    onViewAllConversations?.(); // optional analytics callback
+  }, [onViewAllConversations]);
 
   return (
     <Sheet open={open} onOpenChange={(o) => !o && onClose()}>
@@ -310,7 +418,25 @@ export function SupportAgentPanel({
       >
         {/* ── Header ── */}
         <div className="shrink-0 border-b border-border px-3 py-2.5">
-          {isChatMode ? (
+          {showAllConversations ? (
+            /* All-conversations mode: [←]  All conversations  [✕] */
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7 shrink-0"
+                onClick={() => setShowAllConversations(false)}
+                title="Back"
+              >
+                <ChevronLeft className="size-3.5" />
+                <span className="sr-only">Back</span>
+              </Button>
+              <span className="flex-1 truncate px-1 text-sm font-medium text-foreground">
+                All conversations
+              </span>
+              <CloseButton onClick={onClose} />
+            </div>
+          ) : isChatMode ? (
             /* Chat mode: [←]  Conversation title  [✕] */
             <div className="flex items-center gap-1">
               {onBack && (
@@ -328,16 +454,7 @@ export function SupportAgentPanel({
               <span className="flex-1 truncate px-1 text-sm font-medium text-foreground">
                 {conversationTitle}
               </span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-7 shrink-0"
-                onClick={onClose}
-                title="Close"
-              >
-                <X className="size-3.5" />
-                <span className="sr-only">Close</span>
-              </Button>
+              <CloseButton onClick={onClose} />
             </div>
           ) : (
             /* Home mode: [Bot icon]  Support Assistant  [✕] */
@@ -353,20 +470,11 @@ export function SupportAgentPanel({
                   Support Assistant
                 </span>
               </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-7"
-                onClick={onClose}
-                title="Close"
-              >
-                <X className="size-3.5" />
-                <span className="sr-only">Close</span>
-              </Button>
+              <CloseButton onClick={onClose} />
             </div>
           )}
-          {/* Context chip — shown below header title in both modes */}
-          {context && (
+          {/* Context chip — shown below header title in home and chat modes only */}
+          {context && !showAllConversations && (
             <div className="mt-2">
               <SupportContextChip context={context} />
             </div>
@@ -383,6 +491,27 @@ export function SupportAgentPanel({
                 <p className="text-sm text-muted-foreground">Loading…</p>
               </div>
             </div>
+          ) : showAllConversations ? (
+            /* All conversations — full scrollable list (Jira Rovo pattern) */
+            <div className="flex flex-col">
+              {recentConversations?.length ? (
+                recentConversations.map((conv) => (
+                  <ConversationRow
+                    key={conv.id}
+                    conv={conv}
+                    onClick={() => {
+                      setShowAllConversations(false);
+                      onOpenConversation?.(conv.id);
+                    }}
+                    className="border-b border-border px-4 py-3"
+                  />
+                ))
+              ) : (
+                <p className="p-4 text-sm text-muted-foreground">
+                  No conversations yet.
+                </p>
+              )}
+            </div>
           ) : !hasMessages ? (
             /* Home state — Rovo pattern: New Chat CTA + Recents + Suggested */
             <div className="flex flex-col gap-5 p-4">
@@ -399,39 +528,31 @@ export function SupportAgentPanel({
                 </Button>
               )}
 
-              {/* Recents — previous conversations */}
+              {/* Recents — 3 most recent conversations */}
               {hasRecents && (
                 <div className="flex flex-col gap-1">
                   <p className="px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                     Recents
                   </p>
                   <div className="flex flex-col">
-                    {recentConversations!.map((conv) => (
-                      <button
+                    {recentsPreview.map((conv) => (
+                      <ConversationRow
                         key={conv.id}
-                        type="button"
+                        conv={conv}
                         onClick={() => onOpenConversation?.(conv.id)}
-                        className="flex w-full items-center justify-between gap-2 px-1 py-2.5 text-left text-sm text-foreground hover:bg-muted/50"
-                      >
-                        <span className="flex-1 truncate">{conv.title}</span>
-                        <ChevronRight
-                          className="size-3.5 shrink-0 text-muted-foreground"
-                          aria-hidden="true"
-                        />
-                      </button>
+                        className="px-1 py-2.5"
+                      />
                     ))}
                   </div>
-                  {onViewAllConversations && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={onViewAllConversations}
-                      className="h-auto w-fit gap-0.5 px-1 py-1 text-xs text-muted-foreground hover:bg-transparent hover:text-foreground"
-                    >
-                      View all conversations
-                      <ChevronRight className="size-3.5" aria-hidden="true" />
-                    </Button>
-                  )}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleViewAll}
+                    className="h-auto w-fit gap-0.5 px-1 py-1 text-xs text-muted-foreground hover:bg-transparent hover:text-foreground"
+                  >
+                    View all conversations
+                    <ChevronRight className="size-3.5" aria-hidden="true" />
+                  </Button>
                 </div>
               )}
 
@@ -490,6 +611,7 @@ export function SupportAgentPanel({
             onAttachImage={onAttachImage}
             disabled={isLoading || isStreaming}
             placeholder="Ask anything…"
+            showMarkdownToolbar
           />
         </div>
       </SheetContent>