Feat: Use sonner to replace the requested prompt message component #3221 (#9951)

### What problem does this PR solve?

Feat: Use sonner to replace the requested prompt message component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/message.ts

@@ -1,28 +1,34 @@
 import { toast } from 'sonner';
 
+const duration = { duration: 1500 };
+
 const message = {
   success: (msg: string) => {
     toast.success(msg, {
       position: 'top-center',
       closeButton: false,
+      ...duration,
     });
   },
   error: (msg: string) => {
     toast.error(msg, {
       position: 'top-center',
       closeButton: false,
+      ...duration,
     });
   },
   warning: (msg: string) => {
     toast.warning(msg, {
       position: 'top-center',
       closeButton: false,
+      ...duration,
     });
   },
   info: (msg: string) => {
     toast.info(msg, {
       position: 'top-center',
       closeButton: false,
+      ...duration,
     });
   },
 };

web/src/hooks/file-manager-hooks.ts

@@ -1,10 +1,11 @@
+import message from '@/components/ui/message';
 import { ResponseType } from '@/interfaces/database/base';
 import { IFolder } from '@/interfaces/database/file-manager';
 import { IConnectRequestBody } from '@/interfaces/request/file-manager';
 import fileManagerService from '@/services/file-manager-service';
 import { downloadFileFromBlob } from '@/utils/file-util';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { PaginationProps, UploadFile, message } from 'antd';
+import { PaginationProps, UploadFile } from 'antd';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'umi';

web/src/hooks/login-hooks.ts

@@ -1,3 +1,4 @@
+import message from '@/components/ui/message';
 import { Authorization } from '@/constants/authorization';
 import userService, {
   getLoginChannels,
@@ -5,7 +6,7 @@ import userService, {
 } from '@/services/user-service';
 import authorizationUtil, { redirectToLogin } from '@/utils/authorization-util';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { Form, message } from 'antd';
+import { Form } from 'antd';
 import { FormInstance } from 'antd/lib';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -50,8 +51,6 @@ export const useLoginWithChannel = () => {
 };
 
 export const useLogin = () => {
-  const { t } = useTranslation();
-
   const {
     data,
     isPending: loading,
@@ -62,7 +61,6 @@ export const useLogin = () => {
       const { data: res = {}, response } = await userService.login(params);
       if (res.code === 0) {
         const { data } = res;
-        message.success(t('message.logged'));
         const authorization = response.headers.get(Authorization);
         const token = data.access_token;
         const userInfo = {

web/src/hooks/use-document-request.ts

@@ -1,4 +1,5 @@
 import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
+import message from '@/components/ui/message';
 import { ResponseType } from '@/interfaces/database/base';
 import {
   IDocumentInfo,
@@ -12,7 +13,6 @@ import i18n from '@/locales/config';
 import kbService, { listDocument } from '@/services/knowledge-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
-import { message } from 'antd';
 import { get } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';
 import { useParams } from 'umi';

web/src/hooks/use-file-request.ts

@@ -1,3 +1,4 @@
+import message from '@/components/ui/message';
 import {
   IFetchFileListResult,
   IFolder,
@@ -5,7 +6,7 @@ import {
 import fileManagerService from '@/services/file-manager-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
-import { PaginationProps, message } from 'antd';
+import { PaginationProps } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'umi';

web/src/hooks/user-setting-hooks.tsx

@@ -1,3 +1,4 @@
+import message from '@/components/ui/message';
 import { LanguageTranslationMap } from '@/constants/common';
 import { ResponseGetType } from '@/interfaces/database/base';
 import { IToken } from '@/interfaces/database/chat';
@@ -18,7 +19,7 @@ import userService, {
   listTenantUser,
 } from '@/services/user-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Modal, message } from 'antd';
+import { Modal } from 'antd';
 import DOMPurify from 'dompurify';
 import { isEmpty } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';

web/src/pages/agent/form-sheet/next.tsx

@@ -65,7 +65,7 @@ const FormSheet = ({
   return (
     <Sheet open={visible} modal={false}>
       <SheetContent
-        className={cn('top-20 p-0 flex flex-col pb-20 ', {
+        className={cn('top-20 p-0 flex flex-col pb-20', {
           'right-[620px]': chatVisible,
         })}
         closeIcon={false}

web/src/pages/agent/form/agent-form/index.tsx

@@ -87,7 +87,6 @@ function AgentForm({ node }: INextOperatorForm) {
   const defaultValues = useValues(node);
 
   const { extraOptions } = useBuildPromptExtraPromptOptions();
-  console.log('🚀 ~ AgentForm ~ prompts:', extraOptions);
 
   const ExceptionMethodOptions = Object.values(AgentExceptionMethod).map(
     (x) => ({

web/src/pages/agent/hooks/use-calculate-sheet-right.ts

@@ -0,0 +1,8 @@
+import { useSize } from 'ahooks';
+
+export function useCalculateSheetRight() {
+  const size = useSize(document.querySelector('body'));
+  const bodyWidth = size?.width ?? 0;
+
+  return bodyWidth > 1800 ? 'right-[620px]' : `right-1/3`;
+}

web/src/pages/agent/log-sheet/index.tsx

@@ -5,6 +5,7 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { IModalProps } from '@/interfaces/common';
+import { cn } from '@/lib/utils';
 import { NotebookText } from 'lucide-react';
 import 'react18-json-view/src/style.css';
 import { useCacheChatLog } from '../hooks/use-cache-chat-log';
@@ -24,7 +25,7 @@ export function LogSheet({
 }: LogSheetProps) {
   return (
     <Sheet open onOpenChange={hideModal} modal={false}>
-      <SheetContent className="top-20 right-[620px]">
+      <SheetContent className={cn('top-20 right-[620px]')}>
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />