Feat: Implement temporary conversation removal logic in ConversationD… (#11454)

### What problem does this PR solve?

Implement temporary conversation removal logic in ConversationDropDown

Before modification：

<img width="2120" height="1034" alt="图片"
src="https://github.com/user-attachments/assets/21cf0a92-5660-401c-8b4c-31d85ec800f0"
/>

After modification:

<img width="2120" height="1034" alt="图片"
src="https://github.com/user-attachments/assets/0a3fffa5-dc9a-4af9-a3c6-c2e976e4bd6b"
/>
<img width="2120" height="1034" alt="图片"
src="https://github.com/user-attachments/assets/45473971-ba83-43e0-8941-64a5c6f552a2"
/>


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/pages/next-chats/chat/conversation-dropdown.tsx

@@ -14,16 +14,28 @@ import { useTranslation } from 'react-i18next';
 export function ConversationDropdown({
   children,
   conversation,
+  removeTemporaryConversation,
 }: PropsWithChildren & {
   conversation: IConversation;
+  removeTemporaryConversation?: (conversationId: string) => void;
 }) {
   const { t } = useTranslation();
 
   const { removeConversation } = useRemoveConversation();
 
   const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
-    removeConversation([conversation.id]);
-  }, [conversation.id, removeConversation]);
+    if (conversation.is_new && removeTemporaryConversation) {
+      removeTemporaryConversation(conversation.id);
+      removeConversation([]);
+    } else {
+      removeConversation([conversation.id]);
+    }
+  }, [
+    conversation.id,
+    conversation.is_new,
+    removeConversation,
+    removeTemporaryConversation,
+  ]);
 
   return (
     <DropdownMenu>

web/src/pages/next-chats/chat/sessions.tsx

@@ -29,6 +29,7 @@ export function Sessions({
   const {
     list: conversationList,
     addTemporaryConversation,
+    removeTemporaryConversation,
     handleInputChange,
     searchString,
   } = useSelectDerivedConversationList();
@@ -97,7 +98,10 @@ export function Sessions({
           >
             <CardContent className="px-3 py-2 flex justify-between items-center group gap-1">
               <div className="truncate">{x.name}</div>
-              <ConversationDropdown conversation={x}>
+              <ConversationDropdown
+                conversation={x}
+                removeTemporaryConversation={removeTemporaryConversation}
+              >
                 <MoreButton></MoreButton>
               </ConversationDropdown>
             </CardContent>

web/src/pages/next-chats/hooks/use-select-conversation-list.ts

@@ -80,6 +80,14 @@ export const useSelectDerivedConversationList = () => {
     });
   }, [conversationList, dialogId, prologue, t, setNewConversationRouteParams]);
 
+  const removeTemporaryConversation = useCallback((conversationId: string) => {
+    setList((prevList) => {
+      return prevList.filter(
+        (conversation) => conversation.id !== conversationId,
+      );
+    });
+  }, []);
+
   // When you first enter the page, select the top conversation card
 
   useEffect(() => {
@@ -89,6 +97,7 @@ export const useSelectDerivedConversationList = () => {
   return {
     list,
     addTemporaryConversation,
+    removeTemporaryConversation,
     loading,
     handleInputChange,
     searchString,