Conversation List

1'use client';
2 
3import { useState } from 'react';
4import { MessageSquare, Pin } from 'lucide-react';
5import { cn } from '@/lib/utils';
6 
7export interface ConversationEntry {
8  id: string;
9  title: string;
10  group: string;
11  pinned?: boolean;
12}
13 
14export type ConversationListVariant = 'Default' | 'Compact';
15 
16export interface ConversationListProps {
17  conversations: ConversationEntry[];
18  activeId?: string;
19  onSelect?: (id: string) => void;
20  onTogglePin?: (id: string) => void;
21  variant?: ConversationListVariant;
22  className?: string;
23}
24 
25export function ConversationList({
26  conversations,
27  activeId: activeProp,
28  onSelect,
29  onTogglePin,
30  variant = 'Default',
31  className,
32}: ConversationListProps) {
33  const [activeState, setActiveState] = useState(conversations[0]?.id);
34  const [pins, setPins] = useState<Set<string>>(
35    new Set(conversations.filter((c) => c.pinned).map((c) => c.id)),
36  );
37  const active = activeProp !== undefined ? activeProp : activeState;
38  const compact = variant === 'Compact';
39 
40  function select(id: string) {
41    setActiveState(id);
42    onSelect?.(id);
43  }
44 
45  function togglePin(id: string) {
46    setPins((previous) => {
47      const next = new Set(previous);
48      if (next.has(id)) next.delete(id);
49      else next.add(id);
50      return next;
51    });
52    onTogglePin?.(id);
53  }
54 
55  const groups: string[] = [];
56  for (const conversation of conversations) {
57    if (!groups.includes(conversation.group)) groups.push(conversation.group);
58  }
59 
60  return (
61    <nav
62      aria-label="Conversations"
63      className={cn(
64        'w-full max-w-[300px] rounded-2xl border border-black/[0.08] bg-white p-2 shadow-xs dark:border-white/[0.09] dark:bg-[#0B0B0D]',
65        className,
66      )}
67    >
68      {groups.map((group) => (
69        <div key={group} className="[&:not(:first-child)]:mt-3">
70          <p className="px-2 pb-1 font-mono text-[9.5px] font-medium uppercase tracking-[0.08em] text-neutral-400 dark:text-neutral-600">
71            {group}
72          </p>
73          <ul>
74            {conversations
75              .filter((conversation) => conversation.group === group)
76              .map((conversation) => {
77                const isActive = conversation.id === active;
78                const pinned = pins.has(conversation.id);
79                return (
80                  <li key={conversation.id} className="group/item relative">
81                    <button
82                      type="button"
83                      aria-current={isActive ? 'true' : undefined}
84// … truncated