Fix: Place the invitation reminder icon in a separate file #9634 (#9662)

### What problem does this PR solve?

Fix: Place the invitation reminder icon in a separate file #9634
Fix: After receiving the agent message, pull the agent data to highlight
the edges passed #9538

### Type of change

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

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 ? (
+    <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>
+  ) : null;
+}

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: <span>{LanguageMap[x as keyof typeof LanguageMap]}</span>,
@@ -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() {
         <Button variant={'ghost'} onClick={onThemeClick}>
           {theme === 'light' ? <Sun /> : <Moon />}
         </Button>
-        {showBell && (
+        <BellButton></BellButton>
-          <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}

web/src/pages/agent/chat/use-send-agent-message.ts

@@ -4,6 +4,7 @@ import {
   useHandleMessageInputChange,
   useSelectDerivedMessages,
 } from '@/hooks/logic-hooks';
+import { useFetchAgent } from '@/hooks/use-agent-request';
 import {
   IEventList,
   IInputEvent,
@@ -188,11 +189,7 @@ export const useSendAgentMessage = (
     return answerList[0]?.message_id;
   }, [answerList]);
 
-  useEffect(() => {
+  const { refetch } = useFetchAgent();
-    if (answerList[0]?.session_id) {
-      setSessionId(answerList[0]?.session_id);
-    }
-  }, [answerList]);
 
   const { findReferenceByMessageId } = useFindMessageReference(answerList);
   const prologue = useGetBeginNodePrologue();
@@ -250,7 +247,7 @@ export const useSendAgentMessage = (
           setValue(message.content);
           removeLatestMessage();
         } else {
-          // refetch(); // pull the message list after sending the message successfully
+          refetch(); // pull the message list after sending the message successfully
         }
       } catch (error) {
         console.log('🚀 ~ useSendAgentMessage ~ error:', error);
@@ -258,28 +255,30 @@ export const useSendAgentMessage = (
     },
     [
       agentId,
-      sessionId,
-      send,
-      clearUploadResponseList,
       inputs,
       beginParams,
       uploadResponseList,
+      sessionId,
+      send,
+      clearUploadResponseList,
       setValue,
       removeLatestMessage,
+      refetch,
     ],
   );
 
   const sendFormMessage = useCallback(
-    (body: { id?: string; inputs: Record<string, BeginQuery> }) => {
+    async (body: { id?: string; inputs: Record<string, BeginQuery> }) => {
-      send({ ...body, session_id: sessionId });
       addNewestOneQuestion({
         content: Object.entries(body.inputs)
           .map(([key, val]) => `${key}: ${val.value}`)
           .join('<br/>'),
         role: MessageType.User,
       });
+      await send({ ...body, session_id: sessionId });
+      refetch();
     },
-    [addNewestOneQuestion, send, sessionId],
+    [addNewestOneQuestion, refetch, send, sessionId],
   );
 
   // reset session
@@ -346,6 +345,12 @@ export const useSendAgentMessage = (
     }
   }, [addEventList, answerList, addEventListFun, messageId]);
 
+  useEffect(() => {
+    if (answerList[0]?.session_id) {
+      setSessionId(answerList[0]?.session_id);
+    }
+  }, [answerList]);
+
   return {
     value,
     sendLoading: !done,