feat: delete button confirm (danny-avila#875)

* base for confirm delete

* more like OpenAI

Author: berry-13

client/src/components/Conversations/Conversation.jsx

@@ -126,6 +126,7 @@ export default function Conversation({ conversation, retainView }) {
             renaming={renaming}
             cancelHandler={cancelHandler}
             retainView={retainView}
+            title={title}
           />
         </div>
       ) : (

client/src/components/Conversations/DeleteButton.jsx

@@ -3,14 +3,21 @@ import TrashIcon from '../svg/TrashIcon';
 import CrossIcon from '../svg/CrossIcon';
 import { useRecoilValue } from 'recoil';
 import { useDeleteConversationMutation } from 'librechat-data-provider';
-
+import { Dialog, DialogTrigger, Label } from '~/components/ui/';
+import DialogTemplate from '~/components/ui/DialogTemplate';
 import store from '~/store';
+import { useLocalize } from '~/hooks';
 
-export default function DeleteButton({ conversationId, renaming, cancelHandler, retainView }) {
+export default function DeleteButton({ conversationId, renaming, retainView, title }) {
+  const localize = useLocalize();
   const currentConversation = useRecoilValue(store.conversation) || {};
   const { newConversation } = store.useConversation();
   const { refreshConversations } = store.useConversations();
 
+  const confirmDelete = () => {
+    deleteConvoMutation.mutate({ conversationId, source: 'button' });
+  };
+
   const deleteConvoMutation = useDeleteConversationMutation(conversationId);
 
   useEffect(() => {
@@ -25,15 +32,31 @@ export default function DeleteButton({ conversationId, renaming, cancelHandler,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [deleteConvoMutation.isSuccess]);
 
-  const clickHandler = () => {
-    deleteConvoMutation.mutate({ conversationId, source: 'button' });
-  };
-
-  const handler = renaming ? cancelHandler : clickHandler;
-
   return (
-    <button className="p-1 hover:text-white" onClick={handler}>
-      {renaming ? <CrossIcon /> : <TrashIcon />}
-    </button>
+    <Dialog>
+      <DialogTrigger asChild>
+        <button className="p-1 hover:text-white">{renaming ? <CrossIcon /> : <TrashIcon />}</button>
+      </DialogTrigger>
+      <DialogTemplate
+        title={localize('com_ui_delete_conversation')}
+        className="max-w-[450px]"
+        main={
+          <>
+            <div className="flex w-full flex-col items-center gap-2">
+              <div className="grid w-full items-center gap-2">
+                <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
+                  {localize('com_ui_delete_conversation_confirm')} <strong>{title}</strong>
+                </Label>
+              </div>
+            </div>
+          </>
+        }
+        selection={{
+          selectHandler: confirmDelete,
+          selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+          selectText: localize('com_ui_delete'),
+        }}
+      />
+    </Dialog>
   );
 }

client/src/localization/languages/Eng.tsx

@@ -28,6 +28,9 @@ export default {
   com_ui_of: 'of',
   com_ui_entries: 'Entries',
   com_ui_pay_per_call: 'All AI conversations in one place. Pay per call and not per month',
+  com_ui_delete: 'Delete',
+  com_ui_delete_conversation: 'Delete chat?',
+  com_ui_delete_conversation_confirm: 'This will delete',
   com_auth_error_login:
     'Unable to login with the information provided. Please check your credentials and try again.',
   com_auth_no_account: 'Don\'t have an account?',

client/src/localization/languages/It.tsx

@@ -29,6 +29,8 @@ export default {
   com_ui_entries: 'Voci',
   com_ui_pay_per_call:
     'Tutte le conversazioni con l\'IA in un unico posto. Paga per chiamata e non al mese',
+  com_ui_delete_conversation: 'Elimina chat?',
+  com_ui_delete_conversation_confirm: 'Questo eliminerà',
   com_auth_error_login:
     'Impossibile effettuare l\'accesso con le informazioni fornite. Controlla le tue credenziali e riprova.',
   com_auth_no_account: 'Non hai un account?',