Fix: Fix share-chat bugs (#9150)

### What problem does this PR solve?

Fix: Fix share-chat bugs #3221

### Type of change

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

web/src/pages/next-chats/share/index.tsx

@@ -3,8 +3,11 @@ import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/next-message-item';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { useSwitchToDarkThemeOnMount } from '@/components/theme-provider';
+import { Button } from '@/components/ui/button';
 import { MessageType } from '@/constants/chat';
+import { useFetchAppConf } from '@/hooks/logic-hooks';
 import {
   useFetchExternalAgentInputs,
   useUploadCanvasFileWithProgress,
@@ -12,10 +15,12 @@ import {
 import { cn } from '@/lib/utils';
 import i18n from '@/locales/config';
 import { useCacheChatLog } from '@/pages/agent/hooks/use-cache-chat-log';
+import { IInputs } from '@/pages/agent/interface';
 import { useSendButtonDisabled } from '@/pages/chat/hooks';
 import { buildMessageUuidWithRole } from '@/utils/chat';
 import { isEmpty } from 'lodash';
-import React, { forwardRef, useCallback } from 'react';
+import { RefreshCcw } from 'lucide-react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import {
   useGetSharedChatSearchParams,
   useSendNextSharedMessage,
@@ -38,6 +43,7 @@ const ChatContainer = () => {
     addEventList,
     setCurrentMessageId,
     currentEventListWithoutMessageById,
+    clearEventList,
   } = useCacheChatLog();
   const {
     handlePressEnter,
@@ -51,26 +57,20 @@ const ChatContainer = () => {
     findReferenceByMessageId,
     appendUploadResponseList,
     parameterDialogVisible,
-    hideParameterDialog,
     showParameterDialog,
     ok,
+    resetSession,
   } = useSendNextSharedMessage(addEventList);
 
-  const { data } = useFetchExternalAgentInputs();
+  // const { data } = useFetchExternalAgentInputs();
   const sendDisabled = useSendButtonDisabled(value);
-
-  // useEffect(() => {
-  //   if (derivedMessages.length) {
-  //     const derivedMessagesFilter = derivedMessages.filter(
-  //       (message) => message.role === MessageType.Assistant,
-  //     );
-  //     if (derivedMessagesFilter.length) {
-  //       const message = derivedMessagesFilter[derivedMessagesFilter.length - 1];
-  //       setCurrentMessageId(message.id);
-  //     }
-  //   }
-  // }, [derivedMessages, setCurrentMessageId]);
-
+  const appConf = useFetchAppConf();
+  const { data: inputsData } = useFetchExternalAgentInputs();
+  const [agentInfo, setAgentInfo] = useState<IInputs>({
+    avatar: '',
+    title: '',
+    inputs: {},
+  });
   const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
     useCallback(
       async (files, options) => {
@@ -87,20 +87,62 @@ const ChatContainer = () => {
   }, [locale, visibleAvatar]);
 
   React.useEffect(() => {
-    if (!isEmpty(data)) {
+    const { avatar, title, inputs } = inputsData;
+    setAgentInfo({
+      avatar,
+      title,
+      inputs: inputs,
+    });
+  }, [inputsData, setAgentInfo]);
+
+  React.useEffect(() => {
+    if (!isEmpty(inputsData)) {
       showParameterDialog();
     }
-  }, [data, showParameterDialog]);
+  }, [inputsData, showParameterDialog]);
 
   useSwitchToDarkThemeOnMount();
 
+  const handleInputsModalOk = (params: any[]) => {
+    ok(params);
+  };
+  const handleReset = () => {
+    resetSession();
+    clearEventList();
+  };
   if (!conversationId) {
     return <div>empty</div>;
   }
   return (
     <section className="h-[100vh] flex justify-center items-center">
-      <div className=" w-[80vw]">
-        <div className="flex flex-1 flex-col p-2.5  h-[90vh] border rounded-lg">
+      <div className="w-40 flex gap-2 absolute left-3 top-12 items-center">
+        <img src="/logo.svg" alt="" />
+        <span className="text-2xl font-bold">{appConf.appName}</span>
+      </div>
+      <div className=" w-[80vw] border rounded-lg">
+        <div className="flex justify-between items-center border-b p-3">
+          <div className="flex gap-2 items-center">
+            <RAGFlowAvatar
+              avatar={agentInfo.avatar}
+              name={agentInfo.title}
+              isPerson
+            />
+            <div className="text-xl text-foreground">{agentInfo.title}</div>
+          </div>
+          <Button
+            variant={'secondary'}
+            className="text-sm text-foreground cursor-pointer"
+            onClick={() => {
+              handleReset();
+            }}
+          >
+            <div className="flex gap-1 items-center">
+              <RefreshCcw size={14} />
+              <span className="text-lg ">Reset</span>
+            </div>
+          </Button>
+        </div>
+        <div className="flex flex-1 flex-col p-2.5  h-[90vh] m-3">
           <div
             className={cn('flex flex-1 flex-col overflow-auto m-auto w-5/6')}
           >
@@ -123,6 +165,8 @@ const ChatContainer = () => {
                       sendLoading &&
                       derivedMessages?.length - 1 === i
                     }
+                    avatarDialog={agentInfo.avatar}
+                    agentName={agentInfo.title}
                     index={i}
                     clickDocumentButton={clickDocumentButton}
                     showLikeButton={false}
@@ -164,8 +208,9 @@ const ChatContainer = () => {
       )}
       {parameterDialogVisible && (
         <ParameterDialog
-          hideModal={hideParameterDialog}
-          ok={ok}
+          // hideModal={hideParameterDialog}
+          ok={handleInputsModalOk}
+          data={agentInfo.inputs}
         ></ParameterDialog>
       )}
     </section>