@wealthx/shadcn 1.5.37 → 1.5.38

package/src/components/ui/chat-input-area.tsx

@@ -0,0 +1,244 @@
+import * as React from "react";
+import { ImagePlus, Paperclip, Send } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+/**
+ * ChatInputArea — WealthX Design System
+ *
+ * General-purpose chat input used across any feature that involves
+ * a conversation or messaging interface (Policy AI, Support Agent,
+ * AI Conversations, Website Chat Widget, etc.).
+ *
+ * Features:
+ * - Textarea with auto-resize up to `maxHeight`
+ * - Enter to send / Shift+Enter for new line
+ * - Optional file attachment (Paperclip) — shown only when `onAttachFile` is provided
+ * - Optional image upload (ImagePlus) — shown only when `onAttachImage` is provided
+ * - Focus ring on outer container via `focus-within`
+ * - Fully disabled during streaming / loading states
+ *
+ * @example
+ * <ChatInputArea
+ *   value={inputValue}
+ *   onChange={setInputValue}
+ *   onSend={handleSend}
+ *   onAttachFile={handleFiles}
+ *   onAttachImage={handleImages}
+ *   placeholder="Ask anything…"
+ * />
+ */
+export interface ChatInputAreaProps {
+  /** Controlled text value. */
+  value: string;
+  /** Called on every keystroke. */
+  onChange: (value: string) => void;
+  /**
+   * Called when the user submits (Enter key or Send button click).
+   * Receives the trimmed text. Not called when value is empty or when disabled.
+   */
+  onSend: (value: string) => void;
+  /**
+   * When provided, a Paperclip button appears and this callback is fired
+   * with the selected FileList. Hidden when omitted.
+   */
+  onAttachFile?: (files: FileList) => void;
+  /**
+   * When provided, an ImagePlus button appears and this callback is fired
+   * with the selected image FileList. Hidden when omitted.
+   */
+  onAttachImage?: (files: FileList) => void;
+  /** Disables all controls — use while streaming / waiting for a response. */
+  disabled?: boolean;
+  /** Textarea placeholder text. */
+  placeholder?: string;
+  /**
+   * Hint text rendered below the input box.
+   * Pass `false` to hide it entirely.
+   * Defaults to "Enter to send · Shift+Enter for new line".
+   */
+  hint?: string | false;
+  /**
+   * Maximum textarea height in pixels before scrolling kicks in.
+   * @default 160
+   */
+  maxHeight?: number;
+  /** Focus the textarea on mount. */
+  autoFocus?: boolean;
+  className?: string;
+}
+
+const DEFAULT_HINT = "Enter to send · Shift+Enter for new line";
+
+export function ChatInputArea({
+  value,
+  onChange,
+  onSend,
+  onAttachFile,
+  onAttachImage,
+  disabled = false,
+  placeholder = "Type your message…",
+  hint = DEFAULT_HINT,
+  maxHeight = 160,
+  autoFocus = false,
+  className,
+}: ChatInputAreaProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const imageInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Focus on mount when autoFocus is requested
+  React.useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => textareaRef.current?.focus(), 50);
+    }
+  }, [autoFocus]);
+
+  const handleSend = React.useCallback(() => {
+    const text = value.trim();
+    if (!text || disabled) return;
+    onSend(text);
+    // Reset textarea height after clearing (caller is responsible for clearing value)
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, disabled, onSend]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  const handleTextareaChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange(e.target.value);
+      // Auto-resize
+      const el = e.target;
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    },
+    [onChange, maxHeight],
+  );
+
+  const handleFileChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files?.length) {
+        onAttachFile?.(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [onAttachFile],
+  );
+
+  const handleImageChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files?.length) {
+        onAttachImage?.(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [onAttachImage],
+  );
+
+  const showFileButton = typeof onAttachFile === "function";
+  const showImageButton = typeof onAttachImage === "function";
+
+  return (
+    <div
+      data-slot="chat-input-area"
+      className={cn("flex flex-col gap-1.5", className)}
+    >
+      {/* Unified input box — textarea + action bar share one border */}
+      <div className="border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring">
+        <Textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleTextareaChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={3}
+          className="resize-none text-sm border-0 shadow-none focus-visible:ring-0 px-3 pt-3 pb-1 min-h-[72px]"
+          aria-label={placeholder}
+        />
+
+        {/* Action bar — attachment buttons on the left, Send on the right */}
+        <div className="flex items-center justify-between px-2 pb-2">
+          {/* Left: attachment buttons */}
+          <div className="flex items-center gap-0.5">
+            {showFileButton && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  type="button"
+                  title="Attach file"
+                  aria-label="Attach file"
+                  disabled={disabled}
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <Paperclip className="size-3.5" aria-hidden="true" />
+                </Button>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple
+                  className="sr-only"
+                  tabIndex={-1}
+                  onChange={handleFileChange}
+                />
+              </>
+            )}
+
+            {showImageButton && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  type="button"
+                  title="Upload image"
+                  aria-label="Upload image"
+                  disabled={disabled}
+                  onClick={() => imageInputRef.current?.click()}
+                >
+                  <ImagePlus className="size-3.5" aria-hidden="true" />
+                </Button>
+                <input
+                  ref={imageInputRef}
+                  type="file"
+                  multiple
+                  accept="image/*"
+                  className="sr-only"
+                  tabIndex={-1}
+                  onChange={handleImageChange}
+                />
+              </>
+            )}
+          </div>
+
+          {/* Right: Send */}
+          <Button
+            size="icon-sm"
+            type="button"
+            aria-label="Send message"
+            disabled={!value.trim() || disabled}
+            onClick={handleSend}
+          >
+            <Send className="size-3.5" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Hint text */}
+      {hint !== false && (
+        <p className="text-xs text-muted-foreground">{hint}</p>
+      )}
+    </div>
+  );
+}

package/src/components/ui/page-top-bar.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { Bot } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 /**
@@ -10,6 +12,12 @@ import { cn } from "@/lib/utils";
  *
  * Used by: Loan CRM, Contact, AI Builder, and other data-heavy pages.
  * For an in-page title block with a description, use PageHeader instead.
+ *
+ * Layout:
+ *   [Title]          [page-specific actions…]  [Ask Support]
+ *
+ * "Ask Support" is always pinned to the far right when onAskSupport is
+ * provided — it is never passed through the actions slot.
  */
 
 // ---------------------------------------------------------------------------
@@ -19,8 +27,13 @@ import { cn } from "@/lib/utils";
 export interface PageTopBarProps {
   /** Page title shown on the left */
   title: string;
-  /** Optional action elements rendered to the right */
+  /** Page-specific action elements (buttons, dropdowns, etc.) */
   actions?: React.ReactNode;
+  /**
+   * When provided, renders the "Ask Support" button pinned to the far right,
+   * after all page-specific actions. The handler should open the SupportAgentPanel.
+   */
+  onAskSupport?: () => void;
   className?: string;
 }
 
@@ -28,21 +41,34 @@ export interface PageTopBarProps {
 // Component
 // ---------------------------------------------------------------------------
 
-export function PageTopBar({ title, actions, className }: PageTopBarProps) {
+export function PageTopBar({
+  title,
+  actions,
+  onAskSupport,
+  className,
+}: PageTopBarProps) {
   return (
     <div
       data-slot="page-top-bar"
       className={cn(
         "flex shrink-0 items-center justify-between gap-4",
         "border-b border-border bg-background px-6 py-3",
-        className,
+        className
       )}
     >
       {/* Title */}
       <h1 className="text-lg font-semibold leading-tight">{title}</h1>
 
-      {/* Optional actions */}
-      {actions && <div className="flex items-center gap-2">{actions}</div>}
+      {/* Right side: page actions + Ask Support (always last) */}
+      <div className="flex items-center gap-2">
+        {actions}
+        {onAskSupport && (
+          <Button variant="outline" size="sm" onClick={onAskSupport}>
+            <Bot className="size-3.5" aria-hidden="true" />
+            Ask Support
+          </Button>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,25 @@
+export {
+  SupportContextChip,
+  SupportSuggestedQuestion,
+  SupportStepGuideCard,
+  SupportArticleCard,
+} from "./support-agent-primitives";
+export type {
+  SupportAgentContext,
+  SupportAgentStep,
+  SupportAgentRichContent,
+  SupportContextChipProps,
+  SupportSuggestedQuestionProps,
+  SupportStepGuideCardProps,
+  SupportArticleCardProps,
+} from "./support-agent-primitives";
+
+export { SupportAgentFAB } from "./support-agent-fab";
+export type { SupportAgentFABProps } from "./support-agent-fab";
+
+export { SupportAgentPanel } from "./support-agent-panel";
+export type {
+  SupportAgentMessage,
+  SupportAgentRecentConversation,
+  SupportAgentPanelProps,
+} from "./support-agent-panel";

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>
+  );
+}