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/components/collapse.tsx

@@ -29,7 +29,7 @@ export function Collapse({
   title,
   children,
   rightContent,
-  open = true,
+  open,
   defaultOpen = false,
   onOpenChange,
   disabled,
@@ -37,8 +37,12 @@ export function Collapse({
   const [currentOpen, setCurrentOpen] = useState(open);
 
   useEffect(() => {
-    setCurrentOpen(open);
-  }, [open]);
+    if (typeof open === 'boolean') {
+      setCurrentOpen(open);
+    } else {
+      setCurrentOpen(defaultOpen);
+    }
+  }, [defaultOpen, open]);
 
   const handleOpenChange = useCallback(
     (open: boolean) => {

web/src/components/llm-setting-items/next.tsx

@@ -4,9 +4,10 @@ import {
 } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { camelCase, isEqual } from 'lodash';
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { z } from 'zod';
+import { Collapse } from '../collapse';
 import {
   FormControl,
   FormField,
@@ -38,6 +39,7 @@ interface LlmSettingFieldItemsProps {
     | 'frequency_penalty'
     | 'max_tokens'
   >;
+  showCollapse?: boolean;
 }
 
 export const LLMIdFormField = {
@@ -80,10 +82,18 @@ export function LlmSettingFieldItems({
     'max_tokens',
   ],
   llmId,
+  showCollapse = false,
 }: LlmSettingFieldItemsProps) {
   const form = useFormContext();
   const { t } = useTranslate('chat');
 
+  const CollapseComponent = showCollapse ? Collapse : React.Fragment;
+  const collapseProps = showCollapse
+    ? {
+        title: t('modelSetting'),
+      }
+    : {};
+
   const getFieldWithPrefix = useCallback(
     (name: string) => {
       return prefix ? `${prefix}.${name}` : name;
@@ -142,101 +152,105 @@ export function LlmSettingFieldItems({
         testId={llmSelectTestId}
         optionTestIdPrefix={llmOptionTestIdPrefix}
       ></LLMFormField>
-      <FormField
-        control={form.control}
-        name={getFieldWithPrefix('parameter')}
-        render={({ field }) => (
-          <FormItem className="flex justify-between items-center">
-            <FormLabel className="flex-1">{t('freedom')}</FormLabel>
-            <FormControl>
-              <Select
-                value={field.value}
-                onValueChange={(val) => {
-                  handleChange(val);
-                  field.onChange(val);
-                }}
-              >
-                <SelectTrigger className="flex-1 !m-0">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {parameterOptions.map((x) => (
-                    <SelectItem value={x.value} key={x.value}>
-                      {x.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      {showFields.some((item) => item === 'temperature') && (
-        <SliderInputSwitchFormField
-          name={getFieldWithPrefix('temperature')}
-          checkName="temperatureEnabled"
-          label="temperature"
-          max={1}
-          step={0.01}
-          min={0}
-          onChange={() => {
-            checkParameterIsEqual();
-          }}
-        ></SliderInputSwitchFormField>
-      )}
-      {showFields.some((item) => item === 'top_p') && (
-        <SliderInputSwitchFormField
-          name={getFieldWithPrefix('top_p')}
-          checkName="topPEnabled"
-          label="topP"
-          max={1}
-          step={0.01}
-          min={0}
-          onChange={() => {
-            checkParameterIsEqual();
-          }}
-        ></SliderInputSwitchFormField>
-      )}
-      {showFields.some((item) => item === 'presence_penalty') && (
-        <SliderInputSwitchFormField
-          name={getFieldWithPrefix('presence_penalty')}
-          checkName="presencePenaltyEnabled"
-          label="presencePenalty"
-          max={1}
-          step={0.01}
-          min={0}
-          onChange={() => {
-            checkParameterIsEqual();
-          }}
-        ></SliderInputSwitchFormField>
-      )}
-      {showFields.some((item) => item === 'frequency_penalty') && (
-        <SliderInputSwitchFormField
-          name={getFieldWithPrefix('frequency_penalty')}
-          checkName="frequencyPenaltyEnabled"
-          label="frequencyPenalty"
-          max={1}
-          step={0.01}
-          min={0}
-          onChange={() => {
-            checkParameterIsEqual();
-          }}
-        ></SliderInputSwitchFormField>
-      )}
-      {showFields.some((item) => item === 'max_tokens') && (
-        <SliderInputSwitchFormField
-          name={getFieldWithPrefix('max_tokens')}
-          checkName="maxTokensEnabled"
-          numberInputClassName="w-20"
-          label="maxTokens"
-          max={128000}
-          min={0}
-          onChange={() => {
-            checkParameterIsEqual();
-          }}
-        ></SliderInputSwitchFormField>
-      )}
+      <CollapseComponent {...collapseProps}>
+        <section className="space-y-5">
+          <FormField
+            control={form.control}
+            name={getFieldWithPrefix('parameter')}
+            render={({ field }) => (
+              <FormItem className="flex justify-between items-center">
+                <FormLabel className="flex-1">{t('freedom')}</FormLabel>
+                <FormControl>
+                  <Select
+                    value={field.value}
+                    onValueChange={(val) => {
+                      handleChange(val);
+                      field.onChange(val);
+                    }}
+                  >
+                    <SelectTrigger className="flex-1 !m-0">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {parameterOptions.map((x) => (
+                        <SelectItem value={x.value} key={x.value}>
+                          {x.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {showFields.some((item) => item === 'temperature') && (
+            <SliderInputSwitchFormField
+              name={getFieldWithPrefix('temperature')}
+              checkName="temperatureEnabled"
+              label="temperature"
+              max={1}
+              step={0.01}
+              min={0}
+              onChange={() => {
+                checkParameterIsEqual();
+              }}
+            ></SliderInputSwitchFormField>
+          )}
+          {showFields.some((item) => item === 'top_p') && (
+            <SliderInputSwitchFormField
+              name={getFieldWithPrefix('top_p')}
+              checkName="topPEnabled"
+              label="topP"
+              max={1}
+              step={0.01}
+              min={0}
+              onChange={() => {
+                checkParameterIsEqual();
+              }}
+            ></SliderInputSwitchFormField>
+          )}
+          {showFields.some((item) => item === 'presence_penalty') && (
+            <SliderInputSwitchFormField
+              name={getFieldWithPrefix('presence_penalty')}
+              checkName="presencePenaltyEnabled"
+              label="presencePenalty"
+              max={1}
+              step={0.01}
+              min={0}
+              onChange={() => {
+                checkParameterIsEqual();
+              }}
+            ></SliderInputSwitchFormField>
+          )}
+          {showFields.some((item) => item === 'frequency_penalty') && (
+            <SliderInputSwitchFormField
+              name={getFieldWithPrefix('frequency_penalty')}
+              checkName="frequencyPenaltyEnabled"
+              label="frequencyPenalty"
+              max={1}
+              step={0.01}
+              min={0}
+              onChange={() => {
+                checkParameterIsEqual();
+              }}
+            ></SliderInputSwitchFormField>
+          )}
+          {showFields.some((item) => item === 'max_tokens') && (
+            <SliderInputSwitchFormField
+              name={getFieldWithPrefix('max_tokens')}
+              checkName="maxTokensEnabled"
+              numberInputClassName="w-20"
+              label="maxTokens"
+              max={128000}
+              min={0}
+              onChange={() => {
+                checkParameterIsEqual();
+              }}
+            ></SliderInputSwitchFormField>
+          )}
+        </section>
+      </CollapseComponent>
     </div>
   );
 }

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"

web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx

@@ -2,10 +2,7 @@
 
 import { AvatarNameDescription } from '@/components/avatar-name-description';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
-import { MetadataFilter } from '@/components/metadata-filter';
-import { SwitchFormField } from '@/components/switch-fom-field';
-import { TavilyFormField } from '@/components/tavily-form-field';
-import { TOCEnhanceFormField } from '@/components/toc-enhance-form-field';
+import { LlmSettingFieldItems } from '@/components/llm-setting-items/next';
 import {
   FormControl,
   FormField,
@@ -13,84 +10,29 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { MultiSelect } from '@/components/ui/multi-select';
-import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchKnowledgeMetadataKeys } from '@/hooks/use-knowledge-request';
 import { getDirAttribute } from '@/utils/text-direction';
-import { useEffect, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
 export default function ChatBasicSetting() {
   const { t } = useTranslate('chat');
   const form = useFormContext();
-  const emptyResponseValue = form.watch('prompt_config.empty_response');
-  const prologueValue = form.watch('prompt_config.prologue');
-  const rawDatasetIds = useWatch({
-    control: form.control,
-    name: 'dataset_ids',
-  });
-  const kbIds = useMemo(
-    () => (rawDatasetIds || []) as string[],
-    [rawDatasetIds],
-  );
-  const metadataInclude = useWatch({
-    control: form.control,
-    name: 'prompt_config.reference_metadata.include',
-  });
-  const { data: metadataKeys, loading: metadataKeysLoading } =
-    useFetchKnowledgeMetadataKeys(kbIds);
-  const metadataFieldOptions = useMemo(() => {
-    return (metadataKeys || []).map((key) => ({
-      label: key,
-      value: key,
-    }));
-  }, [metadataKeys]);
 
-  useEffect(() => {
-    const currentFields = form.getValues(
-      'prompt_config.reference_metadata.fields',
-    );
-    if (
-      metadataInclude &&
-      Array.isArray(currentFields) &&
-      currentFields.length > 0 &&
-      metadataKeys
-    ) {
-      const validFields = currentFields.filter((field) =>
-        metadataKeys.includes(field),
-      );
-      if (validFields.length !== currentFields.length) {
-        form.setValue('prompt_config.reference_metadata.fields', validFields);
-      }
-    } else if (!metadataInclude) {
-      form.setValue('prompt_config.reference_metadata.fields', undefined);
-    }
-  }, [kbIds, metadataKeys, metadataKeysLoading, metadataInclude, form]);
+  const prologueValue = useWatch({
+    control: form.control,
+    name: 'prompt_config.prologue',
+  });
 
   return (
     <div className="space-y-8">
       <AvatarNameDescription />
-      <FormField
-        control={form.control}
-        name={'prompt_config.empty_response'}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel tooltip={t('emptyResponseTip')}>
-              {t('emptyResponse')}
-            </FormLabel>
-            <FormControl>
-              <Textarea
-                {...field}
-                placeholder={t('emptyResponsePlaceholder')}
-                dir={getDirAttribute(emptyResponseValue || '')}
-              ></Textarea>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+      <LlmSettingFieldItems
+        prefix="llm_setting"
+        llmId="llm_id"
+        showCollapse
+      ></LlmSettingFieldItems>
+
       <FormField
         control={form.control}
         name={'prompt_config.prologue'}
@@ -109,78 +51,8 @@ export default function ChatBasicSetting() {
           </FormItem>
         )}
       />
-      <SwitchFormField
-        name={'prompt_config.quote'}
-        label={t('quote')}
-        tooltip={t('quoteTip')}
-      ></SwitchFormField>
-      <SwitchFormField
-        name={'prompt_config.keyword'}
-        label={t('keyword')}
-        tooltip={t('keywordTip')}
-      ></SwitchFormField>
-      <SwitchFormField
-        name={'prompt_config.tts'}
-        label={t('tts')}
-        tooltip={t('ttsTip')}
-      ></SwitchFormField>
-      <TOCEnhanceFormField name="prompt_config.toc_enhance"></TOCEnhanceFormField>
-      <TavilyFormField></TavilyFormField>
+
       <KnowledgeBaseFormField></KnowledgeBaseFormField>
-      <MetadataFilter></MetadataFilter>
-      <FormField
-        control={form.control}
-        name={'prompt_config.reference_metadata.include'}
-        render={({ field }) => (
-          <FormItem className="flex flex-row items-start space-x-3 space-y-0">
-            <FormControl>
-              <Switch
-                checked={field.value}
-                onCheckedChange={(value) => {
-                  field.onChange(value);
-                  if (!value) {
-                    form.setValue(
-                      'prompt_config.reference_metadata.fields',
-                      undefined,
-                    );
-                  }
-                }}
-              />
-            </FormControl>
-            <FormLabel tooltip="Display document metadata (e.g., title, page number, upload date) alongside retrieved text chunks">
-              Show chunk metadata
-            </FormLabel>
-          </FormItem>
-        )}
-      />
-      {metadataInclude && (
-        <FormField
-          control={form.control}
-          name={'prompt_config.reference_metadata.fields'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel tooltip="Select which metadata fields to display with each chunk">
-                {t('metadataKeys')}
-              </FormLabel>
-              <FormControl className="bg-bg-input">
-                <MultiSelect
-                  options={metadataFieldOptions}
-                  onValueChange={field.onChange}
-                  showSelectAll={false}
-                  placeholder="Please select"
-                  maxCount={20}
-                  defaultValue={Array.isArray(field.value) ? field.value : []}
-                  value={Array.isArray(field.value) ? field.value : []}
-                  name={field.name}
-                  ref={field.ref}
-                  onBlur={field.onBlur}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      )}
     </div>
   );
-}
+}

web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx

@@ -1,12 +0,0 @@
-import { LlmSettingFieldItems } from '@/components/llm-setting-items/next';
-
-export function ChatModelSettings() {
-  return (
-    <div className="space-y-8">
-      <LlmSettingFieldItems
-        prefix="llm_setting"
-        llmId="llm_id"
-      ></LlmSettingFieldItems>
-    </div>
-  );
-}

web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx

@@ -1,9 +1,13 @@
 'use client';
 
+import { Collapse } from '@/components/collapse';
 import { CrossLanguageFormField } from '@/components/cross-language-form-field';
+import { MetadataFilter } from '@/components/metadata-filter';
 import { RerankFormFields } from '@/components/rerank';
 import { SimilaritySliderFormField } from '@/components/similarity-slider';
 import { SwitchFormField } from '@/components/switch-fom-field';
+import { TavilyFormField } from '@/components/tavily-form-field';
+import { TOCEnhanceFormField } from '@/components/toc-enhance-form-field';
 import { TopNFormField } from '@/components/top-n-item';
 import {
   FormControl,
@@ -12,50 +16,189 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { MultiSelect } from '@/components/ui/multi-select';
+import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { UseKnowledgeGraphFormField } from '@/components/use-knowledge-graph-item';
-import { useTranslate } from '@/hooks/common-hooks';
+import { useFetchKnowledgeMetadataKeys } from '@/hooks/use-knowledge-request';
 import { getDirAttribute } from '@/utils/text-direction';
-import { useFormContext } from 'react-hook-form';
+import { useEffect, useMemo } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { DynamicVariableForm } from './dynamic-variable';
 
 export function ChatPromptEngine() {
-  const { t } = useTranslate('chat');
+  const { t } = useTranslation();
   const form = useFormContext();
   const systemPromptValue = form.watch('prompt_config.system');
 
+  const emptyResponseValue = form.watch('prompt_config.empty_response');
+  const rawDatasetIds = useWatch({
+    control: form.control,
+    name: 'dataset_ids',
+  });
+  const kbIds = useMemo(
+    () => (rawDatasetIds || []) as string[],
+    [rawDatasetIds],
+  );
+  const metadataInclude = useWatch({
+    control: form.control,
+    name: 'prompt_config.reference_metadata.include',
+  });
+  const { data: metadataKeys, loading: metadataKeysLoading } =
+    useFetchKnowledgeMetadataKeys(kbIds);
+  const metadataFieldOptions = useMemo(() => {
+    return (metadataKeys || []).map((key) => ({
+      label: key,
+      value: key,
+    }));
+  }, [metadataKeys]);
+
+  useEffect(() => {
+    const currentFields = form.getValues(
+      'prompt_config.reference_metadata.fields',
+    );
+    if (
+      metadataInclude &&
+      Array.isArray(currentFields) &&
+      currentFields.length > 0 &&
+      metadataKeys
+    ) {
+      const validFields = currentFields.filter((field) =>
+        metadataKeys.includes(field),
+      );
+      if (validFields.length !== currentFields.length) {
+        form.setValue('prompt_config.reference_metadata.fields', validFields);
+      }
+    } else if (!metadataInclude) {
+      form.setValue('prompt_config.reference_metadata.fields', undefined);
+    }
+  }, [kbIds, metadataKeys, metadataKeysLoading, metadataInclude, form]);
+
   return (
-    <div className="space-y-8">
-      <FormField
-        control={form.control}
-        name="prompt_config.system"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('system')}</FormLabel>
-            <FormControl>
-              <Textarea
-                {...field}
-                rows={8}
-                placeholder={t('systemPlaceholder')}
-                className="overflow-y-auto"
-                dir={getDirAttribute(systemPromptValue || '')}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
+    <Collapse title={t('flow.advancedSettings')}>
+      <div className="space-y-8">
+        <FormField
+          control={form.control}
+          name={'prompt_config.empty_response'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('chat.emptyResponseTip')}>
+                {t('chat.emptyResponse')}
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  placeholder={t('chat.emptyResponsePlaceholder')}
+                  dir={getDirAttribute(emptyResponseValue || '')}
+                ></Textarea>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <SwitchFormField
+          name={'prompt_config.quote'}
+          label={t('chat.quote')}
+          tooltip={t('chat.quoteTip')}
+        ></SwitchFormField>
+        <SwitchFormField
+          name={'prompt_config.keyword'}
+          label={t('chat.keyword')}
+          tooltip={t('chat.keywordTip')}
+        ></SwitchFormField>
+        <SwitchFormField
+          name={'prompt_config.tts'}
+          label={t('chat.tts')}
+          tooltip={t('chat.ttsTip')}
+        ></SwitchFormField>
+        <TOCEnhanceFormField name="prompt_config.toc_enhance"></TOCEnhanceFormField>
+        <TavilyFormField></TavilyFormField>
+        <MetadataFilter></MetadataFilter>
+        <FormField
+          control={form.control}
+          name={'prompt_config.reference_metadata.include'}
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={(value) => {
+                    field.onChange(value);
+                    if (!value) {
+                      form.setValue(
+                        'prompt_config.reference_metadata.fields',
+                        undefined,
+                      );
+                    }
+                  }}
+                />
+              </FormControl>
+              <FormLabel tooltip="Display document metadata (e.g., title, page number, upload date) alongside retrieved text chunks">
+                Show chunk metadata
+              </FormLabel>
+            </FormItem>
+          )}
+        />
+        {metadataInclude && (
+          <FormField
+            control={form.control}
+            name={'prompt_config.reference_metadata.fields'}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel tooltip="Select which metadata fields to display with each chunk">
+                  {t('chat.metadataKeys')}
+                </FormLabel>
+                <FormControl className="bg-bg-input">
+                  <MultiSelect
+                    options={metadataFieldOptions}
+                    onValueChange={field.onChange}
+                    showSelectAll={false}
+                    placeholder="Please select"
+                    maxCount={20}
+                    defaultValue={Array.isArray(field.value) ? field.value : []}
+                    value={Array.isArray(field.value) ? field.value : []}
+                    name={field.name}
+                    ref={field.ref}
+                    onBlur={field.onBlur}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
         )}
-      />
-      <SimilaritySliderFormField isTooltipShown></SimilaritySliderFormField>
-      <TopNFormField></TopNFormField>
-      <SwitchFormField
-        name={'prompt_config.refine_multiturn'}
-        label={t('multiTurn')}
-        tooltip={t('multiTurnTip')}
-      ></SwitchFormField>
-      <UseKnowledgeGraphFormField name="prompt_config.use_kg"></UseKnowledgeGraphFormField>
-      <RerankFormFields></RerankFormFields>
-      <CrossLanguageFormField></CrossLanguageFormField>
-      <DynamicVariableForm></DynamicVariableForm>
-    </div>
+        <FormField
+          control={form.control}
+          name="prompt_config.system"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('chat.system')}</FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  rows={8}
+                  placeholder={t('chat.systemPlaceholder')}
+                  className="overflow-y-auto"
+                  dir={getDirAttribute(systemPromptValue || '')}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <SimilaritySliderFormField isTooltipShown></SimilaritySliderFormField>
+        <TopNFormField></TopNFormField>
+        <SwitchFormField
+          name={'prompt_config.refine_multiturn'}
+          label={t('chat.multiTurn')}
+          tooltip={t('chat.multiTurnTip')}
+        ></SwitchFormField>
+        <UseKnowledgeGraphFormField name="prompt_config.use_kg"></UseKnowledgeGraphFormField>
+        <RerankFormFields></RerankFormFields>
+        <CrossLanguageFormField></CrossLanguageFormField>
+        <DynamicVariableForm></DynamicVariableForm>
+      </div>
+    </Collapse>
   );
 }

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -1,7 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
 import { DatasetMetadata } from '@/constants/chat';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useFetchChat, useUpdateChat } from '@/hooks/use-chat-request';
@@ -20,7 +19,6 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
-import { ChatModelSettings } from './chat-model-settings';
 import { ChatPromptEngine } from './chat-prompt-engine';
 import { SavingButton } from './saving-button';
 import { useChatSettingSchema } from './use-chat-setting-schema';
@@ -195,10 +193,7 @@ export function ChatSettings({ hasSingleChatBox }: ChatSettingsProps) {
                 <ScrollArea viewportClassName="[&>div]:!block">
                   <section className="p-5 space-y-6 overflow-auto flex-1 min-h-0">
                     <ChatBasicSetting></ChatBasicSetting>
-                    <Separator />
                     <ChatPromptEngine></ChatPromptEngine>
-                    <Separator />
-                    <ChatModelSettings></ChatModelSettings>
                   </section>
                 </ScrollArea>