'use client'; import { memo, useMemo, useState, type ReactNode } from 'react'; import type { ConversationSummary, OllamaStatus } from '@/app/lib/types'; import { groupConversations } from '@/app/lib/group-conversations'; import { formatFullTime, relativeTime } from '@/app/lib/format'; import { useNow } from '@/app/hooks/useNow'; import { STATUS_LABEL_KEYS, statusKind, type StatusKind } from '@/app/lib/ollama-status'; import { branding } from '@/app/config/branding'; import { ChevronDownIcon, DbIcon, PlusIcon, TrashIcon } from './icons'; import { useT } from './ContentProvider'; import { SUGGESTION_TONES, useSuggestions } from './suggestions'; import { cx } from './ui'; interface SidebarProps { conversations: ConversationSummary[]; activeConvId: string | null; status: OllamaStatus | null; /** The sign-in / account box, shown in the footer. Omitted when accounts are not available. */ account?: ReactNode; onNew: () => void; onSelect: (conv: ConversationSummary) => void; onDelete: (id: string) => void; onClearAll: () => void; onPickSuggestion: (prompt: string) => void; } // Class names are written out in full so Tailwind can see them. const STATUS_STYLES: Record = { checking: { box: 'border-placeholder/15 bg-placeholder/6', dot: 'bg-placeholder', label: 'text-placeholder' }, offline: { box: 'border-danger/15 bg-danger/6', dot: 'bg-danger', label: 'text-danger' }, 'no-model': { box: 'border-danger/15 bg-danger/6', dot: 'bg-danger', label: 'text-danger' }, online: { box: 'border-success/15 bg-success/6', dot: 'bg-success status-dot', label: 'text-success' }, }; // Memoized: its props only change when conversations or status do, not on every keystroke or streamed token. export const Sidebar = memo(function Sidebar({ conversations, activeConvId, status, account, onNew, onSelect, onDelete, onClearAll, onPickSuggestion }: SidebarProps) { const t = useT(); const suggestions = useSuggestions(); const [suggestionsOpen, setSuggestionsOpen] = useState(false); const [clearConfirm, setClearConfirm] = useState(false); const sortedConversations = useMemo(() => [...conversations].sort((a, b) => b.updatedAt - a.updatedAt), [conversations]); // Ticks, so "5m ago" and the Today / Yesterday groups stay right while the page is open (and across midnight). const now = useNow(); const convGroups = useMemo(() => groupConversations(sortedConversations, now), [sortedConversations, now]); const kind = statusKind(status); const statusStyle = STATUS_STYLES[kind]; return ( ); });