From 370f0c4696263ed4853d3991df3faf81e1d77b37 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 4 Jan 2024 23:44:18 +0700
Subject: [PATCH] fix: stop streaming while delete and clean thread

---
 web/screens/Chat/ThreadList/index.tsx | 38 ++++++++++++++++-----------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/web/screens/Chat/ThreadList/index.tsx b/web/screens/Chat/ThreadList/index.tsx
index d82951a3f..0a98e91d2 100644
--- a/web/screens/Chat/ThreadList/index.tsx
+++ b/web/screens/Chat/ThreadList/index.tsx
@@ -6,6 +6,7 @@ import {
   ModalTrigger,
   ModalClose,
   ModalFooter,
+  ModalPortal,
   ModalContent,
   ModalHeader,
   ModalTitle,
@@ -34,7 +35,6 @@ import useThreads from '@/hooks/useThreads'
 
 import { displayDate } from '@/utils/datetime'
 
-import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 import {
   activeThreadAtom,
   threadStatesAtom,
@@ -50,7 +50,6 @@ export default function ThreadList() {
   const activeThread = useAtomValue(activeThreadAtom)
   const { deleteThread, cleanThread } = useDeleteThread()
   const { downloadedModels } = useGetDownloadedModels()
-  const messages = useAtomValue(getCurrentChatMessagesAtom)
 
   const { activeThreadId, setActiveThread: onThreadClick } =
     useSetActiveThread()
@@ -93,12 +92,8 @@ export default function ThreadList() {
                 `group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-gray-100 hover:dark:bg-secondary/50`
               )}
               onClick={() => {
-                if (
-                  messages[messages.length - 1]?.status !==
-                  MessageStatus.Pending
-                ) {
-                  onThreadClick(thread)
-                }
+                console.log('a')
+                onThreadClick(thread)
               }}
             >
               <div className="relative z-10 p-4 py-4">
@@ -121,7 +116,7 @@ export default function ThreadList() {
                 <MoreVerticalIcon />
                 <div className="invisible absolute right-0 z-20 w-40 overflow-hidden rounded-lg border border-border bg-background shadow-lg group-hover/icon:visible">
                   <Modal>
-                    <ModalTrigger asChild>
+                    <ModalTrigger asChild onClick={(e) => e.stopPropagation()}>
                       <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
                         <Paintbrush
                           size={16}
@@ -132,6 +127,7 @@ export default function ThreadList() {
                         </span>
                       </div>
                     </ModalTrigger>
+                    <ModalPortal />
                     <ModalContent>
                       <ModalHeader>
                         <ModalTitle>Clean Thread</ModalTitle>
@@ -139,13 +135,19 @@ export default function ThreadList() {
                       <p>Are you sure you want to clean this thread?</p>
                       <ModalFooter>
                         <div className="flex gap-x-2">
-                          <ModalClose asChild>
+                          <ModalClose
+                            asChild
+                            onClick={(e) => e.stopPropagation()}
+                          >
                             <Button themes="ghost">No</Button>
                           </ModalClose>
                           <ModalClose asChild>
                             <Button
                               themes="danger"
-                              onClick={() => cleanThread(thread.id)}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                cleanThread(thread.id)
+                              }}
                               autoFocus
                             >
                               Yes
@@ -155,9 +157,8 @@ export default function ThreadList() {
                       </ModalFooter>
                     </ModalContent>
                   </Modal>
-
                   <Modal>
-                    <ModalTrigger asChild>
+                    <ModalTrigger asChild onClick={(e) => e.stopPropagation()}>
                       <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
                         <Trash2Icon
                           size={16}
@@ -168,6 +169,7 @@ export default function ThreadList() {
                         </span>
                       </div>
                     </ModalTrigger>
+                    <ModalPortal />
                     <ModalContent>
                       <ModalHeader>
                         <ModalTitle>Delete Thread</ModalTitle>
@@ -178,14 +180,20 @@ export default function ThreadList() {
                       </p>
                       <ModalFooter>
                         <div className="flex gap-x-2">
-                          <ModalClose asChild>
+                          <ModalClose
+                            asChild
+                            onClick={(e) => e.stopPropagation()}
+                          >
                             <Button themes="ghost">No</Button>
                           </ModalClose>
                           <ModalClose asChild>
                             <Button
                               autoFocus
                               themes="danger"
-                              onClick={() => deleteThread(thread.id)}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                deleteThread(thread.id)
+                              }}
                             >
                               Yes
                             </Button>