diff --git a/README.md b/README.md
index 55f7a51..467c938 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,26 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-
 ## Devlop Mode
+
 ### Getting Started
 
 First, Config Server Url:
 next.config.js
-```javascript
-    const nextConfig = {
-        output: 'export',
-        experimental: {
-            esmExternals: 'loose'
-        },
-        typescript: {
-            ignoreBuildErrors: true
-        },
-        env: {
-            API_BASE_URL: process.env.API_BASE_URL || your server url
-        },
-        trailingSlash: true
-    }
+
+```js
+const nextConfig = {
+  output: 'export',
+  experimental: {
+    esmExternals: 'loose',
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  env: {
+    API_BASE_URL: process.env.API_BASE_URL || 'your server url',
+  },
+  trailingSlash: true,
+};
 ```
 
 Second, run the development server:
@@ -39,6 +40,7 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
+
 To learn more about Next.js, take a look at the following resources:
 
 Next.js Documentation - learn about Next.js features and API.
@@ -46,12 +48,15 @@ Learn Next.js - an interactive Next.js tutorial.
 You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
+
 The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
 
 Check out our Next.js deployment documentation for more details.
 
 ## Product Mode
+
 ### Use In DB-GPT
+
 ```bash
 npm run compile
 
diff --git a/app/chat-context.tsx b/app/chat-context.tsx
index 0f342da..0436ff9 100644
--- a/app/chat-context.tsx
+++ b/app/chat-context.tsx
@@ -2,18 +2,21 @@ import { createContext, useEffect, useMemo, useState } from 'react';
 import { apiInterceptors, getDialogueList, getUsableModels } from '@/client/api';
 import { useRequest } from 'ahooks';
 import { useRouter } from 'next/router';
-import { DialogueListResponse } from '@/types/chart';
+import { DialogueListResponse, IChatDialogueSchema } from '@/types/chat';
+import { useSearchParams } from 'next/navigation';
 
 interface IChatContext {
   isContract?: boolean;
   isMenuExpand?: boolean;
-  scene: string;
+  scene: IChatDialogueSchema['chat_mode'] | (string & {});
   chatId: string;
   model: string;
   dbParam?: string;
   modelList: Array<string>;
-  setModel: (val: string) => void;
+  agentList: string[];
   dialogueList?: DialogueListResponse;
+  setAgentList?: (val: string[]) => void;
+  setModel: (val: string) => void;
   setIsContract: (val: boolean) => void;
   setIsMenuExpand: (val: boolean) => void;
   setDbParam: (val: string) => void;
@@ -28,8 +31,10 @@ const ChatContext = createContext<IChatContext>({
   modelList: [],
   model: '',
   dbParam: undefined,
-  setModel: () => {},
   dialogueList: [],
+  agentList: [],
+  setAgentList: () => {},
+  setModel: () => {},
   setIsContract: () => {},
   setIsMenuExpand: () => {},
   setDbParam: () => void 0,
@@ -38,11 +43,15 @@ const ChatContext = createContext<IChatContext>({
 });
 
 const ChatContextProvider = ({ children }: { children: React.ReactElement }) => {
-  const { query: { id = '', scene = '' } = {} } = useRouter();
+  const searchParams = useSearchParams();
+  const chatId = searchParams?.get('id') ?? '';
+  const scene = searchParams?.get('scene') ?? '';
+  const db_param = searchParams?.get('db_param') ?? '';
   const [isContract, setIsContract] = useState(false);
   const [model, setModel] = useState<string>('');
   const [isMenuExpand, setIsMenuExpand] = useState<boolean>(scene !== 'chat_dashboard');
-  const [dbParam, setDbParam] = useState<string>();
+  const [dbParam, setDbParam] = useState<string>(db_param);
+  const [agentList, setAgentList] = useState<string[]>([]);
 
   const {
     run: queryDialogueList,
@@ -66,17 +75,19 @@ const ChatContextProvider = ({ children }: { children: React.ReactElement }) =>
     setModel(modelList[0]);
   }, [modelList, modelList?.length]);
 
-  const currentDialogue = useMemo(() => dialogueList.find((item: any) => item.conv_uid === id), [id, dialogueList]);
+  const currentDialogue = useMemo(() => dialogueList.find((item: any) => item.conv_uid === chatId), [chatId, dialogueList]);
   const contextValue = {
     isContract,
     isMenuExpand,
-    scene: scene as string,
-    chatId: id as string,
+    scene,
+    chatId,
     modelList,
     model,
-    dbParam,
-    setModel,
+    dbParam: dbParam || db_param,
     dialogueList,
+    agentList,
+    setAgentList,
+    setModel,
     setIsContract,
     setIsMenuExpand,
     setDbParam,
diff --git a/app/i18n.ts b/app/i18n.ts
index 8406af7..19d2d0a 100644
--- a/app/i18n.ts
+++ b/app/i18n.ts
@@ -1,4 +1,3 @@
-import { STORAGE_LANG_KEY } from '@/constant';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
@@ -9,7 +8,8 @@ const resources = {
       space: 'space',
       Vector: 'Vector',
       Owner: 'Owner',
-      Docs: 'Docs',
+      Count: 'Count',
+      File_type_Invalid: 'The file type is invalid',
       Knowledge_Space_Config: 'Knowledge Space Config',
       Choose_a_Datasource_type: 'Choose a Datasource type',
       Setup_the_Datasource: 'Setup the Datasource',
@@ -95,8 +95,12 @@ const resources = {
       create_model: 'Create Model',
       model_select_tips: 'Please select a model',
       submit: 'Submit',
+      close: 'Close',
       start_model_success: 'Start model success',
       download_model_tip: 'Please download model first.',
+      Plugins: 'Plugins',
+      try_again: 'Try again',
+      no_data: 'No data',
       Open_Sidebar: 'Unfold',
       cancel: 'Cancel',
       Edit_Success: 'Edit Success',
@@ -134,6 +138,17 @@ const resources = {
       Copry_error: 'Copy failed',
       Click_Select: 'Click&Select',
       Quick_Start: 'Quick Start',
+      Select_Plugins: 'Select Plugins',
+      Search: 'Search',
+      Update_From_Github: 'Upload From Github',
+      Reset: 'Reset',
+      Upload: 'Upload',
+      Market_Plugins: 'Market Plugin',
+      My_Plugins: 'My Plugins',
+      Del_Knowledge_Tips: 'Do you want delete the knowledge',
+      Del_Document_Tips: 'Do you want delete the Document',
+      Tips: 'Tips',
+      Limit_Upload_File_Count_Tips: 'Only one file can be uploaded at a time',
     },
   },
   zh: {
@@ -142,7 +157,8 @@ const resources = {
       space: '知识库',
       Vector: '向量',
       Owner: '创建人',
-      Docs: '文档数',
+      Count: '文档数',
+      File_type_Invalid: '文件类型错误',
       Knowledge_Space_Config: '知识库配置',
       Choose_a_Datasource_type: '选择数据源类型',
       Setup_the_Datasource: '设置数据源',
@@ -181,6 +197,7 @@ const resources = {
       Delete: '删除',
       Operation: '操作',
       Submit: '提交',
+      close: '关闭',
       Chunks: '切片',
       Content: '内容',
       Meta_Data: '元数据',
@@ -228,6 +245,9 @@ const resources = {
       submit: '提交',
       start_model_success: '启动模型成功',
       download_model_tip: '请先下载模型！',
+      Plugins: '插件列表',
+      try_again: '刷新重试',
+      no_data: '暂无数据',
       Prompt: '提示语',
       Open_Sidebar: '展开',
       cancel: '取消',
@@ -266,6 +286,17 @@ const resources = {
       Copry_error: '复制失败',
       Click_Select: '点击选择',
       Quick_Start: '快速开始',
+      Select_Plugins: '选择插件',
+      Search: '搜索',
+      Reset: '重置',
+      Update_From_Github: '更新Github插件',
+      Upload: '上传',
+      Market_Plugins: '插件市场',
+      My_Plugins: '我的插件',
+      Del_Knowledge_Tips: '你确定删除该知识库吗',
+      Del_Document_Tips: '你确定删除该文档吗',
+      Tips: '提示',
+      Limit_Upload_File_Count_Tips: '一次只能上传一个文件',
     },
   },
 };
@@ -278,4 +309,6 @@ i18n.use(initReactI18next).init({
   },
 });
 
+export type I18nKeyMapper = (typeof resources)['en']['translation'];
+
 export default i18n;
diff --git a/client/api/request.ts b/client/api/request.ts
index 302a60b..191f01b 100644
--- a/client/api/request.ts
+++ b/client/api/request.ts
@@ -1,7 +1,7 @@
 import { AxiosRequestConfig } from 'axios';
 import { GET, POST } from '.';
 import { DbListResponse, DbSupportTypeResponse, PostDbParams, ChatFeedBackSchema } from '@/types/db';
-import { DialogueListResponse, IChatDialogueSchema, NewDialogueParam, SceneResponse, ChatHistoryResponse } from '@/types/chart';
+import { DialogueListResponse, IChatDialogueSchema, NewDialogueParam, SceneResponse, ChatHistoryResponse } from '@/types/chat';
 import { IModelData, StartModelParams, BaseModelParams, SupportModel } from '@/types/model';
 import {
   GetEditorSQLRoundRequest,
@@ -11,6 +11,18 @@ import {
   PostEditorSQLRunParams,
   PostSQLEditorSubmitParams,
 } from '@/types/editor';
+import { PostAgentHubUpdateParams, PostAgentQueryParams, PostAgentPluginResponse, PostAgentMyPluginResponse } from '@/types/agent';
+import {
+  AddKnowledgeParams,
+  ArgumentsParams,
+  ChunkListParams,
+  DocumentParams,
+  IArguments,
+  IChunkList,
+  IDocument,
+  IDocumentResponse,
+  IKnowLedge,
+} from '@/types/knowledge';
 
 /** App */
 export const postScenes = () => {
@@ -104,6 +116,47 @@ export const getEditorSql = (id: string, round: string | number) => {
 };
 
 /** knowledge */
+export const getArguments = (knowledgeName: string) => {
+  return POST<any, IArguments>(`/knowledge/${knowledgeName}/arguments`, {});
+};
+export const saveArguments = (knowledgeName: string, data: ArgumentsParams) => {
+  return POST<ArgumentsParams, IArguments>(`/knowledge/${knowledgeName}/argument/save`, data);
+};
+
+export const getKnowledgeList = () => {
+  return POST<any, Array<IKnowLedge>>('/knowledge/space/list', {});
+};
+export const getDocumentList = (knowLedgeName: string, data: Record<string, number>) => {
+  return POST<Record<string, number>, IDocumentResponse>(`/knowledge/${knowLedgeName}/document/list`, data);
+};
+
+export const addDocument = (knowledgeName: string, data: DocumentParams) => {
+  return POST<DocumentParams, number>(`/knowledge/${knowledgeName}/document/add`, data);
+};
+
+export const addKnowledge = (data: AddKnowledgeParams) => {
+  return POST<AddKnowledgeParams, Array<any>>(`/knowledge/space/add`, data);
+};
+
+export const syncDocument = (knowLedgeName: string, data: Record<string, Array<number>>) => {
+  return POST<Record<string, Array<number>>, string | null>(`/knowledge/${knowLedgeName}/document/sync`, data);
+};
+
+export const uploadDocument = (knowLedgeName: string, data: FormData) => {
+  return POST<FormData, number>(`/knowledge/${knowLedgeName}/document/upload`, data);
+};
+
+export const getChunkList = (spaceName: string, data: ChunkListParams) => {
+  return POST<ChunkListParams, IChunkList>(`/knowledge/${spaceName}/chunk/list`, data);
+};
+
+export const delDocument = (knowledgeName: string, data: Record<string, string>) => {
+  return POST<Record<string, string>, null>(`/knowledge/${knowledgeName}/document/delete`, data);
+};
+
+export const delKnowledge = (data: Record<string, string>) => {
+  return POST<Record<string, string>, null>(`/knowledge/space/delete`, data);
+};
 
 /** models */
 export const getModelList = () => {
@@ -122,6 +175,32 @@ export const getSupportModels = () => {
   return GET<null, Array<SupportModel>>('/api/v1/worker/model/params');
 };
 
+/** Agent */
+export const postAgentQuery = (data: PostAgentQueryParams) => {
+  return POST<PostAgentQueryParams, PostAgentPluginResponse>('/api/v1/agent/query', data);
+};
+export const postAgentHubUpdate = (data?: PostAgentHubUpdateParams) => {
+  return POST<PostAgentHubUpdateParams>('/api/v1/agent/hub/update', data ?? { channel: '', url: '', branch: '', authorization: '' });
+};
+export const postAgentMy = (user?: string) => {
+  return POST<undefined, PostAgentMyPluginResponse>('/api/v1/agent/my', undefined, { params: { user } });
+};
+export const postAgentInstall = (pluginName: string, user?: string) => {
+  return POST('/api/v1/agent/install', undefined, { params: { plugin_name: pluginName, user }, timeout: 60000 });
+};
+export const postAgentUninstall = (pluginName: string, user?: string) => {
+  return POST('/api/v1/agent/uninstall', undefined, { params: { plugin_name: pluginName, user }, timeout: 60000 });
+};
+export const postAgentUpload = (user = '', data: FormData, config?: Omit<AxiosRequestConfig, 'headers'>) => {
+  return POST<FormData>('/api/v1/personal/agent/upload', data, {
+    params: { user },
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    ...config,
+  });
+};
+
 /** chat feedback **/
 export const getChatFeedBackSelect = () => {
   return GET<null, Record<string, string>>(`/api/v1/feedback/select`, undefined);
diff --git a/client/api/tools/interceptors.ts b/client/api/tools/interceptors.ts
index ccfbedc..012b086 100644
--- a/client/api/tools/interceptors.ts
+++ b/client/api/tools/interceptors.ts
@@ -20,6 +20,10 @@ export const apiInterceptors = <T = any, D = any>(promise: Promise<ApiResponse<T
         if (ignoreCodes === '*' || (data.err_code && ignoreCodes && ignoreCodes.includes(data.err_code))) {
           return [null, data.data, data, response];
         } else {
+          notification.error({
+            message: `Request error`,
+            description: data?.err_msg ?? 'The interface is abnormal. Please try again later',
+          });
           throw new Error(data?.err_msg || 'The interface is abnormal. Please try again later');
         }
       }
diff --git a/components/agent/market-plugins.tsx b/components/agent/market-plugins.tsx
new file mode 100644
index 0000000..832802c
--- /dev/null
+++ b/components/agent/market-plugins.tsx
@@ -0,0 +1,152 @@
+import { apiInterceptors, postAgentHubUpdate, postAgentInstall, postAgentQuery, postAgentUninstall } from '@/client/api';
+import { IAgentPlugin, PostAgentQueryParams } from '@/types/agent';
+import { useRequest } from 'ahooks';
+import { Button, Card, Form, Input, Spin, Tag, Tooltip, message } from 'antd';
+import { useCallback, useMemo, useState } from 'react';
+import MyEmpty from '../common/MyEmpty';
+import { ClearOutlined, DownloadOutlined, GithubOutlined, LoadingOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+function MarketPlugins() {
+  const { t } = useTranslation();
+
+  const [uploading, setUploading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [actionIndex, setActionIndex] = useState<number | undefined>();
+
+  const [form] = Form.useForm<PostAgentQueryParams['filter']>();
+
+  const pagination = useMemo<{ pageNo: number; pageSize: number }>(
+    () => ({
+      pageNo: 1,
+      pageSize: 20,
+    }),
+    [],
+  );
+
+  const {
+    data: agents = [],
+    loading,
+    refresh,
+  } = useRequest(async () => {
+    const queryParams: PostAgentQueryParams = {
+      page_index: pagination.pageNo,
+      page_size: pagination.pageSize,
+      filter: form.getFieldsValue(),
+    };
+    const [err, res] = await apiInterceptors(postAgentQuery(queryParams));
+    setIsError(!!err);
+    return res?.datas ?? [];
+  });
+
+  const updateFromGithub = async () => {
+    try {
+      setUploading(true);
+      const [err] = await apiInterceptors(postAgentHubUpdate());
+      if (err) return;
+      message.success('success');
+      refresh();
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const pluginAction = useCallback(
+    async (name: string, index: number, isInstall: boolean) => {
+      if (actionIndex) return;
+      setActionIndex(index);
+      const [err] = await apiInterceptors((isInstall ? postAgentInstall : postAgentUninstall)(name));
+      if (!err) {
+        message.success('success');
+        refresh();
+      }
+      setActionIndex(undefined);
+    },
+    [actionIndex, refresh],
+  );
+
+  const renderAction = useCallback(
+    (agent: IAgentPlugin, index: number) => {
+      if (index === actionIndex) {
+        return <LoadingOutlined />;
+      }
+      return agent.installed ? (
+        <Tooltip title="Uninstall">
+          <div
+            className="w-full h-full"
+            onClick={() => {
+              pluginAction(agent.name, index, false);
+            }}
+          >
+            <ClearOutlined />
+          </div>
+        </Tooltip>
+      ) : (
+        <Tooltip title="Install">
+          <div
+            className="w-full h-full"
+            onClick={() => {
+              pluginAction(agent.name, index, true);
+            }}
+          >
+            <DownloadOutlined />
+          </div>
+        </Tooltip>
+      );
+    },
+    [actionIndex, pluginAction],
+  );
+
+  return (
+    <Spin spinning={loading}>
+      <Form form={form} layout="inline" onFinish={refresh} className="mb-2">
+        <Form.Item className="!mb-2" name="name" label={'Name'}>
+          <Input allowClear className="w-48" />
+        </Form.Item>
+        <Form.Item>
+          <Button className="mr-2" type="primary" htmlType="submit" icon={<SearchOutlined />}>
+            {t('Search')}
+          </Button>
+          <Button loading={uploading} type="primary" icon={<SyncOutlined />} onClick={updateFromGithub}>
+            {t('Update_From_Github')}
+          </Button>
+        </Form.Item>
+      </Form>
+      {!agents.length && !loading && <MyEmpty error={isError} refresh={refresh} />}
+      <div className="flex flex-wrap gap-2 md:gap-4">
+        {agents.map((agent, index) => (
+          <Card
+            className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4"
+            key={agent.id}
+            actions={[
+              renderAction(agent, index),
+              <Tooltip key="github" title="Github">
+                <div
+                  className="w-full h-full"
+                  onClick={() => {
+                    window.open(agent.storage_url, '_blank');
+                  }}
+                >
+                  <GithubOutlined />
+                </div>
+              </Tooltip>,
+            ]}
+          >
+            <Tooltip title={agent.name}>
+              <h2 className="mb-2 text-base font-semibold line-clamp-1">{agent.name}</h2>
+            </Tooltip>
+            {agent.author && <Tag>{agent.author}</Tag>}
+            {agent.version && <Tag>v{agent.version}</Tag>}
+            {agent.type && <Tag>Type {agent.type}</Tag>}
+            {agent.storage_channel && <Tag>{agent.storage_channel}</Tag>}
+            <Tooltip title={agent.description}>
+              <p className="mt-2 line-clamp-2 text-gray-400 text-sm">{agent.description}</p>
+            </Tooltip>
+          </Card>
+        ))}
+      </div>
+    </Spin>
+  );
+}
+
+export default MarketPlugins;
diff --git a/components/agent/my-plugins.tsx b/components/agent/my-plugins.tsx
new file mode 100644
index 0000000..d7c394d
--- /dev/null
+++ b/components/agent/my-plugins.tsx
@@ -0,0 +1,124 @@
+import { apiInterceptors, postAgentMy, postAgentUninstall, postAgentUpload } from '@/client/api';
+import { IMyPlugin } from '@/types/agent';
+import { useRequest } from 'ahooks';
+import { Button, Card, Spin, Tag, Tooltip, Upload, UploadProps, message } from 'antd';
+import { useCallback, useState } from 'react';
+import MyEmpty from '../common/MyEmpty';
+import { ClearOutlined, LoadingOutlined, UploadOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+function MyPlugins() {
+  const { t } = useTranslation();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const [uploading, setUploading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [actionIndex, setActionIndex] = useState<number | undefined>();
+
+  const {
+    data = [],
+    loading,
+    refresh,
+  } = useRequest(async () => {
+    const [err, res] = await apiInterceptors(postAgentMy());
+    setIsError(!!err);
+    return res ?? [];
+  });
+
+  const uninstall = async (name: string, index: number) => {
+    if (actionIndex) return;
+    setActionIndex(index);
+    const [err] = await apiInterceptors(postAgentUninstall(name));
+    message[err ? 'error' : 'success'](err ? 'failed' : 'success');
+    !err && refresh();
+    setActionIndex(undefined);
+  };
+
+  const renderAction = useCallback(
+    (item: IMyPlugin, index: number) => {
+      if (index === actionIndex) {
+        return <LoadingOutlined />;
+      }
+      return (
+        <Tooltip title="Uninstall">
+          <div
+            className="w-full h-full"
+            onClick={() => {
+              uninstall(item.name, index);
+            }}
+          >
+            <ClearOutlined />
+          </div>
+        </Tooltip>
+      );
+    },
+    [actionIndex],
+  );
+
+  const onChange: UploadProps['onChange'] = async (info) => {
+    if (!info) {
+      message.error('Please select the *.zip,*.rar file');
+      return;
+    }
+    try {
+      const file = info.file;
+      setUploading(true);
+      const formData = new FormData();
+      formData.append('doc_file', file as any);
+      messageApi.open({ content: `Uploading ${file.name}`, type: 'loading', duration: 0 });
+      const [err] = await apiInterceptors(postAgentUpload(undefined, formData, { timeout: 60000 }));
+      if (err) return;
+      message.success('success');
+      refresh();
+    } catch (e: any) {
+      message.error(e?.message || 'Upload Error');
+    } finally {
+      setUploading(false);
+      messageApi.destroy();
+    }
+  };
+
+  return (
+    <Spin spinning={loading}>
+      {contextHolder}
+      <div>
+        <Upload
+          disabled={loading}
+          className="mr-1"
+          beforeUpload={() => false}
+          name="file"
+          accept=".zip,.rar"
+          multiple={false}
+          onChange={onChange}
+          showUploadList={{
+            showDownloadIcon: false,
+            showPreviewIcon: false,
+            showRemoveIcon: false,
+          }}
+          itemRender={() => <></>}
+        >
+          <Button loading={uploading} type="primary" icon={<UploadOutlined />}>
+            {t('Upload')}
+          </Button>
+        </Upload>
+      </div>
+      {!data.length && !loading && <MyEmpty error={isError} refresh={refresh} />}
+      <div className="flex gap-2 md:gap-4">
+        {data.map((item, index) => (
+          <Card className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4" key={item.id} actions={[renderAction(item, index)]}>
+            <Tooltip title={item.name}>
+              <h2 className="mb-2 text-base font-semibold line-clamp-1">{item.name}</h2>
+            </Tooltip>
+            {item.version && <Tag>v{item.version}</Tag>}
+            {item.type && <Tag>Type {item.type}</Tag>}
+            <Tooltip title={item.description}>
+              <p className="mt-2 line-clamp-2 text-gray-400 text-sm">{item.description}</p>
+            </Tooltip>
+          </Card>
+        ))}
+      </div>
+    </Spin>
+  );
+}
+
+export default MyPlugins;
diff --git a/components/chart/bar-chart.tsx b/components/chart/bar-chart.tsx
index dfb51e8..7e102fd 100644
--- a/components/chart/bar-chart.tsx
+++ b/components/chart/bar-chart.tsx
@@ -1,4 +1,4 @@
-import { ChartData } from '@/types/chart';
+import { ChartData } from '@/types/chat';
 import { Column } from '@antv/g2plot';
 import { Card, CardContent, Typography } from '@mui/joy';
 import { useEffect, useRef } from 'react';
diff --git a/components/chart/index.tsx b/components/chart/index.tsx
index 45092de..a4ed444 100644
--- a/components/chart/index.tsx
+++ b/components/chart/index.tsx
@@ -2,7 +2,7 @@ import { Card, CardContent, Typography } from '@mui/joy';
 import BarChart from './bar-chart';
 import LineChart from './line-chart';
 import TableChart from './table-chart';
-import { ChartData } from '@/types/chart';
+import { ChartData } from '@/types/chat';
 import { useMemo } from 'react';
 
 type Props = {
diff --git a/components/chart/line-chart.tsx b/components/chart/line-chart.tsx
index 51766d1..586eaec 100644
--- a/components/chart/line-chart.tsx
+++ b/components/chart/line-chart.tsx
@@ -1,4 +1,4 @@
-import { ChartData } from '@/types/chart';
+import { ChartData } from '@/types/chat';
 import { Card, CardContent, Typography } from '@mui/joy';
 import { useEffect, useRef } from 'react';
 import { Line } from '@antv/g2plot';
diff --git a/components/chart/table-chart.tsx b/components/chart/table-chart.tsx
index 56ed605..8d04257 100644
--- a/components/chart/table-chart.tsx
+++ b/components/chart/table-chart.tsx
@@ -1,4 +1,4 @@
-import { ChartData } from '@/types/chart';
+import { ChartData } from '@/types/chat';
 import { Card, CardContent, Typography, Table } from '@mui/joy';
 import { groupBy } from 'lodash';
 
diff --git a/components/chat/chat-container.tsx b/components/chat/chat-container.tsx
index 8659a16..2f03e5e 100644
--- a/components/chat/chat-container.tsx
+++ b/components/chat/chat-container.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useAsyncEffect } from 'ahooks';
 import useChat from '@/hooks/use-chat';
 import Completion from './completion';
-import { ChartData, ChatHistoryResponse } from '@/types/chart';
+import { ChartData, ChatHistoryResponse } from '@/types/chat';
 import { apiInterceptors, getChatHistory } from '@/client/api';
 import { ChatContext } from '@/app/chat-context';
 import Header from './header';
diff --git a/components/chat/chat-content.tsx b/components/chat/chat-content.tsx
deleted file mode 100644
index 7f97a61..0000000
--- a/components/chat/chat-content.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { PropsWithChildren, memo, useContext } from 'react';
-import { CodeOutlined, CopyOutlined, LinkOutlined, RobotOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import ReactMarkdown from 'react-markdown';
-import { IChatDialogueMessageSchema } from '@/types/chart';
-import rehypeRaw from 'rehype-raw';
-import classNames from 'classnames';
-import { Button, Image, Tag, message } from 'antd';
-import { renderModelIcon } from './header/model-selector';
-import { ChatContext } from '@/app/chat-context';
-import copy from 'copy-to-clipboard';
-
-interface Props {
-  content: Omit<IChatDialogueMessageSchema, 'context'> & {
-    context:
-      | string
-      | {
-          template_name: string;
-          template_introduce: string;
-        };
-  };
-  isChartChat?: boolean;
-  onLinkClick: () => void;
-}
-
-const markdownComponents: Parameters<typeof ReactMarkdown>['0']['components'] = {
-  code({ inline, node, className, children, style, ...props }) {
-    const match = /language-(\w+)/.exec(className || '');
-    return !inline && match ? (
-      <div className="relative">
-        <Button
-          className="absolute right-3 top-2 text-gray-300 hover:!text-gray-200 bg-gray-700"
-          type="text"
-          icon={<CopyOutlined />}
-          onClick={() => {
-            const success = copy(children as string);
-            message[success ? 'success' : 'error'](success ? 'Copy success' : 'Copy failed');
-          }}
-        />
-        <SyntaxHighlighter language={match?.[1] ?? 'javascript'} style={oneDark}>
-          {children as string}
-        </SyntaxHighlighter>
-      </div>
-    ) : (
-      <code
-        {...props}
-        style={style}
-        className="px-[6px] py-[2px] rounded bg-gray-700 text-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm whitespace-nowrap"
-      >
-        {children}
-      </code>
-    );
-  },
-  ul({ children }) {
-    return <ul className="py-1">{children}</ul>;
-  },
-  ol({ children }) {
-    return <ol className="py-1">{children}</ol>;
-  },
-  li({ children, ordered }) {
-    return <li className={`text-sm leading-7 ml-5 pl-2 text-gray-600 dark:text-gray-300 ${ordered ? 'list-decimal' : 'list-disc'}`}>{children}</li>;
-  },
-  table({ children }) {
-    return (
-      <table className="my-2 rounded-tl-md rounded-tr-md max-w-full bg-white dark:bg-gray-900 text-sm rounded-lg overflow-hidden">{children}</table>
-    );
-  },
-  thead({ children }) {
-    return <thead className="bg-[#fafafa] dark:bg-black font-semibold">{children}</thead>;
-  },
-  th({ children }) {
-    return <th className="!text-left p-4">{children}</th>;
-  },
-  td({ children }) {
-    return <td className="p-4 border-t border-[#f0f0f0] dark:border-gray-700">{children}</td>;
-  },
-  h1({ children }) {
-    return <h3 className="text-2xl font-bold my-4 border-b border-slate-300 pb-4">{children}</h3>;
-  },
-  h2({ children }) {
-    return <h3 className="text-xl font-bold my-3">{children}</h3>;
-  },
-  h3({ children }) {
-    return <h3 className="text-lg font-semibold my-2">{children}</h3>;
-  },
-  h4({ children }) {
-    return <h3 className="text-base font-semibold my-1">{children}</h3>;
-  },
-  a({ children, href }) {
-    return (
-      <div className="inline-block text-blue-600 dark:text-blue-400">
-        <LinkOutlined className="mr-1" />
-        <a href={href} target="_blank">
-          {children}
-        </a>
-      </div>
-    );
-  },
-  img({ src, alt }) {
-    return (
-      <div>
-        <Image
-          className="min-h-[1rem] max-w-full max-h-full border rounded"
-          src={src}
-          alt={alt}
-          placeholder={
-            <Tag icon={<SyncOutlined spin />} color="processing">
-              Image Loading...
-            </Tag>
-          }
-          fallback="/images/fallback.png"
-        />
-      </div>
-    );
-  },
-  blockquote({ children }) {
-    return (
-      <blockquote className="py-4 px-6 border-l-4 border-blue-600 rounded bg-white my-2 text-gray-500 dark:bg-slate-800 dark:text-gray-200 dark:border-white shadow-sm">
-        {children}
-      </blockquote>
-    );
-  },
-};
-
-function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithChildren<Props>) {
-  const { scene } = useContext(ChatContext);
-
-  const { context, model_name, role } = content;
-  const isRobot = role === 'view';
-
-  const [contextMsg, relation] = typeof context === 'string' ? context.split('\trelations:') : [context];
-  const relations = (relation && typeof relation === 'string' ? relation : null)?.split(',');
-
-  return (
-    <>
-      <div
-        className={classNames('relative flex flex-wrap w-full px-2 sm:px-4 py-2 sm:py-6 rounded-xl', {
-          'bg-slate-100 dark:bg-[#353539]': isRobot,
-          'lg:w-full xl:w-full pl-0': ['chat_with_db_execute', 'chat_dashboard'].includes(scene),
-        })}
-      >
-        <div className="mr-2 flex flex-shrink-0 items-center justify-center h-7 w-7 rounded-full text-lg sm:mr-4">
-          {isRobot ? renderModelIcon(model_name) || <RobotOutlined /> : <UserOutlined />}
-        </div>
-        <div className="flex-1 overflow-hidden items-center text-md leading-8">
-          {/* User Input */}
-          {!isRobot && typeof context === 'string' && context}
-          {/* Render Report */}
-          {isRobot && isChartChat && typeof context === 'object' && (
-            <div>
-              {`[${context.template_name}]: `}
-              <span className="text-[#1677ff] cursor-pointer" onClick={onLinkClick}>
-                <CodeOutlined className="mr-1" />
-                {context.template_introduce || 'More Details'}
-              </span>
-            </div>
-          )}
-          {/* Markdown */}
-          {isRobot && typeof contextMsg === 'string' && (
-            <ReactMarkdown components={markdownComponents} rehypePlugins={[rehypeRaw]}>
-              {contextMsg
-                .replaceAll('\\n', '\n')
-                .replace(/<table(\w*=[^>]+)>/gi, '<table $1>')
-                .replace(/<tr(\w*=[^>]+)>/gi, '<tr $1>')}
-            </ReactMarkdown>
-          )}
-          {typeof relations === 'object' && !!relations?.length && (
-            <div className="flex flex-wrap mt-2">
-              {relations?.map((value, index) => (
-                <Tag color="#108ee9" key={value + index}>
-                  {value}
-                </Tag>
-              ))}
-            </div>
-          )}
-        </div>
-        {children}
-      </div>
-    </>
-  );
-}
-
-export default memo(ChatContent);
diff --git a/components/chat/chat-content/config.tsx b/components/chat/chat-content/config.tsx
new file mode 100644
index 0000000..0dc544a
--- /dev/null
+++ b/components/chat/chat-content/config.tsx
@@ -0,0 +1,112 @@
+import { CopyOutlined, LinkOutlined, SyncOutlined } from '@ant-design/icons';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import ReactMarkdown from 'react-markdown';
+import { Button, Image, Tag, message } from 'antd';
+import copy from 'copy-to-clipboard';
+
+type MarkdownComponent = Parameters<typeof ReactMarkdown>['0']['components'];
+
+const basicComponents: MarkdownComponent = {
+  code({ inline, node, className, children, style, ...props }) {
+    const match = /language-(\w+)/.exec(className || '');
+    return !inline && match ? (
+      <div className="relative">
+        <Button
+          className="absolute right-3 top-2 text-gray-300 hover:!text-gray-200 bg-gray-700"
+          type="text"
+          icon={<CopyOutlined />}
+          onClick={() => {
+            const success = copy(children as string);
+            message[success ? 'success' : 'error'](success ? 'Copy success' : 'Copy failed');
+          }}
+        />
+        <SyntaxHighlighter language={match?.[1] ?? 'javascript'} style={oneDark}>
+          {children as string}
+        </SyntaxHighlighter>
+      </div>
+    ) : (
+      <code {...props} style={style} className="px-[6px] py-[2px] rounded bg-gray-700 text-gray-100 dark:bg-gray-100 dark:text-gray-800 text-sm">
+        {children}
+      </code>
+    );
+  },
+  ul({ children }) {
+    return <ul className="py-1">{children}</ul>;
+  },
+  ol({ children }) {
+    return <ol className="py-1">{children}</ol>;
+  },
+  li({ children, ordered }) {
+    return <li className={`text-sm leading-7 ml-5 pl-2 text-gray-600 dark:text-gray-300 ${ordered ? 'list-decimal' : 'list-disc'}`}>{children}</li>;
+  },
+  table({ children }) {
+    return (
+      <table className="my-2 rounded-tl-md rounded-tr-md max-w-full bg-white dark:bg-gray-900 text-sm rounded-lg overflow-hidden">{children}</table>
+    );
+  },
+  thead({ children }) {
+    return <thead className="bg-[#fafafa] dark:bg-black font-semibold">{children}</thead>;
+  },
+  th({ children }) {
+    return <th className="!text-left p-4">{children}</th>;
+  },
+  td({ children }) {
+    return <td className="p-4 border-t border-[#f0f0f0] dark:border-gray-700">{children}</td>;
+  },
+  h1({ children }) {
+    return <h3 className="text-2xl font-bold my-4 border-b border-slate-300 pb-4">{children}</h3>;
+  },
+  h2({ children }) {
+    return <h3 className="text-xl font-bold my-3">{children}</h3>;
+  },
+  h3({ children }) {
+    return <h3 className="text-lg font-semibold my-2">{children}</h3>;
+  },
+  h4({ children }) {
+    return <h3 className="text-base font-semibold my-1">{children}</h3>;
+  },
+  a({ children, href }) {
+    return (
+      <div className="inline-block text-blue-600 dark:text-blue-400">
+        <LinkOutlined className="mr-1" />
+        <a href={href} target="_blank">
+          {children}
+        </a>
+      </div>
+    );
+  },
+  img({ src, alt }) {
+    return (
+      <div>
+        <Image
+          className="min-h-[1rem] max-w-full max-h-full border rounded"
+          src={src}
+          alt={alt}
+          placeholder={
+            <Tag icon={<SyncOutlined spin />} color="processing">
+              Image Loading...
+            </Tag>
+          }
+          fallback="/images/fallback.png"
+        />
+      </div>
+    );
+  },
+  blockquote({ children }) {
+    return (
+      <blockquote className="py-4 px-6 border-l-4 border-blue-600 rounded bg-white my-2 text-gray-500 dark:bg-slate-800 dark:text-gray-200 dark:border-white shadow-sm">
+        {children}
+      </blockquote>
+    );
+  },
+};
+
+const extraComponents: MarkdownComponent = {};
+
+const markdownComponents = {
+  ...basicComponents,
+  ...extraComponents,
+};
+
+export default markdownComponents;
diff --git a/components/chat/chat-content/index.tsx b/components/chat/chat-content/index.tsx
new file mode 100644
index 0000000..73330f1
--- /dev/null
+++ b/components/chat/chat-content/index.tsx
@@ -0,0 +1,180 @@
+import { PropsWithChildren, ReactNode, memo, useContext, useMemo } from 'react';
+import { CheckOutlined, ClockCircleOutlined, CloseOutlined, CodeOutlined, LoadingOutlined, RobotOutlined, UserOutlined } from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import { IChatDialogueMessageSchema } from '@/types/chat';
+import rehypeRaw from 'rehype-raw';
+import classNames from 'classnames';
+import { Tag } from 'antd';
+import { renderModelIcon } from '../header/model-selector';
+import { ChatContext } from '@/app/chat-context';
+import markdownComponents from './config';
+
+interface Props {
+  content: Omit<IChatDialogueMessageSchema, 'context'> & {
+    context:
+      | string
+      | {
+          template_name: string;
+          template_introduce: string;
+        };
+  };
+  isChartChat?: boolean;
+  onLinkClick: () => void;
+}
+
+type MarkdownComponent = Parameters<typeof ReactMarkdown>['0']['components'];
+
+type DBGPTView = {
+  name: string;
+  status: 'todo' | 'runing' | 'failed' | 'completed' | (string & {});
+  result?: string;
+  err_msg?: string;
+};
+
+const pluginViewStatusMapper: Record<DBGPTView['status'], { bgClass: string; icon: ReactNode }> = {
+  todo: {
+    bgClass: 'bg-gray-500',
+    icon: <ClockCircleOutlined className="ml-2" />,
+  },
+  runing: {
+    bgClass: 'bg-blue-500',
+    icon: <LoadingOutlined className="ml-2" />,
+  },
+  failed: {
+    bgClass: 'bg-red-500',
+    icon: <CloseOutlined className="ml-2" />,
+  },
+  completed: {
+    bgClass: 'bg-green-500',
+    icon: <CheckOutlined className="ml-2" />,
+  },
+};
+
+function formatMarkdownVal(val: string) {
+  return val
+    .replaceAll('\\n', '\n')
+    .replace(/<table(\w*=[^>]+)>/gi, '<table $1>')
+    .replace(/<tr(\w*=[^>]+)>/gi, '<tr $1>');
+}
+
+function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithChildren<Props>) {
+  const { scene } = useContext(ChatContext);
+
+  const { context, model_name, role } = content;
+  const isRobot = role === 'view';
+
+  const { relations, value, cachePlguinContext } = useMemo<{ relations: string[]; value: string; cachePlguinContext: DBGPTView[] }>(() => {
+    if (typeof context !== 'string') {
+      return {
+        relations: [],
+        value: '',
+        cachePlguinContext: [],
+      };
+    }
+    const [value, relation] = context.split('\trelations:');
+    const relations = relation ? relation.split(',') : [];
+    const cachePlguinContext: DBGPTView[] = [];
+
+    let cacheIndex = 0;
+    const result = value.replace(/<dbgpt-view[^>]*>[^<]*<\/dbgpt-view>/gi, (matchVal) => {
+      try {
+        console.log(matchVal);
+        const pluginVal = matchVal.replaceAll('\n', '\\n').replace(/<[^>]*>|<\/[^>]*>/gm, '');
+        const pluginContext = JSON.parse(pluginVal) as DBGPTView;
+        const replacement = `<custom-view>${cacheIndex}</custom-view>`;
+
+        cachePlguinContext.push({
+          ...pluginContext,
+          result: formatMarkdownVal(pluginContext.result ?? ''),
+        });
+        cacheIndex++;
+
+        return replacement;
+      } catch (e) {
+        console.log((e as any).message, e);
+        return matchVal;
+      }
+    });
+    return {
+      relations,
+      cachePlguinContext,
+      value: result,
+    };
+  }, [context]);
+
+  const extraMarkdownComponents = useMemo<MarkdownComponent>(
+    () => ({
+      'custom-view'({ children }) {
+        const index = +children.toString();
+        if (!cachePlguinContext[index]) {
+          return children;
+        }
+        const { name, status, err_msg, result } = cachePlguinContext[index];
+        const { bgClass, icon } = pluginViewStatusMapper[status] ?? {};
+        return (
+          <div className="bg-white dark:bg-[#212121] rounded-lg overflow-hidden my-2 flex flex-col lg:max-w-[80%]">
+            <div className={classNames('flex px-4 md:px-6 py-2 items-center text-white text-sm', bgClass)}>
+              {name}
+              {icon}
+            </div>
+            {result ? (
+              <div className="px-4 md:px-6 py-4 text-sm">
+                <ReactMarkdown components={markdownComponents} rehypePlugins={[rehypeRaw]}>
+                  {result ?? ''}
+                </ReactMarkdown>
+              </div>
+            ) : (
+              <div className="px-4 md:px-6 py-4 text-sm">{err_msg}</div>
+            )}
+          </div>
+        );
+      },
+    }),
+    [context, cachePlguinContext],
+  );
+
+  return (
+    <div
+      className={classNames('relative flex flex-wrap w-full px-2 sm:px-4 py-2 sm:py-6 rounded-xl break-words', {
+        'bg-slate-100 dark:bg-[#353539]': isRobot,
+        'lg:w-full xl:w-full pl-0': ['chat_with_db_execute', 'chat_dashboard'].includes(scene),
+      })}
+    >
+      <div className="mr-2 flex flex-shrink-0 items-center justify-center h-7 w-7 rounded-full text-lg sm:mr-4">
+        {isRobot ? renderModelIcon(model_name) || <RobotOutlined /> : <UserOutlined />}
+      </div>
+      <div className="flex-1 overflow-hidden items-center text-md leading-8">
+        {/* User Input */}
+        {!isRobot && typeof context === 'string' && context}
+        {/* Render Report */}
+        {isRobot && isChartChat && typeof context === 'object' && (
+          <div>
+            {`[${context.template_name}]: `}
+            <span className="text-[#1677ff] cursor-pointer" onClick={onLinkClick}>
+              <CodeOutlined className="mr-1" />
+              {context.template_introduce || 'More Details'}
+            </span>
+          </div>
+        )}
+        {/* Markdown */}
+        {isRobot && typeof context === 'string' && (
+          <ReactMarkdown components={{ ...markdownComponents, ...extraMarkdownComponents }} rehypePlugins={[rehypeRaw]}>
+            {formatMarkdownVal(value)}
+          </ReactMarkdown>
+        )}
+        {!!relations?.length && (
+          <div className="flex flex-wrap mt-2">
+            {relations?.map((value, index) => (
+              <Tag color="#108ee9" key={value + index}>
+                {value}
+              </Tag>
+            ))}
+          </div>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default memo(ChatContent);
diff --git a/components/chat/completion.tsx b/components/chat/completion.tsx
index e9b37cb..9d689ff 100644
--- a/components/chat/completion.tsx
+++ b/components/chat/completion.tsx
@@ -4,7 +4,7 @@ import MonacoEditor from './monaco-editor';
 import ChatContent from './chat-content';
 import ChatFeedback from './chat-feedback';
 import { ChatContext } from '@/app/chat-context';
-import { IChatDialogueMessageSchema } from '@/types/chart';
+import { IChatDialogueMessageSchema } from '@/types/chat';
 import classNames from 'classnames';
 import { Empty, Modal, message, Tooltip } from 'antd';
 import { renderModelIcon } from './header/model-selector';
@@ -24,7 +24,7 @@ type Props = {
 };
 
 const Completion = ({ messages, onSubmit }: Props) => {
-  const { dbParam, currentDialogue, scene, model, refreshDialogList, chatId } = useContext(ChatContext);
+  const { dbParam, currentDialogue, scene, model, refreshDialogList, chatId, agentList } = useContext(ChatContext);
   const { t } = useTranslation();
   const searchParams = useSearchParams();
 
@@ -39,12 +39,23 @@ const Completion = ({ messages, onSubmit }: Props) => {
 
   const isChartChat = useMemo(() => scene === 'chat_dashboard', [scene]);
 
+  const selectParam = useMemo(() => {
+    switch (scene) {
+      case 'chat_agent':
+        return agentList.join(',');
+      case 'chat_excel':
+        return currentDialogue?.select_param;
+      default:
+        return spaceNameOriginal || dbParam;
+    }
+  }, [scene, agentList, currentDialogue, dbParam, spaceNameOriginal]);
+
   const handleChat = async (message: string) => {
     if (isLoading || !message.trim()) return;
     try {
       setIsLoading(true);
       await onSubmit(message, {
-        select_param: scene === 'chat_excel' ? currentDialogue?.select_param : spaceNameOriginal || dbParam,
+        select_param: selectParam ?? '',
       });
     } finally {
       setIsLoading(false);
diff --git a/components/chat/header/agent-selector.tsx b/components/chat/header/agent-selector.tsx
new file mode 100644
index 0000000..c851c3a
--- /dev/null
+++ b/components/chat/header/agent-selector.tsx
@@ -0,0 +1,39 @@
+import { ChatContext } from '@/app/chat-context';
+import { apiInterceptors, postAgentMy } from '@/client/api';
+import { useRequest } from 'ahooks';
+import { Select } from 'antd';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function AgentSelector() {
+  const { t } = useTranslation();
+  const { agentList, setAgentList } = useContext(ChatContext);
+
+  const { data = [] } = useRequest(async () => {
+    const [, res] = await apiInterceptors(postAgentMy());
+    if (res && res.length) {
+      setAgentList?.([res[0].name]);
+    }
+    return res ?? [];
+  });
+
+  if (!data.length) return null;
+
+  return (
+    <Select
+      className="w-60"
+      value={agentList}
+      mode="multiple"
+      maxTagCount={1}
+      maxTagTextLength={12}
+      placeholder={t('Select_Plugins')}
+      options={data.map((item) => ({ label: item.name, value: item.name }))}
+      allowClear
+      onChange={(val) => {
+        setAgentList?.(val);
+      }}
+    />
+  );
+}
+
+export default AgentSelector;
diff --git a/components/chat/header/db-selector.tsx b/components/chat/header/db-selector.tsx
index 0d07340..b33a8ae 100644
--- a/components/chat/header/db-selector.tsx
+++ b/components/chat/header/db-selector.tsx
@@ -19,10 +19,10 @@ function DBSelector() {
   const dbOpts = useMemo(() => Object.entries(dbMapper).map(([k, v]) => ({ label: k, value: v })), [dbMapper]);
 
   useEffect(() => {
-    if (dbOpts.length) {
+    if (dbOpts.length && !dbParam) {
       setDbParam(dbOpts[0].value);
     }
-  }, [dbOpts]);
+  }, [dbOpts, setDbParam, dbParam]);
 
   if (!dbOpts.length) return null;
 
diff --git a/components/chat/header/index.tsx b/components/chat/header/index.tsx
index 30fd9cb..6c41cf6 100644
--- a/components/chat/header/index.tsx
+++ b/components/chat/header/index.tsx
@@ -4,6 +4,7 @@ import { ChatContext } from '@/app/chat-context';
 import ModeTab from '@/components/chat/mode-tab';
 import ModelSelector from '@/components/chat/header/model-selector';
 import DBSelector from './db-selector';
+import AgentSelector from './agent-selector';
 
 /**
  * chat header
@@ -14,21 +15,25 @@ interface Props {
 }
 
 function Header({ refreshHistory, modelChange }: Props) {
-  const { refreshDialogList } = useContext(ChatContext);
+  const { scene, refreshDialogList } = useContext(ChatContext);
 
   return (
     <div className="w-full py-2 px-4 md:px-4 flex flex-wrap items-center justify-center border-b border-gray-100 gap-1 md:gap-4">
-      {/* models selector */}
+      {/* Models Selector */}
       <ModelSelector onChange={modelChange} />
       {/* DB Selector */}
       <DBSelector />
-      {/* excel */}
-      <ChatExcel
-        onComplete={() => {
-          refreshDialogList?.();
-          refreshHistory?.();
-        }}
-      />
+      {/* Excel Upload */}
+      {scene === 'chat_excel' && (
+        <ChatExcel
+          onComplete={() => {
+            refreshDialogList?.();
+            refreshHistory?.();
+          }}
+        />
+      )}
+      {/* Agent Selector */}
+      {scene === 'chat_agent' && <AgentSelector />}
       <ModeTab />
     </div>
   );
diff --git a/components/chat/header/model-selector.tsx b/components/chat/header/model-selector.tsx
index 7bfaedf..cee3d67 100644
--- a/components/chat/header/model-selector.tsx
+++ b/components/chat/header/model-selector.tsx
@@ -39,9 +39,9 @@ function ModelSelector({ onChange }: Props) {
   }
   return (
     <Select
-      className="w-48"
       value={model}
       placeholder={t('choose_model')}
+      className="w-52"
       onChange={(val) => {
         onChange?.(val);
       }}
diff --git a/components/chat/mode-tab/index.tsx b/components/chat/mode-tab/index.tsx
index 32a6528..f91ecff 100644
--- a/components/chat/mode-tab/index.tsx
+++ b/components/chat/mode-tab/index.tsx
@@ -1,8 +1,3 @@
-/**
- * Preview and Editor tab component
- */
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import './index.css';
 import { useContext } from 'react';
 import { ChatContext } from '@/app/chat-context';
diff --git a/components/common/MyEmpty.tsx b/components/common/MyEmpty.tsx
new file mode 100644
index 0000000..acffd79
--- /dev/null
+++ b/components/common/MyEmpty.tsx
@@ -0,0 +1,31 @@
+import { Button, Empty } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  error?: boolean;
+  description?: string;
+  refresh?: () => void;
+}
+
+function MyEmpty({ error, description, refresh }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Empty
+      image="/empty.png"
+      imageStyle={{ width: 320, height: 320, margin: '0 auto', maxWidth: '100%', maxHeight: '100%' }}
+      className="flex items-center justify-center flex-col h-full w-full"
+      description={
+        error ? (
+          <Button type="primary" onClick={refresh}>
+            {t('try_again')}
+          </Button>
+        ) : (
+          description ?? t('no_data')
+        )
+      }
+    />
+  );
+}
+
+export default MyEmpty;
diff --git a/components/datastores/space-parameter.tsx b/components/datastores/space-parameter.tsx
deleted file mode 100644
index 3c43695..0000000
--- a/components/datastores/space-parameter.tsx
+++ /dev/null
@@ -1,370 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useRequest } from 'ahooks';
-import { sendSpacePostRequest } from '@/utils/request';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices';
-import ManageSearchIcon from '@mui/icons-material/ManageSearch';
-import TipsAndUpdatesIcon from '@mui/icons-material/TipsAndUpdates';
-import { Popover, Tabs, message } from 'antd';
-import { Button, Sheet, Modal, Box, Stack, Input, Textarea } from '@/lib/mui';
-import Image from 'next/image';
-import { useTranslation } from 'react-i18next';
-
-const SpaceParameter = ({ spaceName }: { spaceName: string }) => {
-  const [isParameterModalShow, setIsParameterModalShow] = useState<boolean>(false);
-  const [newSpaceArguments, setNewSpaceArguments] = useState<any>({});
-  const { t } = useTranslation();
-
-  const { data: spaceArguments } = useRequest(() => sendSpacePostRequest(`/knowledge/${spaceName}/arguments`), {
-    onSuccess(result: any) {
-      setNewSpaceArguments(result.data);
-    },
-  });
-  const items = [
-    {
-      key: 'Embedding',
-      label: (
-        <Box>
-          <ManageSearchIcon sx={{ marginRight: '5px' }} />
-          {t('Embedding')}
-        </Box>
-      ),
-      children: (
-        <Box>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            sx={{
-              marginTop: '20px',
-              marginBottom: '20px',
-            }}
-          >
-            <Box
-              sx={{
-                marginBottom: '20px',
-                flex: '1 1 0',
-                marginRight: '30px',
-              }}
-            >
-              <Box
-                sx={{
-                  marginBottom: '10px',
-                }}
-              >
-                {t('topk')}
-                <Popover content={t(`the_top_k_vectors`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                  <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-                </Popover>
-              </Box>
-              <Box>
-                <Input
-                  defaultValue={spaceArguments?.data?.embedding?.topk || ''}
-                  onChange={(e: any) => {
-                    newSpaceArguments.embedding.topk = e.target.value;
-                    setNewSpaceArguments({ ...newSpaceArguments });
-                  }}
-                ></Input>
-              </Box>
-            </Box>
-            <Box
-              sx={{
-                marginBottom: '20px',
-                flex: '1 1 0',
-              }}
-            >
-              <Box
-                sx={{
-                  marginBottom: '10px',
-                }}
-              >
-                {t('recall_score')}
-                <Popover content={t(`Set_a_threshold_score`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                  <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-                </Popover>
-              </Box>
-              <Box>
-                <Input
-                  defaultValue={'' + spaceArguments?.data?.embedding?.recall_score || ''}
-                  onChange={(e: any) => {
-                    newSpaceArguments.embedding.recall_score = e.target.value;
-                    setNewSpaceArguments({ ...newSpaceArguments });
-                  }}
-                  disabled
-                ></Input>
-              </Box>
-            </Box>
-          </Stack>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            sx={{
-              marginTop: '20px',
-              marginBottom: '20px',
-            }}
-          >
-            <Box
-              sx={{
-                marginBottom: '20px',
-                flex: '1 1 0',
-                marginRight: '30px',
-              }}
-            >
-              <Box
-                sx={{
-                  marginBottom: '10px',
-                }}
-              >
-                {t('recall_type')}
-                <Popover content={t(`Recall_Type`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                  <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-                </Popover>
-              </Box>
-              <Box>
-                <Input
-                  defaultValue={spaceArguments?.data?.embedding?.recall_type || ''}
-                  onChange={(e: any) => {
-                    newSpaceArguments.embedding.recall_type = e.target.value;
-                    setNewSpaceArguments({ ...newSpaceArguments });
-                  }}
-                  disabled
-                ></Input>
-              </Box>
-            </Box>
-            <Box
-              sx={{
-                marginBottom: '20px',
-                flex: '1 1 0',
-              }}
-            >
-              <Box
-                sx={{
-                  marginBottom: '10px',
-                }}
-              >
-                {t('model')}
-                <Popover content={t(`A_model_used`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                  <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-                </Popover>
-              </Box>
-              <Box>
-                <Input
-                  defaultValue={spaceArguments?.data?.embedding?.model || ''}
-                  onChange={(e: any) => {
-                    newSpaceArguments.embedding.model = e.target.value;
-                    setNewSpaceArguments({ ...newSpaceArguments });
-                  }}
-                  disabled
-                  startDecorator={<Image src="/huggingface_logo.svg" alt="huggingface logo" width={20} height={20}></Image>}
-                ></Input>
-              </Box>
-            </Box>
-          </Stack>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            sx={{
-              marginTop: '20px',
-              marginBottom: '20px',
-            }}
-          >
-            <Box
-              sx={{
-                marginBottom: '20px',
-                flex: '1 1 0',
-                marginRight: '30px',
-              }}
-            >
-              <Box
-                sx={{
-                  marginBottom: '10px',
-                }}
-              >
-                {t('chunk_size')}
-                <Popover content={t(`The_size_of_the_data_chunks`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                  <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-                </Popover>
-              </Box>
-              <Box>
-                <Input
-                  defaultValue={spaceArguments?.data?.embedding?.chunk_size || ''}
-                  onChange={(e: any) => {
-                    newSpaceArguments.embedding.chunk_size = e.target.value;
-                    setNewSpaceArguments({ ...newSpaceArguments });
-                  }}
-                ></Input>
-              </Box>
-            </Box>
-            <Box
-              sx={{
-                marginBottom: '20px',
-                flex: '1 1 0',
-              }}
-            >
-              <Box
-                sx={{
-                  marginBottom: '10px',
-                }}
-              >
-                {t('chunk_overlap')}
-                <Popover content={t(`The_amount_of_overlap`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                  <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-                </Popover>
-              </Box>
-              <Box>
-                <Input
-                  defaultValue={spaceArguments?.data?.embedding?.chunk_overlap || ''}
-                  onChange={(e: any) => {
-                    newSpaceArguments.embedding.chunk_overlap = e.target.value;
-                    setNewSpaceArguments({ ...newSpaceArguments });
-                  }}
-                ></Input>
-              </Box>
-            </Box>
-          </Stack>
-        </Box>
-      ),
-    },
-    {
-      key: 'Prompt',
-      label: (
-        <Box>
-          <TipsAndUpdatesIcon sx={{ marginRight: '5px' }} />
-          {t('Prompt')}
-        </Box>
-      ),
-      children: (
-        <Box
-          sx={{
-            maxHeight: '600px',
-            overflow: 'auto',
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
-          }}
-        >
-          <Box sx={{ marginBottom: '20px', marginTop: '20px' }}>
-            <Box
-              sx={{
-                marginBottom: '10px',
-              }}
-            >
-              {t('scene')}
-              <Popover content={t(`A_contextual_parameter`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-              </Popover>
-            </Box>
-            <Box>
-              <Textarea
-                defaultValue={spaceArguments?.data?.prompt?.scene || ''}
-                onChange={(e: any) => {
-                  newSpaceArguments.prompt.scene = e.target.value;
-                  setNewSpaceArguments({ ...newSpaceArguments });
-                }}
-              ></Textarea>
-            </Box>
-          </Box>
-          <Box sx={{ marginBottom: '20px' }}>
-            <Box
-              sx={{
-                marginBottom: '10px',
-              }}
-            >
-              {t('template')}
-              <Popover content={t(`structure_or_format`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-              </Popover>
-            </Box>
-            <Box>
-              <Textarea
-                defaultValue={spaceArguments?.data?.prompt?.template || ''}
-                onChange={(e: any) => {
-                  newSpaceArguments.prompt.template = e.target.value;
-                  setNewSpaceArguments({ ...newSpaceArguments });
-                }}
-              ></Textarea>
-            </Box>
-          </Box>
-          <Box sx={{ marginBottom: '20px' }}>
-            <Box
-              sx={{
-                marginBottom: '10px',
-              }}
-            >
-              {t('max_token')}
-              <Popover content={t(`The_maximum_number_of_tokens`)} trigger="hover" style={{ marginLeft: '20px' }}>
-                <ErrorOutlineIcon sx={{ marginLeft: '10px' }} />
-              </Popover>
-            </Box>
-            <Box>
-              <Input
-                defaultValue={spaceArguments?.data?.prompt?.max_token || ''}
-                onChange={(e: any) => {
-                  newSpaceArguments.prompt.max_token = e.target.value;
-                  setNewSpaceArguments({ ...newSpaceArguments });
-                }}
-              ></Input>
-            </Box>
-          </Box>
-        </Box>
-      ),
-    },
-  ];
-  return (
-    <>
-      <Button variant="outlined" onClick={() => setIsParameterModalShow(true)}>
-        <MiscellaneousServicesIcon sx={{ marginRight: '6px', fontSize: '18px' }} />
-        {t('Arguments')}
-      </Button>
-      <Modal
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          'z-index': 1000,
-        }}
-        open={isParameterModalShow}
-        onClose={() => setIsParameterModalShow(false)}
-      >
-        <Sheet
-          variant="outlined"
-          sx={{
-            width: 800,
-            borderRadius: 'md',
-            p: 3,
-            boxShadow: 'lg',
-          }}
-        >
-          <Tabs defaultActiveKey="Embedding" items={items} />
-          <Stack
-            direction="row"
-            justifyContent="flex-start"
-            sx={{
-              marginTop: '20px',
-              marginBottom: '20px',
-            }}
-          >
-            <Button
-              variant="outlined"
-              onClick={() => {
-                sendSpacePostRequest(`/knowledge/${spaceName}/argument/save`, {
-                  argument: JSON.stringify(newSpaceArguments),
-                }).then((res: any) => {
-                  if (res.success) {
-                    window.location.reload();
-                    message.success('success');
-                  } else {
-                    message.error(res.err_msg || 'failed');
-                  }
-                });
-              }}
-            >
-              {t('Submit')}
-            </Button>
-          </Stack>
-        </Sheet>
-      </Modal>
-    </>
-  );
-};
-
-export default SpaceParameter;
diff --git a/components/knowledge/add-modal.tsx b/components/knowledge/add-modal.tsx
new file mode 100644
index 0000000..43bd878
--- /dev/null
+++ b/components/knowledge/add-modal.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Steps, Modal } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { IKnowLedge } from '@/types/knowledge';
+import AddKnowledge from './knowledge-form';
+import AddDatasource from './datasource-form';
+
+interface IProps {
+  setDocuments?: (documents: any) => void;
+  isAddShow: boolean;
+  setIsAddShow: (isAddShow: boolean) => void;
+  setKnowledgeSpaceList?: (list: Array<any>) => void;
+  type?: 'knowledge' | 'document';
+  knowLedge?: IKnowLedge;
+  fetchDocuments?: () => void;
+  fetchKnowledge?: () => void;
+  syncDocuments?: (knowledgeName: string, id: number) => void;
+}
+
+export default function AddModal(props: IProps) {
+  const { setIsAddShow, isAddShow, type, knowLedge, fetchDocuments, fetchKnowledge, syncDocuments } = props;
+  const { t } = useTranslation();
+
+  const addKnowledgeSteps = [{ title: t('Knowledge_Space_Config') }, { title: t('Choose_a_Datasource_type') }, { title: t('Setup_the_Datasource') }];
+
+  const addDocumentSteps = [{ title: t('Choose_a_Datasource_type') }, { title: t('Setup_the_Datasource') }];
+
+  const [documentType, setDocumentType] = useState<string>('');
+  const [activeStep, setActiveStep] = useState<number>(0);
+
+  const handleAddKnowledge = async () => {
+    setActiveStep(1);
+    fetchKnowledge?.();
+  };
+  const handleChooseType = (item: any) => {
+    setDocumentType(item.type);
+
+    setActiveStep(type === 'knowledge' ? 2 : 1);
+  };
+
+  const handleBackBtn = () => {
+    setActiveStep(type === 'knowledge' ? 1 : 0);
+  };
+
+  const renderStepContent = () => {
+    const renderStep = type === 'document' ? activeStep + 1 : activeStep;
+    if (renderStep === 0) {
+      return <AddKnowledge handleAddKnowledge={handleAddKnowledge} />;
+    }
+    return (
+      <AddDatasource
+        fetchDocuments={fetchDocuments}
+        knowledgeName={knowLedge?.name}
+        step={renderStep}
+        documentType={documentType}
+        handleChooseType={handleChooseType}
+        handleBackBtn={handleBackBtn}
+        syncDocuments={syncDocuments}
+        setIsAddShow={props.setIsAddShow}
+      />
+    );
+  };
+
+  return (
+    <Modal
+      title={type === 'knowledge' ? 'Add Knowledge' : 'Add Datasource'}
+      centered
+      open={isAddShow}
+      destroyOnClose={true}
+      onCancel={() => {
+        setIsAddShow(false);
+      }}
+      width={1000}
+      afterClose={() => {
+        setActiveStep(0);
+      }}
+      footer={null}
+    >
+      <Steps current={activeStep} items={type === 'knowledge' ? addKnowledgeSteps : addDocumentSteps} />
+      {renderStepContent()}
+    </Modal>
+  );
+}
diff --git a/components/knowledge/arguments.tsx b/components/knowledge/arguments.tsx
new file mode 100644
index 0000000..c21eb73
--- /dev/null
+++ b/components/knowledge/arguments.tsx
@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Tabs, Button, Input, Form, Col, Row } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { AlertFilled, FileSearchOutlined } from '@ant-design/icons';
+import { apiInterceptors, getArguments, saveArguments } from '@/client/api';
+import { IArguments } from '@/types/knowledge';
+
+const { TextArea } = Input;
+
+interface IProps {
+  knowledge: any;
+  argumentsShow: boolean;
+  setArgumentsShow: (argumentsShow: boolean) => void;
+}
+
+export default function ArgumentsModal({ knowledge, argumentsShow, setArgumentsShow }: IProps) {
+  const { t } = useTranslation();
+  const [newSpaceArguments, setNewSpaceArguments] = useState<IArguments | null>();
+
+  const fetchArguments = async () => {
+    const [_, data] = await apiInterceptors(getArguments(knowledge.name));
+    setNewSpaceArguments(data);
+  };
+
+  useEffect(() => {
+    fetchArguments();
+  }, []);
+
+  const renderEmbeddingForm = () => {
+    return (
+      <Row gutter={24}>
+        <Col span={12} offset={0}>
+          <Form.Item<IArguments> tooltip={t(`the_top_k_vectors`)} rules={[{ required: true }]} label={t('topk')} name={['embedding', 'topk']}>
+            <Input className="mb-5 h-12" />
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <Form.Item<IArguments>
+            tooltip={t(`Set_a_threshold_score`)}
+            rules={[{ required: true }]}
+            label={t('recall_score')}
+            name={['embedding', 'recall_score']}
+          >
+            <Input className="mb-5  h-12" placeholder={t('Please_input_the_owner')} />
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <Form.Item<IArguments> tooltip={t(`Recall_Type`)} rules={[{ required: true }]} label={t('recall_type')} name={['embedding', 'recall_type']}>
+            <Input className="mb-5  h-12" />
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <Form.Item<IArguments> tooltip={t(`A_model_used`)} rules={[{ required: true }]} label={t('model')} name={['embedding', 'model']}>
+            <Input className="mb-5  h-12" />
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <Form.Item<IArguments>
+            tooltip={t(`The_size_of_the_data_chunks`)}
+            rules={[{ required: true }]}
+            label={t('chunk_size')}
+            name={['embedding', 'chunk_size']}
+          >
+            <Input className="mb-5  h-12" />
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <Form.Item<IArguments>
+            tooltip={t(`The_amount_of_overlap`)}
+            rules={[{ required: true }]}
+            label={t('chunk_overlap')}
+            name={['embedding', 'chunk_overlap']}
+          >
+            <Input className="mb-5  h-12" placeholder={t('Please_input_the_description')} />
+          </Form.Item>
+        </Col>
+      </Row>
+    );
+  };
+
+  const renderPromptForm = () => {
+    return (
+      <>
+        <Form.Item<IArguments> tooltip={t(`A_contextual_parameter`)} label={t('scene')} name={['prompt', 'scene']}>
+          <TextArea rows={4} className="mb-2" />
+        </Form.Item>
+        <Form.Item<IArguments> tooltip={t(`structure_or_format`)} label={t('template')} name={['prompt', 'template']}>
+          <TextArea rows={7} className="mb-2" />
+        </Form.Item>
+        <Form.Item<IArguments> tooltip={t(`The_maximum_number_of_tokens`)} label={t('max_token')} name={['prompt', 'max_token']}>
+          <Input className="mb-2" />
+        </Form.Item>
+      </>
+    );
+  };
+
+  const items = [
+    {
+      key: 'Embedding',
+      label: (
+        <div>
+          <FileSearchOutlined />
+          {t('Embedding')}
+        </div>
+      ),
+      children: renderEmbeddingForm(),
+    },
+    {
+      key: 'Prompt',
+      label: (
+        <div>
+          <AlertFilled />
+          {t('Embedding')}
+        </div>
+      ),
+      children: renderPromptForm(),
+    },
+  ];
+
+  const handleSubmit = async (fieldsValue: IArguments) => {
+    const [_, data, res] = await apiInterceptors(
+      saveArguments(knowledge.name, {
+        argument: JSON.stringify(fieldsValue),
+      }),
+    );
+    res?.success && setArgumentsShow(false);
+  };
+
+  return (
+    <Modal
+      width={850}
+      open={argumentsShow}
+      onCancel={() => {
+        setArgumentsShow(false);
+      }}
+      footer={null}
+    >
+      <Form
+        size="large"
+        className="mt-4"
+        layout="vertical"
+        name="basic"
+        initialValues={{ ...newSpaceArguments }}
+        autoComplete="off"
+        onFinish={handleSubmit}
+      >
+        <Tabs items={items}></Tabs>
+        <div className="mt-3 mb-3">
+          <Button htmlType="submit" type="primary" className="mr-6">
+            {t('Submit')}
+          </Button>
+          <Button
+            onClick={() => {
+              setArgumentsShow(false);
+            }}
+          >
+            {t('close')}
+          </Button>
+        </div>
+      </Form>
+    </Modal>
+  );
+}
diff --git a/components/knowledge/datasource-form.tsx b/components/knowledge/datasource-form.tsx
new file mode 100644
index 0000000..214a591
--- /dev/null
+++ b/components/knowledge/datasource-form.tsx
@@ -0,0 +1,215 @@
+import { Button, Card, Form, Input, Switch, Upload, message } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { renderDocTypeIcon } from './document';
+import { InboxOutlined } from '@ant-design/icons';
+import { apiInterceptors, addDocument, uploadDocument } from '@/client/api';
+
+const StepMap = {
+  ChooseType: 1,
+  AddDataSourceForm: 2,
+};
+
+type IProps = {
+  handleChooseType: (item: any) => void;
+  documentType: string;
+  step: number;
+  handleBackBtn: () => void;
+  knowledgeName?: string;
+  syncDocuments?: (name: string, id: number) => void;
+  fetchDocuments?: () => void;
+  setIsAddShow?: (isAddShow: boolean) => void;
+};
+
+type FieldType = {
+  synchChecked: boolean;
+  documentName: string;
+  textSource: string;
+  originFileObj: any;
+  text: string;
+  webPageUrl: string;
+};
+
+const { Dragger } = Upload;
+
+export default function AddDatasource(props: IProps) {
+  const { handleChooseType, documentType, step, handleBackBtn, knowledgeName, syncDocuments, fetchDocuments, setIsAddShow } = props;
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const { TextArea } = Input;
+
+  const handleFinish = async (data: FieldType) => {
+    const { synchChecked, documentName, textSource, originFileObj, text, webPageUrl } = data;
+    let res;
+    switch (documentType) {
+      case 'webPage':
+        res = await apiInterceptors(
+          addDocument(knowledgeName as string, {
+            doc_name: documentName,
+            content: webPageUrl,
+            doc_type: 'URL',
+          }),
+        );
+        break;
+      case 'file':
+        const formData = new FormData();
+        formData.append('doc_name', documentName || originFileObj.file.name);
+        formData.append('doc_file', originFileObj.file);
+        formData.append('doc_type', 'DOCUMENT');
+
+        res = await apiInterceptors(uploadDocument(knowledgeName as string, formData));
+        break;
+      default:
+        res = await apiInterceptors(
+          addDocument(knowledgeName as string, {
+            doc_name: documentName,
+            source: textSource,
+            content: text,
+            doc_type: 'TEXT',
+          }),
+        );
+        break;
+    }
+    synchChecked && syncDocuments?.(knowledgeName as string, res?.[1] as number);
+    if (!res[2]?.success) return;
+    setIsAddShow?.(false);
+    fetchDocuments?.();
+  };
+
+  const beforeUpload = () => {
+    const curFile = form.getFieldsValue().originFileObj;
+    if (!curFile) {
+      return false;
+    }
+    message.warning(t('Limit_Upload_File_Count_Tips'));
+    return Upload.LIST_IGNORE;
+  };
+
+  const documentTypeList = [
+    {
+      type: 'text',
+      title: t('Text'),
+      subTitle: t('Fill your raw text'),
+      iconType: 'TEXT',
+    },
+    {
+      type: 'webPage',
+      title: t('URL'),
+      subTitle: t('Fetch_the_content_of_a_URL'),
+      iconType: 'WEBPAGE',
+    },
+    {
+      type: 'file',
+      title: t('Document'),
+      subTitle: t('Upload_a_document'),
+      iconType: 'DOCUMENT',
+    },
+  ];
+
+  const renderChooseType = () => {
+    return (
+      <>
+        {documentTypeList.map((item, index) => (
+          <Card
+            key={index}
+            className="mt-4 mb-4 cursor-pointer"
+            onClick={() => {
+              handleChooseType(item);
+            }}
+          >
+            <div className="font-semibold">
+              {renderDocTypeIcon(item.iconType)} {item.title}
+            </div>
+            <div>{item.subTitle}</div>
+          </Card>
+        ))}
+      </>
+    );
+  };
+
+  const renderAddText = () => {
+    return (
+      <>
+        <Form.Item<FieldType>
+          label={`${t('Text_Source')}:`}
+          name="textSource"
+          rules={[{ required: true, message: t('Please_input_the_text_source') }]}
+        >
+          <Input className="mb-5  h-12" placeholder={t('Please_input_the_text_source')} />
+        </Form.Item>
+
+        <Form.Item<FieldType> label={`${t('Text')}:`} name="text" rules={[{ required: true, message: t('Please_input_the_description') }]}>
+          <TextArea rows={4} maxLength={6} />
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderAddWebPage = () => {
+    return (
+      <>
+        <Form.Item<FieldType> label={`${t('Web_Page_URL')}:`} name="webPageUrl" rules={[{ required: true, message: t('Please_input_the_owner') }]}>
+          <Input className="mb-5  h-12" placeholder={t('Please_input_the_Web_Page_URL')} />
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderAddDocument = () => {
+    return (
+      <>
+        <Form.Item<FieldType> name="originFileObj" rules={[{ required: true, message: t('Please_input_the_owner') }]}>
+          <Dragger beforeUpload={beforeUpload} multiple={false} accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.txt,.md">
+            <p className="ant-upload-drag-icon">
+              <InboxOutlined />
+            </p>
+            <p style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}>{t('Select_or_Drop_file')}</p>
+            <p className="ant-upload-hint" style={{ color: 'rgb(22, 108, 255)' }}>
+              PDF, PowerPoint, Excel, Word, Text, Markdown,
+            </p>
+          </Dragger>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderFormContainer = () => {
+    switch (documentType) {
+      case 'webPage':
+        return renderAddWebPage();
+      case 'file':
+        return renderAddDocument();
+      default:
+        return renderAddText();
+    }
+  };
+
+  return step === StepMap['ChooseType'] ? (
+    renderChooseType()
+  ) : (
+    <Form
+      form={form}
+      size="large"
+      className="mt-4"
+      layout="vertical"
+      name="basic"
+      initialValues={{ remember: true }}
+      autoComplete="off"
+      onFinish={handleFinish}
+    >
+      <Form.Item<FieldType> label={`${t('Name')}:`} name="documentName" rules={[{ required: true, message: t('Please_input_the_name') }]}>
+        <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
+      </Form.Item>
+      {renderFormContainer()}
+      <Form.Item<FieldType> label={`${t('Synch')}:`} name="synchChecked" initialValue={true}>
+        <Switch className="bg-slate-400" defaultChecked />
+      </Form.Item>
+      <Form.Item>
+        <Button onClick={handleBackBtn} className="mr-4">{`${t('Back')}`}</Button>
+        <Button type="primary" htmlType="submit">
+          {t('Finish')}
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
diff --git a/components/knowledge/document.tsx b/components/knowledge/document.tsx
new file mode 100644
index 0000000..b2de7d3
--- /dev/null
+++ b/components/knowledge/document.tsx
@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Space, Divider, Empty, Spin, Tag, Tooltip, Modal } from 'antd';
+import {
+  DeleteFilled,
+  InteractionFilled,
+  PlusOutlined,
+  ToolFilled,
+  FileTextFilled,
+  FileWordTwoTone,
+  IeCircleFilled,
+  EyeFilled,
+  ExclamationCircleFilled,
+} from '@ant-design/icons';
+import { apiInterceptors, delDocument, getDocumentList, syncDocument } from '@/client/api';
+import { IKnowLedge } from '@/types/knowledge';
+import moment from 'moment';
+import ArgumentsModal from './add-modal';
+import SpaceParameterModal from './arguments';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/router';
+
+interface IProps {
+  knowledge: IKnowLedge;
+  setDocumentCount: (count: string) => void;
+}
+
+const { confirm } = Modal;
+
+export const renderDocTypeIcon = (type: string) => {
+  if (type === 'TEXT') return <FileTextFilled className="text-[#2AA3FF] mr-2 !text-lg" />;
+  if (type === 'DOCUMENT') return <FileWordTwoTone className="text-[#2AA3FF] mr-2 !text-lg" />;
+  return <IeCircleFilled className="text-[#2AA3FF] mr-2 !text-lg" />;
+};
+
+export default function CollapseContainer(props: IProps) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const page_size = 20;
+
+  const { knowledge, setDocumentCount } = props;
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [documents, setDocuments] = useState<any>([]);
+  const [isAddDocumentShow, setIsAddDocumentShow] = useState<boolean>(false);
+  const [argumentsShow, setArgumentsShow] = useState<boolean>(false);
+
+  const showDeleteConfirm = (row: any) => {
+    confirm({
+      title: t('Tips'),
+      icon: <ExclamationCircleFilled />,
+      content: `${t('Del_Document_Tips')}?`,
+      okText: 'Yes',
+      okType: 'danger',
+      cancelText: 'No',
+      async onOk() {
+        await handleDelete(row);
+      },
+    });
+  };
+
+  async function fetchDocuments() {
+    setIsLoading(true);
+    const [_, data] = await apiInterceptors(
+      getDocumentList(knowledge?.name, {
+        page: 1,
+        page_size,
+      }),
+    );
+
+    setDocuments(data?.data);
+    setDocumentCount(String(data?.total));
+    setIsLoading(false);
+  }
+
+  const handleSync = async (knowledgeName: string, id: number) => {
+    await apiInterceptors(syncDocument(knowledgeName, { doc_ids: [id] }));
+  };
+
+  const handleDelete = async (row: any) => {
+    await apiInterceptors(delDocument(knowledge?.name, { doc_name: row.doc_name }));
+    fetchDocuments();
+  };
+
+  const handleAddDocument = () => {
+    setIsAddDocumentShow(true);
+  };
+
+  const handleArguments = () => {
+    setArgumentsShow(true);
+  };
+
+  const renderResultTag = (status: string, result: string) => {
+    let color;
+    switch (status) {
+      case 'TODO':
+        color = 'gold';
+        break;
+      case 'RUNNING':
+        color = '#2db7f5';
+        break;
+      case 'FINISHED':
+        color = '#87d068';
+        break;
+      case 'FAILED':
+        color = 'f50';
+        break;
+      default:
+        color = 'f50';
+        break;
+    }
+    return (
+      <Tooltip title={result}>
+        <Tag color={color}>{status}</Tag>
+      </Tooltip>
+    );
+  };
+
+  useEffect(() => {
+    fetchDocuments();
+  }, [knowledge]);
+
+  const renderCardList = () => {
+    if (documents.length > 0) {
+      return (
+        <div className="max-h-96 mt-3 grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-5 overflow-auto">
+          {documents.map((item: any) => {
+            return (
+              <Card
+                key={item.id}
+                className=" dark:bg-[#484848] relative  shrink-0 grow-0 cursor-pointer rounded-[10px] border border-gray-200 border-solid w-full"
+                title={
+                  <Tooltip title={item.doc_name}>
+                    <div className="truncate ">
+                      {renderDocTypeIcon(item.doc_type)}
+                      <span>{item.doc_name}</span>
+                    </div>
+                  </Tooltip>
+                }
+                extra={
+                  <div className="mx-3">
+                    <Tooltip title={'detail'}>
+                      <EyeFilled
+                        className="mr-2 !text-lg"
+                        style={{ color: '#1b7eff', fontSize: '20px' }}
+                        onClick={() => {
+                          router.push(`/knowledge/${knowledge.name}/${item.id}`);
+                        }}
+                      />
+                    </Tooltip>
+                    <Tooltip title={'Sync'}>
+                      <InteractionFilled
+                        className="mr-2 !text-lg"
+                        style={{ color: '#1b7eff', fontSize: '20px' }}
+                        onClick={() => {
+                          handleSync(knowledge.name, item.id);
+                        }}
+                      />
+                    </Tooltip>
+                    <Tooltip title={'Delete'}>
+                      <DeleteFilled
+                        className="text-[#ff1b2e] !text-lg"
+                        onClick={() => {
+                          showDeleteConfirm(item);
+                        }}
+                      />
+                    </Tooltip>
+                  </div>
+                }
+              >
+                <p className="mt-2 font-semibold ">{t('Size')}:</p>
+                <p>{item.chunk_size} chunks</p>
+                <p className="mt-2 font-semibold ">{t('Last_Synch')}:</p>
+                <p>{moment(item.last_sync).format('YYYY-MM-DD HH:MM:SS')}</p>
+                <p className="mt-2 mb-2">{renderResultTag(item.status, item.result)}</p>
+              </Card>
+            );
+          })}
+        </div>
+      );
+    }
+    return (
+      <Empty image={Empty.PRESENTED_IMAGE_DEFAULT}>
+        <Button type="primary" className="flex items-center mx-auto" icon={<PlusOutlined />} onClick={handleAddDocument}>
+          Create Now
+        </Button>
+      </Empty>
+    );
+  };
+
+  return (
+    <div className="collapse-container pt-2 px-4">
+      <Space>
+        <Button size="middle" type="primary" className="flex items-center" icon={<PlusOutlined />} onClick={handleAddDocument}>
+          {t('Add_Datasource')}
+        </Button>
+        <Button size="middle" className="flex items-center mx-2" icon={<ToolFilled />} onClick={handleArguments}>
+          Arguments
+        </Button>
+      </Space>
+      <Divider />
+      <Spin spinning={isLoading}>{renderCardList()}</Spin>
+      <ArgumentsModal
+        syncDocuments={handleSync}
+        fetchDocuments={fetchDocuments}
+        setIsAddShow={setIsAddDocumentShow}
+        isAddShow={isAddDocumentShow}
+        type="document"
+        setDocuments={setDocuments}
+        knowLedge={knowledge}
+      />
+      <SpaceParameterModal knowledge={knowledge} argumentsShow={argumentsShow} setArgumentsShow={setArgumentsShow} />
+    </div>
+  );
+}
diff --git a/components/knowledge/knowledge-card.tsx b/components/knowledge/knowledge-card.tsx
new file mode 100644
index 0000000..b2c00d0
--- /dev/null
+++ b/components/knowledge/knowledge-card.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Popover, ConfigProvider, Button, Modal, Badge } from 'antd';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import { DeleteTwoTone, MessageTwoTone, ExclamationCircleFilled } from '@ant-design/icons';
+import { IKnowLedge } from '@/types/knowledge';
+
+import CollapseContainer from './document';
+import moment from 'moment';
+import { apiInterceptors, delKnowledge, newDialogue } from '@/client/api';
+
+interface IProps {
+  isAddShow: boolean;
+  setIsAddShow: (isAddShow: boolean) => void;
+  className?: string;
+  index?: number;
+  spaceInfo: IKnowLedge;
+  t?: any;
+  knowledgeSpaceToDelete: { name: string };
+  fetchKnowledge: () => void;
+}
+
+const { confirm } = Modal;
+
+export default function KnowledgeCard(props: IProps) {
+  const router = useRouter();
+  const { spaceInfo, t, knowledgeSpaceToDelete, fetchKnowledge } = props;
+
+  const [documentCount, setDocumentCount] = useState(spaceInfo.docs);
+
+  const showDeleteConfirm = () => {
+    confirm({
+      title: t('Tips'),
+      icon: <ExclamationCircleFilled />,
+      content: `${t('Del_Knowledge_Tips')}?`,
+      okText: 'Yes',
+      okType: 'danger',
+      cancelText: 'No',
+      async onOk() {
+        await apiInterceptors(delKnowledge({ name: knowledgeSpaceToDelete?.name }));
+        fetchKnowledge();
+      },
+    });
+  };
+
+  const handleChat = async (e: any) => {
+    e.stopPropagation();
+
+    const [_, data] = await apiInterceptors(
+      newDialogue({
+        chat_mode: 'chat_knowledge',
+      }),
+    );
+
+    if (data?.conv_uid) {
+      router.push(`/chat?scene=chat_knowledge&id=${data?.conv_uid}&db_param=${spaceInfo.name}`);
+    }
+  };
+
+  const renderKnowledgeIcon = (type: string) => {
+    const iconMap: Record<string, string> = {
+      Chroma: '/models/chroma-logo.png',
+    };
+    return (
+      <Image
+        className="rounded-full w-8 h-8 border border-gray-200 object-contain bg-white inline-block"
+        width={36}
+        height={136}
+        src={iconMap[type] || '/models/knowledge-default.jpg'}
+        alt="llm"
+      />
+    );
+  };
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Popover: {
+            zIndexPopup: 90,
+          },
+        },
+      }}
+    >
+      <Popover
+        className="dark:hover:border-white transition-all hover:shadow-md bg-[#FFFFFF] dark:bg-[#484848] relative  shrink-0 grow-0 cursor-pointer rounded-[10px] border border-gray-200 border-solid w-full min-[width]:80"
+        placement="bottom"
+        trigger="click"
+        content={<CollapseContainer setDocumentCount={setDocumentCount} knowledge={spaceInfo} />}
+      >
+        <Badge count={documentCount || 0}>
+          <div className="flex justify-between mx-6 mt-3">
+            <div className="text-lg font-bold text-black truncate">
+              {renderKnowledgeIcon(spaceInfo.vector_type)}
+              <span className="dark:text-white ml-2">{spaceInfo?.name}</span>
+            </div>
+            <DeleteTwoTone
+              onClick={(e) => {
+                e.stopPropagation();
+                e.nativeEvent.stopImmediatePropagation();
+                showDeleteConfirm();
+              }}
+              style={{ fontSize: '20px' }}
+              twoToneColor="#CD2029"
+              className="text-3xl"
+            />
+          </div>
+          <div className="text-sm mt-2  p-6 pt-2 h-40">
+            <p className="font-semibold">{t('Owner')}:</p>
+            <p className=" truncate">{spaceInfo?.owner}</p>
+            <p className="font-semibold mt-2">{t('Description')}:</p>
+            <p className=" line-clamp-2">{spaceInfo?.desc}</p>
+            <p className="font-semibold mt-2">Last modify:</p>
+            <p className=" truncate">{moment(spaceInfo.gmt_modified).format('YYYY-MM-DD HH:MM:SS')}</p>
+          </div>
+          <div className="flex justify-center">
+            <Button size="middle" onClick={handleChat} className="mr-4 dark:text-white mb-2" shape="round" icon={<MessageTwoTone />}>
+              {t('Chat')}
+            </Button>
+          </div>
+        </Badge>
+      </Popover>
+    </ConfigProvider>
+  );
+}
diff --git a/components/knowledge/knowledge-form.tsx b/components/knowledge/knowledge-form.tsx
new file mode 100644
index 0000000..0bd0e14
--- /dev/null
+++ b/components/knowledge/knowledge-form.tsx
@@ -0,0 +1,64 @@
+import { addKnowledge, apiInterceptors } from '@/client/api';
+import { Button, Form, Input } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type FieldType = {
+  knowledgeName: string;
+  owner: string;
+  description: string;
+};
+
+type IProps = {
+  handleAddKnowledge: () => void;
+};
+
+export default function AddKnowledge(props: IProps) {
+  const { t } = useTranslation();
+  const { handleAddKnowledge } = props;
+
+  const handleFinish = async (fieldsValue: FieldType) => {
+    const { knowledgeName, owner, description } = fieldsValue;
+    const [_, data, res] = await apiInterceptors(
+      addKnowledge({
+        name: knowledgeName,
+        vector_type: 'Chroma',
+        owner,
+        desc: description,
+      }),
+    );
+    res?.success && handleAddKnowledge();
+  };
+  return (
+    <Form size="large" className="mt-4" layout="vertical" name="basic" initialValues={{ remember: true }} autoComplete="off" onFinish={handleFinish}>
+      <Form.Item<FieldType>
+        label={t('Knowledge_Space_Name')}
+        name="knowledgeName"
+        rules={[
+          { required: true, message: t('Please_input_the_name') },
+          () => ({
+            validator(_, value) {
+              if (/[^\u4e00-\u9fa50-9a-zA-Z_-]/.test(value)) {
+                return Promise.reject(new Error(t('the_name_can_only_contain')));
+              }
+              return Promise.resolve();
+            },
+          }),
+        ]}
+      >
+        <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
+      </Form.Item>
+      <Form.Item<FieldType> label={t('Owner')} name="owner" rules={[{ required: true, message: t('Please_input_the_owner') }]}>
+        <Input className="mb-5  h-12" placeholder={t('Please_input_the_owner')} />
+      </Form.Item>
+      <Form.Item<FieldType> label={t('Description')} name="description" rules={[{ required: true, message: t('Please_input_the_description') }]}>
+        <Input className="mb-5  h-12" placeholder={t('Please_input_the_description')} />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          {t('Next')}
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
diff --git a/components/layout/left-side.tsx b/components/layout/left-side.tsx
index 25e43dc..ef3905d 100644
--- a/components/layout/left-side.tsx
+++ b/components/layout/left-side.tsx
@@ -31,7 +31,7 @@ import ChatIcon from '@mui/icons-material/Chat';
 import ModelTrainingIcon from '@mui/icons-material/ModelTraining';
 import { useTranslation } from 'react-i18next';
 import { ChatContext } from '@/app/chat-context';
-import { DialogueListResponse } from '@/types/chart';
+import { DialogueListResponse } from '@/types/chat';
 import { apiInterceptors, delDialogue } from '@/client/api';
 
 const LeftSide = () => {
@@ -59,10 +59,10 @@ const LeftSide = () => {
       },
       {
         label: t('Knowledge_Space'),
-        route: '/datastores',
+        route: '/knowledge',
         icon: <Article fontSize="small" />,
         tooltip: t('Knowledge_Space'),
-        active: pathname === '/datastores',
+        active: pathname === '/knowledge',
       },
       {
         label: t('model_manage'),
@@ -86,7 +86,7 @@ const LeftSide = () => {
     const language = i18n.language === 'en' ? 'zh' : 'en';
     i18n.changeLanguage(language);
     window.localStorage.setItem('db_gpt_lng', language);
-  }
+  };
 
   useEffect(() => {
     if (mode === 'light') {
@@ -105,7 +105,7 @@ const LeftSide = () => {
   function expandMenu() {
     return (
       <>
-      <Box className="p-2 gap-2 flex flex-row justify-between items-center">
+        <Box className="p-2 gap-2 flex flex-row justify-between items-center">
           <div className="flex items-center gap-3">
             <Link href={'/'}>
               <Image src={logoPath} alt="DB-GPT" width={633} height={157} className="w-full max-w-full" />
@@ -233,10 +233,7 @@ const LeftSide = () => {
                 </ListItemButton>
               </ListItem>
               <ListItem>
-                <ListItemButton
-                  className="h-10"
-                  onClick={handleChangeLanguage}
-                >
+                <ListItemButton className="h-10" onClick={handleChangeLanguage}>
                   <Tooltip title={t('language')}>
                     <ListItemDecorator className="text-2xl">
                       <LanguageIcon fontSize="small" />
@@ -252,7 +249,7 @@ const LeftSide = () => {
                     setIsMenuExpand(false);
                   }}
                 >
-                  <Tooltip title={t("Close_Sidebar")}>
+                  <Tooltip title={t('Close_Sidebar')}>
                     <ListItemDecorator className="text-2xl">
                       <ExpandIcon className="transform rotate-90" fontSize="small" />
                     </ListItemDecorator>
@@ -288,7 +285,7 @@ const LeftSide = () => {
           ))}
           <ListItem>
             <ListItemButton onClick={handleChangeTheme}>
-              <Tooltip title={t("Theme")}>
+              <Tooltip title={t('Theme')}>
                 <ListItemDecorator className="text-2xl">
                   {mode === 'dark' ? <DarkModeIcon fontSize="small" /> : <WbSunnyIcon fontSize="small" />}
                 </ListItemDecorator>
@@ -297,7 +294,7 @@ const LeftSide = () => {
           </ListItem>
           <ListItem>
             <ListItemButton onClick={handleChangeLanguage}>
-              <Tooltip title={t("language")}>
+              <Tooltip title={t('language')}>
                 <ListItemDecorator className="text-2xl">
                   <LanguageIcon fontSize="small" />
                 </ListItemDecorator>
@@ -310,7 +307,7 @@ const LeftSide = () => {
                 setIsMenuExpand(true);
               }}
             >
-              <Tooltip title={t("Open_Sidebar")}>
+              <Tooltip title={t('Open_Sidebar')}>
                 <ListItemDecorator className="text-2xl">
                   <ExpandIcon className="transform rotate-90" fontSize="small" />
                 </ListItemDecorator>
diff --git a/components/layout/side-bar.tsx b/components/layout/side-bar.tsx
index eef08f2..7245ac3 100644
--- a/components/layout/side-bar.tsx
+++ b/components/layout/side-bar.tsx
@@ -4,7 +4,7 @@ import { STORAGE_LANG_KEY, STORAGE_THEME_KEY } from '@/constant';
 import DarkSvg from '@/icons/dark-svg';
 import SunnySvg from '@/icons/sunny-svg';
 import { useColorScheme } from '@/lib/mui';
-import { IChatDialogueSchema } from '@/types/chart';
+import { IChatDialogueSchema } from '@/types/chat';
 import Icon, {
   ConsoleSqlOutlined,
   PartitionOutlined,
@@ -14,9 +14,10 @@ import Icon, {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   PlusOutlined,
-  CopyOutlined,
+  ShareAltOutlined,
   MenuOutlined,
   SettingOutlined,
+  BuildOutlined,
 } from '@ant-design/icons';
 import { Modal, message, Tooltip, Dropdown } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
@@ -44,7 +45,7 @@ type RouteItem = {
 };
 
 function menuItemStyle(active?: boolean) {
-  return `flex items-center px-2 h-10 hover:bg-slate-100 dark:hover:bg-[#353539] text-base w-full my-2 rounded transition-colors whitespace-nowrap ${
+  return `flex items-center px-2 h-8 hover:bg-slate-100 dark:hover:bg-[#353539] text-base w-full my-2 rounded transition-colors whitespace-nowrap ${
     active ? 'bg-slate-100 dark:bg-[#353539]' : ''
   }`;
 }
@@ -81,7 +82,7 @@ function SideBar() {
         key: 'knowledge',
         name: t('Knowledge_Space'),
         icon: <PartitionOutlined />,
-        path: '/datastores',
+        path: '/knowledge',
       },
       {
         key: 'models',
@@ -89,6 +90,12 @@ function SideBar() {
         path: '/models',
         icon: <Icon component={ModelSvg} />,
       },
+      {
+        key: 'agent',
+        name: t('Plugins'),
+        path: '/agent',
+        icon: <BuildOutlined />,
+      },
     ];
     return items;
   }, [i18n.language]);
@@ -223,7 +230,7 @@ function SideBar() {
 
             return (
               <Tooltip key={item.conv_uid} title={item.user_name || item.user_input} placement="right">
-                <Link href={`/chat/${item.chat_mode}/${item.conv_uid}`} className={smallMenuItemStyle(active)}>
+                <Link href={`/chat?scene=${item.chat_mode}&id=${item.conv_uid}`} className={smallMenuItemStyle(active)}>
                   <MessageOutlined />
                 </Link>
               </Tooltip>
@@ -274,7 +281,7 @@ function SideBar() {
           const active = item.conv_uid === chatId && item.chat_mode === scene;
 
           return (
-            <Link key={item.conv_uid} href={`/chat/${item.chat_mode}/${item.conv_uid}`} className={`group/item ${menuItemStyle(active)}`}>
+            <Link key={item.conv_uid} href={`/chat?scene=${item.chat_mode}&id=${item.conv_uid}`} className={`group/item ${menuItemStyle(active)}`}>
               <MessageOutlined className="text-base" />
               <div className="flex-1 line-clamp-1 mx-2 text-sm">{item.user_name || item.user_input}</div>
               <div
@@ -284,7 +291,7 @@ function SideBar() {
                   copyLink(item);
                 }}
               >
-                <CopyOutlined />
+                <ShareAltOutlined />
               </div>
               <div
                 className="group-hover/item:opacity-100 cursor-pointer opacity-0"
@@ -300,7 +307,7 @@ function SideBar() {
         })}
       </div>
       {/* Settings */}
-      <div className="pt-2 pb-6 border-t">
+      <div className="pt-2 pb-4 border-t">
         <div className="px-2">
           {routes.map((item) => (
             <Link key={item.key} href={item.path} className={`${menuItemStyle(pathname === item.path)}`}>
@@ -311,7 +318,7 @@ function SideBar() {
             </Link>
           ))}
         </div>
-        <div className="flex items-center justify-around mt-4 pt-6 border-t border-dashed">
+        <div className="flex items-center justify-around py-4 border-t border-dashed">
           {settings.map((item) => (
             <Tooltip key={item.key} title={item.name}>
               <div className="flex-1 flex items-center justify-center cursor-pointer text-xl" onClick={item.onClick}>
diff --git a/global.d.ts b/global.d.ts
index 81a2432..e9d7ce5 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,5 +1,5 @@
 declare namespace JSX {
   interface IntrinsicElements {
-    'dbgpt-call': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    'custom-view': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
   }
 }
diff --git a/next.config.js b/next.config.js
index 6702995..f3c4e84 100644
--- a/next.config.js
+++ b/next.config.js
@@ -11,7 +11,7 @@ const nextConfig = {
     API_BASE_URL: process.env.API_BASE_URL,
   },
   trailingSlash: true,
-  images: { unoptimized: true }
+  images: { unoptimized: true },
 };
 
 module.exports = nextConfig;
diff --git a/pages/agent/index.tsx b/pages/agent/index.tsx
new file mode 100644
index 0000000..eb16426
--- /dev/null
+++ b/pages/agent/index.tsx
@@ -0,0 +1,34 @@
+import MarketPlugins from '@/components/agent/market-plugins';
+import MyPlugins from '@/components/agent/my-plugins';
+import { Tabs } from 'antd';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Agent() {
+  const { t } = useTranslation();
+  const [activeKey, setActiveKey] = useState('market');
+
+  const items: Required<Parameters<typeof Tabs>[0]['items']> = useMemo(
+    () => [
+      {
+        key: 'market',
+        label: t('Market_Plugins'),
+        children: <MarketPlugins />,
+      },
+      {
+        key: 'my',
+        label: t('My_Plugins'),
+        children: activeKey === 'market' ? null : <MyPlugins />,
+      },
+    ],
+    [t, activeKey],
+  );
+
+  return (
+    <div className="h-screen p-4 md:p-6 overflow-y-auto">
+      <Tabs activeKey={activeKey} items={items} onChange={setActiveKey} />
+    </div>
+  );
+}
+
+export default Agent;
diff --git a/pages/chat/index.tsx b/pages/chat/index.tsx
new file mode 100644
index 0000000..6d78912
--- /dev/null
+++ b/pages/chat/index.tsx
@@ -0,0 +1,27 @@
+import React, { useContext, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { ChatContext } from '@/app/chat-context';
+import dynamic from 'next/dynamic';
+
+const DbEditor = dynamic(() => import('@/components/chat/db-editor'), { ssr: false });
+const ChatContainer = dynamic(() => import('@/components/chat/chat-container'), { ssr: false });
+
+function Chat() {
+  const {
+    query: { id, scene },
+  } = useRouter();
+  const { isContract, setIsContract, setIsMenuExpand } = useContext(ChatContext);
+
+  useEffect(() => {
+    // 仅初始化执行，防止dashboard页面无法切换状态
+    setIsMenuExpand(scene !== 'chat_dashboard');
+    // 路由变了要取消Editor模式，再进来是默认的Preview模式
+    if (id && scene) {
+      setIsContract(false);
+    }
+  }, [id, scene]);
+
+  return <>{isContract ? <DbEditor /> : <ChatContainer />}</>;
+}
+
+export default Chat;
diff --git a/pages/database/index.tsx b/pages/database/index.tsx
index 339f660..b10d18d 100644
--- a/pages/database/index.tsx
+++ b/pages/database/index.tsx
@@ -117,7 +117,7 @@ function Database() {
   return (
     <div className="relative p-6 px-12 bg-[#FAFAFA] dark:bg-transparent min-h-full overflow-y-auto">
       <MuiLoading visible={loading} />
-      <div className="px-1 mb-4">
+      <div className="mb-4">
         <Button
           type="primary"
           className="flex items-center"
diff --git a/pages/datastores/documents/chunklist/index.tsx b/pages/datastores/documents/chunklist/index.tsx
deleted file mode 100644
index 7c99794..0000000
--- a/pages/datastores/documents/chunklist/index.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-'use client';
-
-import { useSearchParams, useRouter } from 'next/navigation';
-import React, { useState, useEffect } from 'react';
-import { useColorScheme, Table, Stack, Typography, Breadcrumbs, Link, Box } from '@/lib/mui';
-import { Popover, Pagination } from 'antd';
-import { sendSpacePostRequest } from '@/utils/request';
-import { useTranslation } from 'react-i18next';
-const page_size = 20;
-
-const ChunkList = () => {
-  const router = useRouter();
-  const { mode } = useColorScheme();
-  const searchParams = useSearchParams();
-  const spaceName = searchParams && searchParams.get('spacename');
-  const documentId = searchParams && searchParams.get('documentid');
-  const [total, setTotal] = useState<number>(0);
-  const [current, setCurrent] = useState<number>(0);
-  const [chunkList, setChunkList] = useState<any>([]);
-  const { t } = useTranslation();
-  useEffect(() => {
-    async function fetchChunks() {
-      const data = await sendSpacePostRequest(`/knowledge/${spaceName}/chunk/list`, {
-        document_id: documentId,
-        page: 1,
-        page_size,
-      });
-      if (data.success) {
-        setChunkList(data.data.data);
-        setTotal(data.data.total);
-        setCurrent(data.data.page);
-      }
-    }
-    fetchChunks();
-  }, []);
-  return (
-    <Box className="p-4 h-[90%]">
-      <Stack className="mb-5" direction="row" justifyContent="flex-start" alignItems="center">
-        <Breadcrumbs aria-label="breadcrumbs">
-          <Link
-            onClick={() => {
-              router.push('/datastores');
-            }}
-            key="Knowledge Space"
-            underline="hover"
-            color="neutral"
-            fontSize="inherit"
-          >
-            {t('Knowledge_Space')}
-          </Link>
-          <Link
-            onClick={() => {
-              router.push(`/datastores/documents?name=${spaceName}`);
-            }}
-            key="Knowledge Space"
-            underline="hover"
-            color="neutral"
-            fontSize="inherit"
-          >
-            {t('Documents')}
-          </Link>
-          <Typography fontSize="inherit">{t('Chunks')}</Typography>
-        </Breadcrumbs>
-      </Stack>
-      <Box
-        className="p-4 overflow-auto h-[90%]"
-        sx={{
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-        }}
-      >
-        {chunkList.length ? (
-          <>
-            <Table
-              color="primary"
-              variant="plain"
-              size="lg"
-              sx={{
-                '& tbody tr: hover': {
-                  backgroundColor: mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)',
-                },
-                '& tbody tr: hover a': {
-                  textDecoration: 'underline',
-                },
-              }}
-            >
-              <thead>
-                <tr>
-                  <th>{t('Name')}</th>
-                  <th>{t('Content')}</th>
-                  <th>{t('Meta_Data')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {chunkList.map((row: any) => (
-                  <tr key={row.id}>
-                    <td>{row.doc_name}</td>
-                    <td>
-                      {
-                        <Popover content={row.content} trigger="hover">
-                          {row.content.length > 10 ? `${row.content.slice(0, 10)}...` : row.content}
-                        </Popover>
-                      }
-                    </td>
-                    <td>
-                      {
-                        <Popover content={JSON.stringify(row.meta_info || '{}', null, 2)} trigger="hover">
-                          {row.meta_info.length > 10 ? `${row.meta_info.slice(0, 10)}...` : row.meta_info}
-                        </Popover>
-                      }
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </Table>
-          </>
-        ) : (
-          <></>
-        )}
-      </Box>
-      <Stack className="mt-5" direction="row" justifyContent="flex-end">
-        <Pagination
-          defaultPageSize={20}
-          showSizeChanger={false}
-          current={current}
-          total={total}
-          onChange={async (page) => {
-            const data = await sendSpacePostRequest(`/knowledge/${spaceName}/chunk/list`, {
-              document_id: documentId,
-              page,
-              page_size,
-            });
-            if (data.success) {
-              setChunkList(data.data.data);
-              setTotal(data.data.total);
-              setCurrent(data.data.page);
-            }
-          }}
-          hideOnSinglePage
-        />
-      </Stack>
-    </Box>
-  );
-};
-
-export default ChunkList;
diff --git a/pages/datastores/documents/index.tsx b/pages/datastores/documents/index.tsx
deleted file mode 100644
index 1f61ca1..0000000
--- a/pages/datastores/documents/index.tsx
+++ /dev/null
@@ -1,563 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useState, useEffect } from 'react';
-import {
-  useColorScheme,
-  Button,
-  Table,
-  Sheet,
-  Modal,
-  Box,
-  Stack,
-  Input,
-  Textarea,
-  Chip,
-  Switch,
-  Typography,
-  Breadcrumbs,
-  Link,
-  styled,
-} from '@/lib/mui';
-import moment from 'moment';
-import { InboxOutlined } from '@ant-design/icons';
-import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
-import CachedIcon from '@mui/icons-material/Cached';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import ChatIcon from '@mui/icons-material/Chat';
-import type { UploadProps } from 'antd';
-import { Upload, Pagination, Popover, message } from 'antd';
-import { sendSpacePostRequest, sendSpaceUploadPostRequest } from '@/utils/request';
-import SpaceParameter from '@/components/datastores/space-parameter';
-import { useTranslation } from 'react-i18next';
-
-const { Dragger } = Upload;
-const Item = styled(Sheet)(({ theme }) => ({
-  width: '50%',
-  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  borderRadius: 4,
-  color: theme.vars.palette.text.secondary,
-}));
-const page_size = 20;
-
-const Documents = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const spaceName = searchParams && searchParams.get('name');
-  const { mode } = useColorScheme();
-  const [isAddDocumentModalShow, setIsAddDocumentModalShow] = useState<boolean>(false);
-  const [activeStep, setActiveStep] = useState<number>(0);
-  const [documentType, setDocumentType] = useState<string>('');
-  const [documents, setDocuments] = useState<any>([]);
-  const [webPageUrl, setWebPageUrl] = useState<string>('');
-  const [documentName, setDocumentName] = useState<any>('');
-  const [textSource, setTextSource] = useState<string>('');
-  const [text, setText] = useState<string>('');
-  const [originFileObj, setOriginFileObj] = useState<any>(null);
-  const [total, setTotal] = useState<number>(0);
-  const [current, setCurrent] = useState<number>(0);
-  const [synchChecked, setSynchChecked] = useState<boolean>(true);
-  const { t } = useTranslation();
-  const stepsOfAddingDocument = [t('Choose_a_Datasource_type'), t('Setup_the_Datasource')];
-  const documentTypeList = [
-    {
-      type: 'text',
-      title: t('Text'),
-      subTitle: t('Fill your raw text'),
-    },
-    {
-      type: 'webPage',
-      title: t('URL'),
-      subTitle: t('Fetch_the_content_of_a_URL'),
-    },
-    {
-      type: 'file',
-      title: t('Document'),
-      subTitle: t('Upload_a_document'),
-    },
-  ];
-  const props: UploadProps = {
-    name: 'file',
-    multiple: false,
-    beforeUpload: () => false,
-    onChange(info) {
-      if (info.fileList.length === 0) {
-        setOriginFileObj(null);
-        setDocumentName('');
-        return;
-      }
-      setOriginFileObj(info.file);
-      setDocumentName(info.file.name);
-    },
-  };
-  useEffect(() => {
-    async function fetchDocuments() {
-      const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/list`, {
-        page: 1,
-        page_size,
-      });
-      if (data.success) {
-        setDocuments(data.data.data);
-        setTotal(data.data.total);
-        setCurrent(data.data.page);
-      }
-    }
-    spaceName && fetchDocuments();
-  }, [spaceName]);
-  return (
-    <div className="p-4">
-      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ marginBottom: '20px' }}>
-        <Breadcrumbs aria-label="breadcrumbs">
-          <Link
-            onClick={() => {
-              router.push('/datastores');
-            }}
-            key="Knowledge Space"
-            underline="hover"
-            color="neutral"
-            fontSize="inherit"
-          >
-            {t('Knowledge_Space')}
-          </Link>
-          <Typography fontSize="inherit">{t('Documents')}</Typography>
-        </Breadcrumbs>
-        <Stack direction="row" alignItems="center">
-          <Button
-            variant="outlined"
-            onClick={async () => {
-              const res = await sendSpacePostRequest('/api/v1/chat/dialogue/new', {
-                chat_mode: 'chat_knowledge',
-              });
-              if (res?.success && res?.data?.conv_uid) {
-                router.push(`/chat?id=${res?.data?.conv_uid}&scene=chat_knowledge&spaceNameOriginal=${spaceName}`);
-              }
-            }}
-            sx={{
-              marginRight: '20px',
-              backgroundColor: 'rgb(39, 155, 255) !important',
-              color: 'white',
-              border: 'none',
-            }}
-          >
-            <ChatIcon sx={{ marginRight: '6px', fontSize: '18px' }} />
-            {t('Chat')}
-          </Button>
-          <Button variant="outlined" onClick={() => setIsAddDocumentModalShow(true)} sx={{ marginRight: '20px' }}>
-            + {t('Add_Datasource')}
-          </Button>
-          {spaceName && <SpaceParameter spaceName={spaceName} />}
-        </Stack>
-      </Stack>
-      {documents.length ? (
-        <>
-          <Table
-            color="primary"
-            variant="plain"
-            size="sm"
-            sx={{
-              '& tbody tr: hover': {
-                backgroundColor: mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)',
-              },
-              '& tbody tr: hover a': {
-                textDecoration: 'underline',
-              },
-              '& tr > *:last-child': { textAlign: 'right' },
-            }}
-          >
-            <thead>
-              <tr>
-                <th>{t('Name')}</th>
-                <th>{t('Type')}</th>
-                <th>{t('Size')}</th>
-                <th>{t('Last_Synch')}</th>
-                <th>{t('Status')}</th>
-                <th>{t('Result')}</th>
-                <th style={{ width: '30%' }}>{t('Operation')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {documents.map((row: any) => (
-                <tr key={row.id}>
-                  <td>{row.doc_name}</td>
-                  <td>
-                    <Chip size="sm" variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
-                      {row.doc_type}
-                    </Chip>
-                  </td>
-                  <td>{row.chunk_size} chunks</td>
-                  <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
-                  <td>
-                    <Chip
-                      size="sm"
-                      sx={{ opacity: 0.5 }}
-                      variant="solid"
-                      color={(function () {
-                        switch (row.status) {
-                          case 'TODO':
-                            return 'neutral';
-                          case 'RUNNING':
-                            return 'primary';
-                          case 'FINISHED':
-                            return 'success';
-                          case 'FAILED':
-                            return 'danger';
-                        }
-                      })()}
-                    >
-                      {row.status}
-                    </Chip>
-                  </td>
-                  <td>
-                    {(function () {
-                      if (row.status === 'TODO' || row.status === 'RUNNING') {
-                        return '';
-                      } else if (row.status === 'FINISHED') {
-                        return (
-                          <Popover content={row.result} trigger="hover">
-                            <Chip size="sm" variant="solid" color="success" sx={{ opacity: 0.5 }}>
-                              SUCCESS
-                            </Chip>
-                          </Popover>
-                        );
-                      } else {
-                        return (
-                          <Popover content={row.result} trigger="hover">
-                            <Chip size="sm" variant="solid" color="danger" sx={{ opacity: 0.5 }}>
-                              FAILED
-                            </Chip>
-                          </Popover>
-                        );
-                      }
-                    })()}
-                  </td>
-                  <td>
-                    {
-                      <>
-                        <Button
-                          variant="outlined"
-                          size="sm"
-                          sx={{
-                            marginRight: '2px',
-                          }}
-                          onClick={async () => {
-                            const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/sync`, {
-                              doc_ids: [row.id],
-                            });
-                            if (data.success) {
-                              message.success('success');
-                            } else {
-                              message.error(data.err_msg || 'failed');
-                            }
-                          }}
-                        >
-                          {t('Synch')}
-                          <CachedIcon />
-                        </Button>
-                        <Button
-                          variant="outlined"
-                          size="sm"
-                          sx={{
-                            marginRight: '2px',
-                          }}
-                          onClick={() => {
-                            router.push(`/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}`);
-                          }}
-                        >
-                          {t('Details')}
-                        </Button>
-                        <Button
-                          variant="outlined"
-                          size="sm"
-                          color="danger"
-                          onClick={async () => {
-                            const res = await sendSpacePostRequest(`/knowledge/${spaceName}/document/delete`, {
-                              doc_name: row.doc_name,
-                            });
-                            if (res.success) {
-                              message.success('success');
-                              const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/list`, {
-                                page: current,
-                                page_size,
-                              });
-                              if (data.success) {
-                                setDocuments(data.data.data);
-                                setTotal(data.data.total);
-                                setCurrent(data.data.page);
-                              }
-                            } else {
-                              message.error(res.err_msg || 'failed');
-                            }
-                          }}
-                        >
-                          {t('Delete')}
-                          <DeleteOutlineIcon />
-                        </Button>
-                      </>
-                    }
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </Table>
-          <Stack
-            direction="row"
-            justifyContent="flex-end"
-            sx={{
-              marginTop: '20px',
-            }}
-          >
-            <Pagination
-              defaultPageSize={20}
-              showSizeChanger={false}
-              current={current}
-              total={total}
-              onChange={async (page) => {
-                const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/list`, {
-                  page,
-                  page_size,
-                });
-                if (data.success) {
-                  setDocuments(data.data.data);
-                  setTotal(data.data.total);
-                  setCurrent(data.data.page);
-                }
-              }}
-              hideOnSinglePage
-            />
-          </Stack>
-        </>
-      ) : (
-        <></>
-      )}
-      <Modal
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          'z-index': 1000,
-        }}
-        open={isAddDocumentModalShow}
-        onClose={() => setIsAddDocumentModalShow(false)}
-      >
-        <Sheet
-          variant="outlined"
-          sx={{
-            width: 800,
-            borderRadius: 'md',
-            p: 3,
-            boxShadow: 'lg',
-          }}
-        >
-          <Box sx={{ width: '100%' }}>
-            <Stack spacing={2} direction="row">
-              {stepsOfAddingDocument.map((item: any, index: number) => (
-                <Item
-                  key={item}
-                  sx={{
-                    fontWeight: activeStep === index ? 'bold' : '',
-                    color: activeStep === index ? '#2AA3FF' : '',
-                  }}
-                >
-                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
-                  {`${item}`}
-                </Item>
-              ))}
-            </Stack>
-          </Box>
-          {activeStep === 0 ? (
-            <>
-              <Box sx={{ margin: '30px auto' }}>
-                {documentTypeList.map((item: any) => (
-                  <Sheet
-                    key={item.type}
-                    sx={{
-                      boxSizing: 'border-box',
-                      height: '80px',
-                      padding: '12px',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      justifyContent: 'space-between',
-                      border: '1px solid gray',
-                      borderRadius: '6px',
-                      marginBottom: '20px',
-                      cursor: 'pointer',
-                    }}
-                    onClick={() => {
-                      setDocumentType(item.type);
-                      setActiveStep(1);
-                    }}
-                  >
-                    <Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>{item.title}</Sheet>
-                    <Sheet>{item.subTitle}</Sheet>
-                  </Sheet>
-                ))}
-              </Box>
-            </>
-          ) : (
-            <>
-              <Box sx={{ margin: '30px auto' }}>
-                {t('Name')}:
-                <Input
-                  placeholder={t('Please_input_the_name')}
-                  onChange={(e: any) => setDocumentName(e.target.value)}
-                  sx={{ marginBottom: '20px' }}
-                />
-                {documentType === 'webPage' ? (
-                  <>
-                    {t('Web_Page_URL')}:
-                    <Input placeholder={t('Please_input_the_Web_Page_URL')} onChange={(e: any) => setWebPageUrl(e.target.value)} />
-                  </>
-                ) : documentType === 'file' ? (
-                  <>
-                    <Dragger {...props}>
-                      <p className="ant-upload-drag-icon">
-                        <InboxOutlined />
-                      </p>
-                      <p style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}>{t('Select_or_Drop_file')}</p>
-                      <p className="ant-upload-hint" style={{ color: 'rgb(22, 108, 255)' }}>
-                        PDF, PowerPoint, Excel, Word, Text, Markdown,
-                      </p>
-                    </Dragger>
-                  </>
-                ) : (
-                  <>
-                    {t('Text_Source')}:
-                    <Input
-                      placeholder={t('Please_input_the_text_source')}
-                      onChange={(e: any) => setTextSource(e.target.value)}
-                      sx={{ marginBottom: '20px' }}
-                    />
-                    {t('Text')}:
-                    <Textarea onChange={(e: any) => setText(e.target.value)} minRows={4} maxRows={4} sx={{ marginBottom: '20px' }} />
-                  </>
-                )}
-                <Typography
-                  component="label"
-                  sx={{
-                    marginTop: '20px',
-                  }}
-                  endDecorator={<Switch checked={synchChecked} onChange={(event: any) => setSynchChecked(event.target.checked)} />}
-                >
-                  {t('Synch')}:
-                </Typography>
-              </Box>
-              <Stack direction="row" justifyContent="flex-start" alignItems="center" sx={{ marginBottom: '20px' }}>
-                <Button variant="outlined" sx={{ marginRight: '20px' }} onClick={() => setActiveStep(0)}>
-                  {`< ${t('Back')}`}
-                </Button>
-                <Button
-                  variant="outlined"
-                  onClick={async () => {
-                    if (documentName === '') {
-                      message.error(t('Please_input_the_name'));
-                      return;
-                    }
-                    if (documentType === 'webPage') {
-                      if (webPageUrl === '') {
-                        message.error(t('Please_input_the_Web_Page_URL'));
-                        return;
-                      }
-                      const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/add`, {
-                        doc_name: documentName,
-                        content: webPageUrl,
-                        doc_type: 'URL',
-                      });
-                      data.success &&
-                        synchChecked &&
-                        sendSpacePostRequest(`/knowledge/${spaceName}/document/sync`, {
-                          doc_ids: [data.data],
-                        });
-                      if (data.success) {
-                        message.success('success');
-                        setIsAddDocumentModalShow(false);
-                        const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/list`, {
-                          page: current,
-                          page_size,
-                        });
-                        if (data.success) {
-                          setDocuments(data.data.data);
-                          setTotal(data.data.total);
-                          setCurrent(data.data.page);
-                        }
-                      } else {
-                        message.error(data.err_msg || 'failed');
-                      }
-                    } else if (documentType === 'file') {
-                      if (!originFileObj) {
-                        message.error(t('Please_select_a_file'));
-                        return;
-                      }
-                      const formData = new FormData();
-                      formData.append('doc_name', documentName);
-                      formData.append('doc_file', originFileObj);
-                      formData.append('doc_type', 'DOCUMENT');
-                      const data = await sendSpaceUploadPostRequest(`/knowledge/${spaceName}/document/upload`, formData);
-                      data.success &&
-                        synchChecked &&
-                        sendSpacePostRequest(`/knowledge/${spaceName}/document/sync`, {
-                          doc_ids: [data.data],
-                        });
-                      if (data.success) {
-                        message.success('success');
-                        setIsAddDocumentModalShow(false);
-                        const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/list`, {
-                          page: current,
-                          page_size,
-                        });
-                        if (data.success) {
-                          setDocuments(data.data.data);
-                          setTotal(data.data.total);
-                          setCurrent(data.data.page);
-                        }
-                      } else {
-                        message.error(data.err_msg || 'failed');
-                      }
-                    } else {
-                      if (text === '') {
-                        message.error(t('Please_input_the_text'));
-                        return;
-                      }
-                      const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/add`, {
-                        doc_name: documentName,
-                        source: textSource,
-                        content: text,
-                        doc_type: 'TEXT',
-                      });
-                      data.success &&
-                        synchChecked &&
-                        sendSpacePostRequest(`/knowledge/${spaceName}/document/sync`, {
-                          doc_ids: [data.data],
-                        });
-                      if (data.success) {
-                        message.success('success');
-                        setIsAddDocumentModalShow(false);
-                        const data = await sendSpacePostRequest(`/knowledge/${spaceName}/document/list`, {
-                          page: current,
-                          page_size,
-                        });
-                        if (data.success) {
-                          setDocuments(data.data.data);
-                          setTotal(data.data.total);
-                          setCurrent(data.data.page);
-                        }
-                      } else {
-                        message.error(data.err_msg || 'failed');
-                      }
-                    }
-                  }}
-                >
-                  {t('Finish')}
-                </Button>
-              </Stack>
-            </>
-          )}
-        </Sheet>
-      </Modal>
-    </div>
-  );
-};
-
-export default Documents;
diff --git a/pages/datastores/index.tsx b/pages/datastores/index.tsx
deleted file mode 100644
index 4f586a3..0000000
--- a/pages/datastores/index.tsx
+++ /dev/null
@@ -1,469 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import React, { useState, useEffect } from 'react';
-import { InboxOutlined } from '@ant-design/icons';
-import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
-import ContentPasteSearchOutlinedIcon from '@mui/icons-material/ContentPasteSearchOutlined';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import type { UploadProps } from 'antd';
-import { message, Upload } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { Modal, Button, Sheet, Stack, Box, Input, Textarea, Switch, Typography, Divider, ModalDialog, styled } from '@/lib/mui';
-import { sendSpacePostRequest, sendSpaceUploadPostRequest } from '@/utils/request';
-
-const { Dragger } = Upload;
-
-const Item = styled(Sheet)(({ theme }) => ({
-  width: '33%',
-  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
-  ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  borderRadius: 4,
-  color: theme.vars.palette.text.secondary,
-}));
-
-const Index = () => {
-  const router = useRouter();
-  const { t } = useTranslation();
-  const [activeStep, setActiveStep] = useState<number>(0);
-  const [documentType, setDocumentType] = useState<string>('');
-  const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([]);
-  const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] = useState<boolean>(false);
-  const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('');
-  const [owner, setOwner] = useState<string>('');
-  const [description, setDescription] = useState<string>('');
-  const [webPageUrl, setWebPageUrl] = useState<string>('');
-  const [documentName, setDocumentName] = useState<any>('');
-  const [textSource, setTextSource] = useState<string>('');
-  const [text, setText] = useState<string>('');
-  const [originFileObj, setOriginFileObj] = useState<any>(null);
-  const [synchChecked, setSynchChecked] = useState<boolean>(true);
-  const [isDeleteKnowledgeSpaceModalShow, setIsDeleteKnowledgeSpaceModalShow] = useState<boolean>(false);
-  const [knowledgeSpaceToDelete, setKnowledgeSpaceToDelete] = useState<any>({});
-  const stepsOfAddingSpace = [t('Knowledge_Space_Config'), t('Choose_a_Datasource_type'), t('Setup_the_Datasource')];
-  const documentTypeList = [
-    {
-      type: 'text',
-      title: t('Text'),
-      subTitle: t('Fill your raw text'),
-    },
-    {
-      type: 'webPage',
-      title: t('URL'),
-      subTitle: t('Fetch_the_content_of_a_URL'),
-    },
-    {
-      type: 'file',
-      title: t('Document'),
-      subTitle: t('Upload_a_document'),
-    },
-  ];
-  const props: UploadProps = {
-    name: 'file',
-    multiple: false,
-    beforeUpload: () => false,
-    onChange(info) {
-      if (info.fileList.length === 0) {
-        setOriginFileObj(null);
-        setDocumentName('');
-        return;
-      }
-      setOriginFileObj(info.file);
-      setDocumentName(info.file.name);
-    },
-  };
-  useEffect(() => {
-    async function fetchData() {
-      const data = await sendSpacePostRequest('/knowledge/space/list', {});
-      if (data.success) {
-        setKnowledgeSpaceList(data.data);
-      }
-    }
-    fetchData();
-  }, []);
-  return (
-    <Box className="bg-[#F1F2F5] dark:bg-[#212121] w-full h-full">
-      <Box
-        className="page-body p-4 h-[90%] overflow-auto"
-        sx={{
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-        }}
-      >
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          alignItems="center"
-          flexWrap="wrap"
-          sx={{
-            '& i': {
-              width: '430px',
-              marginRight: '30px',
-            },
-          }}
-        >
-          <Box
-            sx={{
-              '&: hover': {
-                boxShadow: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);',
-              },
-            }}
-            onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
-            className="bg-[#E9EBEE] dark:bg-[#484848] flex content-start box-content w-[390px] h-[79px] pt-[33px] px-5 pb-10 mr-[30px] mb-[30px] text-lg font-bold text-black shrink-0 grow-0 cursor-pointer rounded-2xl"
-          >
-            <Box className="w-8 h-8 leading-7 border border-blue-500 text-center rounded-md mr-1 font-light text-blue-500">+</Box>
-            <Box className="text-base">{t('space')}</Box>
-          </Box>
-          {knowledgeSpaceList.map((item: any, index: number) => (
-            <Box
-              key={index}
-              sx={{
-                '&: hover': {
-                  boxShadow: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);',
-                },
-              }}
-              onClick={() => {
-                router.push(`/datastores/documents?name=${item.name}`);
-              }}
-              className="bg-[#FFFFFF] dark:bg-[#484848] relative pt-[30px] px-5 pb-[40px] mr-[30px] mb-[30px] shrink-0 grow-0 cursor-pointer rounded-[10px] border-t-4 border-[#54A4F8] border-solid"
-            >
-              <Box className="text-lg mb-[10px] font-bold text-black">
-                <ContentPasteSearchOutlinedIcon className="mr-[5px] text-[#2AA3FF]" />
-                {item.name}
-              </Box>
-              <Box className="flex justify-start">
-                <Box className="w-[130px] shrink-0 grow-0">
-                  <Box className="text-[#2AA3FF]">{item.vector_type}</Box>
-                  <Box className="text-xs text-black">{t('Vector')}</Box>
-                </Box>
-                <Box className="w-[130px] shrink-0 grow-0">
-                  <Box className="text-[#2AA3FF]">{item.owner}</Box>
-                  <Box className="text-xs text-black">{t('Owner')}</Box>
-                </Box>
-                <Box className="w-[130px] shrink-0 grow-0">
-                  <Box className="text-[#2AA3FF]">{item.docs || 0}</Box>
-                  <Box className="text-xs text-black">{t('Docs')}</Box>
-                </Box>
-              </Box>
-              <Box
-                className="absolute right-2.5 top-2.5 text-[#CD2029]"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setKnowledgeSpaceToDelete(item);
-                  setIsDeleteKnowledgeSpaceModalShow(true);
-                }}
-              >
-                <DeleteOutlineIcon className="text-3xl" />
-              </Box>
-            </Box>
-          ))}
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-          <i></i>
-        </Stack>
-      </Box>
-      <Modal
-        className="flex justify-center items-center z-[1000]"
-        open={isAddKnowledgeSpaceModalShow}
-        onClose={() => setIsAddKnowledgeSpaceModalShow(false)}
-      >
-        <Sheet variant="outlined" className="w-[800px] rounded-md shadow-lg p-6">
-          <Box className="w-full">
-            <Stack spacing={2} direction="row">
-              {stepsOfAddingSpace.map((item: any, index: number) => (
-                <Item
-                  key={item}
-                  sx={{
-                    fontWeight: activeStep === index ? 'bold' : '',
-                    color: activeStep === index ? '#2AA3FF' : '',
-                  }}
-                >
-                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
-                  {`${item}`}
-                </Item>
-              ))}
-            </Stack>
-          </Box>
-          {activeStep === 0 ? (
-            <>
-              <Box className="my-[30px] mx-auto">
-                {t('Knowledge_Space_Name')}:
-                <Input placeholder={t('Please_input_the_name')} onChange={(e: any) => setKnowledgeSpaceName(e.target.value)} className="mb-5" />
-                {t('Owner')}:
-                <Input placeholder={t('Please_input_the_owner')} onChange={(e: any) => setOwner(e.target.value)} className="mb-5" />
-                {t('Description')}:
-                <Input placeholder={t('Please_input_the_description')} onChange={(e: any) => setDescription(e.target.value)} className="mb-5" />
-              </Box>
-              <Button
-                variant="outlined"
-                onClick={async () => {
-                  if (knowledgeSpaceName === '') {
-                    message.error(t('Please_input_the_name'));
-                    return;
-                  }
-                  if (/[^\u4e00-\u9fa50-9a-zA-Z_-]/.test(knowledgeSpaceName)) {
-                    message.error(t('the_name_can_only_contain'));
-                    return;
-                  }
-                  if (owner === '') {
-                    message.error(t('Please_input_the_owner'));
-                    return;
-                  }
-                  if (description === '') {
-                    message.error(t('Please_input_the_description'));
-                    return;
-                  }
-                  const data = await sendSpacePostRequest(`/knowledge/space/add`, {
-                    name: knowledgeSpaceName,
-                    vector_type: 'Chroma',
-                    owner,
-                    desc: description,
-                  });
-                  if (data.success) {
-                    message.success('success');
-                    setActiveStep(1);
-                    const data = await sendSpacePostRequest('/knowledge/space/list', {});
-                    if (data.success) {
-                      setKnowledgeSpaceList(data.data);
-                    }
-                  } else {
-                    message.error(data.err_msg || 'failed');
-                  }
-                }}
-              >
-                {t('Next')}
-              </Button>
-            </>
-          ) : activeStep === 1 ? (
-            <>
-              <Box sx={{ margin: '30px auto' }}>
-                {documentTypeList.map((item: any) => (
-                  <Sheet
-                    key={item.type}
-                    sx={{
-                      boxSizing: 'border-box',
-                      height: '80px',
-                      padding: '12px',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      justifyContent: 'space-between',
-                      border: '1px solid gray',
-                      borderRadius: '6px',
-                      marginBottom: '20px',
-                      cursor: 'pointer',
-                    }}
-                    onClick={() => {
-                      setDocumentType(item.type);
-                      setActiveStep(2);
-                    }}
-                  >
-                    <Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>{item.title}</Sheet>
-                    <Sheet>{item.subTitle}</Sheet>
-                  </Sheet>
-                ))}
-              </Box>
-            </>
-          ) : (
-            <>
-              <Box sx={{ margin: '30px auto' }}>
-                {t('Name')}:
-                <Input
-                  placeholder={t('Please_input_the_name')}
-                  onChange={(e: any) => setDocumentName(e.target.value)}
-                  sx={{ marginBottom: '20px' }}
-                />
-                {documentType === 'webPage' ? (
-                  <>
-                    {t('Web_Page_URL')}:
-                    <Input placeholder={t('Please_input_the_Web_Page_URL')} onChange={(e: any) => setWebPageUrl(e.target.value)} />
-                  </>
-                ) : documentType === 'file' ? (
-                  <>
-                    <Dragger {...props}>
-                      <p className="ant-upload-drag-icon">
-                        <InboxOutlined />
-                      </p>
-                      <p style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}>{t('Select_or_Drop_file')}</p>
-                      <p className="ant-upload-hint" style={{ color: 'rgb(22, 108, 255)' }}>
-                        PDF, PowerPoint, Excel, Word, Text, Markdown,
-                      </p>
-                    </Dragger>
-                  </>
-                ) : (
-                  <>
-                    {t('Text_Source')}:
-                    <Input
-                      placeholder={t('Please_input_the_text_source')}
-                      onChange={(e: any) => setTextSource(e.target.value)}
-                      sx={{ marginBottom: '20px' }}
-                    />
-                    {t('Text')}:
-                    <Textarea onChange={(e: any) => setText(e.target.value)} minRows={4} maxRows={4} sx={{ marginBottom: '20px' }} />
-                  </>
-                )}
-                <Typography
-                  component="label"
-                  sx={{
-                    marginTop: '20px',
-                  }}
-                  endDecorator={<Switch checked={synchChecked} onChange={(event: any) => setSynchChecked(event.target.checked)} />}
-                >
-                  {t('Synch')}:
-                </Typography>
-              </Box>
-              <Stack direction="row" justifyContent="flex-start" alignItems="center" sx={{ marginBottom: '20px' }}>
-                <Button variant="outlined" sx={{ marginRight: '20px' }} onClick={() => setActiveStep(1)}>
-                  {`< ${t('Back')}`}
-                </Button>
-                <Button
-                  variant="outlined"
-                  onClick={async () => {
-                    if (documentName === '') {
-                      message.error(t('Please_input_the_name'));
-                      return;
-                    }
-                    if (documentType === 'webPage') {
-                      if (webPageUrl === '') {
-                        message.error(t('Please_input_the_text_source'));
-                        return;
-                      }
-                      const data = await sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/add`, {
-                        doc_name: documentName,
-                        content: webPageUrl,
-                        doc_type: 'URL',
-                      });
-                      if (data.success) {
-                        message.success('success');
-                        setIsAddKnowledgeSpaceModalShow(false);
-                        synchChecked &&
-                          sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/sync`, {
-                            doc_ids: [data.data],
-                          });
-                      } else {
-                        message.error(data.err_msg || 'failed');
-                      }
-                    } else if (documentType === 'file') {
-                      if (!originFileObj) {
-                        message.error(t('Please_select_a_file'));
-                        return;
-                      }
-                      const formData = new FormData();
-                      formData.append('doc_name', documentName);
-                      formData.append('doc_file', originFileObj);
-                      formData.append('doc_type', 'DOCUMENT');
-
-                      const data = await sendSpaceUploadPostRequest(`/knowledge/${knowledgeSpaceName}/document/upload`, formData);
-                      if (data.success) {
-                        message.success('success');
-                        setIsAddKnowledgeSpaceModalShow(false);
-                        synchChecked &&
-                          sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/sync`, {
-                            doc_ids: [data.data],
-                          });
-                      } else {
-                        message.error(data.err_msg || 'failed');
-                      }
-                    } else {
-                      if (text === '') {
-                        message.error(t('Please_input_the_text'));
-                        return;
-                      }
-                      const data = await sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/add`, {
-                        doc_name: documentName,
-                        source: textSource,
-                        content: text,
-                        doc_type: 'TEXT',
-                      });
-                      if (data.success) {
-                        message.success('success');
-                        setIsAddKnowledgeSpaceModalShow(false);
-                        synchChecked &&
-                          sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/sync`, {
-                            doc_ids: [data.data],
-                          });
-                      } else {
-                        message.error(data.err_msg || 'failed');
-                      }
-                    }
-                  }}
-                >
-                  {t('Finish')}
-                </Button>
-              </Stack>
-            </>
-          )}
-        </Sheet>
-      </Modal>
-      <Modal open={isDeleteKnowledgeSpaceModalShow} onClose={() => setIsDeleteKnowledgeSpaceModalShow(false)}>
-        <ModalDialog
-          variant="outlined"
-          role="alertdialog"
-          aria-labelledby="alert-dialog-modal-title"
-          aria-describedby="alert-dialog-modal-description"
-        >
-          <Typography
-            id="alert-dialog-modal-title"
-            component="h2"
-            startDecorator={<WarningRoundedIcon style={{ color: 'rgb(205, 32, 41)' }} />}
-            sx={{ color: 'black' }}
-          >
-            Confirmation
-          </Typography>
-          <Divider />
-          <Typography id="alert-dialog-modal-description" textColor="text.tertiary" sx={{ fontWeight: '500', color: 'black' }}>
-            Sure to delete {knowledgeSpaceToDelete?.name}?
-          </Typography>
-          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', pt: 2 }}>
-            <Button variant="outlined" color="neutral" onClick={() => setIsDeleteKnowledgeSpaceModalShow(false)}>
-              Cancel
-            </Button>
-            <Button
-              variant="outlined"
-              color="danger"
-              onClick={async () => {
-                setIsDeleteKnowledgeSpaceModalShow(false);
-                const res = await sendSpacePostRequest(`/knowledge/space/delete`, {
-                  name: knowledgeSpaceToDelete?.name,
-                });
-                if (res.success) {
-                  message.success('success');
-                  const data = await sendSpacePostRequest('/knowledge/space/list', {});
-                  if (data.success) {
-                    setKnowledgeSpaceList(data.data);
-                  }
-                } else {
-                  message.error(res.err_msg || 'failed');
-                }
-              }}
-            >
-              Yes
-            </Button>
-          </Box>
-        </ModalDialog>
-      </Modal>
-    </Box>
-  );
-};
-
-export default Index;
diff --git a/pages/index.tsx b/pages/index.tsx
index 1aea824..b4c8896 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,3 @@
-
 import { useRequest } from 'ahooks';
 import { useContext, useState } from 'react';
 import { Divider, Spin } from 'antd';
@@ -8,7 +7,7 @@ import { NextPage } from 'next';
 import { apiInterceptors, newDialogue, postScenes } from '@/client/api';
 import ModelSelector from '@/components/chat/header/model-selector';
 import { ChatContext } from '@/app/chat-context';
-import { SceneResponse } from '@/types/chart';
+import { SceneResponse } from '@/types/chat';
 import CompletionInput from '@/components/common/completion-input';
 import { useTranslation } from 'react-i18next';
 import { STORAGE_INIT_MESSAGE_KET } from '@/constant';
@@ -33,7 +32,7 @@ const Home: NextPage = () => {
     const [, res] = await apiInterceptors(newDialogue({ chat_mode: 'chat_normal' }));
     if (res) {
       localStorage.setItem(STORAGE_INIT_MESSAGE_KET, JSON.stringify({ id: res.conv_uid, message }));
-      router.push(`/chat/chat_normal/${res.conv_uid}${model ? `?model=${model}` : ''}`);
+      router.push(`/chat/?scene=chat_normal&id=${res.conv_uid}${model ? `&model=${model}` : ''}`);
     }
     setLoading(false);
   };
@@ -41,7 +40,7 @@ const Home: NextPage = () => {
   const handleNewChat = async (scene: SceneResponse) => {
     const [, res] = await apiInterceptors(newDialogue({ chat_mode: 'chat_normal' }));
     if (res) {
-      router.push(`/chat/${scene.chat_scene}/${res.conv_uid}${model ? `?model=${model}` : ''}`);
+      router.push(`/chat?scene=${scene.chat_scene}&id=${res.conv_uid}${model ? `&model=${model}` : ''}`);
     }
   };
 
diff --git a/pages/knowledge/[knowledgeName]/[id].tsx b/pages/knowledge/[knowledgeName]/[id].tsx
new file mode 100644
index 0000000..fb9802f
--- /dev/null
+++ b/pages/knowledge/[knowledgeName]/[id].tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { Breadcrumb, Card, Empty } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { apiInterceptors, getChunkList } from '@/client/api';
+import { renderDocTypeIcon } from '@/components/knowledge/document';
+
+const page_size = 20;
+function Detail() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [chunkList, setChunkList] = useState<any>([]);
+  const {
+    query: { id, knowledgeName },
+  } = useRouter();
+  const fetchChunks = async () => {
+    const [_, data] = await apiInterceptors(
+      getChunkList(knowledgeName as string, {
+        document_id: id as string,
+        page: 1,
+        page_size,
+      }),
+    );
+    setChunkList(data?.data);
+  };
+  useEffect(() => {
+    knowledgeName && id && fetchChunks();
+  }, [id, knowledgeName]);
+
+  return (
+    <div className="h-full overflow-y-scroll">
+      <Breadcrumb
+        className="m-6"
+        items={[
+          {
+            title: 'Knowledge',
+            onClick() {
+              router.back();
+            },
+            path: '/knowledge',
+          },
+          {
+            title: knowledgeName,
+          },
+        ]}
+      />
+      {chunkList?.length > 0 ? (
+        chunkList?.map((item: any, index: number) => {
+          return (
+            <Card
+              key={index}
+              title={
+                <>
+                  {renderDocTypeIcon(item.doc_type)}
+                  <span>{item.doc_name}</span>
+                </>
+              }
+            >
+              <p className="font-semibold">{t('Content')}:</p>
+              <p>{item?.content}</p>
+              <p className="font-semibold">{t('Meta_Data')}: </p>
+              <p>{item?.meta_info}</p>
+            </Card>
+          );
+        })
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_DEFAULT}></Empty>
+      )}
+    </div>
+  );
+}
+
+export default Detail;
diff --git a/pages/knowledge/index.tsx b/pages/knowledge/index.tsx
new file mode 100644
index 0000000..8087cf2
--- /dev/null
+++ b/pages/knowledge/index.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+import KnowledgeCard from '@/components/knowledge/knowledge-card';
+import AddKnowledgeModal from '@/components/knowledge/add-modal';
+import { IKnowLedge } from '@/types/knowledge';
+import { apiInterceptors, getKnowledgeList } from '@/client/api';
+
+const Knowledge = () => {
+  const { t } = useTranslation();
+  const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<Array<IKnowLedge> | null>([]);
+  const [isAddShow, setIsAddShow] = useState<boolean>(false);
+
+  async function fetchData() {
+    const [_, data] = await apiInterceptors(getKnowledgeList());
+    setKnowledgeSpaceList(data);
+  }
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className="bg-[#FAFAFA] dark:bg-[#212121] w-full h-full">
+      <div className="page-body p-6 px-12 h-full overflow-auto">
+        <Button
+          type="primary"
+          className="flex items-center"
+          icon={<PlusOutlined />}
+          onClick={() => {
+            setIsAddShow(true);
+          }}
+        >
+          Create
+        </Button>
+        <div className="mt-3 grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-5">
+          {knowledgeSpaceList?.map((item: IKnowLedge, index: number) => (
+            <KnowledgeCard
+              fetchKnowledge={fetchData}
+              key={index}
+              spaceInfo={item}
+              t={t}
+              knowledgeSpaceToDelete={item}
+              isAddShow={isAddShow}
+              setIsAddShow={setIsAddShow}
+            />
+          ))}
+        </div>
+      </div>
+
+      <AddKnowledgeModal
+        fetchKnowledge={fetchData}
+        setKnowledgeSpaceList={setKnowledgeSpaceList}
+        isAddShow={isAddShow}
+        setIsAddShow={setIsAddShow}
+        type="knowledge"
+      />
+    </div>
+  );
+};
+
+export default Knowledge;
diff --git a/pages/models/index.tsx b/pages/models/index.tsx
index 69b769b..e2ab3c8 100644
--- a/pages/models/index.tsx
+++ b/pages/models/index.tsx
@@ -21,7 +21,7 @@ function Models() {
   }, []);
 
   return (
-    <div className="p-8">
+    <div className="p-8 h-full">
       <Button
         className="mb-8"
         type="primary"
diff --git a/public/models/chroma-logo.png b/public/models/chroma-logo.png
new file mode 100644
index 0000000..ed7fbd5
Binary files /dev/null and b/public/models/chroma-logo.png differ
diff --git a/public/models/knowledge-default.jpg b/public/models/knowledge-default.jpg
new file mode 100644
index 0000000..a3a8e80
Binary files /dev/null and b/public/models/knowledge-default.jpg differ
diff --git a/tsconfig.json b/tsconfig.json
index e06a445..b576778 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/chat/chat-content"],
   "exclude": ["node_modules"]
 }
diff --git a/types/agent.ts b/types/agent.ts
new file mode 100644
index 0000000..d024991
--- /dev/null
+++ b/types/agent.ts
@@ -0,0 +1,61 @@
+export type PostAgentHubUpdateParams = {
+  channel: string;
+  url: string;
+  branch: string;
+  authorization: string;
+};
+
+export type PostAgentQueryParams = {
+  page_index: number;
+  page_size: number;
+  filter?: {
+    name?: string;
+    description?: string;
+    author?: string;
+    email?: string;
+    type?: string;
+    version?: string;
+    storage_channel?: string;
+    storage_url?: string;
+  };
+};
+
+export type IAgentPlugin = {
+  name: string;
+  description: string;
+  email: string;
+  version: string;
+  storage_url: string;
+  download_param: string;
+  installed: number;
+  id: number;
+  author: string;
+  type: string;
+  storage_channel: string;
+  created_at: string;
+};
+
+export type PostAgentPluginResponse = {
+  page_index: number;
+  page_size: number;
+  total_page: number;
+  total_row_count: number;
+  datas: IAgentPlugin[];
+};
+
+export type IMyPlugin = {
+  user_name: null | string;
+  id: number;
+  file_name: string;
+  version: string;
+  succ_count: number;
+  name: string;
+  tenant: null | string;
+  user_code: string;
+  type: string;
+  use_count: number;
+  created_at: string;
+  description: string;
+};
+
+export type PostAgentMyPluginResponse = IMyPlugin[];
diff --git a/types/chart.ts b/types/chat.ts
similarity index 95%
rename from types/chart.ts
rename to types/chat.ts
index dd3b171..8716aaf 100644
--- a/types/chart.ts
+++ b/types/chat.ts
@@ -36,7 +36,7 @@ export type IChatDialogueSchema = {
   conv_uid: string;
   user_input: string;
   user_name: string;
-  chat_mode: 'chat_with_db_execute' | 'chat_excel' | 'chat_with_db_qa' | 'chat_knowledge' | 'chat_dashboard' | 'chat_execution';
+  chat_mode: 'chat_with_db_execute' | 'chat_excel' | 'chat_with_db_qa' | 'chat_knowledge' | 'chat_dashboard' | 'chat_execution' | 'chat_agent';
   select_param: string;
 };
 
diff --git a/types/knowledge.ts b/types/knowledge.ts
new file mode 100644
index 0000000..5ab3369
--- /dev/null
+++ b/types/knowledge.ts
@@ -0,0 +1,97 @@
+export interface IKnowLedge {
+  context?: any;
+  desc: string;
+  docs: string | number;
+  gmt_created: string;
+  gmt_modified: string;
+  id: string | number;
+  name: string;
+  owner: string;
+  vector_type: string;
+}
+export type AddKnowledgeParams = {
+  name: string;
+  vector_type: string;
+  owner: string;
+  desc: string;
+};
+
+export type BaseDocumentParams = {
+  doc_name: string;
+  content: string;
+  doc_type: string;
+};
+
+export type Embedding = {
+  chunk_overlap: string | number;
+  chunk_size: string | number;
+  model: string;
+  recall_score: string | number;
+  recall_type: string;
+  topk: string;
+};
+
+export type Prompt = {
+  max_token: string | number;
+  scene: string;
+  template: string;
+};
+export type IArguments = {
+  embedding: Embedding;
+  prompt: Prompt;
+};
+
+export type DocumentParams = {
+  doc_name: string;
+  source?: string;
+  content: string;
+  doc_type: string;
+};
+
+export type IDocument = {
+  doc_name: string;
+  source?: string;
+  content: string;
+  doc_type: string;
+  chunk_size: string | number;
+  gmt_created: string;
+  gmt_modified: string;
+  id: string;
+  last_sync: string;
+  result: string;
+  space: string;
+  status: string;
+  vector_ids: string;
+};
+
+export type IDocumentResponse = {
+  data: Array<IDocument>;
+  page: string | number;
+  total: string | number;
+};
+
+export type ChunkListParams = {
+  document_id?: string | number;
+  page: number;
+  page_size: number;
+};
+
+type IChunk = {
+  content: string;
+  doc_name: string;
+  doc_type: string;
+  document_id: string | number;
+  gmt_created: string;
+  gmt_modified: string;
+  id: string | number;
+  meta_info: string;
+};
+export type IChunkList = {
+  data: Array<IChunk>;
+  page: string | number;
+  total: string | number;
+};
+
+export type ArgumentsParams = {
+  argument: string;
+};
diff --git a/utils/constants.ts b/utils/constants.ts
index c702a41..c28dbd2 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -1,4 +1,4 @@
-import { ModelType } from '@/types/chart';
+import { ModelType } from '@/types/chat';
 
 export const ICON_MAP: Record<ModelType, { label: string; icon: string }> = {
   proxyllm: { label: 'Proxy LLM', icon: '/models/chatgpt.png' },
diff --git a/utils/request.ts b/utils/request.ts
index a6564aa..102b7fd 100644
--- a/utils/request.ts
+++ b/utils/request.ts
@@ -21,64 +21,79 @@ const sanitizeBody = (obj: Record<string, any>): string => {
 };
 
 export const sendGetRequest = (url: string, qs?: { [key: string]: any }) => {
-	if (qs) {
+  if (qs) {
     const str = Object.keys(qs)
-      .filter(k => qs[k] !== undefined && qs[k] !== '')
-      .map(k => `${k}=${qs[k]}`)
+      .filter((k) => qs[k] !== undefined && qs[k] !== '')
+      .map((k) => `${k}=${qs[k]}`)
       .join('&');
     if (str) {
       url += `?${str}`;
     }
   }
-	return axios.get("/api" + url, {
-    headers: DEFAULT_HEADERS
-  }).then(res => res).catch(err => {
-    message.error(err);
-    Promise.reject(err);
-  });
-}
+  return axios
+    .get<null, any>('/api' + url, {
+      headers: DEFAULT_HEADERS,
+    })
+    .then((res) => res)
+    .catch((err) => {
+      message.error(err);
+      Promise.reject(err);
+    });
+};
 
 export const sendSpaceGetRequest = (url: string, qs?: { [key: string]: any }) => {
-	if (qs) {
+  if (qs) {
     const str = Object.keys(qs)
-      .filter(k => qs[k] !== undefined && qs[k] !== '')
-      .map(k => `${k}=${qs[k]}`)
+      .filter((k) => qs[k] !== undefined && qs[k] !== '')
+      .map((k) => `${k}=${qs[k]}`)
       .join('&');
     if (str) {
       url += `?${str}`;
     }
   }
-	return axios.get(url, {
-    headers: DEFAULT_HEADERS
-  }).then(res => res).catch(err => {
-    message.error(err);
-    Promise.reject(err);
-  });
-}
+  return axios
+    .get<null, any>(url, {
+      headers: DEFAULT_HEADERS,
+    })
+    .then((res) => res)
+    .catch((err) => {
+      message.error(err);
+      Promise.reject(err);
+    });
+};
 
 export const sendPostRequest = (url: string, body?: any) => {
   const reqBody = sanitizeBody(body);
-  return axios.post("/api" + url, {
-    body: reqBody,
-    headers: DEFAULT_HEADERS
-  }).then(res => res).catch(err => {
-    message.error(err);
-    Promise.reject(err);
-  });
-}
+  return axios
+    .post<null, any>('/api' + url, {
+      body: reqBody,
+      headers: DEFAULT_HEADERS,
+    })
+    .then((res) => res)
+    .catch((err) => {
+      message.error(err);
+      Promise.reject(err);
+    });
+};
 
 export const sendSpacePostRequest = (url: string, body?: any) => {
-  return axios.post(url, body, {
-    headers: DEFAULT_HEADERS
-  }).then(res => res).catch(err => {
-    message.error(err);
-    Promise.reject(err);
-  });
-}
+  return axios
+    .post<null, any>(url, body, {
+      headers: DEFAULT_HEADERS,
+    })
+    .then((res) => res)
+    .catch((err) => {
+      message.error(err);
+      Promise.reject(err);
+    });
+};
 
 export const sendSpaceUploadPostRequest = (url: string, body?: any) => {
-  return axios.post(url, body).then(res => res).catch(err => {
-    message.error(err);
-    Promise.reject(err);
-  });
-}
\ No newline at end of file
+  return axios
+    .post<null, any>(url, body)
+    .then((res) => res)
+    .catch((err) => {
+      message.error(err);
+      Promise.reject(err);
+    });
+};