@wealthx/shadcn 1.5.11 → 1.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.11",
+  "version": "1.5.13",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -949,9 +949,9 @@
       "require": "./dist/components/ui/transactions-summary-block.js"
     },
     "./resource-center": {
-      "types": "./src/components/ui/resource-center.tsx",
-      "import": "./dist/components/ui/resource-center.mjs",
-      "require": "./dist/components/ui/resource-center.js"
+      "types": "./src/components/ui/resource-center/index.tsx",
+      "import": "./dist/components/ui/resource-center/index.mjs",
+      "require": "./dist/components/ui/resource-center/index.js"
     }
   }
 }

package/src/components/index.tsx

@@ -1262,6 +1262,7 @@ export {
   ResourceCarousel,
   ResourceCenterHeader,
   ResourceDocumentCard,
+  ResourceEmailEditorDialog,
   ResourceEmailTemplateCard,
   ResourceModal,
   ResourceVideoCard,
@@ -1271,6 +1272,7 @@ export type {
   ResourceCenterHeaderProps,
   ResourceDocumentCardProps,
   ResourceDocumentItem,
+  ResourceEmailEditorDialogProps,
   ResourceEmailTemplateCardProps,
   ResourceEmailTemplateItem,
   ResourceModalAttachment,

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

@@ -659,16 +659,31 @@ export function ChatBubble({ message, className }: ChatBubbleProps) {
 // ChatComposer
 // ---------------------------------------------------------------------------
 
+export interface AiConvEmailPayload {
+  content: string;
+  to: string;
+  cc: string;
+  subject: string;
+}
+
 export interface ChatComposerProps {
   mode: AiConvMode;
   /** Active reply channel. Defaults to "chat". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * When true, the Email tab is shown in the composer. Defaults to false —
+   * consumers must opt in once their tenant's email integration is wired up.
+   */
+  isEmailIntegrated?: boolean;
   /** Lead's email address — pre-fills the To field in email compose. */
   contactEmail?: string;
   inputValue?: string;
   onInputChange?: (v: string) => void;
-  onSend?: (v: string) => void;
+  /** Fired when the user sends a chat message. */
+  onSend?: (content: string) => void;
+  /** Fired when the user sends an email. */
+  onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
   className?: string;
@@ -678,16 +693,21 @@ export function ChatComposer({
   mode,
   channel: channelProp = "chat",
   onChannelChange,
+  isEmailIntegrated = false,
   contactEmail = "",
   inputValue = "",
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   className,
 }: ChatComposerProps) {
-  // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change
-  const [channel, setChannel] = React.useState<AiConvChannel>(channelProp);
+  // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change.
+  // Force chat when email isn't integrated so the panel never lands on a hidden tab.
+  const [channel, setChannel] = React.useState<AiConvChannel>(
+    isEmailIntegrated ? channelProp : "chat",
+  );
   const [emailTo, setEmailTo] = React.useState(contactEmail);
   const [emailCc, setEmailCc] = React.useState("");
   const [showCc, setShowCc] = React.useState(false);
@@ -754,23 +774,25 @@ export function ChatComposer({
         className,
       )}
     >
-      <div className="border-b border-border px-3 py-2">
-        <Tabs
-          value={channel}
-          onValueChange={(v) => v && handleChannelChange(v as AiConvChannel)}
-        >
-          <TabsList variant="default" className="w-full">
-            <TabsTrigger value="chat" className="flex-1 gap-1.5">
-              <MessageSquare className="size-3.5" />
-              Chat
-            </TabsTrigger>
-            <TabsTrigger value="email" className="flex-1 gap-1.5">
-              <Mail className="size-3.5" />
-              Email
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-      </div>
+      {isEmailIntegrated && (
+        <div className="border-b border-border px-3 py-2">
+          <Tabs
+            value={channel}
+            onValueChange={(v) => v && handleChannelChange(v as AiConvChannel)}
+          >
+            <TabsList variant="default" className="w-full">
+              <TabsTrigger value="chat" className="flex-1 gap-1.5">
+                <MessageSquare className="size-3.5" />
+                Chat
+              </TabsTrigger>
+              <TabsTrigger value="email" className="flex-1 gap-1.5">
+                <Mail className="size-3.5" />
+                Email
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      )}
 
       {mode === "ai" ? (
         <div className="flex items-center gap-2 bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground">
@@ -867,7 +889,14 @@ export function ChatComposer({
               </div>
               <Button
                 size="sm"
-                onClick={() => onSend?.(inputValue)}
+                onClick={() =>
+                  onSendEmail?.({
+                    content: inputValue,
+                    to: emailTo,
+                    cc: emailCc,
+                    subject: emailSubject,
+                  })
+                }
                 disabled={!inputValue.trim() || !emailTo.trim()}
               >
                 <Send className="mr-1.5 size-3.5" />
@@ -920,9 +949,16 @@ export interface ChatThreadProps {
   /** Active reply channel — "chat" (default) or "email". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * When true, the Email tab is shown in the composer. Defaults to false.
+   */
+  isEmailIntegrated?: boolean;
   inputValue?: string;
   onInputChange?: (v: string) => void;
-  onSend?: (v: string) => void;
+  /** Fired when the user sends a chat message. */
+  onSend?: (content: string) => void;
+  /** Fired when the user sends an email. */
+  onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
   onReopen?: () => void;
@@ -930,6 +966,12 @@ export interface ChatThreadProps {
   onUnmarkUrgent?: () => void;
   onArchive?: () => void;
   onAssignToAdvisor?: () => void;
+  /** True when older messages can be loaded (e.g. paginated history). */
+  hasMoreMessages?: boolean;
+  /** True while a `onLoadMoreMessages` request is in-flight. */
+  isLoadingMoreMessages?: boolean;
+  /** Fired when the consumer should fetch older messages. */
+  onLoadMoreMessages?: () => void;
   /** Mobile only — back to conversation list. */
   onBack?: () => void;
   /** Mobile only — show lead info panel. */
@@ -945,9 +987,11 @@ export function ChatThread({
   isAiTyping = false,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -955,6 +999,9 @@ export function ChatThread({
   onUnmarkUrgent,
   onArchive,
   onAssignToAdvisor,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   onBack,
   onShowLeadInfo,
   className,
@@ -962,6 +1009,61 @@ export function ChatThread({
   const aiIsHandling = mode === "ai";
   const isClosed = status === "closed";
 
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  // Captures scrollHeight just before older messages are prepended, so we can
+  // restore the user's visible scroll offset once the new nodes render.
+  const preLoadScrollHeightRef = React.useRef<number | null>(null);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    if (!hasMoreMessages || isLoadingMoreMessages || !onLoadMoreMessages) {
+      return;
+    }
+    if (e.currentTarget.scrollTop <= 80) {
+      preLoadScrollHeightRef.current = e.currentTarget.scrollHeight;
+      onLoadMoreMessages();
+    }
+  };
+
+  // Tracks the last "tail" message id so we can tell an append (new message,
+  // tail changed) apart from a prepend (older history loaded, tail unchanged).
+  const prevLastMessageIdRef = React.useRef<string | undefined>(undefined);
+  const prevContactIdRef = React.useRef<string>(contact.id);
+
+  React.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    // Prepend (older messages just loaded) — restore scroll so the user
+    // stays anchored to the message they were reading.
+    if (preLoadScrollHeightRef.current !== null) {
+      el.scrollTop = el.scrollHeight - preLoadScrollHeightRef.current;
+      preLoadScrollHeightRef.current = null;
+      prevLastMessageIdRef.current = messages[messages.length - 1]?.id;
+      prevContactIdRef.current = contact.id;
+      return;
+    }
+
+    const currentLastId = messages[messages.length - 1]?.id;
+    const contactChanged = prevContactIdRef.current !== contact.id;
+    const tailChanged = prevLastMessageIdRef.current !== currentLastId;
+
+    // Opening a conversation or appending a new message (sent, received,
+    // or system) — pin to the bottom.
+    if (contactChanged || tailChanged) {
+      el.scrollTop = el.scrollHeight;
+    }
+
+    prevLastMessageIdRef.current = currentLastId;
+    prevContactIdRef.current = contact.id;
+  }, [contact.id, messages]);
+
+  // Typing indicator adds DOM height — keep the view pinned to bottom.
+  React.useLayoutEffect(() => {
+    if (!isAiTyping) return;
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [isAiTyping]);
+
   return (
     <div className={cn("flex flex-col bg-background", className)}>
       {/* Header */}
@@ -1071,9 +1173,16 @@ export function ChatThread({
 
       {/* Messages */}
       <div
+        ref={scrollRef}
+        onScroll={handleScroll}
         className="flex flex-1 flex-col gap-4 overflow-y-auto p-4"
         tabIndex={0}
       >
+        {isLoadingMoreMessages && (
+          <div className="flex justify-center py-1 text-caption text-muted-foreground">
+            Loading older messages...
+          </div>
+        )}
         {messages.length === 0 ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
             <MessageSquare className="size-8 opacity-30" />
@@ -1120,10 +1229,12 @@ export function ChatThread({
           mode={mode}
           channel={channel}
           onChannelChange={onChannelChange}
+          isEmailIntegrated={isEmailIntegrated}
           contactEmail={contact.email}
           inputValue={inputValue}
           onInputChange={onInputChange}
           onSend={onSend}
+          onSendEmail={onSendEmail}
           onTakeOver={onTakeOver}
           onLetAiHandle={onLetAiHandle}
         />
@@ -1584,18 +1695,31 @@ export interface ConversationsPageProps {
   /** Active reply channel — "chat" (default) or "email". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * When true, the Email tab is shown in the composer. Defaults to false.
+   */
+  isEmailIntegrated?: boolean;
   inputValue?: string;
   internalNotes?: string;
   showLeadPanel?: boolean;
   hasMore?: boolean;
   isLoadingMore?: boolean;
+  /** True when older messages can be loaded for the active conversation. */
+  hasMoreMessages?: boolean;
+  /** True while a `onLoadMoreMessages` request is in-flight. */
+  isLoadingMoreMessages?: boolean;
+  /** Fired when the consumer should fetch older messages for the active conversation. */
+  onLoadMoreMessages?: () => void;
   onSelectConversation?: (id: string) => void;
   onRead?: (id: string) => void;
   onSearchChange?: (v: string) => void;
   onFilterChange?: (f: AiConvFilterTab) => void;
   onChannelFilterChange?: (f: AiConvChannelFilter) => void;
   onInputChange?: (v: string) => void;
-  onSend?: (v: string) => void;
+  /** Fired when the user sends a chat message. */
+  onSend?: (content: string) => void;
+  /** Fired when the user sends an email. */
+  onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
   onReopen?: () => void;
@@ -1637,11 +1761,15 @@ export function ConversationsPage({
   onChannelFilterChange,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   internalNotes,
   showLeadPanel = true,
   hasMore,
   isLoadingMore,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   isAiTyping,
   notesSaveStatus,
   onSelectConversation,
@@ -1650,6 +1778,7 @@ export function ConversationsPage({
   onFilterChange,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -1723,9 +1852,11 @@ export function ConversationsPage({
             isAiTyping={isAiTyping}
             channel={channel}
             onChannelChange={onChannelChange}
+            isEmailIntegrated={isEmailIntegrated}
             inputValue={inputValue}
             onInputChange={onInputChange}
             onSend={onSend}
+            onSendEmail={onSendEmail}
             onTakeOver={onTakeOver}
             onLetAiHandle={onLetAiHandle}
             onReopen={onReopen}
@@ -1733,6 +1864,9 @@ export function ConversationsPage({
             onUnmarkUrgent={onUnmarkUrgent}
             onArchive={onArchive}
             onAssignToAdvisor={onAssignToAdvisor}
+            hasMoreMessages={hasMoreMessages}
+            isLoadingMoreMessages={isLoadingMoreMessages}
+            onLoadMoreMessages={onLoadMoreMessages}
             onBack={() => setMobilePanel("list")}
             onShowLeadInfo={() => setMobilePanel("lead")}
             className={cn(