@lobehub/lobehub 2.0.0-next.1 → 2.0.0-next.3

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;

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

@@ -1,104 +0,0 @@
-import { Input } from '@lobehub/ui';
-import { Checkbox, Form, FormInstance } from 'antd';
-import { memo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import MaxTokenSlider from '@/components/MaxTokenSlider';
-import { useIsMobile } from '@/hooks/useIsMobile';
-import { ChatModelCard } from '@/types/llm';
-
-interface ModelConfigFormProps {
-  initialValues?: ChatModelCard;
-  onFormInstanceReady: (instance: FormInstance) => void;
-  showAzureDeployName?: boolean;
-}
-
-const ModelConfigForm = memo<ModelConfigFormProps>(
-  ({ showAzureDeployName, onFormInstanceReady, initialValues }) => {
-    const { t } = useTranslation('setting');
-
-    const [formInstance] = Form.useForm();
-
-    const isMobile = useIsMobile();
-
-    useEffect(() => {
-      onFormInstanceReady(formInstance);
-    }, []);
-
-    return (
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-        onKeyDown={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <Form
-          colon={false}
-          form={formInstance}
-          initialValues={initialValues}
-          labelCol={{ span: 4 }}
-          style={{ marginTop: 16 }}
-          wrapperCol={isMobile ? { span: 18 } : { offset: 1, span: 18 }}
-        >
-          <Form.Item
-            extra={t('llm.customModelCards.modelConfig.id.extra')}
-            label={t('llm.customModelCards.modelConfig.id.title')}
-            name={'id'}
-          >
-            <Input placeholder={t('llm.customModelCards.modelConfig.id.placeholder')} />
-          </Form.Item>
-          {showAzureDeployName && (
-            <Form.Item
-              extra={t('llm.customModelCards.modelConfig.azureDeployName.extra')}
-              label={t('llm.customModelCards.modelConfig.azureDeployName.title')}
-              name={'deploymentName'}
-            >
-              <Input
-                placeholder={t('llm.customModelCards.modelConfig.azureDeployName.placeholder')}
-              />
-            </Form.Item>
-          )}
-          <Form.Item
-            label={t('llm.customModelCards.modelConfig.displayName.title')}
-            name={'displayName'}
-          >
-            <Input placeholder={t('llm.customModelCards.modelConfig.displayName.placeholder')} />
-          </Form.Item>
-          <Form.Item
-            label={t('llm.customModelCards.modelConfig.tokens.title')}
-            name={'contextWindowTokens'}
-          >
-            <MaxTokenSlider />
-          </Form.Item>
-          <Form.Item
-            extra={t('llm.customModelCards.modelConfig.functionCall.extra')}
-            label={t('llm.customModelCards.modelConfig.functionCall.title')}
-            name={'functionCall'}
-            valuePropName={'checked'}
-          >
-            <Checkbox />
-          </Form.Item>
-          <Form.Item
-            extra={t('llm.customModelCards.modelConfig.vision.extra')}
-            label={t('llm.customModelCards.modelConfig.vision.title')}
-            name={'vision'}
-            valuePropName={'checked'}
-          >
-            <Checkbox />
-          </Form.Item>
-          <Form.Item
-            extra={t('llm.customModelCards.modelConfig.files.extra')}
-            label={t('llm.customModelCards.modelConfig.files.title')}
-            name={'files'}
-            valuePropName={'checked'}
-          >
-            <Checkbox />
-          </Form.Item>
-        </Form>
-      </div>
-    );
-  },
-);
-export default ModelConfigForm;

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

@@ -1,77 +0,0 @@
-import { Button, Modal } from '@lobehub/ui';
-import { FormInstance } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useUserStore } from '@/store/user';
-import { modelConfigSelectors } from '@/store/user/selectors';
-
-import ModelConfigForm from './Form';
-
-interface ModelConfigModalProps {
-  provider?: string;
-  showAzureDeployName?: boolean;
-}
-
-const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
-  const { t } = useTranslation('setting');
-  const { t: tc } = useTranslation('common');
-  const [formInstance, setFormInstance] = useState<FormInstance>();
-
-  const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
-    useUserStore((s) => [
-      !!s.editingCustomCardModel && provider === s.editingCustomCardModel?.provider,
-      s.editingCustomCardModel?.id,
-      s.editingCustomCardModel?.provider,
-      s.dispatchCustomModelCards,
-      s.toggleEditingCustomModelCard,
-    ]);
-
-  const modelCard = useUserStore(
-    modelConfigSelectors.getCustomModelCard({ id, provider: editingProvider }),
-    isEqual,
-  );
-
-  const closeModal = () => {
-    toggleEditingCustomModelCard(undefined);
-  };
-
-  return (
-    <Modal
-      destroyOnHidden
-      footer={[
-        <Button key="cancel" onClick={closeModal}>
-          {tc('cancel')}
-        </Button>,
-        <Button
-          key="ok"
-          onClick={() => {
-            if (!editingProvider || !id || !formInstance) return;
-            const data = formInstance.getFieldsValue();
-
-            dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
-
-            closeModal();
-          }}
-          style={{ marginInlineStart: '16px' }}
-          type="primary"
-        >
-          {tc('ok')}
-        </Button>,
-      ]}
-      maskClosable
-      onCancel={closeModal}
-      open={open}
-      title={t('llm.customModelCards.modelConfig.modalTitle')}
-      zIndex={1251} // Select is 1150
-    >
-      <ModelConfigForm
-        initialValues={modelCard}
-        onFormInstanceReady={setFormInstance}
-        showAzureDeployName={showAzureDeployName}
-      />
-    </Modal>
-  );
-});
-export default ModelConfigModal;

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

@@ -1,105 +0,0 @@
-import { ActionIcon, Icon, Text, Tooltip } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import dayjs from 'dayjs';
-import isEqual from 'fast-deep-equal';
-import { CircleX, LucideLoaderCircle, LucideRefreshCcwDot } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useUserStore } from '@/store/user';
-import {
-  modelConfigSelectors,
-  modelProviderSelectors,
-  settingsSelectors,
-} from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-const useStyles = createStyles(({ css, token }) => ({
-  hover: css`
-    cursor: pointer;
-
-    padding-block: 4px;
-    padding-inline: 8px;
-    border-radius: ${token.borderRadius}px;
-
-    transition: all 0.2s ease-in-out;
-
-    &:hover {
-      color: ${token.colorText};
-      background-color: ${token.colorFillSecondary};
-    }
-  `,
-}));
-
-interface ModelFetcherProps {
-  provider: GlobalLLMProviderKey;
-}
-
-const ModelFetcher = memo<ModelFetcherProps>(({ provider }) => {
-  const { styles } = useStyles();
-  const { t } = useTranslation('setting');
-  const [useFetchProviderModelList, clearObtainedModels] = useUserStore((s) => [
-    s.useFetchProviderModelList,
-    s.clearObtainedModels,
-    s.setModelProviderConfig,
-  ]);
-  const enabledAutoFetch = useUserStore(modelConfigSelectors.isAutoFetchModelsEnabled(provider));
-  const latestFetchTime = useUserStore(
-    (s) => settingsSelectors.providerConfig(provider)(s)?.latestFetchTime,
-  );
-  const totalModels = useUserStore(
-    (s) => modelProviderSelectors.getModelCardsById(provider)(s).length,
-  );
-
-  const remoteModels = useUserStore(
-    modelProviderSelectors.remoteProviderModelCards(provider),
-    isEqual,
-  );
-
-  const { mutate, isValidating } = useFetchProviderModelList(provider, enabledAutoFetch);
-
-  return (
-    <Text style={{ fontSize: 12 }} type={'secondary'}>
-      <Flexbox align={'center'} gap={0} horizontal justify={'space-between'}>
-        <div style={{ display: 'flex', lineHeight: '24px' }}>
-          {t('llm.modelList.total', { count: totalModels })}
-          {remoteModels && remoteModels.length > 0 && (
-            <ActionIcon
-              icon={CircleX}
-              onClick={() => clearObtainedModels(provider)}
-              size={'small'}
-              title={t('llm.fetcher.clear')}
-            />
-          )}
-        </div>
-        <Tooltip
-          styles={{ root: { pointerEvents: 'none' } }}
-          title={
-            latestFetchTime
-              ? t('llm.fetcher.latestTime', {
-                  time: dayjs(latestFetchTime).format('YYYY-MM-DD HH:mm:ss'),
-                })
-              : t('llm.fetcher.noLatestTime')
-          }
-        >
-          <Flexbox
-            align={'center'}
-            className={styles.hover}
-            gap={4}
-            horizontal
-            onClick={() => mutate()}
-          >
-            <Icon
-              icon={isValidating ? LucideLoaderCircle : LucideRefreshCcwDot}
-              size={'small'}
-              spin={isValidating}
-            />
-            <div>{isValidating ? t('llm.fetcher.fetching') : t('llm.fetcher.fetch')}</div>
-          </Flexbox>
-        </Tooltip>
-      </Flexbox>
-    </Text>
-  );
-});
-export default ModelFetcher;