Feat: Add memory multi-select dropdown to recall and message operator forms. #4213 (#12106)

### What problem does this PR solve?

Feat: Add memory multi-select dropdown to recall and message operator
forms. #4213

### Type of change


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

web/src/pages/agent/form/message-form/index.tsx

@@ -1,3 +1,4 @@
+import { MemoriesFormField } from '@/components/memories-form-field';
 import { BlockButton, Button } from '@/components/ui/button';
 import {
   Form,
@@ -40,6 +41,7 @@ function MessageForm({ node }: INextOperatorForm) {
     output_format: z.string().optional(),
     auto_play: z.boolean().optional(),
     status: z.number().optional(),
+    memory_ids: z.array(z.string()).optional(),
   });
 
   const form = useForm({
@@ -159,6 +161,7 @@ function MessageForm({ node }: INextOperatorForm) {
             </FormItem>
           </>
         )}
+        <MemoriesFormField label={t('flow.saveToMemory')}></MemoriesFormField>
       </FormWrapper>
     </Form>
   );

web/src/pages/agent/form/message-form/use-show-response-status.ts

@@ -18,13 +18,13 @@ export function useShowWebhookResponseStatus(form: UseFormReturn<any>) {
       formData?.mode === AgentDialogueMode.Webhook &&
       formData.execution_mode === WebhookExecutionMode.Streaming
     );
-  }, []);
+  }, [getNode]);
 
   useEffect(() => {
     if (showWebhookResponseStatus && isEmpty(form.getValues('status'))) {
       form.setValue('status', 200, { shouldValidate: true, shouldDirty: true });
     }
-  }, []);
+  }, [form, showWebhookResponseStatus]);
 
   return showWebhookResponseStatus;
 }

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

@@ -2,6 +2,7 @@ import { Collapse } from '@/components/collapse';
 import { CrossLanguageFormField } from '@/components/cross-language-form-field';
 import { FormContainer } from '@/components/form-container';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
+import { MemoriesFormField } from '@/components/memories-form-field';
 import {
   MetadataFilter,
   MetadataFilterSchema,
@@ -46,6 +47,7 @@ export const RetrievalPartialSchema = {
   use_kg: z.boolean(),
   toc_enhance: z.boolean(),
   ...MetadataFilterSchema,
+  memory_ids: z.array(z.string()).optional(),
 };
 
 export const FormSchema = z.object({
@@ -109,12 +111,11 @@ function RetrievalForm({ node }: INextOperatorForm) {
   return (
     <Form {...form}>
       <FormWrapper>
-        <FormContainer>
-          <RAGFlowFormItem name="query" label={t('flow.query')}>
-            <PromptEditor></PromptEditor>
-          </RAGFlowFormItem>
-          <KnowledgeBaseFormField showVariable></KnowledgeBaseFormField>
-        </FormContainer>
+        <RAGFlowFormItem name="query" label={t('flow.query')}>
+          <PromptEditor></PromptEditor>
+        </RAGFlowFormItem>
+        <KnowledgeBaseFormField showVariable></KnowledgeBaseFormField>
+        <MemoriesFormField label={t('flow.memory')}></MemoriesFormField>
         <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
           <FormContainer>
             <SimilaritySliderFormField

web/src/pages/agent/form/tool-form/retrieval-form/index.tsx

@@ -2,6 +2,7 @@ import { Collapse } from '@/components/collapse';
 import { CrossLanguageFormField } from '@/components/cross-language-form-field';
 import { FormContainer } from '@/components/form-container';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
+import { MemoriesFormField } from '@/components/memories-form-field';
 import { MetadataFilter } from '@/components/metadata-filter';
 import { RerankFormFields } from '@/components/rerank';
 import { SimilaritySliderFormField } from '@/components/similarity-slider';
@@ -40,10 +41,9 @@ const RetrievalForm = () => {
   return (
     <Form {...form}>
       <FormWrapper>
-        <FormContainer>
-          <DescriptionField></DescriptionField>
-          <KnowledgeBaseFormField showVariable></KnowledgeBaseFormField>
-        </FormContainer>
+        <DescriptionField></DescriptionField>
+        <KnowledgeBaseFormField showVariable></KnowledgeBaseFormField>
+        <MemoriesFormField label={t('flow.memory')}></MemoriesFormField>
         <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
           <FormContainer>
             <SimilaritySliderFormField