|
| 1 | +'use client' |
| 2 | + |
| 3 | +import { useEffect, useMemo, useRef, useState } from 'react' |
| 4 | +import { differenceInCalendarDays, isToday, isYesterday } from 'date-fns' |
| 5 | +import { useParams, useRouter } from 'next/navigation' |
| 6 | +import { Expandable, ExpandableContent, Skeleton } from '@/components/emcn' |
| 7 | +import { Clock, Search } from '@/components/emcn/icons' |
| 8 | +import { cn } from '@/lib/core/utils/cn' |
| 9 | +import { type TaskMetadata, usePrefetchChatHistory, useTasks } from '@/hooks/queries/tasks' |
| 10 | + |
| 11 | +const CONFIG = { |
| 12 | + LIST_MAX_HEIGHT: 320, |
| 13 | + SKELETON_ROWS: 5, |
| 14 | +} as const |
| 15 | + |
| 16 | +/** A recency bucket of chats rendered as one section in the history list. */ |
| 17 | +interface ChatBucket { |
| 18 | + key: string |
| 19 | + label: string |
| 20 | + tasks: TaskMetadata[] |
| 21 | +} |
| 22 | + |
| 23 | +/** |
| 24 | + * Buckets chats into Codex-style recency sections. Pinned chats are lifted out |
| 25 | + * of their date bucket into a dedicated section at the top; everything else is |
| 26 | + * grouped by how recently it was last updated. The server already returns the |
| 27 | + * list ordered (pinned first, then desc by `updatedAt`), so per-bucket order is |
| 28 | + * preserved by simply appending as we iterate. |
| 29 | + */ |
| 30 | +function bucketChats(tasks: readonly TaskMetadata[]): ChatBucket[] { |
| 31 | + const now = new Date() |
| 32 | + const pinned: TaskMetadata[] = [] |
| 33 | + const today: TaskMetadata[] = [] |
| 34 | + const yesterday: TaskMetadata[] = [] |
| 35 | + const last7: TaskMetadata[] = [] |
| 36 | + const last30: TaskMetadata[] = [] |
| 37 | + const older: TaskMetadata[] = [] |
| 38 | + |
| 39 | + for (const task of tasks) { |
| 40 | + if (task.isPinned) { |
| 41 | + pinned.push(task) |
| 42 | + continue |
| 43 | + } |
| 44 | + const date = task.updatedAt |
| 45 | + if (isToday(date)) { |
| 46 | + today.push(task) |
| 47 | + } else if (isYesterday(date)) { |
| 48 | + yesterday.push(task) |
| 49 | + } else { |
| 50 | + const days = differenceInCalendarDays(now, date) |
| 51 | + if (days <= 7) last7.push(task) |
| 52 | + else if (days <= 30) last30.push(task) |
| 53 | + else older.push(task) |
| 54 | + } |
| 55 | + } |
| 56 | + |
| 57 | + return ( |
| 58 | + [ |
| 59 | + { key: 'pinned', label: 'Pinned', tasks: pinned }, |
| 60 | + { key: 'today', label: 'Today', tasks: today }, |
| 61 | + { key: 'yesterday', label: 'Yesterday', tasks: yesterday }, |
| 62 | + { key: 'last7', label: 'Previous 7 Days', tasks: last7 }, |
| 63 | + { key: 'last30', label: 'Previous 30 Days', tasks: last30 }, |
| 64 | + { key: 'older', label: 'Older', tasks: older }, |
| 65 | + ] as const |
| 66 | + ).filter((bucket) => bucket.tasks.length > 0) |
| 67 | +} |
| 68 | + |
| 69 | +/** |
| 70 | + * A small status dot mirroring the sidebar's semantics: yellow while a chat is |
| 71 | + * actively streaming, brand accent when it has unread activity. Rendered only |
| 72 | + * when one of those states applies. |
| 73 | + */ |
| 74 | +function StatusDot({ task }: { task: TaskMetadata }) { |
| 75 | + if (!task.isActive && !task.isUnread) return null |
| 76 | + return ( |
| 77 | + <span |
| 78 | + aria-hidden='true' |
| 79 | + className='size-[6px] flex-shrink-0 rounded-full' |
| 80 | + style={{ backgroundColor: task.isActive ? '#EAB308' : 'var(--brand-accent)' }} |
| 81 | + /> |
| 82 | + ) |
| 83 | +} |
| 84 | + |
| 85 | +/** |
| 86 | + * A launcher into the workspace's prior Mothership chats, docked into the grey |
| 87 | + * shelf beneath the home input (Codex tray pattern). Collapsed, it's a compact |
| 88 | + * "All Chats" chip; opening animates a searchable, recency-grouped list open |
| 89 | + * INSIDE the grey tray — the shelf grows downward while the centered input |
| 90 | + * rides upward, in lockstep (300ms ease). Lives on the new-chat home view so a |
| 91 | + * chat can be resumed without the (collapsible) sidebar. |
| 92 | + */ |
| 93 | +interface ChatHistoryProps { |
| 94 | + /** |
| 95 | + * Opens the selected chat. When provided, the chat opens inline (the home |
| 96 | + * input morphs into the docked chat view) instead of navigating. Falls back |
| 97 | + * to a route push when omitted. |
| 98 | + */ |
| 99 | + onSelectChat?: (chatId: string) => void |
| 100 | +} |
| 101 | + |
| 102 | +export function ChatHistory({ onSelectChat }: ChatHistoryProps) { |
| 103 | + const { workspaceId } = useParams<{ workspaceId: string }>() |
| 104 | + const router = useRouter() |
| 105 | + const prefetchChatHistory = usePrefetchChatHistory() |
| 106 | + const { data: tasks = [], isLoading } = useTasks(workspaceId) |
| 107 | + |
| 108 | + const [open, setOpen] = useState(false) |
| 109 | + const [query, setQuery] = useState('') |
| 110 | + const panelRef = useRef<HTMLDivElement>(null) |
| 111 | + const inputRef = useRef<HTMLInputElement>(null) |
| 112 | + |
| 113 | + const buckets = useMemo(() => { |
| 114 | + const trimmed = query.trim().toLowerCase() |
| 115 | + const filtered = trimmed |
| 116 | + ? tasks.filter((task) => task.name.toLowerCase().includes(trimmed)) |
| 117 | + : tasks |
| 118 | + return bucketChats(filtered) |
| 119 | + }, [tasks, query]) |
| 120 | + |
| 121 | + const hasChats = tasks.length > 0 |
| 122 | + const hasResults = buckets.length > 0 |
| 123 | + |
| 124 | + /** Focus the search field and clear stale queries each time the panel opens. */ |
| 125 | + useEffect(() => { |
| 126 | + if (open) { |
| 127 | + inputRef.current?.focus() |
| 128 | + } else { |
| 129 | + setQuery('') |
| 130 | + } |
| 131 | + }, [open]) |
| 132 | + |
| 133 | + /** Collapse on outside click or Escape, matching popover dismissal. */ |
| 134 | + useEffect(() => { |
| 135 | + if (!open) return |
| 136 | + const handlePointerDown = (event: MouseEvent) => { |
| 137 | + if (!panelRef.current?.contains(event.target as Node)) setOpen(false) |
| 138 | + } |
| 139 | + const handleKeyDown = (event: KeyboardEvent) => { |
| 140 | + if (event.key === 'Escape') setOpen(false) |
| 141 | + } |
| 142 | + document.addEventListener('mousedown', handlePointerDown) |
| 143 | + document.addEventListener('keydown', handleKeyDown) |
| 144 | + return () => { |
| 145 | + document.removeEventListener('mousedown', handlePointerDown) |
| 146 | + document.removeEventListener('keydown', handleKeyDown) |
| 147 | + } |
| 148 | + }, [open]) |
| 149 | + |
| 150 | + const handleSelect = (chatId: string) => { |
| 151 | + setOpen(false) |
| 152 | + if (onSelectChat) { |
| 153 | + onSelectChat(chatId) |
| 154 | + return |
| 155 | + } |
| 156 | + router.push(`/workspace/${workspaceId}/task/${chatId}`) |
| 157 | + } |
| 158 | + |
| 159 | + return ( |
| 160 | + <div ref={panelRef} className='w-full'> |
| 161 | + <div className='flex items-center px-2 py-1.5'> |
| 162 | + <button |
| 163 | + type='button' |
| 164 | + onClick={() => setOpen((prev) => !prev)} |
| 165 | + aria-expanded={open} |
| 166 | + aria-label='All chats' |
| 167 | + className={cn( |
| 168 | + 'flex items-center gap-1.5 rounded-[8px] px-2 py-1 transition-colors', |
| 169 | + 'hover-hover:bg-[var(--surface-active)]', |
| 170 | + open && 'bg-[var(--surface-active)]' |
| 171 | + )} |
| 172 | + > |
| 173 | + <Clock className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' /> |
| 174 | + <span className='text-[var(--text-body)] text-sm'>All Chats</span> |
| 175 | + </button> |
| 176 | + </div> |
| 177 | + |
| 178 | + <Expandable expanded={open}> |
| 179 | + <ExpandableContent> |
| 180 | + <div className='flex flex-col px-1.5 pb-1.5'> |
| 181 | + <div className='flex items-center gap-2 px-2 py-1.5'> |
| 182 | + <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' /> |
| 183 | + <input |
| 184 | + ref={inputRef} |
| 185 | + value={query} |
| 186 | + onChange={(event) => setQuery(event.target.value)} |
| 187 | + placeholder='Search chats' |
| 188 | + aria-label='Search chats' |
| 189 | + className='w-full bg-transparent text-[var(--text-body)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none' |
| 190 | + /> |
| 191 | + </div> |
| 192 | + <div |
| 193 | + className='flex flex-col overflow-y-auto overscroll-contain' |
| 194 | + style={{ maxHeight: CONFIG.LIST_MAX_HEIGHT }} |
| 195 | + > |
| 196 | + {isLoading ? ( |
| 197 | + <div className='flex flex-col gap-1 px-1 py-1'> |
| 198 | + {Array.from({ length: CONFIG.SKELETON_ROWS }, (_, i) => ( |
| 199 | + <Skeleton key={i} className='h-[28px] w-full' /> |
| 200 | + ))} |
| 201 | + </div> |
| 202 | + ) : !hasChats ? ( |
| 203 | + <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'> |
| 204 | + No chats yet |
| 205 | + </p> |
| 206 | + ) : !hasResults ? ( |
| 207 | + <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'> |
| 208 | + No chats found |
| 209 | + </p> |
| 210 | + ) : ( |
| 211 | + buckets.map((bucket) => ( |
| 212 | + <div key={bucket.key} className='mt-1.5 first:mt-0'> |
| 213 | + <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-caption'> |
| 214 | + {bucket.label} |
| 215 | + </p> |
| 216 | + {bucket.tasks.map((task) => ( |
| 217 | + <button |
| 218 | + key={task.id} |
| 219 | + type='button' |
| 220 | + onClick={() => handleSelect(task.id)} |
| 221 | + onMouseEnter={() => prefetchChatHistory(task.id)} |
| 222 | + className='flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left transition-colors hover-hover:bg-[var(--surface-active)]' |
| 223 | + > |
| 224 | + <span |
| 225 | + className={cn( |
| 226 | + 'min-w-0 flex-1 truncate text-[var(--text-body)] text-sm', |
| 227 | + task.isUnread && 'font-medium text-[var(--text-primary)]' |
| 228 | + )} |
| 229 | + > |
| 230 | + {task.name} |
| 231 | + </span> |
| 232 | + <StatusDot task={task} /> |
| 233 | + </button> |
| 234 | + ))} |
| 235 | + </div> |
| 236 | + )) |
| 237 | + )} |
| 238 | + </div> |
| 239 | + </div> |
| 240 | + </ExpandableContent> |
| 241 | + </Expandable> |
| 242 | + </div> |
| 243 | + ) |
| 244 | +} |
0 commit comments