66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React, { useCallback } from 'react'
|
|
|
|
import {
|
|
Button,
|
|
Modal,
|
|
ModalClose,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalPortal,
|
|
ModalTitle,
|
|
ModalTrigger,
|
|
} from '@janhq/uikit'
|
|
import { Paintbrush } from 'lucide-react'
|
|
|
|
import useDeleteThread from '@/hooks/useDeleteThread'
|
|
|
|
type Props = {
|
|
threadId: string
|
|
}
|
|
|
|
const CleanThreadModal: React.FC<Props> = ({ threadId }) => {
|
|
const { cleanThread } = useDeleteThread()
|
|
const onCleanThreadClick = useCallback(
|
|
(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.stopPropagation()
|
|
cleanThread(threadId)
|
|
},
|
|
[cleanThread, threadId]
|
|
)
|
|
|
|
return (
|
|
<Modal>
|
|
<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} className="text-muted-foreground" />
|
|
<span className="text-bold text-black dark:text-muted-foreground">
|
|
Clean thread
|
|
</span>
|
|
</div>
|
|
</ModalTrigger>
|
|
<ModalPortal />
|
|
<ModalContent>
|
|
<ModalHeader>
|
|
<ModalTitle>Clean Thread</ModalTitle>
|
|
</ModalHeader>
|
|
<p>Are you sure you want to clean this thread?</p>
|
|
<ModalFooter>
|
|
<div className="flex gap-x-2">
|
|
<ModalClose asChild onClick={(e) => e.stopPropagation()}>
|
|
<Button themes="ghost">No</Button>
|
|
</ModalClose>
|
|
<ModalClose asChild>
|
|
<Button themes="danger" onClick={onCleanThreadClick} autoFocus>
|
|
Yes
|
|
</Button>
|
|
</ModalClose>
|
|
</div>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default React.memo(CleanThreadModal)
|