@wealthx/shadcn 1.5.40 → 1.5.42

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

@@ -136,6 +136,17 @@ export interface SupportAgentPanelProps {
   onOpenConversation?: (id: string) => void;
   /** Called when the user clicks "View all conversations". */
   onViewAllConversations?: () => void;
+  /**
+   * Pagination for the all-conversations list. When true, a "Load more" control is
+   * shown at the bottom of the all-conversations view; clicking it fires
+   * {@link onLoadMoreConversations}. The consumer appends the next page to
+   * `recentConversations`.
+   */
+  hasMoreConversations?: boolean;
+  /** Called when the user requests the next page in the all-conversations view. */
+  onLoadMoreConversations?: () => void;
+  /** True while the next page is loading — shows a spinner on the "Load more" control. */
+  isLoadingMoreConversations?: boolean;
   className?: string;
 }
 
@@ -284,6 +295,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
 // ---------------------------------------------------------------------------
@@ -305,9 +364,13 @@ export function SupportAgentPanel({
   onBack,
   onOpenConversation,
   onViewAllConversations,
+  hasMoreConversations = false,
+  onLoadMoreConversations,
+  isLoadingMoreConversations = false,
   className,
 }: SupportAgentPanelProps) {
   const [inputValue, setInputValue] = React.useState("");
+  const [showAllConversations, setShowAllConversations] = React.useState(false);
   const messagesEndRef = React.useRef<HTMLDivElement>(null);
 
   const hasMessages = messages.length > 0;
@@ -315,6 +378,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;
@@ -340,6 +408,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()}>
@@ -354,7 +432,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 && (
@@ -372,16 +468,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  [✕] */
@@ -397,20 +484,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>
@@ -427,6 +505,42 @@ 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"
+                    />
+                  ))}
+                  {hasMoreConversations && (
+                    <div className="border-t border-border p-3">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="w-full"
+                        disabled={isLoadingMoreConversations}
+                        onClick={onLoadMoreConversations}
+                      >
+                        {isLoadingMoreConversations ? "Loading..." : "Load more"}
+                      </Button>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <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">
@@ -443,39 +557,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>
               )}
 
@@ -534,6 +640,7 @@ export function SupportAgentPanel({
             onAttachImage={onAttachImage}
             disabled={isLoading || isStreaming}
             placeholder="Ask anything…"
+            showMarkdownToolbar
           />
         </div>
       </SheetContent>