fix: added dialog confimation clean thread

TJX2014 · Dec 21, 2023 · c95c765 · c95c765
1 parent c723fb6
commit c95c765
Showing 1 changed file with 36 additions and 13 deletions.
diff --git a/web/screens/Chat/ThreadList/index.tsx b/web/screens/Chat/ThreadList/index.tsx
@@ -87,7 +87,7 @@ export default function ThreadList() {
             <div
               key={i}
               className={twMerge(
-                `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={() => onThreadClick(thread)}
             >
@@ -110,15 +110,41 @@ 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">
-                  <div
-                    className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
-                    onClick={() => cleanThread(thread.id)}
-                  >
-                    <Paintbrush size={16} className="text-muted-foreground" />
-                    <span className="text-bold text-black dark:text-muted-foreground">
-                      Clean thread
-                    </span>
-                  </div>
+                  <Modal>
+                    <ModalTrigger asChild>
+                      <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>
+                    <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>
+                            <Button themes="ghost">No</Button>
+                          </ModalClose>
+                          <ModalClose asChild>
+                            <Button
+                              themes="danger"
+                              onClick={() => cleanThread(thread.id)}
+                            >
+                              Yes
+                            </Button>
+                          </ModalClose>
+                        </div>
+                      </ModalFooter>
+                    </ModalContent>
+                  </Modal>
+
                   <Modal>
                     <ModalTrigger asChild>
                       <div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
@@ -155,9 +181,6 @@ export default function ThreadList() {
                   </Modal>
                 </div>
               </div>
-              {/* {messages.length > 0 && (
-              )} */}
-
               {activeThreadId === thread.id && (
                 <m.div
                   className="absolute inset-0 left-0 h-full w-full rounded-lg bg-gray-100 p-4 dark:bg-secondary/50"