@lobehub/chat 1.43.6 → 1.44.0

package/src/app/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import { ProviderCombine } from '@lobehub/icons';
+import { Avatar, Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
+import { useDebounceFn } from 'ahooks';
+import { Input, Skeleton, Switch } from 'antd';
+import { createStyles } from 'antd-style';
+import { LockIcon } from 'lucide-react';
+import Link from 'next/link';
+import { ReactNode, memo, useLayoutEffect } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import InstantSwitch from '@/components/InstantSwitch';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
+import { isServerMode } from '@/const/version';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+import {
+  AiProviderDetailItem,
+  AiProviderSourceEnum,
+  AiProviderSourceType,
+} from '@/types/aiProvider';
+
+import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
+import Checker from './Checker';
+import { SkeletonInput } from './SkeletonInput';
+import UpdateProviderInfo from './UpdateProviderInfo';
+
+const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
+  aceGcm: css`
+    padding-block: 0 !important;
+    .${prefixCls}-form-item-label {
+      display: none;
+    }
+    .${prefixCls}-form-item-control {
+      width: 100%;
+
+      font-size: 12px;
+      color: ${token.colorTextSecondary};
+      text-align: center;
+
+      opacity: 0.66;
+
+      transition: opacity 0.2s ${token.motionEaseInOut};
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  `,
+  form: css`
+    .${prefixCls}-form-item-control:has(.${prefixCls}-input,.${prefixCls}-select) {
+      flex: none;
+      width: min(70%, 800px);
+      min-width: min(70%, 800px) !important;
+    }
+    ${responsive.mobile} {
+      width: 100%;
+      min-width: unset !important;
+    }
+    .${prefixCls}-select-selection-overflow-item {
+      font-size: 12px;
+    }
+  `,
+  help: css`
+    border-radius: 50%;
+
+    font-size: 12px;
+    font-weight: 500;
+    color: ${token.colorTextDescription};
+
+    background: ${token.colorFillTertiary};
+
+    &:hover {
+      color: ${token.colorText};
+      background: ${token.colorFill};
+    }
+  `,
+  switchLoading: css`
+    width: 44px !important;
+    min-width: 44px !important;
+    height: 22px !important;
+    border-radius: 12px !important;
+  `,
+}));
+
+export interface ProviderConfigProps extends Omit<AiProviderDetailItem, 'enabled' | 'source'> {
+  apiKeyItems?: FormItemProps[];
+  canDeactivate?: boolean;
+  checkerItem?: FormItemProps;
+  className?: string;
+  enabled?: boolean;
+  extra?: ReactNode;
+  hideSwitch?: boolean;
+  modelList?: {
+    azureDeployName?: boolean;
+    notFoundContent?: ReactNode;
+    placeholder?: string;
+    showModelFetcher?: boolean;
+  };
+  showAceGcm?: boolean;
+  source?: AiProviderSourceType;
+  title?: ReactNode;
+}
+
+const ProviderConfig = memo<ProviderConfigProps>(
+  ({
+    apiKeyItems,
+    id,
+    settings,
+    checkModel,
+    checkerItem,
+    logo,
+    className,
+    name,
+    showAceGcm = true,
+    extra,
+    source = AiProviderSourceEnum.Builtin,
+  }) => {
+    const {
+      proxyUrl,
+      showApiKey = true,
+      defaultShowBrowserRequest,
+      disableBrowserRequest,
+      showChecker = true,
+    } = settings;
+    const { t } = useTranslation('modelProvider');
+    const [form] = Form.useForm();
+    const { cx, styles } = useStyles();
+
+    const [
+      toggleProviderEnabled,
+      useFetchAiProviderItem,
+      updateAiProviderConfig,
+      enabled,
+      isLoading,
+      isFetchOnClient,
+      isProviderEndpointNotEmpty,
+      isProviderApiKeyNotEmpty,
+    ] = useAiInfraStore((s) => [
+      s.toggleProviderEnabled,
+      s.useFetchAiProviderItem,
+      s.updateAiProviderConfig,
+      aiProviderSelectors.isProviderEnabled(id)(s),
+      aiProviderSelectors.isAiProviderConfigLoading(id)(s),
+      aiProviderSelectors.isProviderFetchOnClient(id)(s),
+      aiProviderSelectors.isActiveProviderEndpointNotEmpty(s),
+      aiProviderSelectors.isActiveProviderApiKeyNotEmpty(s),
+    ]);
+
+    const { data } = useFetchAiProviderItem(id);
+
+    useLayoutEffect(() => {
+      if (isLoading) return;
+
+      // set the first time
+      form.setFieldsValue(data);
+    }, [isLoading, id, data]);
+
+    const { run: debouncedUpdate } = useDebounceFn(updateAiProviderConfig, { wait: 500 });
+
+    const isCustom = source === AiProviderSourceEnum.Custom;
+
+    const apiKeyItem: FormItemProps[] = !showApiKey
+      ? []
+      : (apiKeyItems ?? [
+          {
+            children: isLoading ? (
+              <SkeletonInput />
+            ) : (
+              <Input.Password
+                autoComplete={'new-password'}
+                placeholder={t(`providerModels.config.apiKey.placeholder`, { name })}
+              />
+            ),
+            desc: t(`providerModels.config.apiKey.desc`, { name }),
+            label: t(`providerModels.config.apiKey.title`),
+            name: [KeyVaultsConfigKey, LLMProviderApiTokenKey],
+          },
+        ]);
+
+    const aceGcmItem: FormItemProps = {
+      children: (
+        <>
+          <Icon icon={LockIcon} style={{ marginRight: 4 }} />
+          <Trans i18nKey="providerModels.config.aesGcm" ns={'modelProvider'}>
+            您的秘钥与代理地址等将使用
+            <Link href={AES_GCM_URL} style={{ marginInline: 4 }} target={'_blank'}>
+              AES-GCM
+            </Link>
+            加密算法进行加密
+          </Trans>
+        </>
+      ),
+      className: styles.aceGcm,
+      minWidth: undefined,
+    };
+
+    const showEndpoint = !!proxyUrl || isCustom;
+
+    const endpointItem = showEndpoint
+      ? {
+          children: isLoading ? (
+            <SkeletonInput />
+          ) : (
+            <Input
+              allowClear
+              placeholder={
+                (!!proxyUrl && proxyUrl?.placeholder) ||
+                t('providerModels.config.baseURL.placeholder')
+              }
+            />
+          ),
+          desc: (!!proxyUrl && proxyUrl?.desc) || t('providerModels.config.baseURL.desc'),
+          label: (!!proxyUrl && proxyUrl?.title) || t('providerModels.config.baseURL.title'),
+          name: [KeyVaultsConfigKey, LLMProviderBaseUrlKey],
+        }
+      : undefined;
+
+    /*
+     * Conditions to show Client Fetch Switch
+     * 1. provider is not disabled browser request
+     * 2. provider show browser request by default
+     * 3. Provider allow to edit endpoint and the value of endpoint is not empty
+     * 4. There is an apikey provided by user
+     */
+    const showClientFetch =
+      !disableBrowserRequest &&
+      (defaultShowBrowserRequest ||
+        (showEndpoint && isProviderEndpointNotEmpty) ||
+        (showApiKey && isProviderApiKeyNotEmpty));
+    const clientFetchItem = showClientFetch && {
+      children: isLoading ? (
+        <Skeleton.Button active className={styles.switchLoading} />
+      ) : (
+        <Switch disabled={isLoading} value={isFetchOnClient} />
+      ),
+      desc: t('providerModels.config.fetchOnClient.desc'),
+      label: t('providerModels.config.fetchOnClient.title'),
+      minWidth: undefined,
+      name: 'fetchOnClient',
+    };
+
+    const configItems = [
+      ...apiKeyItem,
+      endpointItem,
+      clientFetchItem,
+      showChecker
+        ? (checkerItem ?? {
+            children: isLoading ? (
+              <Skeleton.Button active />
+            ) : (
+              <Checker model={checkModel!} provider={id} />
+            ),
+            desc: t('providerModels.config.checker.desc'),
+            label: t('providerModels.config.checker.title'),
+            minWidth: undefined,
+          })
+        : undefined,
+      showAceGcm && isServerMode && aceGcmItem,
+    ].filter(Boolean) as FormItemProps[];
+
+    const logoUrl = data?.logo ?? logo;
+    const model: ItemGroup = {
+      children: configItems,
+
+      defaultActive: true,
+
+      extra: (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {extra}
+
+          {isCustom && <UpdateProviderInfo />}
+          {isLoading ? (
+            <Skeleton.Button active className={styles.switchLoading} />
+          ) : (
+            <InstantSwitch
+              enabled={enabled}
+              onChange={async (enabled) => {
+                await toggleProviderEnabled(id as any, enabled);
+              }}
+            />
+          )}
+        </Flexbox>
+      ),
+      title: (
+        <Flexbox
+          align={'center'}
+          gap={4}
+          horizontal
+          style={{
+            height: 24,
+            maxHeight: 24,
+            ...(enabled ? {} : { filter: 'grayscale(100%)', maxHeight: 24, opacity: 0.66 }),
+          }}
+        >
+          {isCustom ? (
+            <Flexbox align={'center'} gap={8} horizontal>
+              {logoUrl ? (
+                <Avatar avatar={logoUrl} shape={'circle'} size={32} title={name || id} />
+              ) : (
+                <ProviderCombine provider={'not-exist-provider'} size={24} />
+              )}
+              {name}
+            </Flexbox>
+          ) : (
+            <ProviderCombine provider={id} size={24} />
+          )}
+          <Tooltip title={t('providerModels.config.helpDoc')}>
+            <Link
+              href={urlJoin(BASE_PROVIDER_DOC_URL, id)}
+              onClick={(e) => e.stopPropagation()}
+              target={'_blank'}
+            >
+              <Center className={styles.help} height={20} width={20}>
+                ?
+              </Center>
+            </Link>
+          </Tooltip>
+        </Flexbox>
+      ),
+    };
+
+    return (
+      <Form
+        className={cx(styles.form, className)}
+        form={form}
+        items={[model]}
+        onValuesChange={(_, values) => {
+          debouncedUpdate(id, values);
+        }}
+        variant={'pure'}
+        {...FORM_STYLE}
+      />
+    );
+  },
+);
+
+export default ProviderConfig;
+
+export { SkeletonInput } from './SkeletonInput';

package/src/app/(main)/settings/provider/layout.tsx

@@ -0,0 +1,21 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import ServerLayout from '@/components/server/ServerLayout';
+import { serverFeatureFlags } from '@/config/featureFlags';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const Layout = ServerLayout({ Desktop, Mobile });
+
+const ProviderSettingsLayout = ({ children }: PropsWithChildren) => {
+  const showLLM = serverFeatureFlags().showProvider;
+  if (!showLLM) return notFound();
+
+  return <Layout>{children}</Layout>;
+};
+
+ProviderSettingsLayout.displayName = 'ProviderSettingsLayout';
+
+export default ProviderSettingsLayout;

package/src/app/(main)/settings/provider/page.tsx

@@ -0,0 +1,17 @@
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+
+import Page from './(list)';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('tab.provider'),
+    url: '/settings/provider',
+  });
+};
+
+export default () => {
+  return <Page />;
+};

package/src/app/(main)/settings/provider/type.ts

@@ -0,0 +1,5 @@
+import { ProviderConfigProps } from './features/ProviderConfig';
+
+export interface ProviderItem extends Omit<ProviderConfigProps, 'id' | 'source'> {
+  id: string;
+}

package/src/app/(main)/settings/sync/features/DeviceInfo/Card.tsx

@@ -4,8 +4,8 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
-    background: ${token.colorFillTertiary};
     border-radius: ${token.borderRadius}px;
+    background: ${token.colorFillTertiary};
 
     .${responsive.mobile} {
       width: 100%;

package/src/app/(main)/settings/sync/features/DeviceInfo/index.tsx

@@ -23,8 +23,8 @@ const useStyles = createStyles(({ css, cx, responsive, isDarkMode, token, stylis
   content: css`
     z-index: 2;
     padding: 8px;
-    background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
     border-radius: ${token.borderRadiusLG - 1}px;
+    background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
   `,
   glow: cx(
     stylish.gradientAnimation,

package/src/app/@modal/(.)changelog/modal/features/ReadDetail.tsx

@@ -19,9 +19,9 @@ const useStyles = createStyles(
 
     margin-block: 16px 32px;
     padding: 16px;
+    border-radius: ${token.borderRadiusLG}px;
 
     background: ${token.colorFillTertiary};
-    border-radius: ${token.borderRadiusLG}px;
   `,
 );
 

package/src/app/@modal/(.)changelog/modal/features/VersionTag.tsx

@@ -10,10 +10,9 @@ const useStyles = createStyles(({ token, css }) => {
       margin: 0;
       padding-block: 4px;
       padding-inline: 12px;
+      border-radius: 16px;
 
       color: ${token.colorTextSecondary};
-
-      border-radius: 16px;
     `,
   };
 });

package/src/app/@modal/(.)changelog/modal/layout.tsx

@@ -11,8 +11,8 @@ import Pagination from './features/Pagination';
 const useStyles = createStyles(
   ({ css, prefixCls, token }) => css`
     .${prefixCls}-modal-close {
-      background: ${token.colorBgElevated} !important;
       border: 1px solid ${token.colorBorderSecondary};
+      background: ${token.colorBgElevated} !important;
     }
   `,
 );

package/src/components/Cell/index.tsx

@@ -9,8 +9,8 @@ import Divider from './Divider';
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
     position: relative;
-    font-size: 15px;
     border-radius: 0;
+    font-size: 15px;
 
     &:active {
       background: ${token.colorFillTertiary};

package/src/components/DragUpload/index.tsx

@@ -19,15 +19,14 @@ const useStyles = createStyles(({ css, token }) => {
       width: 320px;
       height: 200px;
       padding: ${token.borderRadiusLG + 4}px;
+      border-radius: 16px;
 
       background: ${token.geekblue};
-      border-radius: 16px;
     `,
     content: css`
       width: 100%;
       height: 100%;
       padding: 16px;
-
       border: 1.5px dashed #fff;
       border-radius: ${token.borderRadiusLG}px;
     `,
@@ -37,9 +36,9 @@ const useStyles = createStyles(({ css, token }) => {
       color: #fff;
     `,
     icon: css`
+      border-radius: ${token.borderRadiusLG}px;
       color: ${darken(0.05, token.geekblue)};
       background: ${lighten(0.38, token.geekblue)};
-      border-radius: ${token.borderRadiusLG}px;
     `,
     iconGroup: css`
       margin-block-start: -44px;

package/src/components/FeatureList/index.tsx

@@ -20,8 +20,8 @@ const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
   iconCtn: css`
     width: 72px;
     height: 72px;
-    background: ${isDarkMode ? token.blue1 : token.geekblue1};
     border-radius: 50%;
+    background: ${isDarkMode ? token.blue1 : token.geekblue1};
   `,
   title: css`
     margin-block-end: 0;

package/src/components/FileParsingStatus/EmbeddingStatus.tsx

@@ -12,12 +12,12 @@ import { AsyncTaskStatus, FileParsingTask } from '@/types/asyncTask';
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   errorReason: css`
     padding: 4px;
+    border-radius: 4px;
 
     font-family: monospace;
     font-size: 12px;
 
     background: ${isDarkMode ? darken(0.1, token.colorText) : lighten(0.1, token.colorText)};
-    border-radius: 4px;
   `,
 }));
 

package/src/components/FileParsingStatus/index.tsx

@@ -14,12 +14,12 @@ import EmbeddingStatus from './EmbeddingStatus';
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   errorReason: css`
     padding: 4px;
+    border-radius: 4px;
 
     font-family: monospace;
     font-size: 12px;
 
     background: ${isDarkMode ? darken(0.1, token.colorText) : lighten(0.1, token.colorText)};
-    border-radius: 4px;
   `,
 }));
 

package/src/components/FunctionModal/style.tsx

@@ -10,11 +10,11 @@ export const useStyles = createStyles(({ css, token, prefixCls, isDarkMode, resp
 
         width: min(90vw, 450px);
         padding: 0;
-
-        background: ${isDarkMode ? token.colorBgElevated : token.colorBgLayout};
         border: 1px solid ${token.colorSplit};
         border-radius: ${token.borderRadiusLG}px;
 
+        background: ${isDarkMode ? token.colorBgElevated : token.colorBgLayout};
+
         ${responsive.mobile} {
           width: unset;
         }

package/src/components/GoBack/index.tsx

@@ -12,11 +12,10 @@ const useStyles = createStyles(({ css, token }) => {
       width: fit-content;
       height: 24px;
       padding-inline: 8px;
+      border-radius: 6px;
 
       color: ${token.colorTextTertiary};
 
-      border-radius: 6px;
-
       &:hover {
         color: ${token.colorTextSecondary};
         background: ${token.colorFillTertiary};

package/src/components/HotKeys/index.tsx

@@ -19,13 +19,13 @@ const useStyles = createStyles(
       min-width: 16px;
       height: 22px;
       padding-inline: 8px;
+      border-radius: ${token.borderRadius}px;
 
       line-height: 22px;
       color: ${inverseTheme ? token.colorTextTertiary : token.colorTextSecondary};
       text-align: center;
 
       background: ${inverseTheme ? rgba(token.colorTextTertiary, 0.15) : token.colorFillTertiary};
-      border-radius: ${token.borderRadius}px;
     }
   `,
 );

package/src/components/InstantSwitch/index.tsx

@@ -0,0 +1,28 @@
+import { Switch, SwitchProps } from 'antd';
+import { memo, useState } from 'react';
+
+interface InstantSwitchProps {
+  enabled: boolean;
+  onChange: (enabled: boolean) => Promise<void>;
+  size?: SwitchProps['size'];
+}
+
+const InstantSwitch = memo<InstantSwitchProps>(({ enabled, onChange, size }) => {
+  const [value, setValue] = useState(enabled);
+  const [loading, setLoading] = useState(false);
+  return (
+    <Switch
+      loading={loading}
+      onChange={async (enabled) => {
+        setLoading(true);
+        setValue(enabled);
+        await onChange(enabled);
+        setLoading(false);
+      }}
+      size={size}
+      value={value}
+    />
+  );
+});
+
+export default InstantSwitch;

package/src/components/Menu/index.tsx

@@ -10,8 +10,8 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
   `,
   menu: css`
     flex: 1;
-    background: transparent;
     border: none !important;
+    background: transparent;
 
     .${prefixCls}-menu-item-divider {
       margin-block: 0.125rem;

package/src/components/ModelSelect/index.tsx

@@ -17,13 +17,13 @@ const useStyles = createStyles(({ css, token }) => ({
   custom: css`
     width: 36px;
     height: 20px;
+    border-radius: 4px;
 
     font-family: ${token.fontFamilyCode};
     font-size: 12px;
     color: ${rgba(token.colorWarning, 0.75)};
 
     background: ${token.colorWarningBg};
-    border-radius: 4px;
   `,
   tag: css`
     cursor: default;
@@ -34,7 +34,6 @@ const useStyles = createStyles(({ css, token }) => ({
 
     width: 20px;
     height: 20px;
-
     border-radius: 4px;
   `,
   tagBlue: css`
@@ -48,13 +47,13 @@ const useStyles = createStyles(({ css, token }) => ({
   token: css`
     width: 36px;
     height: 20px;
+    border-radius: 4px;
 
     font-family: ${token.fontFamilyCode};
     font-size: 11px;
     color: ${token.colorTextSecondary};
 
     background: ${token.colorFillTertiary};
-    border-radius: 4px;
   `,
 }));
 

package/src/components/Notification/index.tsx

@@ -22,9 +22,10 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     overflow: hidden;
 
-    background: ${token.colorBgContainer};
     border: 1px solid ${token.colorSplit};
     border-radius: 8px;
+
+    background: ${token.colorBgContainer};
     box-shadow: ${token.boxShadowSecondary};
   `,
   mobileContainer: css`