Feat: Move less important chat settings into a collapsible panel. (#16024)

### What problem does this PR solve?

Feat: Move less important chat settings into a collapsible panel.

### Type of change


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

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

@@ -207,7 +207,7 @@ function AgentForm({ node }: INextOperatorForm) {
           <Separator></Separator>
           <AgentTools></AgentTools>
           <Agents node={node}></Agents>
-          <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
+          <Collapse defaultOpen title={<div>{t('flow.advancedSettings')}</div>}>
             <section className="space-y-5">
               <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
               <FormField

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

@@ -16,14 +16,14 @@ import { FormTooltip } from '@/components/ui/tooltip';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from 'i18next';
 import { Plus } from 'lucide-react';
-import { memo, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { AgentDialogueMode, BeginQueryType } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import { ParameterDialog } from './parameter-dialog';
 import { QueryTable } from './query-table';
-import { BeginFormSchema } from './schema';
+import { BeginFormSchema, BeginFormSchemaType } from './schema';
 import { useEditQueryRecord } from './use-edit-query';
 import { useHandleModeChange } from './use-handle-mode-change';
 import { useValues } from './use-values';
@@ -49,7 +49,10 @@ function BeginForm({ node }: INextOperatorForm) {
 
   useWatchFormChange(node?.id, form);
 
-  const inputs = useWatch({ control: form.control, name: 'inputs' });
+  const inputs = useWatch<BeginFormSchemaType, 'inputs'>({
+    control: form.control,
+    name: 'inputs',
+  });
   const mode = useWatch({ control: form.control, name: 'mode' });
 
   const hasFileInput = useMemo(
@@ -89,6 +92,10 @@ function BeginForm({ node }: INextOperatorForm) {
     node,
   });
 
+  const handleAddQuery = useCallback(() => {
+    showModal();
+  }, [showModal]);
+
   return (
     <section className="px-5 space-y-5 pb-4">
       <Form {...form}>
@@ -167,6 +174,7 @@ function BeginForm({ node }: INextOperatorForm) {
               render={() => <div></div>}
             />
             <Collapse
+              defaultOpen
               title={
                 <div>
                   {t('flow.input')}
@@ -174,19 +182,13 @@ function BeginForm({ node }: INextOperatorForm) {
                 </div>
               }
               rightContent={
-                <Button
-                  variant={'ghost'}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    showModal();
-                  }}
-                >
+                <Button variant={'ghost'} onClick={handleAddQuery}>
                   <Plus />
                 </Button>
               }
             >
               <QueryTable
-                data={inputs}
+                data={inputs ?? []}
                 showModal={showModal}
                 deleteRecord={handleDeleteRecord}
               ></QueryTable>

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

@@ -166,7 +166,7 @@ function RetrievalForm({ node }: INextOperatorForm) {
           <PromptEditor></PromptEditor>
         </RAGFlowFormItem>
         <MemoryDatasetForm></MemoryDatasetForm>
-        <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
+        <Collapse defaultOpen title={<div>{t('flow.advancedSettings')}</div>}>
           <section className="space-y-5">
             <SimilaritySliderFormField
               similarityWeightName="keywords_similarity_weight"

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

@@ -45,7 +45,7 @@ const RetrievalForm = () => {
       <FormWrapper>
         <DescriptionField></DescriptionField>
         <MemoryDatasetForm></MemoryDatasetForm>
-        <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
+        <Collapse defaultOpen title={<div>{t('flow.advancedSettings')}</div>}>
           <FormContainer>
             <SimilaritySliderFormField
               similarityWeightName="keywords_similarity_weight"