diff --git a/web/src/pages/user-setting/data-source/contant.tsx b/web/src/pages/user-setting/data-source/contant.tsx
index b3e86e118..53cd2f8de 100644
--- a/web/src/pages/user-setting/data-source/contant.tsx
+++ b/web/src/pages/user-setting/data-source/contant.tsx
@@ -1,10 +1,13 @@
import { FormFieldType } from '@/components/dynamic-form';
import SvgIcon from '@/components/svg-icon';
-import { t } from 'i18next';
+import { t, TFunction } from 'i18next';
+import { useEffect, useState } from 'react';
import { ControllerRenderProps } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
import { ConfluenceIndexingModeField } from './component/confluence-token-field';
import GmailTokenField from './component/gmail-token-field';
import GoogleDriveTokenField from './component/google-drive-token-field';
+import { IDataSourceInfoMap } from './interface';
export enum DataSourceKey {
CONFLUENCE = 'confluence',
S3 = 's3',
@@ -21,57 +24,70 @@ export enum DataSourceKey {
// TEAMS = 'teams',
}
-export const DataSourceInfo = {
- [DataSourceKey.S3]: {
- name: 'S3',
- description: t(`setting.${DataSourceKey.S3}Description`),
- icon:
,
- },
- [DataSourceKey.NOTION]: {
- name: 'Notion',
- description: t(`setting.${DataSourceKey.NOTION}Description`),
- icon:
,
- },
- [DataSourceKey.DISCORD]: {
- name: 'Discord',
- description: t(`setting.${DataSourceKey.DISCORD}Description`),
- icon:
,
- },
- [DataSourceKey.CONFLUENCE]: {
- name: 'Confluence',
- description: t(`setting.${DataSourceKey.CONFLUENCE}Description`),
- icon:
,
- },
- [DataSourceKey.GOOGLE_DRIVE]: {
- name: 'Google Drive',
- description: t(`setting.${DataSourceKey.GOOGLE_DRIVE}Description`),
- icon:
,
- },
- [DataSourceKey.GMAIL]: {
- name: 'Gmail',
- description: t(`setting.${DataSourceKey.GMAIL}Description`),
- icon:
,
- },
- [DataSourceKey.MOODLE]: {
- name: 'Moodle',
- description: t(`setting.${DataSourceKey.MOODLE}Description`),
- icon:
,
- },
- [DataSourceKey.JIRA]: {
- name: 'Jira',
- description: t(`setting.${DataSourceKey.JIRA}Description`),
- icon:
,
- },
- [DataSourceKey.WEBDAV]: {
- name: 'WebDAV',
- description: t(`setting.${DataSourceKey.WEBDAV}Description`),
- icon:
,
- },
- [DataSourceKey.DROPBOX]: {
- name: 'Dropbox',
- description: t(`setting.${DataSourceKey.DROPBOX}Description`),
- icon:
,
- },
+export const generateDataSourceInfo = (t: TFunction) => {
+ return {
+ [DataSourceKey.S3]: {
+ name: 'S3',
+ description: t(`setting.${DataSourceKey.S3}Description`),
+ icon:
,
+ },
+ [DataSourceKey.NOTION]: {
+ name: 'Notion',
+ description: t(`setting.${DataSourceKey.NOTION}Description`),
+ icon:
,
+ },
+ [DataSourceKey.DISCORD]: {
+ name: 'Discord',
+ description: t(`setting.${DataSourceKey.DISCORD}Description`),
+ icon:
,
+ },
+ [DataSourceKey.CONFLUENCE]: {
+ name: 'Confluence',
+ description: t(`setting.${DataSourceKey.CONFLUENCE}Description`),
+ icon:
,
+ },
+ [DataSourceKey.GOOGLE_DRIVE]: {
+ name: 'Google Drive',
+ description: t(`setting.${DataSourceKey.GOOGLE_DRIVE}Description`),
+ icon:
,
+ },
+ [DataSourceKey.GMAIL]: {
+ name: 'Gmail',
+ description: t(`setting.${DataSourceKey.GMAIL}Description`),
+ icon:
,
+ },
+ [DataSourceKey.MOODLE]: {
+ name: 'Moodle',
+ description: t(`setting.${DataSourceKey.MOODLE}Description`),
+ icon:
,
+ },
+ [DataSourceKey.JIRA]: {
+ name: 'Jira',
+ description: t(`setting.${DataSourceKey.JIRA}Description`),
+ icon:
,
+ },
+ [DataSourceKey.WEBDAV]: {
+ name: 'WebDAV',
+ description: t(`setting.${DataSourceKey.WEBDAV}Description`),
+ icon:
,
+ },
+ [DataSourceKey.DROPBOX]: {
+ name: 'Dropbox',
+ description: t(`setting.${DataSourceKey.DROPBOX}Description`),
+ icon:
,
+ },
+ };
+};
+
+export const useDataSourceInfo = () => {
+ const { t } = useTranslation();
+ const [dataSourceInfo, setDataSourceInfo] = useState
(
+ generateDataSourceInfo(t) as IDataSourceInfoMap,
+ );
+ useEffect(() => {
+ setDataSourceInfo(generateDataSourceInfo(t));
+ }, [t]);
+ return { dataSourceInfo };
};
export const DataSourceFormBaseFields = [
diff --git a/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx b/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
index f399fd21d..5f24f8e24 100644
--- a/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
+++ b/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
@@ -18,7 +18,7 @@ import {
DataSourceFormBaseFields,
DataSourceFormDefaultValues,
DataSourceFormFields,
- DataSourceInfo,
+ useDataSourceInfo,
} from '../contant';
import {
useAddDataSource,
@@ -32,10 +32,10 @@ const SourceDetailPage = () => {
const { data: detail } = useFetchDataSourceDetail();
const { handleResume } = useDataSourceResume();
-
+ const { dataSourceInfo } = useDataSourceInfo();
const detailInfo = useMemo(() => {
if (detail) {
- return DataSourceInfo[detail.source];
+ return dataSourceInfo[detail.source];
}
}, [detail]);
diff --git a/web/src/pages/user-setting/data-source/hooks.ts b/web/src/pages/user-setting/data-source/hooks.ts
index 63b2f1a80..a07e3c72d 100644
--- a/web/src/pages/user-setting/data-source/hooks.ts
+++ b/web/src/pages/user-setting/data-source/hooks.ts
@@ -12,10 +12,11 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
import { t } from 'i18next';
import { useCallback, useMemo, useState } from 'react';
import { useParams, useSearchParams } from 'umi';
-import { DataSourceInfo, DataSourceKey } from './contant';
+import { DataSourceKey, useDataSourceInfo } from './contant';
import { IDataSorceInfo, IDataSource, IDataSourceBase } from './interface';
export const useListDataSource = () => {
+ const { dataSourceInfo } = useDataSourceInfo();
const { data: list, isFetching } = useQuery({
queryKey: ['data-source'],
queryFn: async () => {
@@ -49,12 +50,12 @@ export const useListDataSource = () => {
[];
Object.keys(categorizedData).forEach((key: string) => {
const k = key as DataSourceKey;
- if (DataSourceInfo[k]) {
+ if (dataSourceInfo[k]) {
sourceList.push({
id: k,
- name: DataSourceInfo[k].name,
- description: DataSourceInfo[k].description,
- icon: DataSourceInfo[k].icon,
+ name: dataSourceInfo[k].name,
+ description: dataSourceInfo[k].description,
+ icon: dataSourceInfo[k].icon,
list: categorizedData[k] || [],
});
}
diff --git a/web/src/pages/user-setting/data-source/index.tsx b/web/src/pages/user-setting/data-source/index.tsx
index af7d6c650..9830f4549 100644
--- a/web/src/pages/user-setting/data-source/index.tsx
+++ b/web/src/pages/user-setting/data-source/index.tsx
@@ -10,21 +10,21 @@ import {
} from '../components/user-setting-header';
import AddDataSourceModal from './add-datasource-modal';
import { AddedSourceCard } from './component/added-source-card';
-import { DataSourceInfo, DataSourceKey } from './contant';
+import { DataSourceKey, useDataSourceInfo } from './contant';
import { useAddDataSource, useListDataSource } from './hooks';
import { IDataSorceInfo } from './interface';
-const dataSourceTemplates = Object.values(DataSourceKey).map((id) => {
- return {
- id,
- name: DataSourceInfo[id].name,
- description: DataSourceInfo[id].description,
- icon: DataSourceInfo[id].icon,
- };
-});
-
const DataSource = () => {
const { t } = useTranslation();
+ const { dataSourceInfo } = useDataSourceInfo();
+ const dataSourceTemplates = Object.values(DataSourceKey).map((id) => {
+ return {
+ id,
+ name: dataSourceInfo[id].name,
+ description: dataSourceInfo[id].description,
+ icon: dataSourceInfo[id].icon,
+ };
+ });
// useListTenantUser();
const { categorizedList } = useListDataSource();
diff --git a/web/src/pages/user-setting/data-source/interface.ts b/web/src/pages/user-setting/data-source/interface.ts
index 5e237857e..5cca99748 100644
--- a/web/src/pages/user-setting/data-source/interface.ts
+++ b/web/src/pages/user-setting/data-source/interface.ts
@@ -43,3 +43,11 @@ export interface IDataSourceLog {
tenant_id: string;
timeout_secs: number;
}
+
+interface IDataSourceInfoItem {
+ name: string;
+ description: string;
+ icon: JSX.Element;
+}
+
+export type IDataSourceInfoMap = Record;
diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx
index 476bf9ce6..b0982e3ca 100644
--- a/web/src/pages/user-setting/sidebar/index.tsx
+++ b/web/src/pages/user-setting/sidebar/index.tsx
@@ -11,12 +11,13 @@ import {
} from '@/hooks/use-user-setting-request';
import { cn } from '@/lib/utils';
import { Routes } from '@/routes';
-import { t } from 'i18next';
+import { TFunction } from 'i18next';
import { Banknote, Box, Server, Unplug, User, Users } from 'lucide-react';
import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
import { useHandleMenuClick } from './hooks';
-const menuItems = [
+const menuItems = (t: TFunction) => [
{ icon: Server, label: t('setting.dataSources'), key: Routes.DataSource },
{ icon: Box, label: t('setting.model'), key: Routes.Model },
{ icon: Banknote, label: 'MCP', key: Routes.Mcp },
@@ -32,12 +33,12 @@ const menuItems = [
// { icon: Cog, label: t('setting.system'), key: Routes.System },
// { icon: Banknote, label: 'Plan', key: Routes.Plan },
];
-
export function SideBar() {
const pathName = useSecondPathName();
const { data: userInfo } = useFetchUserInfo();
const { handleMenuClick, active } = useHandleMenuClick();
const { version, fetchSystemVersion } = useFetchSystemVersion();
+ const { t } = useTranslation();
useEffect(() => {
if (location.host !== Domain) {
fetchSystemVersion();
@@ -56,7 +57,7 @@ export function SideBar() {
{userInfo?.email}