Fix: Refactoring and enhancing the functionality of the delete confirmation dialog component #10703 (#11542)

### What problem does this PR solve?

Fix: Refactoring and enhancing the functionality of the delete
confirmation dialog component

- Refactoring and enhancing the functionality of the delete confirmation
dialog component
- Modifying the style of the user center

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/bulk-operate-bar.tsx

@@ -1,9 +1,13 @@
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { BrushCleaning } from 'lucide-react';
 import { ReactNode, useCallback } from 'react';
-import { ConfirmDeleteDialog } from './confirm-delete-dialog';
+import {
+  ConfirmDeleteDialog,
+  ConfirmDeleteDialogNode,
+} from './confirm-delete-dialog';
 import { Separator } from './ui/separator';
 
 export type BulkOperateItemType = {
@@ -45,6 +49,15 @@ export function BulkOperateBar({
               <ConfirmDeleteDialog
                 hidden={!isDeleteItem(x.id)}
                 onOk={x.onClick}
+                title={t('deleteModal.delFiles')}
+                content={{
+                  title: t('common.deleteThem'),
+                  node: (
+                    <ConfirmDeleteDialogNode
+                      name={`${t('deleteModal.delFilesContent', { count })}`}
+                    ></ConfirmDeleteDialogNode>
+                  ),
+                }}
               >
                 <Button
                   variant={'ghost'}

web/src/components/confirm-delete-dialog.tsx

@@ -3,19 +3,30 @@ import {
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
+  AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
+import { AlertDialogOverlay } from '@radix-ui/react-alert-dialog';
 import { DialogProps } from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { RAGFlowAvatar } from './ragflow-avatar';
+import { Separator } from './ui/separator';
 
 interface IProps {
   title?: string;
   onOk?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
   hidden?: boolean;
+  content?: {
+    title?: string;
+    node?: React.ReactNode;
+  };
+  okButtonText?: string;
+  cancelButtonText?: string;
 }
 
 export function ConfirmDeleteDialog({
@@ -27,6 +38,9 @@ export function ConfirmDeleteDialog({
   onOpenChange,
   open,
   defaultOpen,
+  content,
+  okButtonText,
+  cancelButtonText,
 }: IProps & DialogProps) {
   const { t } = useTranslation();
 
@@ -41,32 +55,78 @@ export function ConfirmDeleteDialog({
       defaultOpen={defaultOpen}
     >
       <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
-      <AlertDialogContent
-        onSelect={(e) => e.preventDefault()}
-        onClick={(e) => e.stopPropagation()}
-        className="bg-bg-base"
+      <AlertDialogOverlay
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
       >
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {title ?? t('common.deleteModalTitle')}
-          </AlertDialogTitle>
-          {/* <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription> */}
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={onCancel}>
-            {t('common.no')}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            className="bg-state-error text-text-primary hover:text-text-primary hover:bg-state-error"
-            onClick={onOk}
-          >
-            {t('common.yes')}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
+        <AlertDialogContent
+          onSelect={(e) => e.preventDefault()}
+          onClick={(e) => e.stopPropagation()}
+          className="bg-bg-base "
+        >
+          <AlertDialogHeader className="space-y-5">
+            <AlertDialogTitle>
+              {title ?? t('common.deleteModalTitle')}
+              <AlertDialogCancel
+                onClick={onCancel}
+                className="border-none bg-transparent hover:border-none hover:bg-transparent absolute right-3 top-3 hover:text-text-primary"
+              >
+                <X size={16} />
+              </AlertDialogCancel>
+            </AlertDialogTitle>
+            {content && (
+              <>
+                <Separator className="w-[calc(100%+48px)] -translate-x-6"></Separator>
+                <AlertDialogDescription className="mt-5">
+                  <div className="flex flex-col gap-5  text-base mb-10 px-5">
+                    <div className="text-text-primary">
+                      {content.title || t('common.deleteModalTitle')}
+                    </div>
+                    {content.node}
+                  </div>
+                </AlertDialogDescription>
+              </>
+            )}
+          </AlertDialogHeader>
+          <AlertDialogFooter className="px-5 flex items-center gap-2">
+            <AlertDialogCancel onClick={onCancel}>
+              {okButtonText || t('common.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-state-error text-text-primary hover:text-text-primary hover:bg-state-error"
+              onClick={onOk}
+            >
+              {cancelButtonText || t('common.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
     </AlertDialog>
   );
 }
+
+export const ConfirmDeleteDialogNode = ({
+  avatar,
+  name,
+  children,
+}: {
+  avatar?: { avatar?: string; name?: string; isPerson?: boolean };
+  name?: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <div className="flex items-center border-0.5 text-text-secondary border-border-button rounded-lg px-3 py-4">
+      {avatar && (
+        <RAGFlowAvatar
+          className="w-8 h-8"
+          avatar={avatar.avatar}
+          isPerson={avatar.isPerson}
+          name={avatar.name}
+        />
+      )}
+      {name && <div className="ml-3">{name}</div>}
+      {children}
+    </div>
+  );
+};

web/src/components/file-uploader.tsx

@@ -274,7 +274,7 @@ export function FileUploader(props: FileUploaderProps) {
             className={cn(
               'group relative grid h-72 w-full cursor-pointer place-items-center rounded-lg border border-dashed border-border-default px-5 py-2.5 text-center transition hover:bg-border-button bg-bg-card',
               'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-              isDragActive && 'border-muted-foreground/50',
+              isDragActive && 'border-border-button',
               isDisabled && 'pointer-events-none opacity-60',
               className,
             )}
@@ -285,7 +285,7 @@ export function FileUploader(props: FileUploaderProps) {
               <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
                 <div className="rounded-full border border-dashed p-3">
                   <Upload
-                    className="size-7 text-text-secondary"
+                    className="size-7 text-text-secondary hover:text-text-primary"
                     aria-hidden="true"
                   />
                 </div>
@@ -297,7 +297,7 @@ export function FileUploader(props: FileUploaderProps) {
               <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
                 <div className="rounded-full border border-dashed p-3">
                   <Upload
-                    className="size-7 text-text-secondary"
+                    className="size-7 text-text-secondary hover:text-text-primary"
                     aria-hidden="true"
                   />
                 </div>

web/src/components/originui/select-with-search.tsx

@@ -186,7 +186,9 @@ export const SelectWithSearch = forwardRef<
               />
             )}
             <CommandList className="mt-2 outline-none">
-              <CommandEmpty>{emptyData}</CommandEmpty>
+              <CommandEmpty>
+                <div dangerouslySetInnerHTML={{ __html: emptyData }}></div>
+              </CommandEmpty>
               {options.map((group, idx) => {
                 if (group.options) {
                   return (

web/src/components/ui/button.tsx

@@ -53,6 +53,11 @@ const buttonVariants = cva(
           bg-text-primary text-bg-base border-b-4 border-b-accent-primary
           hover:bg-text-primary/90 focus-visible:bg-text-primary/90
         `,
+        delete: `
+          text-text-secondary
+          hover:bg-state-error-5 hover:text-state-error
+          focus-visible:text-state-error focus-visible:bg-state-error-5
+        `,
       },
       size: {
         default: 'h-8 px-2.5 py-1.5 ',