diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx index f4c201d5c7..af791c6ad9 100644 --- a/client/src/components/Conversations/Conversation.jsx +++ b/client/src/components/Conversations/Conversation.jsx @@ -126,6 +126,7 @@ export default function Conversation({ conversation, retainView }) { renaming={renaming} cancelHandler={cancelHandler} retainView={retainView} + title={title} /> ) : ( diff --git a/client/src/components/Conversations/DeleteButton.jsx b/client/src/components/Conversations/DeleteButton.jsx index 0ca78d9375..282099bee0 100644 --- a/client/src/components/Conversations/DeleteButton.jsx +++ b/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 ( - - {renaming ? : } - + + + {renaming ? : } + + + + + + {localize('com_ui_delete_conversation_confirm')} {title} + + + + > + } + selection={{ + selectHandler: confirmDelete, + selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white', + selectText: localize('com_ui_delete'), + }} + /> + ); } diff --git a/client/src/localization/languages/Eng.tsx b/client/src/localization/languages/Eng.tsx index c614610ca0..6653f54690 100644 --- a/client/src/localization/languages/Eng.tsx +++ b/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?', diff --git a/client/src/localization/languages/It.tsx b/client/src/localization/languages/It.tsx index e9f4ec8b08..8c6cbf6b01 100644 --- a/client/src/localization/languages/It.tsx +++ b/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?',