fix: delete history (#659)

Author: RainyNight9

src/components/Common/HistoryList/HistoryListContent.tsx

@@ -33,6 +33,7 @@ const HistoryListContent: FC<HistoryListContentProps> = ({
 
   const [isOpen, setIsOpen] = useState(false);
   const [highlightId, setHighlightId] = useState<string>("");
+  const [highlightItem, setHighlightItem] = useState<Chat>({} as Chat);
 
   const sortedList = useMemo(() => {
     if (isNil(chats)) return {};
@@ -191,6 +192,15 @@ const HistoryListContent: FC<HistoryListContentProps> = ({
     };
   }, [highlightId, keyboardScroll, debouncedMouseScroll]);
 
+  const handleDelete = useCallback(() => {
+    if (!highlightId) return;
+    const currentIndex = flattenedChats.findIndex(
+      (chat) => chat._id === highlightId
+    );
+    setHighlightItem(flattenedChats[currentIndex]);
+    setIsOpen(true);
+  }, [highlightId]);
+
   if (chats.length === 0) {
     return (
       <div className="flex items-center justify-center flex-1 pt-8">
@@ -214,10 +224,8 @@ const HistoryListContent: FC<HistoryListContentProps> = ({
                   onSelect={onSelect}
                   onRename={onRename}
                   onMouseEnter={() => setHighlightId(item._id)}
-                  onMouseLeave={() => setHighlightId("")}
-                  onBlur={() => setHighlightId("")}
                   highlightId={highlightId}
-                  setIsOpen={setIsOpen}
+                  handleDelete={handleDelete}
                 />
               ))}
             </ul>
@@ -227,7 +235,7 @@ const HistoryListContent: FC<HistoryListContentProps> = ({
 
       <DeleteDialog
         isOpen={isOpen}
-        active={active}
+        active={active || highlightItem}
         setIsOpen={setIsOpen}
         handleRemove={handleRemove}
       />

src/components/Common/HistoryList/HistoryListItem.tsx

@@ -14,9 +14,7 @@ interface HistoryListItemProps {
   onSelect: (chat: Chat) => void;
   onRename: (chatId: string, title: string) => void;
   onMouseEnter: () => void;
-  onMouseLeave: () => void;
-  onBlur: () => void;
-  setIsOpen: (value: boolean) => void;
+  handleDelete: () => void;
   highlightId: string;
 }
 
@@ -26,16 +24,14 @@ const HistoryListItem: FC<HistoryListItemProps> = ({
   onSelect,
   onRename,
   onMouseEnter,
-  onMouseLeave,
-  onBlur,
   highlightId,
-  setIsOpen,
+  handleDelete,
 }) => {
   const { t } = useTranslation();
   const moreButtonRef = useRef<HTMLButtonElement>(null);
   const { _id, _source } = item;
   const title = _source?.title ?? _id;
-  const isActive = item._id === active?._id || item._id === highlightId
+  const isActive = item._id === active?._id || item._id === highlightId;
 
   const [isEdit, setIsEdit] = useState(false);
 
@@ -72,9 +68,7 @@ const HistoryListItem: FC<HistoryListItemProps> = ({
       icon: Trash2,
       shortcut: "D",
       iconColor: "#FF2018",
-      onClick: () => {
-        setIsOpen(true);
-      },
+      onClick: handleDelete,
     },
   ];
 
@@ -96,10 +90,7 @@ const HistoryListItem: FC<HistoryListItemProps> = ({
         onSelect(item);
       }}
       onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onBlur={onBlur}
       onContextMenu={onContextMenu}
-
     >
       <div
         className={clsx("w-1 h-6 rounded-sm bg-[#0072FF]", {