import { useEffect, useRef, useState } from "react"; import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"; import { useTranslation } from "react-i18next"; import { getDisplaySessionTitle, getEditableSessionTitle, isSessionTitleUnchanged, } from "@/features/chat/lib/sessionTitle"; import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/shared/ui/dropdown-menu"; import { Input } from "@/shared/ui/input"; import { SessionActivityIndicator } from "@/shared/ui/SessionActivityIndicator"; const INACTIVE_CHAT_ROW_CLASS = "text-foreground hover:bg-background-alt hover:text-foreground"; const ACTIVE_CHAT_ROW_CLASS = "bg-background-alt font-normal text-foreground hover:bg-background-alt hover:text-foreground"; interface SidebarChatRowProps { id: string; title: string; isActive: boolean; isRunning?: boolean; hasUnread?: boolean; className?: string; nested?: boolean; onSelect?: (id: string) => void; onRename?: (id: string, nextTitle: string) => void; onArchive?: (id: string) => void; } export function SidebarChatRow({ id, title, isActive, isRunning = false, hasUnread = false, className, nested = false, onSelect, onRename, onArchive, }: SidebarChatRowProps) { const { t } = useTranslation(["sidebar", "common"]); const [menuOpen, setMenuOpen] = useState(false); const [editing, setEditing] = useState(false); const [dragging, setDragging] = useState(false); const inputRef = useRef(null); const displayTitle = getDisplaySessionTitle( title, t("common:session.defaultTitle"), ); const editableTitle = getEditableSessionTitle( title, t("common:session.defaultTitle"), ); const [draftTitle, setDraftTitle] = useState(editableTitle); const showActivityIndicator = isRunning || hasUnread; useEffect(() => { setDraftTitle(editableTitle); }, [editableTitle]); useEffect(() => { if (!editing) return; inputRef.current?.focus(); inputRef.current?.select(); }, [editing]); const startRename = () => { setDraftTitle(editableTitle); setMenuOpen(false); setEditing(true); }; const cancelRename = () => { setDraftTitle(editableTitle); setEditing(false); }; const commitRename = () => { const nextTitle = draftTitle.trim(); setEditing(false); if ( !nextTitle || isSessionTitleUnchanged( nextTitle, title, t("common:session.defaultTitle"), ) ) { return; } onRename?.(id, nextTitle); }; if (editing) { return (

setDraftTitle(e.target.value)} onBlur={commitRename} onClick={(e) => { e.preventDefault(); e.stopPropagation(); }} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); commitRename(); } if (e.key === "Escape") { e.preventDefault(); cancelRename(); } }} className="flex-1 min-w-0 px-3 text-sm font-normal" style={{ height: 32 }} />

); } return ( // biome-ignore lint/a11y/noStaticElementInteractions: wrapper handles drag and context menu, interactive content is the inner Button

{ e.dataTransfer.setData("text/x-session-id", id); e.dataTransfer.effectAllowed = "move"; setDragging(true); }} onDragEnd={() => setDragging(false)} onContextMenu={(e) => { e.preventDefault(); setMenuOpen(true); }} className={cn( "relative flex items-center group/chat-row rounded-md transition-colors duration-200 hover:bg-background-alt focus-within:bg-background-alt active:cursor-grabbing", (isActive || menuOpen) && "bg-background-alt", dragging && "opacity-40 bg-accent/30", className, )} > {showActivityIndicator && nested && ( )} {t("common:actions.rename")} { onArchive?.(id); }} > {t("common:actions.archive")}

); }