@wealthx/shadcn 1.5.37 → 1.5.39

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/policy-ai/index.tsx

@@ -0,0 +1,41 @@
+// Policy AI — domain barrel
+// Exports all components, hooks, and types for the Policy AI response UI.
+
+export {
+  PolicyQueryChip,
+  PolicyVerdictBadge,
+  PolicyCitationPanel,
+} from "./policy-ai-primitives";
+
+export type {
+  PolicyType,
+  PolicyQueryType,
+  PolicyVerdict,
+  PolicyQueryContext,
+  PolicyCitationItem,
+  PolicyBankVerdict,
+  PolicyRankedBankItem,
+  PolicyResponseContent,
+  PolicyConversationItem,
+  PolicyAIMessage,
+  PolicyQueryChipProps,
+  PolicyVerdictBadgeProps,
+  PolicyCitationPanelProps,
+} from "./policy-ai-primitives";
+
+export {
+  PolicySingleBankAnswer,
+  PolicyComparisonTable,
+  PolicyRankedList,
+} from "./policy-ai-responses";
+
+export type {
+  PolicySummaryCounts,
+  PolicySingleBankAnswerProps,
+  PolicyComparisonTableProps,
+  PolicyRankedListProps,
+} from "./policy-ai-responses";
+
+export { PolicyAIFAB, PolicyAIPanel } from "./policy-ai-panel";
+
+export type { PolicyAIFABProps, PolicyAIPanelProps } from "./policy-ai-panel";