diff --git a/web/src/components/dynamic-form.tsx b/web/src/components/dynamic-form.tsx
index 3f1e9f063..2fdc55af0 100644
--- a/web/src/components/dynamic-form.tsx
+++ b/web/src/components/dynamic-form.tsx
@@ -7,6 +7,7 @@ import {
   useState,
 } from 'react';
 import {
+  ControllerRenderProps,
   DefaultValues,
   FieldValues,
   SubmitHandler,
@@ -67,7 +68,7 @@ export interface FormFieldConfig {
     max?: number;
     message?: string;
   };
-  render?: (fieldProps: any) => React.ReactNode;
+  render?: (fieldProps: ControllerRenderProps) => React.ReactNode;
   horizontal?: boolean;
   onChange?: (value: any) => void;
   tooltip?: React.ReactNode;
diff --git a/web/src/components/ragflow-form.tsx b/web/src/components/ragflow-form.tsx
index c59776824..5f21980b0 100644
--- a/web/src/components/ragflow-form.tsx
+++ b/web/src/components/ragflow-form.tsx
@@ -53,14 +53,16 @@ export function RAGFlowFormItem({
               {label}
             </FormLabel>
           )}
-          <FormControl>
-            {typeof children === 'function'
-              ? children(field)
-              : isValidElement(children)
-                ? cloneElement(children, { ...field })
-                : children}
-          </FormControl>
-          <FormMessage />
+          <div className="w-full flex flex-col">
+            <FormControl>
+              {typeof children === 'function'
+                ? children(field)
+                : isValidElement(children)
+                  ? cloneElement(children, { ...field })
+                  : children}
+            </FormControl>
+            <FormMessage />
+          </div>
         </FormItem>
       )}
     />
diff --git a/web/src/pages/user-setting/data-source/component/confluence-token-field.tsx b/web/src/pages/user-setting/data-source/component/confluence-token-field.tsx
index 5fe50b931..6c7e201d4 100644
--- a/web/src/pages/user-setting/data-source/component/confluence-token-field.tsx
+++ b/web/src/pages/user-setting/data-source/component/confluence-token-field.tsx
@@ -1,9 +1,10 @@
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ControllerRenderProps, useFormContext } from 'react-hook-form';
 
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
+import { debounce } from 'lodash';
 
 /* ---------------- Token Field ---------------- */
 
@@ -48,15 +49,15 @@ type ConfluenceIndexingMode = 'everything' | 'space' | 'page';
 export type ConfluenceIndexingModeFieldProps = ControllerRenderProps;
 
 export const ConfluenceIndexingModeField = (
-  fieldProps: ConfluenceIndexingModeFieldProps,
+  fieldProps: ControllerRenderProps,
 ) => {
   const { value, onChange, disabled } = fieldProps;
+  const [mode, setMode] = useState<ConfluenceIndexingMode>(
+    value || 'everything',
+  );
   const { watch, setValue } = useFormContext();
 
-  const mode = useMemo<ConfluenceIndexingMode>(
-    () => (value as ConfluenceIndexingMode) || 'everything',
-    [value],
-  );
+  useEffect(() => setMode(value), [value]);
 
   const spaceValue = watch('config.space');
   const pageIdValue = watch('config.page_id');
@@ -66,27 +67,40 @@ export const ConfluenceIndexingModeField = (
     if (!value) onChange('everything');
   }, [value, onChange]);
 
-  const handleModeChange = (nextMode?: string) => {
-    const normalized = (nextMode || 'everything') as ConfluenceIndexingMode;
-    onChange(normalized);
+  const handleModeChange = useCallback(
+    (nextMode?: string) => {
+      let normalized: ConfluenceIndexingMode = 'everything';
+      if (nextMode) {
+        normalized = nextMode as ConfluenceIndexingMode;
+        setMode(normalized);
+        onChange(normalized);
+      } else {
+        setMode(mode);
+        normalized = mode;
+        onChange(mode);
+        // onChange(mode);
+      }
+      if (normalized === 'everything') {
+        setValue('config.space', '');
+        setValue('config.page_id', '');
+        setValue('config.index_recursively', false);
+      } else if (normalized === 'space') {
+        setValue('config.page_id', '');
+        setValue('config.index_recursively', false);
+      } else if (normalized === 'page') {
+        setValue('config.space', '');
+      }
+    },
+    [mode, onChange, setValue],
+  );
 
-    if (normalized === 'everything') {
-      setValue('config.space', '', { shouldDirty: true, shouldTouch: true });
-      setValue('config.page_id', '', { shouldDirty: true, shouldTouch: true });
-      setValue('config.index_recursively', false, {
-        shouldDirty: true,
-        shouldTouch: true,
-      });
-    } else if (normalized === 'space') {
-      setValue('config.page_id', '', { shouldDirty: true, shouldTouch: true });
-      setValue('config.index_recursively', false, {
-        shouldDirty: true,
-        shouldTouch: true,
-      });
-    } else if (normalized === 'page') {
-      setValue('config.space', '', { shouldDirty: true, shouldTouch: true });
-    }
-  };
+  const debouncedHandleChange = useMemo(
+    () =>
+      debounce(() => {
+        handleModeChange();
+      }, 300),
+    [handleModeChange],
+  );
 
   return (
     <div className="w-full rounded-lg border border-border-button bg-bg-card p-4 space-y-4">
@@ -127,12 +141,11 @@ export const ConfluenceIndexingModeField = (
           <Input
             className="w-full"
             value={spaceValue ?? ''}
-            onChange={(e) =>
-              setValue('config.space', e.target.value, {
-                shouldDirty: true,
-                shouldTouch: true,
-              })
-            }
+            onChange={(e) => {
+              const value = e.target.value;
+              setValue('config.space', value);
+              debouncedHandleChange();
+            }}
             placeholder="e.g. KB"
             disabled={disabled}
           />
@@ -148,12 +161,10 @@ export const ConfluenceIndexingModeField = (
           <Input
             className="w-full"
             value={pageIdValue ?? ''}
-            onChange={(e) =>
-              setValue('config.page_id', e.target.value, {
-                shouldDirty: true,
-                shouldTouch: true,
-              })
-            }
+            onChange={(e) => {
+              setValue('config.page_id', e.target.value);
+              debouncedHandleChange();
+            }}
             placeholder="e.g. 123456"
             disabled={disabled}
           />
@@ -164,12 +175,10 @@ export const ConfluenceIndexingModeField = (
           <div className="flex items-center gap-2 pt-2">
             <Checkbox
               checked={Boolean(indexRecursively)}
-              onCheckedChange={(checked) =>
-                setValue('config.index_recursively', Boolean(checked), {
-                  shouldDirty: true,
-                  shouldTouch: true,
-                })
-              }
+              onCheckedChange={(checked) => {
+                setValue('config.index_recursively', Boolean(checked));
+                debouncedHandleChange();
+              }}
               disabled={disabled}
             />
             <span className="text-sm text-text-secondary">
diff --git a/web/src/pages/user-setting/data-source/contant.tsx b/web/src/pages/user-setting/data-source/contant.tsx
index 34ced0ae2..b3e86e118 100644
--- a/web/src/pages/user-setting/data-source/contant.tsx
+++ b/web/src/pages/user-setting/data-source/contant.tsx
@@ -1,6 +1,7 @@
 import { FormFieldType } from '@/components/dynamic-form';
 import SvgIcon from '@/components/svg-icon';
 import { t } from 'i18next';
+import { ControllerRenderProps } from 'react-hook-form';
 import { ConfluenceIndexingModeField } from './component/confluence-token-field';
 import GmailTokenField from './component/gmail-token-field';
 import GoogleDriveTokenField from './component/google-drive-token-field';
@@ -237,7 +238,9 @@ export const DataSourceFormFields = {
       required: false,
       horizontal: true,
       labelClassName: 'self-start pt-4',
-      render: (fieldProps) => <ConfluenceIndexingModeField {...fieldProps} />,
+      render: (fieldProps: ControllerRenderProps) => (
+        <ConfluenceIndexingModeField {...fieldProps} />
+      ),
     },
     {
       label: 'Space Key',
@@ -598,6 +601,7 @@ export const DataSourceFormDefaultValues = {
         confluence_username: '',
         confluence_access_token: '',
       },
+      index_mode: 'everything',
     },
   },
   [DataSourceKey.GOOGLE_DRIVE]: {
diff --git a/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx b/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
index fe54dda64..f399fd21d 100644
--- a/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
+++ b/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
@@ -136,7 +136,7 @@ const SourceDetailPage = () => {
         ...customFields,
       ] as FormFieldConfig[];
 
-      const neweFields = fields.map((field) => {
+      const newFields = fields.map((field) => {
         return {
           ...field,
           horizontal: true,
@@ -145,7 +145,7 @@ const SourceDetailPage = () => {
           },
         };
       });
-      setFields(neweFields);
+      setFields(newFields);
 
       const defultValueTemp = {
         ...(DataSourceFormDefaultValues[