Features: Memory page rendering and other bug fixes (#11784)

### What problem does this PR solve?

Features: Memory page rendering and other bug fixes
- Rendering of the Memory list page
- Rendering of the message list page in Memory
- Fixed an issue where the empty state was incorrectly displayed when
search criteria were applied
- Added a web link for the API-Key
- modifying the index_mode attribute of the Confluence data source.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)

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">

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]: {

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[