Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stop streaming while delete and clean thread

Browse Source
This commit is contained in:
Faisal Amir 2024-01-04 23:44:18 +07:00
parent 51f8d011fb
commit 370f0c4696
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/screens/Chat/ThreadList/index.tsx
View File

@ -6,6 +6,7 @@ import {
ModalTrigger, ModalTrigger,
ModalClose, ModalClose,
ModalFooter, ModalFooter,
ModalPortal,
ModalContent, ModalContent,
ModalHeader, ModalHeader,
ModalTitle, ModalTitle,
@ -34,7 +35,6 @@ import useThreads from '@/hooks/useThreads'
import { displayDate } from '@/utils/datetime' import { displayDate } from '@/utils/datetime'
import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
import { import {
activeThreadAtom, activeThreadAtom,
threadStatesAtom, threadStatesAtom,
@ -50,7 +50,6 @@ export default function ThreadList() {
const activeThread = useAtomValue(activeThreadAtom) const activeThread = useAtomValue(activeThreadAtom)
const { deleteThread, cleanThread } = useDeleteThread() const { deleteThread, cleanThread } = useDeleteThread()
const { downloadedModels } = useGetDownloadedModels() const { downloadedModels } = useGetDownloadedModels()
const messages = useAtomValue(getCurrentChatMessagesAtom)
const { activeThreadId, setActiveThread: onThreadClick } = const { activeThreadId, setActiveThread: onThreadClick } =
useSetActiveThread() 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` `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={() => { onClick={() => {
if ( console.log('a')
messages[messages.length - 1]?.status !== onThreadClick(thread)
MessageStatus.Pending
) {
onThreadClick(thread)
}
}} }}
> >
<div className="relative z-10 p-4 py-4"> <div className="relative z-10 p-4 py-4">
@ -121,7 +116,7 @@ export default function ThreadList() {
<MoreVerticalIcon /> <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"> <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> <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"> <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
<Paintbrush <Paintbrush
size={16} size={16}
@ -132,6 +127,7 @@ export default function ThreadList() {
</span> </span>
</div> </div>
</ModalTrigger> </ModalTrigger>
<ModalPortal />
<ModalContent> <ModalContent>
<ModalHeader> <ModalHeader>
<ModalTitle>Clean Thread</ModalTitle> <ModalTitle>Clean Thread</ModalTitle>
@ -139,13 +135,19 @@ export default function ThreadList() {
<p>Are you sure you want to clean this thread?</p> <p>Are you sure you want to clean this thread?</p>
<ModalFooter> <ModalFooter>
<div className="flex gap-x-2"> <div className="flex gap-x-2">
<ModalClose asChild> <ModalClose
asChild
onClick={(e) => e.stopPropagation()}
>
<Button themes="ghost">No</Button> <Button themes="ghost">No</Button>
</ModalClose> </ModalClose>
<ModalClose asChild> <ModalClose asChild>
<Button <Button
themes="danger" themes="danger"
onClick={() => cleanThread(thread.id)} onClick={(e) => {
e.stopPropagation()
cleanThread(thread.id)
}}
autoFocus autoFocus
> >
Yes Yes
@ -155,9 +157,8 @@ export default function ThreadList() {
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
<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"> <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
<Trash2Icon <Trash2Icon
size={16} size={16}
@ -168,6 +169,7 @@ export default function ThreadList() {
</span> </span>
</div> </div>
</ModalTrigger> </ModalTrigger>
<ModalPortal />
<ModalContent> <ModalContent>
<ModalHeader> <ModalHeader>
<ModalTitle>Delete Thread</ModalTitle> <ModalTitle>Delete Thread</ModalTitle>
@ -178,14 +180,20 @@ export default function ThreadList() {
</p> </p>
<ModalFooter> <ModalFooter>
<div className="flex gap-x-2"> <div className="flex gap-x-2">
<ModalClose asChild> <ModalClose
asChild
onClick={(e) => e.stopPropagation()}
>
<Button themes="ghost">No</Button> <Button themes="ghost">No</Button>
</ModalClose> </ModalClose>
<ModalClose asChild> <ModalClose asChild>
<Button <Button
autoFocus autoFocus
themes="danger" themes="danger"
onClick={() => deleteThread(thread.id)} onClick={(e) => {
e.stopPropagation()
deleteThread(thread.id)
}}
> >
Yes Yes
</Button> </Button>