From 9aa8cfb73adf1f592d96a6702d7758b669b6e458 Mon Sep 17 00:00:00 2001 From: balibabu Date: Fri, 5 Sep 2025 18:43:33 +0800 Subject: [PATCH] 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 | 6 ++++++ web/src/hooks/file-manager-hooks.ts | 3 ++- web/src/hooks/login-hooks.ts | 6 ++---- web/src/hooks/use-document-request.ts | 2 +- web/src/hooks/use-file-request.ts | 3 ++- web/src/hooks/user-setting-hooks.tsx | 3 ++- web/src/pages/agent/form-sheet/next.tsx | 2 +- web/src/pages/agent/form/agent-form/index.tsx | 1 - web/src/pages/agent/hooks/use-calculate-sheet-right.ts | 8 ++++++++ web/src/pages/agent/log-sheet/index.tsx | 3 ++- 10 files changed, 26 insertions(+), 11 deletions(-) create mode 100644 web/src/pages/agent/hooks/use-calculate-sheet-right.ts diff --git a/web/src/components/ui/message.ts b/web/src/components/ui/message.ts index 24c834ffb..623500cea 100644 --- a/web/src/components/ui/message.ts +++ b/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, }); }, }; diff --git a/web/src/hooks/file-manager-hooks.ts b/web/src/hooks/file-manager-hooks.ts index 4438609c5..32cf21a18 100644 --- a/web/src/hooks/file-manager-hooks.ts +++ b/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'; diff --git a/web/src/hooks/login-hooks.ts b/web/src/hooks/login-hooks.ts index b5fa0ae64..4bd63cc17 100644 --- a/web/src/hooks/login-hooks.ts +++ b/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 = { diff --git a/web/src/hooks/use-document-request.ts b/web/src/hooks/use-document-request.ts index e8f08eca0..bb09c4411 100644 --- a/web/src/hooks/use-document-request.ts +++ b/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'; diff --git a/web/src/hooks/use-file-request.ts b/web/src/hooks/use-file-request.ts index 9146f5e5a..68455f3ab 100644 --- a/web/src/hooks/use-file-request.ts +++ b/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'; diff --git a/web/src/hooks/user-setting-hooks.tsx b/web/src/hooks/user-setting-hooks.tsx index 98ac41850..bc4e177db 100644 --- a/web/src/hooks/user-setting-hooks.tsx +++ b/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'; diff --git a/web/src/pages/agent/form-sheet/next.tsx b/web/src/pages/agent/form-sheet/next.tsx index 2d7b5ca8b..69b6af455 100644 --- a/web/src/pages/agent/form-sheet/next.tsx +++ b/web/src/pages/agent/form-sheet/next.tsx @@ -65,7 +65,7 @@ const FormSheet = ({ return ( ({ diff --git a/web/src/pages/agent/hooks/use-calculate-sheet-right.ts b/web/src/pages/agent/hooks/use-calculate-sheet-right.ts new file mode 100644 index 000000000..3fa5b98d4 --- /dev/null +++ b/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`; +} diff --git a/web/src/pages/agent/log-sheet/index.tsx b/web/src/pages/agent/log-sheet/index.tsx index cbe63ece7..138a53e09 100644 --- a/web/src/pages/agent/log-sheet/index.tsx +++ b/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 ( - +