🚧 refactor: wip of refactor

lobehub · Dec 22, 2024 · 16cf27a · 16cf27a
1 parent 50cef98
commit 16cf27a
Show file tree

Hide file tree

Showing 36 changed files with 2,112 additions and 28 deletions.
diff --git a/src/app/(main)/settings/hooks/useCategory.tsx b/src/app/(main)/settings/hooks/useCategory.tsx
@@ -36,6 +36,16 @@ export const useCategory = () => {
             </Link>
           ),
         },
+        {
+          icon: <Icon icon={Bot} />,
+          key: SettingsTabs.Agent,
+          label: (
+            <Link href={'/settings/agent'} onClick={(e) => e.preventDefault()}>
+              {t('tab.agent')}
+            </Link>
+          ),
+        },
+
         enableWebrtc && {
           icon: <Icon icon={Cloudy} />,
           key: SettingsTabs.Sync,
@@ -50,34 +60,41 @@ export const useCategory = () => {
             </Link>
           ),
         },
-        showLLM && {
-          icon: <Icon icon={Brain} />,
-          key: SettingsTabs.LLM,
-          label: (
-            <Link href={'/settings/llm'} onClick={(e) => e.preventDefault()}>
-              {t('tab.llm')}
-            </Link>
-          ),
-        },
-
-        enableSTT && {
-          icon: <Icon icon={Mic2} />,
-          key: SettingsTabs.TTS,
-          label: (
-            <Link href={'/settings/tts'} onClick={(e) => e.preventDefault()}>
-              {t('tab.tts')}
-            </Link>
-          ),
-        },
         {
-          icon: <Icon icon={Bot} />,
-          key: SettingsTabs.Agent,
-          label: (
-            <Link href={'/settings/agent'} onClick={(e) => e.preventDefault()}>
-              {t('tab.agent')}
-            </Link>
-          ),
+          children: [
+            showLLM && {
+              icon: <Icon icon={Brain} />,
+              key: SettingsTabs.Provider,
+              label: (
+                <Link href={'/settings/provider'} onClick={(e) => e.preventDefault()}>
+                  {t('tab.provider')}
+                </Link>
+              ),
+            },
+            showLLM && {
+              icon: <Icon icon={Brain} />,
+              key: SettingsTabs.LLM,
+              label: (
+                <Link href={'/settings/llm'} onClick={(e) => e.preventDefault()}>
+                  {t('tab.llm')}
+                </Link>
+              ),
+            },
+            enableSTT && {
+              icon: <Icon icon={Mic2} />,
+              key: SettingsTabs.TTS,
+              label: (
+                <Link href={'/settings/tts'} onClick={(e) => e.preventDefault()}>
+                  {t('tab.tts')}
+                </Link>
+              ),
+            },
+          ],
+          key: 'ai',
+          label: 'AI Engine',
+          type: 'group',
         },
+
         !hideDocs && {
           icon: <Icon icon={Info} />,
           key: SettingsTabs.About,

diff --git a/src/app/(main)/settings/provider/ProviderList/Azure/index.tsx b/src/app/(main)/settings/provider/ProviderList/Azure/index.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { Markdown } from '@lobehub/ui';
+import { AutoComplete, Input } from 'antd';
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+
+import { AzureProviderCard } from '@/config/modelProviders';
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+
+import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
+import { ProviderItem } from '../../type';
+
+const useStyles = createStyles(({ css, token }) => ({
+  markdown: css`
+    p {
+      color: ${token.colorTextDescription} !important;
+    }
+  `,
+  tip: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const providerKey = ModelProvider.Azure;
+
+export const useAzureProvider = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+  const { styles } = useStyles();
+
+  // Get the first model card's deployment name as the check model
+  const checkModel = useUserStore((s) => {
+    const chatModelCards = modelProviderSelectors.getModelCardsById(providerKey)(s);
+
+    if (chatModelCards.length > 0) {
+      return chatModelCards[0].deploymentName;
+    }
+
+    return 'gpt-35-turbo';
+  });
+  return {
+    ...AzureProviderCard,
+    apiKeyItems: [
+      {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t('azure.token.placeholder')}
+          />
+        ),
+        desc: t('azure.token.desc'),
+        label: t('azure.token.title'),
+        name: [KeyVaultsConfigKey, providerKey, LLMProviderApiTokenKey],
+      },
+      {
+        children: <Input allowClear placeholder={t('azure.endpoint.placeholder')} />,
+        desc: t('azure.endpoint.desc'),
+        label: t('azure.endpoint.title'),
+        name: [KeyVaultsConfigKey, providerKey, 'endpoint'],
+      },
+      {
+        children: (
+          <AutoComplete
+            options={[
+              '2024-06-01',
+              '2024-02-01',
+              '2024-05-01-preview',
+              '2024-04-01-preview',
+              '2024-03-01-preview',
+              '2024-02-15-preview',
+              '2023-10-01-preview',
+              '2023-06-01-preview',
+              '2023-05-15',
+            ].map((i) => ({ label: i, value: i }))}
+            placeholder={'20XX-XX-XX'}
+          />
+        ),
+        desc: (
+          <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
+            {t('azure.azureApiVersion.desc')}
+          </Markdown>
+        ),
+        label: t('azure.azureApiVersion.title'),
+        name: [KeyVaultsConfigKey, providerKey, 'apiVersion'],
+      },
+    ],
+    checkModel,
+    modelList: {
+      azureDeployName: true,
+      notFoundContent: t('azure.empty'),
+      placeholder: t('azure.modelListPlaceholder'),
+    },
+  };
+};
diff --git a/src/app/(main)/settings/provider/ProviderList/Bedrock/index.tsx b/src/app/(main)/settings/provider/ProviderList/Bedrock/index.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { Input, Select } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { BedrockProviderCard } from '@/config/modelProviders';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+import { KeyVaultsConfigKey } from '../../const';
+import { ProviderItem } from '../../type';
+
+const providerKey: GlobalLLMProviderKey = 'bedrock';
+
+export const useBedrockProvider = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+
+  return {
+    ...BedrockProviderCard,
+    apiKeyItems: [
+      {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.accessKeyId.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.accessKeyId.desc`),
+        label: t(`${providerKey}.accessKeyId.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'accessKeyId'],
+      },
+      {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.secretAccessKey.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.secretAccessKey.desc`),
+        label: t(`${providerKey}.secretAccessKey.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'secretAccessKey'],
+      },
+      {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.sessionToken.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.sessionToken.desc`),
+        label: t(`${providerKey}.sessionToken.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'sessionToken'],
+      },
+      {
+        children: (
+          <Select
+            allowClear
+            options={['us-east-1', 'us-west-2', 'ap-southeast-1'].map((i) => ({
+              label: i,
+              value: i,
+            }))}
+            placeholder={'us-east-1'}
+          />
+        ),
+        desc: t(`${providerKey}.region.desc`),
+        label: t(`${providerKey}.region.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'region'],
+      },
+    ],
+  };
+};
diff --git a/src/app/(main)/settings/provider/ProviderList/Card.tsx b/src/app/(main)/settings/provider/ProviderList/Card.tsx
@@ -0,0 +1,98 @@
+import { ProviderCombine } from '@lobehub/icons';
+import { Switch, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+import { ModelProviderCard } from '@/types/llm';
+
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    height: 100%;
+    min-height: 100px;
+
+    background: ${token.colorBgContainer};
+    border-radius: 12px;
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
+
+    transition: box-shadow 0.2s ${token.motionEaseInOut};
+
+    &:hover {
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
+    }
+  `,
+  desc: css`
+    min-height: 22px;
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    zoom: 1.2;
+    margin-block-end: 0 !important;
+    font-size: 18px !important;
+    font-weight: bold;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
+
+export interface ProviderCardProps extends ModelProviderCard {
+  mobile?: boolean;
+}
+
+const ProviderCard = memo<ProviderCardProps>(({ id, description, name }) => {
+  const { t } = useTranslation(['discover', 'providers']);
+  const { cx, styles, theme } = useStyles();
+
+  const enabled = useUserStore(modelProviderSelectors.isProviderEnabled(id as any));
+  return (
+    <Flexbox className={cx(styles.container)} gap={24}>
+      <Flexbox gap={12} padding={16} width={'100%'}>
+        <Flexbox align={'center'} horizontal justify={'space-between'}>
+          <ProviderCombine
+            provider={id}
+            size={24}
+            style={{ color: theme.colorText }}
+            title={name}
+          />
+          {/*<SyncSwitch value={enabled} />*/}
+          <Switch checked={enabled} size={'small'} />
+        </Flexbox>
+        {description && (
+          <Paragraph className={styles.desc} ellipsis={{ rows: 1, tooltip: true }}>
+            {t(`${id}.description`, { ns: 'providers' })}
+          </Paragraph>
+        )}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ProviderCard;
diff --git a/src/app/(main)/settings/provider/ProviderList/Cloudflare/index.tsx b/src/app/(main)/settings/provider/ProviderList/Cloudflare/index.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { CloudflareProviderCard } from '@/config/modelProviders';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+import { KeyVaultsConfigKey } from '../../const';
+import { ProviderItem } from '../../type';
+
+const providerKey: GlobalLLMProviderKey = 'cloudflare';
+
+export const useCloudflareProvider = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+
+  return {
+    ...CloudflareProviderCard,
+    apiKeyItems: [
+      {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.apiKey.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.apiKey.desc`),
+        label: t(`${providerKey}.apiKey.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'apiKey'],
+      },
+      {
+        children: (
+          <Input
+            placeholder={t(`${providerKey}.baseURLOrAccountID.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.baseURLOrAccountID.desc`),
+        label: t(`${providerKey}.baseURLOrAccountID.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'baseURLOrAccountID'],
+      },
+    ],
+  };
+};