@wealthx/shadcn 1.5.5 → 1.5.7

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

@@ -2,24 +2,30 @@ import React, { useState } from "react";
 import {
   Archive,
   ArrowLeft,
+  Bold,
   Bot,
   Briefcase,
   Calendar,
   CheckCircle2,
   ChevronLeft,
   ChevronRight,
+  ChevronDown,
   Flag,
   HelpCircle,
+  Italic,
+  Link2,
   Lock,
   Mail,
   MapPin,
   MessageSquare,
   MoreHorizontal,
+  Paperclip,
   Phone,
   PhoneCall,
   Plus,
   Search,
   Send,
+  Underline,
   UserCheck,
   UserPlus,
   Video,
@@ -90,6 +96,10 @@ export type AiConvFilterTab =
 
 export type AiConvMode = "ai" | "manual";
 
+export type AiConvChannel = "chat" | "email";
+
+export type AiConvChannelFilter = "all" | AiConvChannel;
+
 export type AiConvMeetingType = "video" | "phone" | "in-person";
 
 export interface AiConvContact {
@@ -116,6 +126,14 @@ export interface AiConvListItemData {
   unreadCount?: number;
   /** Assigned advisor display name. */
   assignedTo?: string;
+  /**
+   * Conversation topic tag — e.g. "Buy a Home", "Refinance", "Investment".
+   * Shown as a small secondary badge so the broker can categorise conversations
+   * at a glance without opening each thread.
+   */
+  topic?: string;
+  /** Channel this conversation is using — "chat" (default) or "email". */
+  channel?: AiConvChannel;
 }
 
 export interface AiConvMessage {
@@ -276,6 +294,11 @@ export function ConversationListItem({
             {data.status === "needs-attention" && (
               <Flag className="size-3 text-warning-text" />
             )}
+            {data.channel === "email" ? (
+              <Mail className="size-3 text-muted-foreground" />
+            ) : (
+              <MessageSquare className="size-3 text-muted-foreground" />
+            )}
             <span className="whitespace-nowrap text-xs text-muted-foreground">
               {data.timestamp}
             </span>
@@ -326,17 +349,20 @@ function filterConversations(
   conversations: AiConvListItemData[],
   query: string,
   filter: AiConvFilterTab,
+  channelFilter: AiConvChannelFilter,
 ): AiConvListItemData[] {
   const q = query.toLowerCase();
   return conversations.filter((c) => {
     const matchesFilter =
       filter === "all" ||
       (filter === "open" ? c.status !== "closed" : c.status === filter);
+    const matchesChannel =
+      channelFilter === "all" || (c.channel ?? "chat") === channelFilter;
     const matchesSearch =
       !q ||
       c.contact.name.toLowerCase().includes(q) ||
       c.lastMessage.toLowerCase().includes(q);
-    return matchesFilter && matchesSearch;
+    return matchesFilter && matchesChannel && matchesSearch;
   });
 }
 
@@ -353,10 +379,12 @@ export interface ConversationListProps {
   activeId?: string;
   searchQuery?: string;
   activeFilter?: AiConvFilterTab;
+  channelFilter?: AiConvChannelFilter;
   hasMore?: boolean;
   isLoadingMore?: boolean;
   onSearchChange?: (v: string) => void;
   onFilterChange?: (f: AiConvFilterTab) => void;
+  onChannelFilterChange?: (f: AiConvChannelFilter) => void;
   onSelect?: (id: string) => void;
   onRead?: (id: string) => void;
   onLoadMore?: () => void;
@@ -368,15 +396,28 @@ export function ConversationList({
   activeId,
   searchQuery = "",
   activeFilter = "all",
+  channelFilter: channelFilterProp = "all",
   hasMore,
   isLoadingMore,
   onSearchChange,
   onFilterChange,
+  onChannelFilterChange,
   onSelect,
   onRead,
   onLoadMore,
   className,
 }: ConversationListProps) {
+  const [channelFilter, setChannelFilter] =
+    useState<AiConvChannelFilter>(channelFilterProp);
+
+  function handleChannelFilterChange(vals: string[]) {
+    const v = vals[0] as AiConvChannelFilter | undefined;
+    if (v) {
+      setChannelFilter(v);
+      onChannelFilterChange?.(v);
+    }
+  }
+
   return (
     <div
       className={cn(
@@ -385,9 +426,8 @@ export function ConversationList({
       )}
     >
       <div className={cn(PANEL_HEADER_HEIGHT, "flex shrink-0 flex-col")}>
-        {/* Search */}
-        <div className="border-b border-border p-3 shrink-0">
-          <div className="relative">
+        <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2.5">
+          <div className="relative flex-1">
             <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={searchQuery}
@@ -396,9 +436,27 @@ export function ConversationList({
               className="h-8 pl-8 text-sm"
             />
           </div>
+          <ToggleGroup
+            type="single"
+            variant="outline"
+            size="sm"
+            spacing={0}
+            value={[channelFilter]}
+            onValueChange={handleChannelFilterChange}
+            className="shrink-0"
+          >
+            <ToggleGroupItem value="all" aria-label="All channels">
+              All
+            </ToggleGroupItem>
+            <ToggleGroupItem value="chat" aria-label="Chat">
+              <MessageSquare className="size-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="email" aria-label="Email">
+              <Mail className="size-3.5" />
+            </ToggleGroupItem>
+          </ToggleGroup>
         </div>
 
-        {/* Filter tabs */}
         <div className="flex flex-1 items-center border-b border-border">
           <Tabs
             value={activeFilter}
@@ -430,6 +488,7 @@ export function ConversationList({
             conversations,
             searchQuery,
             activeFilter,
+            channelFilter,
           );
           return filtered.length === 0 ? (
             <div className="flex flex-col items-center justify-center gap-2 p-8 text-muted-foreground">
@@ -602,6 +661,11 @@ export function ChatBubble({ message, className }: ChatBubbleProps) {
 
 export interface ChatComposerProps {
   mode: AiConvMode;
+  /** Active reply channel. Defaults to "chat". */
+  channel?: AiConvChannel;
+  onChannelChange?: (channel: AiConvChannel) => void;
+  /** Lead's email address — pre-fills the To field in email compose. */
+  contactEmail?: string;
   inputValue?: string;
   onInputChange?: (v: string) => void;
   onSend?: (v: string) => void;
@@ -612,6 +676,9 @@ export interface ChatComposerProps {
 
 export function ChatComposer({
   mode,
+  channel: channelProp = "chat",
+  onChannelChange,
+  contactEmail = "",
   inputValue = "",
   onInputChange,
   onSend,
@@ -619,59 +686,223 @@ export function ChatComposer({
   onLetAiHandle,
   className,
 }: ChatComposerProps) {
-  // AI mode — informational banner only; primary Take Over button is in the thread header
-  if (mode === "ai") {
+  // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change
+  const [channel, setChannel] = React.useState<AiConvChannel>(channelProp);
+  const [emailTo, setEmailTo] = React.useState(contactEmail);
+  const [emailCc, setEmailCc] = React.useState("");
+  const [showCc, setShowCc] = React.useState(false);
+  const [emailSubject, setEmailSubject] = React.useState("");
+  const [bold, setBold] = React.useState(false);
+  const [italic, setItalic] = React.useState(false);
+  const [underline, setUnderline] = React.useState(false);
+
+  const handleChannelChange = (c: AiConvChannel) => {
+    setChannel(c);
+    onChannelChange?.(c);
+  };
+
+  function ToolbarButton({
+    label,
+    icon: Icon,
+    pressed,
+    onToggle,
+  }: {
+    label: string;
+    icon: React.ElementType;
+    pressed?: boolean;
+    onToggle?: () => void;
+  }) {
     return (
-      <div
+      <button
+        type="button"
+        aria-label={label}
+        aria-pressed={pressed}
+        onClick={onToggle}
         className={cn(
-          "flex items-center gap-2 border-t border-border bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground",
-          className,
+          "flex size-7 items-center justify-center transition-colors",
+          pressed
+            ? "bg-foreground text-background"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground",
         )}
       >
-        <Bot className="size-3.5 shrink-0 text-muted-foreground" />
-        <span>AI is handling this conversation.</span>
-        <Button
-          variant="link"
-          size="sm"
-          className="h-auto p-0 text-[12px] font-medium text-foreground"
-          onClick={onTakeOver}
-        >
-          Take Over
-        </Button>
-        <span>to reply directly.</span>
+        <Icon className="size-3.5" />
+      </button>
+    );
+  }
+
+  function EmailFieldRow({
+    label,
+    children,
+  }: {
+    label: string;
+    children: React.ReactNode;
+  }) {
+    return (
+      <div className="flex items-center gap-3 border-b border-border px-4 py-2.5">
+        <span className="w-14 shrink-0 text-sm text-muted-foreground">
+          {label}
+        </span>
+        {children}
       </div>
     );
   }
 
-  // Manual mode — full composer
   return (
     <div
       className={cn(
-        "flex flex-col gap-2 border-t border-border bg-background p-3",
+        "flex flex-col border-t border-border bg-background",
         className,
       )}
     >
-      <Textarea
-        value={inputValue}
-        onChange={(e) => onInputChange?.(e.target.value)}
-        placeholder="Reply to lead..."
-        rows={3}
-        className="resize-none text-sm"
-      />
-      <div className="flex items-center justify-between">
-        <Button variant="outline" size="sm" onClick={onLetAiHandle}>
-          <Bot className="mr-1.5 size-3.5" />
-          Let AI Handle
-        </Button>
-        <Button
-          size="sm"
-          onClick={() => onSend?.(inputValue)}
-          disabled={!inputValue.trim()}
+      <div className="border-b border-border px-3 py-2">
+        <Tabs
+          value={channel}
+          onValueChange={(v) => v && handleChannelChange(v as AiConvChannel)}
         >
-          <Send className="mr-1.5 size-3.5" />
-          Send
-        </Button>
+          <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">
+          <Bot className="size-3.5 shrink-0 text-muted-foreground" />
+          <span>AI is handling this conversation.</span>
+          <Button
+            variant="link"
+            size="sm"
+            className="h-auto p-0 text-[12px] font-medium text-foreground"
+            onClick={onTakeOver}
+          >
+            Take Over
+          </Button>
+          <span>to reply directly.</span>
+        </div>
+      ) : (
+        /* Email panel stays in normal flow to anchor container height;
+           chat panel is an absolute overlay so both tabs share identical dimensions */
+        <div className="relative">
+          <div
+            className={cn(
+              "flex flex-col",
+              channel !== "email" && "invisible pointer-events-none",
+            )}
+            aria-hidden={channel !== "email"}
+          >
+            <EmailFieldRow label="To">
+              <input
+                type="email"
+                value={emailTo}
+                onChange={(e) => setEmailTo(e.target.value)}
+                placeholder="Recipient email"
+                className="min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+              />
+              <button
+                type="button"
+                onClick={() => setShowCc((v) => !v)}
+                className="flex shrink-0 items-center gap-0.5 text-sm text-muted-foreground hover:text-foreground"
+              >
+                CC
+                <ChevronDown className="size-3.5" />
+              </button>
+            </EmailFieldRow>
+            {showCc && (
+              <EmailFieldRow label="CC">
+                <input
+                  type="email"
+                  value={emailCc}
+                  onChange={(e) => setEmailCc(e.target.value)}
+                  placeholder="CC email"
+                  className="min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+                />
+              </EmailFieldRow>
+            )}
+            <EmailFieldRow label="Subject">
+              <input
+                type="text"
+                value={emailSubject}
+                onChange={(e) => setEmailSubject(e.target.value)}
+                placeholder="Email subject"
+                className="min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+              />
+            </EmailFieldRow>
+            <Textarea
+              value={inputValue}
+              onChange={(e) => onInputChange?.(e.target.value)}
+              placeholder="Write your email..."
+              rows={6}
+              className="resize-y border-0 px-4 py-3 text-base shadow-none focus-visible:ring-0"
+            />
+            <div className="flex items-center justify-between border-t border-border px-3 py-2">
+              <div className="flex items-center gap-0.5">
+                <ToolbarButton
+                  label="Bold"
+                  icon={Bold}
+                  pressed={bold}
+                  onToggle={() => setBold((v) => !v)}
+                />
+                <ToolbarButton
+                  label="Italic"
+                  icon={Italic}
+                  pressed={italic}
+                  onToggle={() => setItalic((v) => !v)}
+                />
+                <ToolbarButton
+                  label="Underline"
+                  icon={Underline}
+                  pressed={underline}
+                  onToggle={() => setUnderline((v) => !v)}
+                />
+                <Separator orientation="vertical" className="mx-1.5 h-4" />
+                <ToolbarButton label="Link" icon={Link2} />
+                <ToolbarButton label="Attach file" icon={Paperclip} />
+              </div>
+              <Button
+                size="sm"
+                onClick={() => onSend?.(inputValue)}
+                disabled={!inputValue.trim() || !emailTo.trim()}
+              >
+                <Send className="mr-1.5 size-3.5" />
+                Send Email
+              </Button>
+            </div>
+          </div>
+
+          {/* 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
+                value={inputValue}
+                onChange={(e) => onInputChange?.(e.target.value)}
+                placeholder="Reply to lead..."
+                className="min-h-0 flex-1 resize-none text-base"
+              />
+              <div className="flex items-center justify-between">
+                <Button variant="outline" size="sm" onClick={onLetAiHandle}>
+                  <Bot className="mr-1.5 size-3.5" />
+                  Let AI Handle
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={() => onSend?.(inputValue)}
+                  disabled={!inputValue.trim()}
+                >
+                  <Send className="mr-1.5 size-3.5" />
+                  Send
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
@@ -686,6 +917,9 @@ export interface ChatThreadProps {
   mode: AiConvMode;
   messages: AiConvMessage[];
   isAiTyping?: boolean;
+  /** Active reply channel — "chat" (default) or "email". */
+  channel?: AiConvChannel;
+  onChannelChange?: (channel: AiConvChannel) => void;
   inputValue?: string;
   onInputChange?: (v: string) => void;
   onSend?: (v: string) => void;
@@ -709,6 +943,8 @@ export function ChatThread({
   mode,
   messages,
   isAiTyping = false,
+  channel,
+  onChannelChange,
   inputValue,
   onInputChange,
   onSend,
@@ -882,6 +1118,9 @@ export function ChatThread({
       ) : (
         <ChatComposer
           mode={mode}
+          channel={channel}
+          onChannelChange={onChannelChange}
+          contactEmail={contact.email}
           inputValue={inputValue}
           onInputChange={onInputChange}
           onSend={onSend}
@@ -1059,6 +1298,8 @@ export interface LeadInfoPanelProps {
   contact: AiConvContact;
   firstSeen?: string;
   source?: string;
+  /** Conversation topic tag — e.g. "Buy a Home", "Refinance", "Investment". */
+  topic?: string;
   aiFields?: AiConvDataField[];
   appointment?: AiConvAppointmentData;
   internalNotes?: string;
@@ -1083,6 +1324,7 @@ export function LeadInfoPanel({
   contact,
   firstSeen,
   source = "Website Chatbot",
+  topic,
   aiFields = [],
   appointment,
   internalNotes = "",
@@ -1163,6 +1405,11 @@ export function LeadInfoPanel({
                   {displayContactName(contact.name)}
                 </p>
                 <p className="text-sm text-muted-foreground">{source}</p>
+                {topic && (
+                  <Badge variant="secondary" className="mt-1 text-xs">
+                    {topic}
+                  </Badge>
+                )}
               </div>
             </div>
             {(contact.email || contact.phone || firstSeen) && (
@@ -1328,8 +1575,15 @@ export interface ConversationsPageProps {
   leadFirstSeen?: string;
   /** Traffic source label (e.g. "Website Chatbot"). */
   leadSource?: string;
+  /** Conversation topic tag — e.g. "Buy a Home", "Refinance", "Investment". */
+  leadTopic?: string;
   searchQuery?: string;
   activeFilter?: AiConvFilterTab;
+  /** Filter conversation list by channel type. */
+  channelFilter?: AiConvChannelFilter;
+  /** Active reply channel — "chat" (default) or "email". */
+  channel?: AiConvChannel;
+  onChannelChange?: (channel: AiConvChannel) => void;
   inputValue?: string;
   internalNotes?: string;
   showLeadPanel?: boolean;
@@ -1339,6 +1593,7 @@ export interface ConversationsPageProps {
   onRead?: (id: string) => void;
   onSearchChange?: (v: string) => void;
   onFilterChange?: (f: AiConvFilterTab) => void;
+  onChannelFilterChange?: (f: AiConvChannelFilter) => void;
   onInputChange?: (v: string) => void;
   onSend?: (v: string) => void;
   onTakeOver?: () => void;
@@ -1375,8 +1630,13 @@ export function ConversationsPage({
   appointment,
   leadFirstSeen,
   leadSource,
+  leadTopic,
   searchQuery,
   activeFilter,
+  channelFilter,
+  onChannelFilterChange,
+  channel,
+  onChannelChange,
   inputValue,
   internalNotes,
   showLeadPanel = true,
@@ -1436,10 +1696,12 @@ export function ConversationsPage({
           activeId={activeConversationId}
           searchQuery={searchQuery}
           activeFilter={activeFilter}
+          channelFilter={channelFilter}
           hasMore={hasMore}
           isLoadingMore={isLoadingMore}
           onSearchChange={onSearchChange}
           onFilterChange={onFilterChange}
+          onChannelFilterChange={onChannelFilterChange}
           onSelect={handleSelectConversation}
           onRead={onRead}
           onLoadMore={onLoadMore}
@@ -1453,11 +1715,14 @@ export function ConversationsPage({
         {/* Center — Chat Thread */}
         {contact ? (
           <ChatThread
+            key={contact.id}
             contact={contact}
             status={status}
             mode={mode}
             messages={messages}
             isAiTyping={isAiTyping}
+            channel={channel}
+            onChannelChange={onChannelChange}
             inputValue={inputValue}
             onInputChange={onInputChange}
             onSend={onSend}
@@ -1510,6 +1775,7 @@ export function ConversationsPage({
                 contact={contact}
                 firstSeen={leadFirstSeen}
                 source={leadSource}
+                topic={leadTopic}
                 aiFields={aiFields}
                 appointment={appointment}
                 internalNotes={internalNotes}

package/src/components/ui/appointment-availability-settings.tsx

@@ -131,35 +131,6 @@ export const MEETING_PLATFORM_OPTIONS: {
   { value: "any", label: "Let client choose" },
 ];
 
-const MEETING_DURATION_OPTIONS: { value: string; label: string }[] = [
-  { value: "15", label: "15 minutes" },
-  { value: "30", label: "30 minutes" },
-  { value: "45", label: "45 minutes" },
-  { value: "60", label: "60 minutes" },
-  { value: "90", label: "90 minutes" },
-];
-
-const SCHEDULING_BUFFER_OPTIONS: { value: string; label: string }[] = [
-  { value: "0", label: "No buffer" },
-  { value: "5", label: "5 minutes" },
-  { value: "10", label: "10 minutes" },
-  { value: "15", label: "15 minutes" },
-  { value: "30", label: "30 minutes" },
-];
-
-const MAX_SLOTS_OPTIONS: { value: string; label: string }[] = [
-  { value: "2", label: "2 per day" },
-  { value: "4", label: "4 per day" },
-  { value: "6", label: "6 per day" },
-  { value: "8", label: "8 per day" },
-  { value: "10", label: "10 per day" },
-  { value: "unlimited", label: "Unlimited" },
-];
-
-/** Map a Base UI SelectValue `v` to its display label from an options array. */
-const selectLabel = (opts: { value: string; label: string }[], v: unknown) =>
-  opts.find((o) => o.value === String(v))?.label ?? String(v ?? "");
-
 // 30-min increments from 06:00 to 21:30
 const TIME_OPTIONS: { value: string; label: string }[] = (() => {
   const opts: { value: string; label: string }[] = [];
@@ -662,9 +633,7 @@ export function AppointmentAvailabilitySettings({
                 onValueChange={(v) => setTimezone(v as string)}
               >
                 <SelectTrigger className="w-56">
-                  <SelectValue>
-                    {(v) => selectLabel(TIMEZONE_OPTIONS, v)}
-                  </SelectValue>
+                  <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
                   {TIMEZONE_OPTIONS.map((opt) => (
@@ -689,9 +658,7 @@ export function AppointmentAvailabilitySettings({
                 }
               >
                 <SelectTrigger className="w-48">
-                  <SelectValue>
-                    {(v) => selectLabel(MEETING_PLATFORM_OPTIONS, v)}
-                  </SelectValue>
+                  <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
                   {MEETING_PLATFORM_OPTIONS.map((opt) => (