@wealthx/shadcn 1.5.23 → 1.5.25

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

@@ -0,0 +1,335 @@
+import React from "react";
+import { Flag, Mail, MessageSquare, Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type {
+  AiConvChannelFilter,
+  AiConvFilterTab,
+  AiConvListItemData,
+  AiConvStatus,
+} from "./types";
+import {
+  ContactAvatar,
+  displayContactName,
+  PANEL_HEADER_HEIGHT,
+} from "./helpers.tsx";
+
+// ---------------------------------------------------------------------------
+// ConversationStatusChip
+// ---------------------------------------------------------------------------
+
+type BadgeVariant = "success" | "default" | "warning" | "secondary";
+
+const STATUS_CONFIG: Record<
+  AiConvStatus,
+  { label: string; variant: BadgeVariant; dotClass: string }
+> = {
+  "ai-active": {
+    label: "AI Active",
+    variant: "success",
+    dotClass: "bg-success",
+  },
+  manual: {
+    label: "Manual",
+    variant: "default",
+    dotClass: "bg-primary",
+  },
+  "needs-attention": {
+    label: "Needs Attention",
+    variant: "warning",
+    dotClass: "bg-warning",
+  },
+  closed: {
+    label: "Closed",
+    variant: "secondary",
+    dotClass: "bg-muted-foreground/50",
+  },
+};
+
+export interface ConversationStatusChipProps {
+  status: AiConvStatus;
+  showDot?: boolean;
+  className?: string;
+}
+
+export function ConversationStatusChip({
+  status,
+  showDot = false,
+  className,
+}: ConversationStatusChipProps) {
+  const { label, variant, dotClass } = STATUS_CONFIG[status];
+  return (
+    <Badge variant={variant} className={className}>
+      {showDot && (
+        <span className={cn("size-1.5 shrink-0 rounded-full", dotClass)} />
+      )}
+      {label}
+    </Badge>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ConversationListItem
+// ---------------------------------------------------------------------------
+
+export interface ConversationListItemProps {
+  data: AiConvListItemData;
+  isActive?: boolean;
+  onClick?: (id: string) => void;
+  onRead?: (id: string) => void;
+}
+
+export function ConversationListItem({
+  data,
+  isActive,
+  onClick,
+  onRead,
+}: ConversationListItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        onClick?.(data.id);
+        onRead?.(data.id);
+      }}
+      className={cn(
+        "w-full flex items-start gap-3 px-3 py-3 text-left transition-colors",
+        "border-b border-border last:border-b-0",
+        isActive ? "bg-muted" : "hover:bg-muted/40",
+      )}
+    >
+      <ContactAvatar name={data.contact.name} />
+      <div className="min-w-0 flex-1">
+        {/* Row 1 — name + icons + timestamp */}
+        <div className="mb-1 flex items-center justify-between gap-2">
+          <span className="truncate text-sm font-semibold text-foreground">
+            {displayContactName(data.contact.name)}
+          </span>
+          <div className="flex shrink-0 items-center gap-1">
+            {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>
+          </div>
+        </div>
+        {/* Row 2 — status chip + assigned advisor + unread badge */}
+        <div className="mb-1.5 flex items-center justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <ConversationStatusChip status={data.status} showDot />
+            {data.assignedTo && (
+              <span className="truncate text-xs text-muted-foreground">
+                → {data.assignedTo}
+              </span>
+            )}
+          </div>
+          {data.unreadCount ? (
+            <Badge
+              variant="default"
+              className="size-4 shrink-0 justify-center px-0 text-[10px]"
+            >
+              {data.unreadCount}
+            </Badge>
+          ) : null}
+        </div>
+        {/* Row 3 — last message preview */}
+        <p className="line-clamp-2 text-sm leading-relaxed text-muted-foreground">
+          {data.lastMessageRole === "bot" ? (
+            <span className="font-medium text-foreground/60">AI: </span>
+          ) : data.lastMessageRole === "advisor" ? (
+            <span className="font-medium text-foreground/60">You: </span>
+          ) : data.lastMessageRole === "visitor" ? (
+            <span className="font-medium text-foreground/60">
+              {displayContactName(data.contact.name).split(" ")[0]}:{" "}
+            </span>
+          ) : null}
+          {data.lastMessage}
+        </p>
+      </div>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ConversationList
+// ---------------------------------------------------------------------------
+
+function filterConversations(
+  conversations: AiConvListItemData[],
+  query: string,
+  filter: AiConvFilterTab,
+  channelFilter: AiConvChannelFilter,
+): AiConvListItemData[] {
+  const q = query.toLowerCase();
+  return conversations.filter((c) => {
+    const matchesFilter =
+      filter === "all" ||
+      (filter === "emails"
+        ? (c.channel ?? "chat") === "email"
+        : 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 && matchesChannel && matchesSearch;
+  });
+}
+
+const FILTER_TABS: { id: AiConvFilterTab; label: string }[] = [
+  { id: "all", label: "All" },
+  { id: "emails", label: "Emails" },
+  { id: "needs-attention", label: "Urgent" },
+  { id: "closed", label: "Archived" },
+  { id: "ai-active", label: "AI Active" },
+];
+
+export interface ConversationListProps {
+  conversations: AiConvListItemData[];
+  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;
+  className?: string;
+}
+
+export function ConversationList({
+  conversations,
+  activeId,
+  searchQuery = "",
+  activeFilter = "all",
+  channelFilter = "all",
+  hasMore,
+  isLoadingMore,
+  onSearchChange,
+  onFilterChange,
+  onSelect,
+  onRead,
+  onLoadMore,
+  className,
+}: ConversationListProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col border-r border-border bg-background",
+        className,
+      )}
+    >
+      <div className={cn(PANEL_HEADER_HEIGHT, "flex shrink-0 flex-col")}>
+        <div className="flex shrink-0 items-center 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}
+              onChange={(e) => onSearchChange?.(e.target.value)}
+              placeholder="Search conversations..."
+              className="h-8 pl-8 text-sm"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-1 items-center border-b border-border">
+          <Tabs
+            value={activeFilter}
+            onValueChange={(v) => v && onFilterChange?.(v as AiConvFilterTab)}
+            className="w-full"
+          >
+            <TabsList
+              variant="line"
+              className="w-full justify-start gap-0 h-auto"
+            >
+              {FILTER_TABS.map((tab) => (
+                <TabsTrigger
+                  key={tab.id}
+                  value={tab.id}
+                  className="flex-none px-3 py-2 text-xs"
+                >
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+        </div>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-y-auto" tabIndex={0}>
+        {(() => {
+          const filtered = filterConversations(
+            conversations,
+            searchQuery,
+            activeFilter,
+            channelFilter,
+          );
+          return filtered.length === 0 ? (
+            <div className="flex flex-col items-center justify-center gap-2 p-8 text-muted-foreground">
+              <MessageSquare className="size-8 opacity-30" />
+              <p className="text-sm">No conversations</p>
+              {searchQuery && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onSearchChange?.("")}
+                >
+                  Clear search
+                </Button>
+              )}
+              {!searchQuery && activeFilter !== "all" && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onFilterChange?.("all")}
+                >
+                  Clear filter
+                </Button>
+              )}
+            </div>
+          ) : (
+            <>
+              {filtered.map((item) => (
+                <ConversationListItem
+                  key={item.id}
+                  data={item}
+                  isActive={activeId === item.id}
+                  onClick={onSelect}
+                  onRead={onRead}
+                />
+              ))}
+              {hasMore && (
+                <div className="border-t border-border p-3">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full"
+                    disabled={isLoadingMore}
+                    onClick={onLoadMore}
+                  >
+                    {isLoadingMore ? "Loading..." : "Load more"}
+                  </Button>
+                </div>
+              )}
+            </>
+          );
+        })()}
+      </div>
+    </div>
+  );
+}