🎨 refactor: UI stlye (#4438)

* feat: Refactor ChatForm and StopButton components for improved styling and localization

* feat: Refactor AudioRecorder, ChatForm, AttachFile, and SendButton components for improved styling and layout

* feat: Add RevokeAllKeys component and update styling for buttons and inputs

* feat: Refactor ClearChats component and update ClearConvos functionality for improved clarity and user experience

* feat: Remove ClearConvos component and update related imports and functionality in Avatar and DeleteCacheButton components

* feat: Rename DeleteCacheButton to DeleteCache and update related imports; enhance confirmation message in localization

* feat: Update ChatForm layout for RTL support and improve component structure

* feat: Adjust ChatForm layout for improved RTL support and alignment

* feat: Refactor Bookmark components to use new UI elements and improve styling

* feat: Update FileSearch and ShareAgent components for improved button styling and layout

* feat: Update ChatForm and TextareaHeader styles for improved UI consistency

* feat: Refactor Nav components for improved styling and layout adjustments

* feat: Update button sizes and padding for improved UI consistency across chat components

* feat: Remove ClearChatsButton test file as part of code cleanup

client/src/components/Nav/SettingsTabs/Data/ClearChats.tsx

@@ -1,29 +1,58 @@
-import type { TDangerButtonProps } from '~/common';
-import DangerButton from '../DangerButton';
+import React, { useState } from 'react';
+import { useClearConversationsMutation } from 'librechat-data-provider/react-query';
+import { Label, Button, OGDialog, OGDialogTrigger, Spinner } from '~/components';
+import { useConversation, useConversations, useLocalize } from '~/hooks';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+
+export const ClearChats = () => {
+  const localize = useLocalize();
+  const [open, setOpen] = useState(false);
+  const { newConversation } = useConversation();
+  const { refreshConversations } = useConversations();
+  const clearConvosMutation = useClearConversationsMutation();
+
+  const clearConvos = () => {
+    clearConvosMutation.mutate(
+      {},
+      {
+        onSuccess: () => {
+          newConversation();
+          refreshConversations();
+        },
+      },
+    );
+  };
 
-export const ClearChatsButton = ({
-  confirmClear,
-  className = '',
-  showText = true,
-  mutation,
-  onClick,
-}: Pick<
-  TDangerButtonProps,
-  'confirmClear' | 'mutation' | 'className' | 'showText' | 'onClick'
->) => {
   return (
-    <DangerButton
-      id="clearConvosBtn"
-      mutation={mutation}
-      confirmClear={confirmClear}
-      className={className}
-      showText={showText}
-      infoTextCode="com_nav_clear_all_chats"
-      actionTextCode="com_ui_clear"
-      confirmActionTextCode="com_nav_confirm_clear"
-      dataTestIdInitial="clear-convos-initial"
-      dataTestIdConfirm="clear-convos-confirm"
-      onClick={onClick}
-    />
+    <div className="flex items-center justify-between">
+      <Label className="font-light">{localize('com_nav_clear_all_chats')}</Label>
+      <OGDialog open={open} onOpenChange={setOpen}>
+        <OGDialogTrigger asChild>
+          <Button
+            variant="destructive"
+            className="flex items-center justify-center rounded-lg transition-colors duration-200"
+            onClick={() => setOpen(true)}
+          >
+            {localize('com_ui_delete')}
+          </Button>
+        </OGDialogTrigger>
+        <OGDialogTemplate
+          showCloseButton={false}
+          title={localize('com_nav_confirm_clear')}
+          className="max-w-[450px]"
+          main={
+            <Label className="text-left text-sm font-medium">
+              {localize('com_nav_clear_conversation_confirm_message')}
+            </Label>
+          }
+          selection={{
+            selectHandler: clearConvos,
+            selectClasses:
+              'bg-destructive text-white transition-all duration-200 hover:bg-destructive/80',
+            selectText: clearConvosMutation.isLoading ? <Spinner /> : localize('com_ui_delete'),
+          }}
+        />
+      </OGDialog>
+    </div>
   );
 };