@wealthx/shadcn 1.5.24 → 1.5.25

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

@@ -0,0 +1,517 @@
+import React from "react";
+import {
+  ArrowLeft,
+  Briefcase,
+  Calendar,
+  CheckCircle2,
+  ChevronRight,
+  HelpCircle,
+  Link2,
+  Mail,
+  MapPin,
+  Navigation,
+  Phone,
+  PhoneCall,
+  Plus,
+  UserPlus,
+  Video,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type {
+  AiConvAppointmentData,
+  AiConvContact,
+  AiConvDataField,
+  AiConvMeetingType,
+} from "./types";
+import {
+  ContactAvatar,
+  displayContactName,
+  PANEL_HEADER_HEIGHT,
+} from "./helpers.tsx";
+
+// ---------------------------------------------------------------------------
+// AICollectedDataSection
+// ---------------------------------------------------------------------------
+
+export interface AICollectedDataSectionProps {
+  fields: AiConvDataField[];
+  className?: string;
+}
+
+export function AICollectedDataSection({
+  fields,
+  className,
+}: AICollectedDataSectionProps) {
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {fields.map((field, i) => (
+        <div
+          key={i}
+          className="flex items-center justify-between gap-2 border-b border-border/40 py-1.5 last:border-b-0"
+        >
+          <span className="shrink-0 text-sm text-muted-foreground">
+            {field.label}
+          </span>
+          <div className="flex items-center gap-1.5">
+            <span className="text-right text-sm font-medium text-foreground">
+              {field.value}
+            </span>
+            {field.confidence === "confirmed" ? (
+              <CheckCircle2 className="size-3 shrink-0 text-success-text" />
+            ) : (
+              <HelpCircle className="size-3 shrink-0 text-warning-text" />
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// LeadInfoPanel — internal helpers
+// ---------------------------------------------------------------------------
+
+const APPOINTMENT_STATUS_LABEL: Record<
+  AiConvAppointmentData["status"],
+  string
+> = {
+  requested: "Lead requested",
+  confirmed: "Confirmed",
+  pending: "Pending confirmation",
+  cancelled: "Cancelled",
+};
+
+const MEETING_ICON: Record<AiConvMeetingType, React.ElementType> = {
+  video: Video,
+  phone: Phone,
+  "in-person": MapPin,
+};
+
+const MEETING_LABEL: Record<AiConvMeetingType, string> = {
+  video: "Video Call",
+  phone: "Phone Call",
+  "in-person": "In Person",
+};
+
+const MEETING_DETAIL_ICON: Record<AiConvMeetingType, React.ElementType> = {
+  video: Link2,
+  phone: PhoneCall,
+  "in-person": Navigation,
+};
+
+function MeetingDetailRow({
+  meetingType,
+  detail,
+}: {
+  meetingType: AiConvMeetingType;
+  detail: string;
+}) {
+  const DetailIcon = MEETING_DETAIL_ICON[meetingType];
+  const isLink = detail.startsWith("http");
+  return (
+    <div className="flex items-center gap-2">
+      <DetailIcon className="size-4 shrink-0 text-muted-foreground" />
+      {isLink ? (
+        <a
+          href={detail}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-primary underline underline-offset-2 break-all hover:text-primary/80"
+        >
+          {detail}
+        </a>
+      ) : (
+        <span className="text-sm text-muted-foreground break-all">
+          {detail}
+        </span>
+      )}
+    </div>
+  );
+}
+
+interface AppointmentSectionProps {
+  appointment: AiConvAppointmentData;
+  contactId: string;
+  isAnonymous: boolean;
+  onApproveAppointment?: () => void;
+  onDeclineAppointment?: () => void;
+  onRescheduleAppointment?: (contactId: string) => void;
+}
+
+function AppointmentSection({
+  appointment,
+  contactId,
+  isAnonymous,
+  onApproveAppointment,
+  onDeclineAppointment,
+  onRescheduleAppointment,
+}: AppointmentSectionProps) {
+  const AppointmentIcon = MEETING_ICON[appointment.meetingType];
+  const canReschedule = !isAnonymous && !!onRescheduleAppointment;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <Calendar className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="text-sm font-medium text-foreground">
+          {appointment.datetime}
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <AppointmentIcon className="size-4 shrink-0 text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">
+          {MEETING_LABEL[appointment.meetingType]}
+        </span>
+      </div>
+      {appointment.meetingDetail && (
+        <MeetingDetailRow
+          meetingType={appointment.meetingType}
+          detail={appointment.meetingDetail}
+        />
+      )}
+      <span
+        className={cn("text-sm font-medium", {
+          "text-warning-text": appointment.status === "requested",
+          "text-success-text": appointment.status === "confirmed",
+          "text-muted-foreground": appointment.status === "pending",
+          "text-destructive line-through": appointment.status === "cancelled",
+        })}
+      >
+        {APPOINTMENT_STATUS_LABEL[appointment.status]}
+      </span>
+
+      {appointment.status === "requested" && (
+        <div className="flex gap-2 pt-1">
+          <Button size="sm" className="flex-1" onClick={onApproveAppointment}>
+            Approve
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={onDeclineAppointment}
+          >
+            Decline
+          </Button>
+          {canReschedule && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex-1"
+              onClick={() => onRescheduleAppointment!(contactId)}
+            >
+              Reschedule
+            </Button>
+          )}
+        </div>
+      )}
+
+      {(appointment.status === "confirmed" ||
+        appointment.status === "cancelled") &&
+        canReschedule && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-1 w-full justify-start"
+            onClick={() => onRescheduleAppointment!(contactId)}
+          >
+            Reschedule
+          </Button>
+        )}
+    </div>
+  );
+}
+
+function PanelSectionHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="mb-2.5 text-overline text-muted-foreground">{children}</p>
+  );
+}
+
+function PanelSection({
+  children,
+  last = false,
+}: {
+  children: React.ReactNode;
+  last?: boolean;
+}) {
+  return (
+    <div className={cn("px-4 py-4", !last && "border-b border-border")}>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// LeadInfoPanel
+// ---------------------------------------------------------------------------
+
+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;
+  notesSaveStatus?: "idle" | "saving" | "saved";
+  isCollapsed?: boolean;
+  /** True when this lead's contact info already exists in the system. Disables Add to Contacts. */
+  isKnownContact?: boolean;
+  onAddToContacts?: () => void;
+  onCreateOpportunity?: () => void;
+  onBookAppointment?: () => void;
+  onApproveAppointment?: () => void;
+  onDeclineAppointment?: () => void;
+  onRescheduleAppointment?: (contactId: string) => void;
+  onNotesChange?: (v: string) => void;
+  onToggleCollapse?: () => void;
+  /** Mobile only — back to chat thread. */
+  onBack?: () => void;
+  className?: string;
+}
+
+export function LeadInfoPanel({
+  contact,
+  firstSeen,
+  source = "Website Chatbot",
+  topic,
+  aiFields = [],
+  appointment,
+  internalNotes = "",
+  notesSaveStatus = "idle",
+  isCollapsed = false,
+  isKnownContact = false,
+  onAddToContacts,
+  onCreateOpportunity,
+  onBookAppointment,
+  onApproveAppointment,
+  onDeclineAppointment,
+  onRescheduleAppointment,
+  onNotesChange,
+  onToggleCollapse,
+  onBack,
+  className,
+}: LeadInfoPanelProps) {
+  const isAnonymous = !contact.name.trim();
+  const addToContactsDisabled = isAnonymous || isKnownContact;
+
+  return (
+    <div className={cn("flex flex-col bg-background", className)}>
+      <div
+        className={cn(
+          PANEL_HEADER_HEIGHT,
+          "flex items-center justify-between border-b border-border px-4",
+        )}
+      >
+        {onBack && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8 shrink-0 md:hidden"
+            onClick={onBack}
+            aria-label="Back to conversation"
+          >
+            <ArrowLeft className="size-4" />
+          </Button>
+        )}
+        <span className="text-sm font-semibold text-foreground">Lead Info</span>
+        {onToggleCollapse && (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  onClick={onToggleCollapse}
+                  aria-label={isCollapsed ? "Expand panel" : "Collapse panel"}
+                >
+                  <ChevronRight
+                    className={cn(
+                      "size-4 transition-transform duration-150",
+                      isCollapsed && "-rotate-180",
+                    )}
+                  />
+                </Button>
+              }
+            />
+            <TooltipContent>
+              {isCollapsed ? "Expand panel" : "Collapse panel"}
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      {!isCollapsed && (
+        <div className="flex-1 overflow-y-auto" tabIndex={0}>
+          <PanelSection>
+            <PanelSectionHeader>Contact</PanelSectionHeader>
+            <div className="flex items-center gap-3">
+              <ContactAvatar name={contact.name} size="lg" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-semibold text-foreground">
+                  {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) && (
+              <div className="mt-3 flex flex-col gap-1.5">
+                {contact.email && (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Mail className="size-4 shrink-0" />
+                    <a
+                      href={`mailto:${contact.email}`}
+                      className="truncate hover:underline"
+                    >
+                      {contact.email}
+                    </a>
+                  </div>
+                )}
+                {contact.phone && (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <PhoneCall className="size-4 shrink-0" />
+                    <a
+                      href={`tel:${contact.phone}`}
+                      className="hover:underline"
+                    >
+                      {contact.phone}
+                    </a>
+                  </div>
+                )}
+                {firstSeen && (
+                  <p className="text-sm text-muted-foreground">
+                    First seen: {firstSeen}
+                  </p>
+                )}
+              </div>
+            )}
+          </PanelSection>
+
+          <PanelSection>
+            <PanelSectionHeader>AI-Collected Data</PanelSectionHeader>
+            {aiFields.length > 0 ? (
+              <>
+                <AICollectedDataSection fields={aiFields} />
+                <div className="mt-2.5 flex items-center gap-3 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <CheckCircle2 className="size-3 text-success-text" />
+                    confirmed
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <HelpCircle className="size-3 text-warning-text" />
+                    estimated
+                  </span>
+                </div>
+              </>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                AI is still gathering information...
+              </p>
+            )}
+          </PanelSection>
+
+          <PanelSection>
+            <PanelSectionHeader>Appointment</PanelSectionHeader>
+            {appointment ? (
+              <AppointmentSection
+                appointment={appointment}
+                contactId={contact.id}
+                isAnonymous={isAnonymous}
+                onApproveAppointment={onApproveAppointment}
+                onDeclineAppointment={onDeclineAppointment}
+                onRescheduleAppointment={onRescheduleAppointment}
+              />
+            ) : (
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full justify-start"
+                disabled={isAnonymous}
+                onClick={onBookAppointment}
+              >
+                <Plus className="mr-1.5 size-3.5" />
+                Book Appointment
+              </Button>
+            )}
+          </PanelSection>
+
+          <PanelSection>
+            <PanelSectionHeader>CRM Actions</PanelSectionHeader>
+            <div className="flex flex-col gap-2">
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-full justify-start"
+                      disabled={addToContactsDisabled}
+                      onClick={onAddToContacts}
+                    >
+                      <UserPlus className="mr-1.5 size-3.5" />
+                      Add to Contacts
+                    </Button>
+                  }
+                />
+                {isKnownContact && (
+                  <TooltipContent>Already in contacts</TooltipContent>
+                )}
+              </Tooltip>
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full justify-start"
+                disabled={isAnonymous}
+                onClick={onCreateOpportunity}
+              >
+                <Briefcase className="mr-1.5 size-3.5" />
+                Add to CRM
+              </Button>
+            </div>
+          </PanelSection>
+
+          <PanelSection last>
+            <div className="mb-2.5 flex items-center justify-between">
+              <p className="text-overline text-muted-foreground">
+                Internal Notes
+              </p>
+              {notesSaveStatus === "saving" && (
+                <span className="text-xs text-muted-foreground">Saving...</span>
+              )}
+              {notesSaveStatus === "saved" && (
+                <span className="flex items-center gap-1 text-xs text-success-text">
+                  <CheckCircle2 className="size-3" />
+                  Saved
+                </span>
+              )}
+            </div>
+            <Textarea
+              value={internalNotes}
+              onChange={(e) => onNotesChange?.(e.target.value)}
+              placeholder="Private notes — not visible to lead..."
+              rows={4}
+              className="resize-none text-sm"
+            />
+          </PanelSection>
+        </div>
+      )}
+    </div>
+  );
+}