Fix: Display the invited icon in the header #9634 (#9659)

### What problem does this PR solve?

Fix: Display the invited icon in the header #9634

### Type of change

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

web/src/layouts/next-header.tsx

@@ -12,10 +12,13 @@ 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,
@@ -53,11 +56,11 @@ export function Header() {
     changeLanguage(key);
   };
 
-  // const { data } = useListTenant();
+  const { data } = useListTenant();
 
-  // const showBell = useMemo(() => {
-  //   return data.some((x) => x.role === TenantRole.Invite);
-  // }, [data]);
+  const showBell = useMemo(() => {
+    return data.some((x) => x.role === TenantRole.Invite);
+  }, [data]);
 
   const items = LanguageList.map((x) => ({
     key: x,
@@ -68,9 +71,9 @@ export function Header() {
     setTheme(theme === ThemeEnum.Dark ? ThemeEnum.Light : ThemeEnum.Dark);
   }, [setTheme, theme]);
 
-  // const handleBellClick = useCallback(() => {
-  //   navigate('/user-setting/team');
-  // }, [navigate]);
+  const handleBellClick = useCallback(() => {
+    navigate('/user-setting/team');
+  }, [navigate]);
 
   const tagsData = useMemo(
     () => [
@@ -160,6 +163,14 @@ export function Header() {
         <Button variant={'ghost'} onClick={onThemeClick}>
           {theme === 'light' ? <Sun /> : <Moon />}
         </Button>
+        {showBell && (
+          <Button variant={'ghost'} onClick={handleBellClick}>
+            <div className="relative">
+              <BellRing className="size-4 " />
+              <span className="absolute size-1 rounded -right-1 -top-1 bg-red-600"></span>
+            </div>
+          </Button>
+        )}
         <div className="relative">
           <RAGFlowAvatar
             name={nickname}