@lobehub/lobehub 2.0.0-next.2 → 2.0.0-next.4

package/src/app/[variants]/(main)/settings/llm/ProviderList/providers.tsx

@@ -1,132 +0,0 @@
-import { useMemo } from 'react';
-
-import {
-  Ai21ProviderCard,
-  Ai302ProviderCard,
-  Ai360ProviderCard,
-  AkashChatProviderCard,
-  AnthropicProviderCard,
-  BaichuanProviderCard,
-  CohereProviderCard,
-  DeepSeekProviderCard,
-  FireworksAIProviderCard,
-  GiteeAIProviderCard,
-  GoogleProviderCard,
-  GroqProviderCard,
-  HigressProviderCard,
-  HunyuanProviderCard,
-  InfiniAIProviderCard,
-  InternLMProviderCard,
-  JinaProviderCard,
-  MinimaxProviderCard,
-  MistralProviderCard,
-  MoonshotProviderCard,
-  NovitaProviderCard,
-  NvidiaProviderCard,
-  OllamaCloudProviderCard,
-  OpenRouterProviderCard,
-  PPIOProviderCard,
-  PerplexityProviderCard,
-  QiniuProviderCard,
-  QwenProviderCard,
-  SambaNovaProviderCard,
-  Search1APIProviderCard,
-  SenseNovaProviderCard,
-  SiliconCloudProviderCard,
-  SparkProviderCard,
-  StepfunProviderCard,
-  TaichuProviderCard,
-  TogetherAIProviderCard,
-  UpstageProviderCard,
-  V0ProviderCard,
-  VLLMProviderCard,
-  WenxinProviderCard,
-  XAIProviderCard,
-  XinferenceProviderCard,
-  ZeroOneProviderCard,
-  ZhiPuProviderCard,
-} from '@/config/modelProviders';
-
-import { ProviderItem } from '../type';
-import { useAzureProvider } from './Azure';
-import { useBedrockProvider } from './Bedrock';
-import { useCloudflareProvider } from './Cloudflare';
-import { useGithubProvider } from './Github';
-import { useHuggingFaceProvider } from './HuggingFace';
-import { useOllamaProvider } from './Ollama';
-import { useOpenAIProvider } from './OpenAI';
-
-export const useProviderList = (): ProviderItem[] => {
-  const AzureProvider = useAzureProvider();
-  const OllamaProvider = useOllamaProvider();
-  const OpenAIProvider = useOpenAIProvider();
-  const BedrockProvider = useBedrockProvider();
-  const CloudflareProvider = useCloudflareProvider();
-  const GithubProvider = useGithubProvider();
-  const HuggingFaceProvider = useHuggingFaceProvider();
-
-  return useMemo(
-    () => [
-      OpenAIProvider,
-      AzureProvider,
-      OllamaProvider,
-      VLLMProviderCard,
-      XinferenceProviderCard,
-      AnthropicProviderCard,
-      BedrockProvider,
-      GoogleProviderCard,
-      DeepSeekProviderCard,
-      HuggingFaceProvider,
-      OpenRouterProviderCard,
-      CloudflareProvider,
-      GithubProvider,
-      NovitaProviderCard,
-      TogetherAIProviderCard,
-      FireworksAIProviderCard,
-      GroqProviderCard,
-      NvidiaProviderCard,
-      PerplexityProviderCard,
-      MistralProviderCard,
-      Ai21ProviderCard,
-      UpstageProviderCard,
-      XAIProviderCard,
-      JinaProviderCard,
-      SambaNovaProviderCard,
-      Search1APIProviderCard,
-      CohereProviderCard,
-      V0ProviderCard,
-      QiniuProviderCard,
-      QwenProviderCard,
-      WenxinProviderCard,
-      HunyuanProviderCard,
-      SparkProviderCard,
-      ZhiPuProviderCard,
-      ZeroOneProviderCard,
-      SenseNovaProviderCard,
-      StepfunProviderCard,
-      MoonshotProviderCard,
-      BaichuanProviderCard,
-      MinimaxProviderCard,
-      Ai360ProviderCard,
-      TaichuProviderCard,
-      InternLMProviderCard,
-      SiliconCloudProviderCard,
-      HigressProviderCard,
-      GiteeAIProviderCard,
-      PPIOProviderCard,
-      InfiniAIProviderCard,
-      AkashChatProviderCard,
-      Ai302ProviderCard,
-      OllamaCloudProviderCard,
-    ],
-    [
-      AzureProvider,
-      OllamaProvider,
-      OpenAIProvider,
-      BedrockProvider,
-      CloudflareProvider,
-      GithubProvider,
-      HuggingFaceProvider,
-    ],
-  );
-};

package/src/app/[variants]/(main)/settings/llm/components/Checker.tsx

@@ -1,118 +0,0 @@
-'use client';
-
-import { CheckCircleFilled } from '@ant-design/icons';
-import { ChatMessageError, TraceNameMap } from '@lobechat/types';
-import { Alert, Button, Highlighter } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useIsMobile } from '@/hooks/useIsMobile';
-import { useProviderName } from '@/hooks/useProviderName';
-import { chatService } from '@/services/chat';
-
-interface ConnectionCheckerProps {
-  model: string;
-  provider: string;
-}
-
-const Error = memo<{ error: ChatMessageError }>(({ error }) => {
-  const { t } = useTranslation('error');
-  const providerName = useProviderName(error.body?.provider);
-
-  return (
-    <Flexbox gap={8} style={{ maxWidth: '600px', width: '100%' }}>
-      <Alert
-        banner
-        extra={
-          <Flexbox>
-            <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
-              {JSON.stringify(error.body || error, null, 2)}
-            </Highlighter>
-          </Flexbox>
-        }
-        message={t(`response.${error.type}` as any, { provider: providerName })}
-        showIcon
-        type={'error'}
-      />
-    </Flexbox>
-  );
-});
-
-const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
-  const { t } = useTranslation('setting');
-
-  const [loading, setLoading] = useState(false);
-  const [pass, setPass] = useState(false);
-
-  const theme = useTheme();
-  const [error, setError] = useState<ChatMessageError | undefined>();
-
-  const checkConnection = async () => {
-    let isError = false;
-
-    await chatService.fetchPresetTaskResult({
-      onError: (_, rawError) => {
-        setError(rawError);
-        setPass(false);
-        isError = true;
-      },
-      onFinish: async (value) => {
-        if (!isError && value) {
-          setError(undefined);
-          setPass(true);
-        } else {
-          setPass(false);
-          setError({
-            body: value,
-            message: t('response.ConnectionCheckFailed', { ns: 'error' }),
-            type: 'ConnectionCheckFailed',
-          });
-        }
-      },
-      onLoadingChange: (loading) => {
-        setLoading(loading);
-      },
-      params: {
-        messages: [
-          {
-            content: '你好',
-            role: 'user',
-          },
-        ],
-        model,
-        provider,
-      },
-      trace: {
-        sessionId: `connection:${provider}`,
-        topicId: model,
-        traceName: TraceNameMap.ConnectivityChecker,
-      },
-    });
-  };
-  const isMobile = useIsMobile();
-
-  return (
-    <Flexbox align={isMobile ? 'flex-start' : 'flex-end'} gap={8}>
-      <Flexbox align={'center'} direction={isMobile ? 'horizontal-reverse' : 'horizontal'} gap={12}>
-        {pass && (
-          <Flexbox gap={4} horizontal>
-            <CheckCircleFilled
-              style={{
-                color: theme.colorSuccess,
-              }}
-            />
-            {t('llm.checker.pass')}
-          </Flexbox>
-        )}
-        <Button loading={loading} onClick={checkConnection}>
-          {t('llm.checker.button')}
-        </Button>
-      </Flexbox>
-      {error && <Error error={error} />}
-    </Flexbox>
-  );
-});
-
-export default Checker;

package/src/app/[variants]/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -1,303 +0,0 @@
-'use client';
-
-import { ProviderCombine } from '@lobehub/icons';
-import {
-  Form,
-  type FormGroupItemType,
-  type FormItemProps,
-  Icon,
-  Input,
-  InputPassword,
-  Tooltip,
-} from '@lobehub/ui';
-import { Switch } from 'antd';
-import { createStyles } from 'antd-style';
-import { debounce } from 'lodash-es';
-import { LockIcon } from 'lucide-react';
-import Link from 'next/link';
-import { ReactNode, memo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
-import {
-  KeyVaultsConfigKey,
-  LLMProviderApiTokenKey,
-  LLMProviderBaseUrlKey,
-  LLMProviderConfigKey,
-  LLMProviderModelListKey,
-} from '@/app/[variants]/(main)/settings/llm/const';
-import { FORM_STYLE } from '@/const/layoutTokens';
-import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
-import { isServerMode } from '@/const/version';
-import { useUserStore } from '@/store/user';
-import { keyVaultsConfigSelectors, modelConfigSelectors } from '@/store/user/selectors';
-import { ModelProviderCard } from '@/types/llm';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import Checker from '../Checker';
-import ProviderModelListSelect from '../ProviderModelList';
-
-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};
-    }
-  `,
-}));
-
-export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id' | 'chatModels'> {
-  apiKeyItems?: FormItemProps[];
-  canDeactivate?: boolean;
-  checkerItem?: FormItemProps;
-  className?: string;
-  extra?: ReactNode;
-  hideSwitch?: boolean;
-  id: GlobalLLMProviderKey;
-  modelList?: {
-    azureDeployName?: boolean;
-    notFoundContent?: ReactNode;
-    placeholder?: string;
-    showModelFetcher?: boolean;
-  };
-  showAceGcm?: boolean;
-  title?: ReactNode;
-}
-
-const ProviderConfig = memo<ProviderConfigProps>(
-  ({
-    apiKeyItems,
-    id,
-    proxyUrl,
-    showApiKey = true,
-    checkModel,
-    canDeactivate = true,
-    checkerItem,
-    modelList,
-    title,
-    defaultShowBrowserRequest,
-    disableBrowserRequest,
-    className,
-    name,
-    showAceGcm = true,
-    showChecker = true,
-    extra,
-  }) => {
-    const { t } = useTranslation('setting');
-    const [form] = Form.useForm();
-    const { cx, styles } = useStyles();
-    const [
-      toggleProviderEnabled,
-      setSettings,
-      enabled,
-      isFetchOnClient,
-      isProviderEndpointNotEmpty,
-      isProviderApiKeyNotEmpty,
-    ] = useUserStore((s) => [
-      s.toggleProviderEnabled,
-      s.setSettings,
-      modelConfigSelectors.isProviderEnabled(id)(s),
-      modelConfigSelectors.isProviderFetchOnClient(id)(s),
-      keyVaultsConfigSelectors.isProviderEndpointNotEmpty(id)(s),
-      keyVaultsConfigSelectors.isProviderApiKeyNotEmpty(id)(s),
-    ]);
-
-    useSyncSettings(form);
-
-    const apiKeyItem: FormItemProps[] = !showApiKey
-      ? []
-      : (apiKeyItems ?? [
-          {
-            children: (
-              <InputPassword
-                autoComplete={'new-password'}
-                placeholder={t(`llm.apiKey.placeholder`, { name })}
-              />
-            ),
-            desc: t(`llm.apiKey.desc`, { name }),
-            label: t(`llm.apiKey.title`),
-            name: [KeyVaultsConfigKey, id, LLMProviderApiTokenKey],
-          },
-        ]);
-
-    const aceGcmItem: FormItemProps = {
-      children: (
-        <>
-          <Icon icon={LockIcon} style={{ marginRight: 4 }} />
-          <Trans i18nKey="llm.aesGcm" ns={'setting'}>
-            您的秘钥与代理地址等将使用
-            <Link href={AES_GCM_URL} style={{ marginInline: 4 }} target={'_blank'}>
-              AES-GCM
-            </Link>
-            加密算法进行加密
-          </Trans>
-        </>
-      ),
-      className: styles.aceGcm,
-      minWidth: undefined,
-    };
-
-    const showEndpoint = !!proxyUrl;
-
-    const formItems = [
-      ...apiKeyItem,
-      showEndpoint && {
-        children: <Input allowClear placeholder={proxyUrl?.placeholder} />,
-        desc: proxyUrl?.desc || t('llm.proxyUrl.desc'),
-        label: proxyUrl?.title || t('llm.proxyUrl.title'),
-        name: [KeyVaultsConfigKey, id, LLMProviderBaseUrlKey],
-      },
-      /*
-       * 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
-       */
-      !disableBrowserRequest &&
-        (defaultShowBrowserRequest ||
-          (showEndpoint && isProviderEndpointNotEmpty) ||
-          (showApiKey && isProviderApiKeyNotEmpty)) && {
-          children: (
-            <Switch
-              onChange={(enabled) => {
-                setSettings({ [LLMProviderConfigKey]: { [id]: { fetchOnClient: enabled } } });
-              }}
-              value={isFetchOnClient}
-            />
-          ),
-          desc: t('llm.fetchOnClient.desc'),
-          label: t('llm.fetchOnClient.title'),
-          minWidth: undefined,
-        },
-      {
-        children: (
-          <ProviderModelListSelect
-            notFoundContent={modelList?.notFoundContent}
-            placeholder={modelList?.placeholder ?? t('llm.modelList.placeholder')}
-            provider={id}
-            showAzureDeployName={modelList?.azureDeployName}
-            showModelFetcher={modelList?.showModelFetcher}
-          />
-        ),
-        desc: t('llm.modelList.desc'),
-        label: t('llm.modelList.title'),
-        name: [LLMProviderConfigKey, id, LLMProviderModelListKey],
-      },
-      showChecker
-        ? (checkerItem ?? {
-            children: <Checker model={checkModel!} provider={id} />,
-            desc: t('llm.checker.desc'),
-            label: t('llm.checker.title'),
-            minWidth: undefined,
-          })
-        : undefined,
-      showAceGcm && isServerMode && aceGcmItem,
-    ].filter(Boolean) as FormItemProps[];
-
-    /* ↓ cloud slot ↓ */
-
-    /* ↑ cloud slot ↑ */
-
-    const model: FormGroupItemType = {
-      children: formItems,
-
-      defaultActive: canDeactivate ? enabled : undefined,
-
-      extra: (
-        <Flexbox align={'center'} gap={8} horizontal>
-          {extra}
-          <Tooltip title={t('llm.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>
-          {canDeactivate ? (
-            <Switch
-              onChange={(enabled) => {
-                toggleProviderEnabled(id, enabled);
-              }}
-              value={enabled}
-            />
-          ) : undefined}
-        </Flexbox>
-      ),
-      title: (
-        <Flexbox
-          align={'center'}
-          horizontal
-          style={{
-            height: 24,
-            maxHeight: 24,
-            ...(enabled ? {} : { filter: 'grayscale(100%)', maxHeight: 24, opacity: 0.66 }),
-          }}
-        >
-          {title ?? <ProviderCombine provider={id} size={24} />}
-        </Flexbox>
-      ),
-    };
-
-    return (
-      <Form
-        className={cx(styles.form, className)}
-        form={form}
-        items={[model]}
-        onValuesChange={debounce(setSettings, 100)}
-        {...FORM_STYLE}
-      />
-    );
-  },
-);
-
-export default ProviderConfig;

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -1,98 +0,0 @@
-import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Icon, Text } from '@lobehub/ui';
-import { App } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { LucideArrowRight, LucideSettings, LucideTrash2 } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { ModelInfoTags } from '@/components/ModelSelect';
-import { useUserStore } from '@/store/user';
-import { modelConfigSelectors, modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-interface CustomModelOptionProps {
-  id: string;
-  provider: GlobalLLMProviderKey;
-}
-
-const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
-  const { t } = useTranslation('common');
-  const { t: s } = useTranslation('setting');
-  const { modal } = App.useApp();
-
-  const [dispatchCustomModelCards, toggleEditingCustomModelCard, removeEnabledModels] =
-    useUserStore((s) => [
-      s.dispatchCustomModelCards,
-      s.toggleEditingCustomModelCard,
-      s.removeEnabledModels,
-    ]);
-
-  const modelCard = useUserStore(
-    modelConfigSelectors.getCustomModelCard({ id, provider }),
-    isEqual,
-  );
-
-  const isEnabled = useUserStore(
-    (s) => modelProviderSelectors.getEnableModelsById(provider)(s)?.includes(id),
-    isEqual,
-  );
-
-  return (
-    <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
-      <Flexbox align={'center'} gap={8} horizontal style={{ flex: 1, width: '70%' }}>
-        <ModelIcon model={id} size={32} />
-        <Flexbox direction={'vertical'} style={{ flex: 1, overflow: 'hidden' }}>
-          <Flexbox align={'center'} gap={8} horizontal>
-            <Text ellipsis>{modelCard?.displayName || id}</Text>
-            <ModelInfoTags id={id} {...modelCard} isCustom />
-          </Flexbox>
-          <Text ellipsis style={{ fontSize: 12, marginTop: '4px' }} type={'secondary'}>
-            {id}
-            {!!modelCard?.deploymentName && (
-              <>
-                <Icon icon={LucideArrowRight} />
-                {modelCard?.deploymentName}
-              </>
-            )}
-          </Text>
-        </Flexbox>
-      </Flexbox>
-
-      <Flexbox horizontal>
-        <ActionIcon
-          icon={LucideSettings}
-          onClick={async (e) => {
-            e.stopPropagation();
-            toggleEditingCustomModelCard({ id, provider });
-          }}
-          title={s('llm.customModelCards.config')}
-        />
-        <ActionIcon
-          icon={LucideTrash2}
-          onClick={async (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-
-            await modal.confirm({
-              centered: true,
-              content: s('llm.customModelCards.confirmDelete'),
-              okButtonProps: { danger: true },
-              onOk: async () => {
-                // delete model and deactivate id
-                await dispatchCustomModelCards(provider, { id, type: 'delete' });
-                await removeEnabledModels(provider, id);
-              },
-              type: 'warning',
-            });
-          }}
-          style={isEnabled ? { marginRight: '10px' } : {}}
-          title={t('delete')}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default CustomModelOption;