mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-28 14:18:51 +01:00
911babd3e0
* BIG UI UPDATE * fix: search bar, dialog template, new chat icon, convo icon and delete/rename button * moved some color config and a lot of files * small text fixes and tailwind config refactor * Update localization and UI styles * Update styles and add user-select:none to Tooltip component * Update mobile.css styles for navigation mask and background color * Update component imports and styles * Update DeleteButton imports and references * Update UI components * Update tooltip delay duration * Fix styling and update text in various components * fixed assistant style * minor style fixes * revert: removed CreationHeader & CreationPanel * style: match new styling for SidePanel * style: match bg-gray-800 to ChatGPT (#212121) * style: remove slate for gray where applicable to match new light theme --------- Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { useParams } from 'react-router-dom';
|
|
import { QueryKeys } from 'librechat-data-provider';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import type { TMessage } from 'librechat-data-provider';
|
|
import { useLocalize, useConversations, useConversation } from '~/hooks';
|
|
import { useDeleteConversationMutation } from '~/data-provider';
|
|
import { Dialog, DialogTrigger, Label } from '~/components/ui';
|
|
import DialogTemplate from '~/components/ui/DialogTemplate';
|
|
import { TrashIcon, CrossIcon } from '~/components/svg';
|
|
|
|
export default function DeleteButton({ conversationId, renaming, retainView, title }) {
|
|
const localize = useLocalize();
|
|
const queryClient = useQueryClient();
|
|
const { newConversation } = useConversation();
|
|
const { refreshConversations } = useConversations();
|
|
const { conversationId: currentConvoId } = useParams();
|
|
const deleteConvoMutation = useDeleteConversationMutation();
|
|
|
|
const confirmDelete = () => {
|
|
const messages = queryClient.getQueryData<TMessage[]>([QueryKeys.messages, conversationId]);
|
|
const thread_id = messages?.[messages?.length - 1]?.thread_id;
|
|
|
|
deleteConvoMutation.mutate(
|
|
{ conversationId, thread_id, source: 'button' },
|
|
{
|
|
onSuccess: () => {
|
|
if (currentConvoId === conversationId) {
|
|
newConversation();
|
|
}
|
|
|
|
refreshConversations();
|
|
retainView();
|
|
},
|
|
},
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<button className="p-1 hover:text-black dark:hover:text-white">
|
|
{renaming ? <CrossIcon /> : <TrashIcon />}
|
|
</button>
|
|
</DialogTrigger>
|
|
<DialogTemplate
|
|
showCloseButton={false}
|
|
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-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
|
|
selectText: localize('com_ui_delete'),
|
|
}}
|
|
/>
|
|
</Dialog>
|
|
);
|
|
}
|