@wealthx/shadcn 1.5.37 → 1.5.39

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

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { HelpCircle, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+/**
+ * SupportAgentFAB — WealthX DS
+ *
+ * Floating action button that opens/closes the Support Agent panel.
+ * Positioned fixed at bottom-right (or bottom-left) of the viewport.
+ *
+ * Features:
+ *   - Nudge badge: red dot shown when the agent has a proactive suggestion
+ *   - Nudge message: small dismissible tooltip bubble above the button
+ *   - Toggles between HelpCircle (closed) and X (open) icon
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface SupportAgentFABProps {
+  /** Whether the support panel is currently open. */
+  isOpen?: boolean;
+  /** Called when the FAB is clicked. */
+  onClick: () => void;
+  /** Show a red nudge dot on the button. */
+  hasNudge?: boolean;
+  /** Short message shown in a bubble above the FAB when hasNudge is true. */
+  nudgeMessage?: string;
+  /** Called when the user dismisses the nudge bubble. */
+  onDismissNudge?: () => void;
+  /** Position of the FAB on the screen. */
+  position?: "bottom-right" | "bottom-left";
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// SupportAgentFAB
+// ---------------------------------------------------------------------------
+
+export function SupportAgentFAB({
+  isOpen = false,
+  onClick,
+  hasNudge = false,
+  nudgeMessage,
+  onDismissNudge,
+  position = "bottom-right",
+  className,
+}: SupportAgentFABProps) {
+  const showBubble = hasNudge && !!nudgeMessage && !isOpen;
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-6 z-50 flex flex-col items-end gap-2",
+        position === "bottom-right" ? "right-6" : "left-6",
+        className
+      )}
+      data-slot="support-agent-fab"
+    >
+      {/* Nudge message bubble */}
+      {showBubble && (
+        <div className="relative flex max-w-[220px] items-start gap-2 border border-border bg-background px-3 py-2 shadow-md">
+          <p className="flex-1 text-xs text-foreground leading-relaxed">
+            {nudgeMessage}
+          </p>
+          {onDismissNudge && (
+            <button
+              type="button"
+              onClick={onDismissNudge}
+              className="mt-0.5 shrink-0 text-muted-foreground hover:text-foreground"
+              aria-label="Dismiss"
+            >
+              <X className="size-3" />
+            </button>
+          )}
+          {/* Bubble tail pointing down */}
+          <span
+            className="absolute -bottom-[5px] right-4 size-2.5 rotate-45 border-b border-r border-border bg-background"
+            aria-hidden="true"
+          />
+        </div>
+      )}
+
+      {/* FAB button */}
+      <div className="relative">
+        <Button
+          type="button"
+          size="icon"
+          onClick={onClick}
+          className="size-12 rounded-full shadow-lg"
+          aria-label={
+            isOpen ? "Close support assistant" : "Open support assistant"
+          }
+          data-state={isOpen ? "open" : "closed"}
+        >
+          {isOpen ? (
+            <X className="size-5" aria-hidden="true" />
+          ) : (
+            <HelpCircle className="size-5" aria-hidden="true" />
+          )}
+        </Button>
+
+        {/* Nudge dot */}
+        {hasNudge && !isOpen && (
+          <span
+            className="absolute -right-0.5 -top-0.5 size-3 rounded-full border-2 border-background bg-destructive"
+            aria-label="New suggestion"
+            role="status"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,498 @@
+import * as React from "react";
+import { Bot, ChevronLeft, ChevronRight, SquarePen, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { ChatInputArea } from "@/components/ui/chat-input-area";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  SupportContextChip,
+  SupportSuggestedQuestion,
+  SupportStepGuideCard,
+  SupportArticleCard,
+} from "./support-agent-primitives";
+import type {
+  SupportAgentContext,
+  SupportAgentRichContent,
+} from "./support-agent-primitives";
+
+/**
+ * SupportAgentPanel — WealthX DS (Organism)
+ *
+ * Right-side slide-over panel providing system guidance to backoffice users.
+ * Answers questions about how to use WealthX, optionally grounded in the
+ * current page and entity context (Rovo pattern).
+ *
+ * Follows Jira Rovo's sidebar chat pattern exactly:
+ *   — Non-blocking: no overlay, main UI remains interactive behind the panel
+ *   — Two header modes: home (bot icon) vs chat (back arrow + conversation title)
+ *   — Context chip: optional page+entity label below header (Rovo: context awareness)
+ *   — Home state: New Chat CTA button + Recents list + Suggested questions
+ *   — Chat state: message thread with optional rich content cards
+ *   — Rich messages: AI responses can embed StepGuideCard or ArticleCard
+ *
+ * Pure display component — all state and API calls are managed by the consumer.
+ * Only local state: textarea value (input) and textarea height (auto-resize).
+ *
+ * Layout — Home state:
+ *   Header  — [Bot icon]  Support Assistant                    [✕]
+ *   Content — [✏ New chat]
+ *             RECENTS
+ *             > Previous conversation title
+ *             View all →
+ *             SUGGESTED
+ *             > Suggested question card
+ *   Footer  — textarea + send
+ *
+ * Layout — Chat state:
+ *   Header  — [←]  Conversation title                         [✕]
+ *   Content — chat thread (bubbles + optional rich cards)
+ *   Footer  — textarea + send
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface SupportAgentMessage {
+  id: string;
+  role: "user" | "assistant";
+  /** Plain text content always shown. */
+  content: string;
+  /**
+   * Optional rich content rendered below the text bubble.
+   * Supported: step-guide | article
+   */
+  richContent?: SupportAgentRichContent;
+  /** True while the assistant response is streaming in. */
+  isStreaming?: boolean;
+  /** True if the message errored. */
+  isErrored?: boolean;
+}
+
+/** A recent conversation entry shown in the home-state Recents list. */
+export interface SupportAgentRecentConversation {
+  id: string;
+  /** Short title (first user message or AI-generated summary). */
+  title: string;
+}
+
+export interface SupportAgentPanelProps {
+  open: boolean;
+  onClose: () => void;
+  /** Chat message history. Empty array = show home state. */
+  messages?: SupportAgentMessage[];
+  /**
+   * Recent conversations shown in the home state Recents list (Rovo pattern).
+   * Clicking an entry fires onOpenConversation(id).
+   */
+  recentConversations?: SupportAgentRecentConversation[];
+  /**
+   * Pre-set help questions shown in the home state (Rovo: conversation starters).
+   * Shown below Recents when provided.
+   */
+  suggestedQuestions?: string[];
+  /**
+   * Title shown in the chat-mode header (replaces bot icon row).
+   * Typically the first user message or an AI-generated session title.
+   * Required for the back-arrow chat header to appear.
+   */
+  conversationTitle?: string;
+  /**
+   * Current backoffice page context — page name and optional entity being viewed.
+   * When provided, renders a SupportContextChip below the panel header so the
+   * AI can ground responses to the user's current location (Rovo pattern).
+   *
+   * Example: { pageLabel: "Loan Applications", entityLabel: "John Smith — #4521" }
+   */
+  context?: SupportAgentContext;
+  /** True while the assistant is generating a response. */
+  isStreaming?: boolean;
+  /** True while initial data is loading — shows full-panel spinner. */
+  isLoading?: boolean;
+  /** Called when the user submits a message. Input is cleared after firing. */
+  onSendMessage?: (text: string) => void;
+  /** Called when the user selects files via the attachment button. */
+  onAttachFile?: (files: FileList) => void;
+  /** Called when the user selects images via the image upload button. */
+  onAttachImage?: (files: FileList) => void;
+  /** Called when the user clicks "New chat" — resets to home state. */
+  onNewChat?: () => void;
+  /**
+   * Called when the user clicks ← in the chat header to return to the home state.
+   * If not provided, no back button is shown.
+   */
+  onBack?: () => void;
+  /** Called when the user clicks a recent conversation entry. */
+  onOpenConversation?: (id: string) => void;
+  /** Called when the user clicks "View all conversations". */
+  onViewAllConversations?: () => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// TypingIndicator — three bouncing dots (same pattern as AiAssistantDrawer)
+// ---------------------------------------------------------------------------
+
+function SupportTypingIndicator() {
+  return (
+    <span
+      className="flex items-center gap-1 py-1"
+      aria-label="Assistant is thinking"
+      role="status"
+    >
+      {[0, 150, 300].map((delay) => (
+        <span
+          key={delay}
+          className="size-1.5 rounded-full bg-current animate-bounce"
+          style={{ animationDelay: `${delay}ms` }}
+          aria-hidden="true"
+        />
+      ))}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MessageBubble — renders a single message with optional rich content
+// ---------------------------------------------------------------------------
+
+interface MessageBubbleProps {
+  message: SupportAgentMessage;
+}
+
+function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.role === "user";
+  const isEmpty = !message.content.trim();
+
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col",
+        isUser ? "items-end" : "items-start",
+      )}
+    >
+      {/* Text bubble */}
+      <div
+        className={cn(
+          "max-w-[88%] px-3 py-2 text-sm",
+          isUser
+            ? "bg-primary text-primary-foreground"
+            : "bg-muted text-foreground",
+          message.isErrored && "bg-destructive/10 text-destructive",
+        )}
+        data-slot="support-message-bubble"
+        data-role={message.role}
+      >
+        {isEmpty && message.isStreaming ? (
+          <SupportTypingIndicator />
+        ) : (
+          <span className="whitespace-pre-wrap break-words leading-relaxed">
+            {message.content}
+          </span>
+        )}
+        {message.isErrored && (
+          <p className="mt-1 text-xs opacity-70">
+            Failed to send. Please try again.
+          </p>
+        )}
+      </div>
+
+      {/* Rich content — only on assistant messages */}
+      {!isUser && message.richContent && (
+        <div className="w-full max-w-[88%]">
+          <RichContentRenderer richContent={message.richContent} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RichContentRenderer — picks the right card for richContent.type
+// ---------------------------------------------------------------------------
+
+interface RichContentRendererProps {
+  richContent: SupportAgentRichContent;
+}
+
+function RichContentRenderer({ richContent }: RichContentRendererProps) {
+  if (richContent.type === "step-guide") {
+    return (
+      <SupportStepGuideCard
+        title={richContent.title}
+        steps={richContent.steps}
+      />
+    );
+  }
+
+  if (richContent.type === "article") {
+    return (
+      <SupportArticleCard
+        title={richContent.title}
+        excerpt={richContent.excerpt}
+        href={richContent.href}
+        isExternal={richContent.isExternal}
+      />
+    );
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// SupportAgentPanel
+// ---------------------------------------------------------------------------
+
+export function SupportAgentPanel({
+  open,
+  onClose,
+  messages = [],
+  recentConversations,
+  suggestedQuestions = [],
+  conversationTitle,
+  context,
+  isStreaming = false,
+  isLoading = false,
+  onSendMessage,
+  onAttachFile,
+  onAttachImage,
+  onNewChat,
+  onBack,
+  onOpenConversation,
+  onViewAllConversations,
+  className,
+}: SupportAgentPanelProps) {
+  const [inputValue, setInputValue] = React.useState("");
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+
+  const hasMessages = messages.length > 0;
+
+  // Chat header mode: has messages AND a conversation title
+  const isChatMode = hasMessages && !!conversationTitle;
+
+  // Auto-scroll to latest message
+  React.useEffect(() => {
+    if (!messagesEndRef.current) return;
+    messagesEndRef.current.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }, [messages.length]);
+
+  const handleSend = React.useCallback(
+    (text: string) => {
+      onSendMessage?.(text);
+      setInputValue("");
+    },
+    [onSendMessage],
+  );
+
+  const handleQuestionSelect = React.useCallback(
+    (question: string) => {
+      onSendMessage?.(question);
+    },
+    [onSendMessage],
+  );
+
+  const hasRecents = !!recentConversations?.length;
+
+  return (
+    <Sheet open={open} onOpenChange={(o) => !o && onClose()}>
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className={cn(
+          "flex w-[400px] max-w-full flex-col gap-0 p-0",
+          className,
+        )}
+        data-slot="support-agent-panel"
+      >
+        {/* ── Header ── */}
+        <div className="shrink-0 border-b border-border px-3 py-2.5">
+          {isChatMode ? (
+            /* Chat mode: [←]  Conversation title  [✕] */
+            <div className="flex items-center gap-1">
+              {onBack && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 shrink-0"
+                  onClick={onBack}
+                  title="Back to conversations"
+                >
+                  <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">
+                {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>
+            </div>
+          ) : (
+            /* Home mode: [Bot icon]  Support Assistant  [✕] */
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2.5">
+                <span className="flex size-7 shrink-0 items-center justify-center rounded-full border border-primary/40 bg-primary/10">
+                  <Bot
+                    className="size-3.5 text-foreground"
+                    aria-hidden="true"
+                  />
+                </span>
+                <span className="text-sm font-semibold text-foreground">
+                  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>
+            </div>
+          )}
+          {/* Context chip — shown below header title in both modes */}
+          {context && (
+            <div className="mt-2">
+              <SupportContextChip context={context} />
+            </div>
+          )}
+        </div>
+
+        {/* ── Content ── */}
+        <div className="flex flex-1 flex-col overflow-y-auto">
+          {isLoading ? (
+            /* Loading state */
+            <div className="flex flex-1 items-center justify-center py-20">
+              <div className="flex flex-col items-center gap-3">
+                <Spinner size="lg" className="text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">Loading…</p>
+              </div>
+            </div>
+          ) : !hasMessages ? (
+            /* Home state — Rovo pattern: New Chat CTA + Recents + Suggested */
+            <div className="flex flex-col gap-5 p-4">
+              {/* New Chat — prominent CTA button */}
+              {onNewChat && (
+                <Button
+                  variant="outline"
+                  className="w-full justify-start gap-2 text-sm font-medium"
+                  onClick={onNewChat}
+                  disabled={isLoading}
+                >
+                  <SquarePen className="size-3.5" aria-hidden="true" />
+                  New chat
+                </Button>
+              )}
+
+              {/* Recents — previous 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
+                        key={conv.id}
+                        type="button"
+                        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>
+                    ))}
+                  </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>
+                  )}
+                </div>
+              )}
+
+              {/* Suggested — conversation starters */}
+              {suggestedQuestions.length > 0 && (
+                <div className="flex flex-col gap-1.5">
+                  <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    Suggested
+                  </p>
+                  <div className="flex flex-col gap-1.5">
+                    {suggestedQuestions.map((q) => (
+                      <SupportSuggestedQuestion
+                        key={q}
+                        question={q}
+                        onSelect={handleQuestionSelect}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Fallback — nothing to show */}
+              {!onNewChat && !hasRecents && !suggestedQuestions.length && (
+                <p className="text-sm text-muted-foreground">
+                  How can I help you today?
+                </p>
+              )}
+            </div>
+          ) : (
+            /* Chat thread */
+            <div className="flex flex-col gap-3 p-4">
+              {messages.map((msg) => (
+                <MessageBubble key={msg.id} message={msg} />
+              ))}
+              {/* Streaming indicator — shown when last message is from the user */}
+              {isStreaming &&
+                messages[messages.length - 1]?.role === "user" && (
+                  <div className="flex justify-start">
+                    <div className="bg-muted px-3 py-2 text-muted-foreground">
+                      <SupportTypingIndicator />
+                    </div>
+                  </div>
+                )}
+              <div ref={messagesEndRef} aria-hidden="true" />
+            </div>
+          )}
+        </div>
+
+        {/* ── Footer ── */}
+        <div className="shrink-0 border-t border-border p-3">
+          <ChatInputArea
+            value={inputValue}
+            onChange={setInputValue}
+            onSend={handleSend}
+            onAttachFile={onAttachFile}
+            onAttachImage={onAttachImage}
+            disabled={isLoading || isStreaming}
+            placeholder="Ask anything…"
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}