@wealthx/shadcn 1.5.36 → 1.5.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.36",
+  "version": "1.5.38",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -559,11 +559,21 @@
       "import": "./dist/components/ui/ai-assistant-drawer.mjs",
       "require": "./dist/components/ui/ai-assistant-drawer.js"
     },
+    "./support-agent": {
+      "types": "./src/components/ui/support-agent/index.tsx",
+      "import": "./dist/components/ui/support-agent/index.mjs",
+      "require": "./dist/components/ui/support-agent/index.js"
+    },
     "./ai-conversations": {
       "types": "./src/components/ui/ai-conversations/index.tsx",
       "import": "./dist/components/ui/ai-conversations/index.mjs",
       "require": "./dist/components/ui/ai-conversations/index.js"
     },
+    "./chat-input-area": {
+      "types": "./src/components/ui/chat-input-area.tsx",
+      "import": "./dist/components/ui/chat-input-area.mjs",
+      "require": "./dist/components/ui/chat-input-area.js"
+    },
     "./chat-widget-primitives": {
       "types": "./src/components/ui/chat-widget-primitives.tsx",
       "import": "./dist/components/ui/chat-widget-primitives.mjs",

package/src/components/index.tsx

@@ -115,6 +115,30 @@ export type {
   AiTaskSuggestion,
 } from "./ui/ai-assistant-drawer";
 
+export {
+  SupportContextChip,
+  SupportSuggestedQuestion,
+  SupportStepGuideCard,
+  SupportArticleCard,
+  SupportAgentFAB,
+  SupportAgentPanel,
+} from "./ui/support-agent";
+export type {
+  SupportAgentContext,
+  SupportAgentStep,
+  SupportAgentRichContent,
+  SupportContextChipProps,
+  SupportSuggestedQuestionProps,
+  SupportStepGuideCardProps,
+  SupportArticleCardProps,
+  SupportAgentFABProps,
+  SupportAgentMessage,
+  SupportAgentPanelProps,
+} from "./ui/support-agent";
+
+export { ChatInputArea } from "./ui/chat-input-area";
+export type { ChatInputAreaProps } from "./ui/chat-input-area";
+
 export {
   ChatWidgetLauncher,
   ChatWidgetHeader,

package/src/components/ui/ai-assistant-drawer.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { Bot, RotateCcw, Send, X } from "lucide-react";
+import { Bot, RotateCcw, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { ChatInputArea } from "@/components/ui/chat-input-area";
 import { Spinner } from "@/components/ui/spinner";
-import { Textarea } from "@/components/ui/textarea";
 
 /**
  * AiAssistantDrawer — WealthX DS (L5 Drawer)
@@ -66,6 +66,10 @@ export interface AiAssistantDrawerProps {
   isLoading?: boolean;
   /** Called when the user submits a message. Input is cleared after this fires. */
   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 the reload/reset button. */
   onReset?: () => void;
   className?: string;
@@ -193,16 +197,16 @@ export function AiAssistantDrawer({
   isStreaming = false,
   isLoading = false,
   onSendMessage,
+  onAttachFile,
+  onAttachImage,
   onReset,
   className,
 }: AiAssistantDrawerProps) {
   const [inputValue, setInputValue] = React.useState("");
   const messagesEndRef = React.useRef<HTMLDivElement>(null);
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   const suggestions = taskSuggestions ?? DEFAULT_SUGGESTIONS;
   const hasMessages = messages.length > 0;
-  const canSend = inputValue.trim().length > 0 && !isStreaming && !isLoading;
 
   // Auto-scroll to latest message
   React.useEffect(() => {
@@ -213,31 +217,16 @@ export function AiAssistantDrawer({
     });
   }, [messages.length]);
 
-  // Auto-resize textarea on value change
-  React.useEffect(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
-  }, [inputValue]);
-
-  const handleSend = React.useCallback(() => {
-    const text = inputValue.trim();
-    if (!text || !canSend) return;
-    onSendMessage?.(text);
-    setInputValue("");
-  }, [inputValue, canSend, onSendMessage]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
+  const handleSend = React.useCallback(
+    (text: string) => {
+      onSendMessage?.(text);
+      setInputValue("");
+    },
+    [onSendMessage],
+  );
 
   const handleSuggestionSelect = (text: string) => {
     setInputValue(text);
-    textareaRef.current?.focus();
   };
 
   return (
@@ -377,31 +366,15 @@ export function AiAssistantDrawer({
 
         {/* Footer — input bar */}
         <div className="border-t border-border p-3">
-          <div className="flex items-end gap-2">
-            <Textarea
-              ref={textareaRef}
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Ask me anything… (Enter to send, Shift+Enter for new line)"
-              rows={1}
-              disabled={isLoading}
-              className="min-h-0 flex-1 resize-none overflow-hidden py-2 text-sm"
-            />
-            <Button
-              size="icon"
-              onClick={handleSend}
-              disabled={!canSend}
-              className="shrink-0"
-              title="Send"
-            >
-              <Send className="size-4" />
-              <span className="sr-only">Send message</span>
-            </Button>
-          </div>
-          <p className="mt-1.5 text-[10px] text-muted-foreground">
-            Enter to send · Shift+Enter for new line
-          </p>
+          <ChatInputArea
+            value={inputValue}
+            onChange={setInputValue}
+            onSend={handleSend}
+            onAttachFile={onAttachFile}
+            onAttachImage={onAttachImage}
+            disabled={isLoading || isStreaming}
+            placeholder="Ask me anything…"
+          />
         </div>
       </SheetContent>
     </Sheet>

package/src/components/ui/ai-conversations/index.tsx

@@ -107,6 +107,10 @@ export interface ConversationsPageProps {
   onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
+  /** Called when the user selects files via the attachment button in the composer. */
+  onAttachFile?: (files: FileList) => void;
+  /** Called when the user selects images via the image upload button in the composer. */
+  onAttachImage?: (files: FileList) => void;
   /** Pre-fills the email Subject field with "Re: [emailReplySubject]" for reply threads. */
   emailReplySubject?: string;
   onReopen?: () => void;
@@ -168,6 +172,8 @@ export function ConversationsPage({
   onSendEmail,
   onTakeOver,
   onLetAiHandle,
+  onAttachFile,
+  onAttachImage,
   emailReplySubject,
   onReopen,
   onMarkUrgent,
@@ -187,7 +193,7 @@ export function ConversationsPage({
   className,
 }: ConversationsPageProps) {
   const [mobilePanel, setMobilePanel] = useState<"list" | "chat" | "lead">(
-    "list"
+    "list",
   );
 
   const handleSelectConversation = (id: string) => {
@@ -222,7 +228,7 @@ export function ConversationsPage({
           onLoadMore={onLoadMore}
           className={cn(
             "shrink-0 md:w-[320px]",
-            mobilePanel === "list" ? "flex w-full md:flex" : "hidden md:flex"
+            mobilePanel === "list" ? "flex w-full md:flex" : "hidden md:flex",
           )}
         />
 
@@ -244,6 +250,8 @@ export function ConversationsPage({
             onSendEmail={onSendEmail}
             onTakeOver={onTakeOver}
             onLetAiHandle={onLetAiHandle}
+            onAttachFile={onAttachFile}
+            onAttachImage={onAttachImage}
             emailReplySubject={emailReplySubject}
             onReopen={onReopen}
             onMarkUrgent={onMarkUrgent}
@@ -259,14 +267,14 @@ export function ConversationsPage({
               "min-w-0 flex-1 border-r border-border",
               mobilePanel === "chat"
                 ? "flex flex-col md:flex"
-                : "hidden md:flex"
+                : "hidden md:flex",
             )}
           />
         ) : (
           <div
             className={cn(
               "min-w-0 flex-1 items-center justify-center border-r border-border bg-muted/10",
-              mobilePanel === "chat" ? "flex md:flex" : "hidden md:flex"
+              mobilePanel === "chat" ? "flex md:flex" : "hidden md:flex",
             )}
           >
             <div className="flex flex-col items-center gap-2 text-muted-foreground">
@@ -285,7 +293,7 @@ export function ConversationsPage({
                   ? "flex w-full shrink-0 flex-col"
                   : "hidden",
                 "md:block md:shrink-0 md:overflow-hidden md:transition-[width] md:duration-200 md:ease-in-out",
-                showLeadPanel ? "md:w-[320px]" : "md:w-0"
+                showLeadPanel ? "md:w-[320px]" : "md:w-0",
               )}
             >
               <LeadInfoPanel
@@ -364,13 +372,13 @@ export function AiConvAssignAdvisorDialog({
   const [roleFilter, setRoleFilter] = useState("");
 
   const roles = Array.from(
-    new Set(advisors.map((a) => a.role).filter(Boolean))
+    new Set(advisors.map((a) => a.role).filter(Boolean)),
   ) as string[];
 
   const filtered = advisors.filter(
     (a) =>
       a.name.toLowerCase().includes(search.toLowerCase()) &&
-      (!roleFilter || a.role === roleFilter)
+      (!roleFilter || a.role === roleFilter),
   );
 
   const handleOpenChange = (v: boolean) => {
@@ -436,7 +444,7 @@ export function AiConvAssignAdvisorDialog({
                   onClick={() => onValueChange(advisor.id)}
                   className={cn(
                     "flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted",
-                    value === advisor.id && "bg-muted font-medium"
+                    value === advisor.id && "bg-muted font-medium",
                   )}
                 >
                   <Avatar size="sm">

package/src/components/ui/ai-conversations/thread.tsx

@@ -39,7 +39,7 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { Textarea } from "@/components/ui/textarea";
+import { ChatInputArea } from "@/components/ui/chat-input-area";
 import type {
   AiConvChannel,
   AiConvContact,
@@ -88,6 +88,10 @@ export interface ChatComposerProps {
   onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => 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;
   /** Pre-fills the Subject field with "Re: [emailReplySubject]" for email threads. */
   emailReplySubject?: string;
   className?: string;
@@ -114,7 +118,7 @@ function ComposerToolbarButton({
         "flex size-7 items-center justify-center transition-colors",
         pressed
           ? "bg-foreground text-background"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
       )}
     >
       <Icon className="size-3.5" />
@@ -156,7 +160,7 @@ function ComposerLinkPopover({
           "flex size-7 items-center justify-center transition-colors",
           editor?.isActive("link")
             ? "bg-foreground text-background"
-            : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground",
         )}
       >
         <Link2 className="size-3.5" />
@@ -210,6 +214,8 @@ export function ChatComposer({
   onSendEmail,
   onTakeOver,
   onLetAiHandle,
+  onAttachFile,
+  onAttachImage,
   emailReplySubject,
   className,
 }: ChatComposerProps) {
@@ -217,16 +223,16 @@ export function ChatComposer({
   // Force chat when email isn't integrated so the panel never lands on a hidden tab.
   const initialChannelRef = React.useRef(channelProp);
   const [channel, setChannel] = React.useState<AiConvChannel>(
-    isEmailIntegrated ? channelProp : "chat"
+    isEmailIntegrated ? channelProp : "chat",
   );
   const [emailTo, setEmailTo] = React.useState(contactEmail);
   const [emailCc, setEmailCc] = React.useState("");
   const [showCc, setShowCc] = React.useState(false);
   const [emailSubject, setEmailSubject] = React.useState(
-    emailReplySubject ? `Re: ${emailReplySubject}` : ""
+    emailReplySubject ? `Re: ${emailReplySubject}` : "",
   );
   const [emailMode, setEmailMode] = React.useState<"reply" | "new">(
-    emailReplySubject ? "reply" : "new"
+    emailReplySubject ? "reply" : "new",
   );
 
   const [, forceUpdate] = React.useReducer((x: number) => x + 1, 0);
@@ -272,7 +278,7 @@ export function ChatComposer({
     <div
       className={cn(
         "flex flex-col border-t border-border bg-background",
-        className
+        className,
       )}
     >
       {isEmailIntegrated && (
@@ -316,7 +322,7 @@ export function ChatComposer({
           <div
             className={cn(
               "flex flex-col",
-              channel !== "email" && "invisible pointer-events-none"
+              channel !== "email" && "invisible pointer-events-none",
             )}
             aria-hidden={channel !== "email"}
           >
@@ -432,29 +438,26 @@ export function ChatComposer({
           {/* Chat compose — absolute overlay, fills exact same height as email panel */}
           {channel === "chat" && (
             <div className="absolute inset-0 flex flex-col gap-3 p-4">
-              <Textarea
+              <ChatInputArea
                 value={inputValue}
-                onChange={(e) => onInputChange?.(e.target.value)}
-                placeholder="Reply to lead..."
-                className="min-h-0 flex-1 resize-none text-base"
+                onChange={(v) => onInputChange?.(v)}
+                onSend={(text) => onSend?.(text)}
+                onAttachFile={onAttachFile}
+                onAttachImage={onAttachImage}
+                placeholder="Reply to lead…"
+                hint={false}
               />
-              <div className="flex items-center justify-between">
-                {initialChannelRef.current !== "email" && (
-                  <Button variant="outline" size="sm" onClick={onLetAiHandle}>
-                    <Bot className="mr-1.5 size-3.5" />
-                    Let AI Handle
-                  </Button>
-                )}
+              {initialChannelRef.current !== "email" && (
                 <Button
+                  variant="outline"
                   size="sm"
-                  className="ml-auto"
-                  onClick={() => onSend?.(inputValue)}
-                  disabled={!inputValue.trim()}
+                  className="self-start"
+                  onClick={onLetAiHandle}
                 >
-                  <Send className="mr-1.5 size-3.5" />
-                  Send
+                  <Bot className="mr-1.5 size-3.5" />
+                  Let AI Handle
                 </Button>
-              </div>
+              )}
             </div>
           )}
         </div>
@@ -486,6 +489,10 @@ export interface ChatThreadProps {
   onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
+  /** Called when the user selects files via the attachment button in the composer. */
+  onAttachFile?: (files: FileList) => void;
+  /** Called when the user selects images via the image upload button in the composer. */
+  onAttachImage?: (files: FileList) => void;
   /** Pre-fills the email Subject field with "Re: [emailReplySubject]" for reply threads. */
   emailReplySubject?: string;
   onReopen?: () => void;
@@ -521,6 +528,8 @@ export function ChatThread({
   onSendEmail,
   onTakeOver,
   onLetAiHandle,
+  onAttachFile,
+  onAttachImage,
   emailReplySubject,
   onReopen,
   onMarkUrgent,
@@ -598,7 +607,7 @@ export function ChatThread({
       <div
         className={cn(
           PANEL_HEADER_HEIGHT,
-          "flex items-center gap-3 border-b border-border px-4"
+          "flex items-center gap-3 border-b border-border px-4",
         )}
       >
         {onBack && (
@@ -651,7 +660,7 @@ export function ChatThread({
             <DropdownMenuTrigger
               className={cn(
                 buttonVariants({ variant: "ghost", size: "icon" }),
-                "size-8"
+                "size-8",
               )}
               aria-label="More actions"
             >
@@ -762,6 +771,8 @@ export function ChatThread({
           onSendEmail={onSendEmail}
           onTakeOver={onTakeOver}
           onLetAiHandle={onLetAiHandle}
+          onAttachFile={onAttachFile}
+          onAttachImage={onAttachImage}
           emailReplySubject={emailReplySubject}
         />
       )}