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/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 {
-  initialKeywordsSimilarityWeightValue,
-  initialSimilarityThresholdValue,
-  SimilaritySliderFormField,
-} from '@/components/similarity-slider';
+import { 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;
+}