Function SidebarHistoryItem

lib/chat/components/sidebar-history-item.jsx:12–122

({ chat, isActive, onDelete, onStar, onRename })

import { cn } from '../utils.js';

export function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename }) {
  const { navigateToChat } = useChatNav();
  const { setOpenMobile } = useSidebar();
  const [hovered, setHovered] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [renameDialogOpen, setRenameDialogOpen] = useState(false);

  const showMenu = hovered || dropdownOpen;

  return (
    <SidebarMenuItem>
      <div
        className="relative group"
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
      >
        <SidebarMenuButton
          href={chat.codeWorkspaceId && chat.containerName ? `/code/${chat.codeWorkspaceId}` : `/chat/${chat.id}`}
          className="pr-8"
          isActive={isActive}
          onClick={(e) => {
            e.preventDefault();
            if (chat.codeWorkspaceId && chat.containerName) {
              window.location.href = `/code/${chat.codeWorkspaceId}`;
            } else {
              navigateToChat(chat.id);
            }
            setOpenMobile(false);
          }}
        >
          <span className="relative">
            {chat.chatMode === 'code' ? <CodeIcon size={14} /> : <AgentIcon size={14} />}
            {chat.hasChanges ? <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full bg-destructive" /> : null}
          </span>
          <span className="truncate flex-1">
            {chat.title}
          </span>
        </SidebarMenuButton>

        <div className={cn(
          'absolute right-1 top-1/2 -translate-y-1/2 z-10',
          showMenu ? 'opacity-100' : 'opacity-100 md:opacity-0 md:pointer-events-none'
        )}>
          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
            <DropdownMenuTrigger asChild>
              <button
                className={cn(
                  'rounded-md p-1',
                  'text-muted-foreground hover:text-foreground',
                  'bg-foreground/10 hover:bg-foreground/15'
                )}
                aria-label="Chat options"
              >
                <MoreHorizontalIcon size={16} />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" side="bottom">