Feat: Display chat content on the agent page #3221 (#8140)

### What problem does this PR solve?

Feat: Display chat content on the agent page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/chat/hooks.ts

@@ -52,11 +52,13 @@ export const useSelectNextMessages = () => {
 };
 
 function findMessageFromList(eventList: IEventList) {
-  const event = eventList.find((x) => x.event === MessageEventType.Message) as
+  const messageEventList = eventList.filter(
-    | IMessageEvent
+    (x) => x.event === MessageEventType.Message,
-    | undefined;
+  ) as IMessageEvent[];
-
+  return {
-  return event?.data?.content;
+    id: messageEventList[0]?.message_id,
+    content: messageEventList.map((x) => x.data.content).join(''),
+  };
 }
 
 const useGetBeginNodePrologue = () => {
@@ -127,10 +129,11 @@ export const useSendNextMessage = () => {
   );
 
   useEffect(() => {
-    const message = findMessageFromList(answerList);
+    const { content, id } = findMessageFromList(answerList);
-    if (message) {
+    if (content) {
       addNewestAnswer({
-        answer: message,
+        answer: content,
+        id: id,
         reference: {
           chunks: [],
           doc_aggs: [],

web/src/pages/agent/constant.tsx

@@ -27,6 +27,10 @@ import { ReactComponent as TemplateIcon } from '@/assets/svg/template.svg';
 import { ReactComponent as TuShareIcon } from '@/assets/svg/tushare.svg';
 import { ReactComponent as WenCaiIcon } from '@/assets/svg/wencai.svg';
 import { ReactComponent as YahooFinanceIcon } from '@/assets/svg/yahoo-finance.svg';
+import {
+  initialKeywordsSimilarityWeightValue,
+  initialSimilarityThresholdValue,
+} from '@/components/similarity-slider';
 import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
 
 export enum AgentDialogueMode {
@@ -437,10 +441,20 @@ const initialQueryBaseValues = {
 };
 
 export const initialRetrievalValues = {
-  similarity_threshold: 0.2,
+  query: '',
-  keywords_similarity_weight: 0.3,
+  top_n: 0.2,
-  top_n: 8,
+  top_k: 1024,
-  ...initialQueryBaseValues,
+  kb_ids: [],
+  rerank_id: '',
+  empty_response: '',
+  ...initialSimilarityThresholdValue,
+  ...initialKeywordsSimilarityWeightValue,
+  outputs: {
+    formalized_content: {
+      type: 'string',
+      value: '',
+    },
+  },
 };
 
 export const initialBeginValues = {

web/src/pages/agent/form/retrieval-form/next.tsx

@@ -1,11 +1,7 @@
 import { FormContainer } from '@/components/form-container';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
 import { RerankFormFields } from '@/components/rerank';
-import {
+import { SimilaritySliderFormField } from '@/components/similarity-slider';
-  initialKeywordsSimilarityWeightValue,
-  initialSimilarityThresholdValue,
-  SimilaritySliderFormField,
-} from '@/components/similarity-slider';
 import { TopNFormField } from '@/components/top-n-item';
 import {
   Form,
@@ -17,11 +13,16 @@ import {
 } from '@/components/ui/form';
 import { Textarea } from '@/components/ui/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
+import { initialRetrievalValues } from '../../constant';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
+import { Output } from '../components/output';
 import { QueryVariable } from '../components/query-variable';
+import { useValues } from './use-values';
 
 const FormSchema = z.object({
   query: z.string().optional(),
@@ -34,25 +35,27 @@ const FormSchema = z.object({
   empty_response: z.string(),
 });
 
-const defaultValues = {
-  query: '',
-  top_n: 0.2,
-  top_k: 1024,
-  kb_ids: [],
-  rerank_id: '',
-  empty_response: '',
-  ...initialSimilarityThresholdValue,
-  ...initialKeywordsSimilarityWeightValue,
-};
-
 const RetrievalForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
 
+  const outputList = useMemo(() => {
+    return [
+      {
+        title: 'formalized_content',
+        type: initialRetrievalValues.outputs.formalized_content.type,
+      },
+    ];
+  }, []);
+
+  const defaultValues = useValues(node);
+
   const form = useForm({
     defaultValues: defaultValues,
     resolver: zodResolver(FormSchema),
   });
 
+  useWatchFormChange(node?.id, form);
+
   return (
     <Form {...form}>
       <form
@@ -92,6 +95,7 @@ const RetrievalForm = ({ node }: INextOperatorForm) => {
             )}
           />
         </FormContainer>
+        <Output list={outputList}></Output>
       </form>
     </Form>
   );

web/src/pages/agent/form/retrieval-form/use-values.ts

@@ -0,0 +1,25 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialRetrievalValues } from '../../constant';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const defaultValues = useMemo(
+    () => ({
+      ...initialRetrievalValues,
+    }),
+    [],
+  );
+
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return defaultValues;
+    }
+
+    return formData;
+  }, [defaultValues, node?.data?.form]);
+
+  return values;
+}

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -141,11 +141,6 @@ export const useBuildComponentIdSelectOptions = (
   const options = useMemo(() => {
     const query: BeginQuery[] = getBeginNodeDataQuery();
     return [
-      {
-        label: <span>Component Output</span>,
-        title: 'Component Output',
-        options: componentIdOptions,
-      },
       {
         label: <span>Begin Input</span>,
         title: 'Begin Input',
@@ -156,7 +151,7 @@ export const useBuildComponentIdSelectOptions = (
       },
       ...nodeOutputOptions,
     ];
-  }, [componentIdOptions, getBeginNodeDataQuery, nodeOutputOptions]);
+  }, [getBeginNodeDataQuery, nodeOutputOptions]);
 
   return options;
 };