diff --git a/web/src/layouts/bell-button.tsx b/web/src/layouts/bell-button.tsx
new file mode 100644
index 000000000..493391cc7
--- /dev/null
+++ b/web/src/layouts/bell-button.tsx
@@ -0,0 +1,28 @@
+import { Button } from '@/components/ui/button';
+import { useNavigateWithFromState } from '@/hooks/route-hook';
+import { useListTenant } from '@/hooks/use-user-setting-request';
+import { TenantRole } from '@/pages/user-setting/constants';
+import { BellRing } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+
+export function BellButton() {
+ const { data } = useListTenant();
+ const navigate = useNavigateWithFromState();
+
+ const showBell = useMemo(() => {
+ return data.some((x) => x.role === TenantRole.Invite);
+ }, [data]);
+
+ const handleBellClick = useCallback(() => {
+ navigate('/user-setting/team');
+ }, [navigate]);
+
+ return showBell ? (
+
+ ) : null;
+}
diff --git a/web/src/layouts/next-header.tsx b/web/src/layouts/next-header.tsx
index 2833533d6..da8819367 100644
--- a/web/src/layouts/next-header.tsx
+++ b/web/src/layouts/next-header.tsx
@@ -12,13 +12,10 @@ import { LanguageList, LanguageMap, ThemeEnum } from '@/constants/common';
import { useChangeLanguage } from '@/hooks/logic-hooks';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useNavigateWithFromState } from '@/hooks/route-hook';
-import { useListTenant } from '@/hooks/use-user-setting-request';
import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
-import { TenantRole } from '@/pages/user-setting/constants';
import { Routes } from '@/routes';
import { camelCase } from 'lodash';
import {
- BellRing,
ChevronDown,
CircleHelp,
Cpu,
@@ -34,6 +31,7 @@ import {
import React, { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'umi';
+import { BellButton } from './bell-button';
const handleDocHelpCLick = () => {
window.open('https://ragflow.io/docs/dev/category/guides', 'target');
@@ -56,12 +54,6 @@ export function Header() {
changeLanguage(key);
};
- const { data } = useListTenant();
-
- const showBell = useMemo(() => {
- return data.some((x) => x.role === TenantRole.Invite);
- }, [data]);
-
const items = LanguageList.map((x) => ({
key: x,
label: {LanguageMap[x as keyof typeof LanguageMap]},
@@ -71,10 +63,6 @@ export function Header() {
setTheme(theme === ThemeEnum.Dark ? ThemeEnum.Light : ThemeEnum.Dark);
}, [setTheme, theme]);
- const handleBellClick = useCallback(() => {
- navigate('/user-setting/team');
- }, [navigate]);
-
const tagsData = useMemo(
() => [
{ path: Routes.Root, name: t('header.Root'), icon: House },
@@ -163,14 +151,7 @@ export function Header() {
- {showBell && (
-
- )}
+