"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { LoaderCircle, MessageSquarePlus, Pencil, Trash2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { getImageConversationStats, type ImageConversation } from "@/store/image-conversations"; type ImageSidebarProps = { conversations: ImageConversation[]; isLoadingHistory: boolean; selectedConversationId: string | null; onCreateDraft: () => void; onClearHistory: () => void | Promise; onSelectConversation: (id: string) => void; onDeleteConversation: (id: string) => void | Promise; onRenameConversation: (id: string, title: string) => void | Promise; formatConversationTime: (value: string) => string; hideActionButtons?: boolean; }; export function ImageSidebar({ conversations, isLoadingHistory, selectedConversationId, onCreateDraft, onClearHistory, onSelectConversation, onDeleteConversation, onRenameConversation, formatConversationTime, hideActionButtons = false, }: ImageSidebarProps) { const [editingId, setEditingId] = useState(null); const [editingTitle, setEditingTitle] = useState(""); const editInputRef = useRef(null); useEffect(() => { if (editingId && editInputRef.current) { editInputRef.current.focus(); editInputRef.current.select(); } }, [editingId]); const startRename = useCallback((conversation: ImageConversation, e: React.MouseEvent) => { e.stopPropagation(); setEditingId(conversation.id); setEditingTitle(conversation.title); }, []); const commitRename = useCallback(() => { const trimmed = editingTitle.trim(); if (editingId && trimmed) { void onRenameConversation(editingId, trimmed); } setEditingId(null); setEditingTitle(""); }, [editingId, editingTitle, onRenameConversation]); const cancelRename = useCallback(() => { setEditingId(null); setEditingTitle(""); }, []); return ( ); }