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

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;

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

@@ -1,68 +0,0 @@
-import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Text, Tooltip } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { Recycle } 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 { modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import CustomModelOption from './CustomModelOption';
-
-interface OptionRenderProps {
-  displayName: string;
-  id: string;
-  isAzure?: boolean;
-  provider: GlobalLLMProviderKey;
-  removed?: boolean;
-}
-const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure, removed }) => {
-  const model = useUserStore(
-    (s) => modelProviderSelectors.getModelCardById(id, provider)(s),
-    isEqual,
-  );
-  const { t } = useTranslation('components');
-  const theme = useTheme();
-  // if there is isCustom, it means it is a user defined custom model
-  if (model?.isCustom || isAzure) return <CustomModelOption id={id} provider={provider} />;
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={8}
-      horizontal
-      justify={'space-between'}
-      style={{ paddingInlineEnd: 8 }}
-    >
-      <Flexbox align={'center'} gap={8} horizontal>
-        <ModelIcon model={id} size={32} />
-        <Flexbox>
-          <Flexbox align={'center'} gap={8} horizontal>
-            {displayName}
-            <ModelInfoTags directionReverse placement={'top'} {...model!} />
-          </Flexbox>
-          <Text style={{ fontSize: 12 }} type={'secondary'}>
-            {id}
-          </Text>
-        </Flexbox>
-      </Flexbox>
-      {removed && (
-        <Tooltip
-          placement={'top'}
-          style={{ pointerEvents: 'none' }}
-          styles={{ root: { maxWidth: 300 } }}
-          title={t('ModelSelect.removed')}
-        >
-          <ActionIcon icon={Recycle} style={{ color: theme.colorWarning }} />
-        </Tooltip>
-      )}
-    </Flexbox>
-  );
-});
-
-export default OptionRender;

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

@@ -1,146 +0,0 @@
-import { ActionIcon, Select } from '@lobehub/ui';
-import { css, cx } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { RotateCwIcon } from 'lucide-react';
-import { ReactNode, 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 { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import ModelConfigModal from './ModelConfigModal';
-import ModelFetcher from './ModelFetcher';
-import OptionRender from './Option';
-
-const styles = {
-  divStyle: css`
-    position: relative;
-
-    .ant-select-selector {
-      padding-inline-end: 50px !important;
-    }
-  `,
-  popup: css`
-    &.ant-select-dropdown {
-      .ant-select-item-option-selected {
-        font-weight: normal;
-      }
-    }
-  `,
-  reset: css`
-    position: absolute;
-    z-index: 20;
-    inset-block-start: 50%;
-    inset-inline-end: 28px;
-    transform: translateY(-50%);
-  `,
-};
-
-interface CustomModelSelectProps {
-  notFoundContent?: ReactNode;
-  placeholder?: string;
-  provider: GlobalLLMProviderKey;
-  showAzureDeployName?: boolean;
-  showModelFetcher?: boolean;
-}
-
-const ProviderModelListSelect = memo<CustomModelSelectProps>(
-  ({ showModelFetcher = false, provider, showAzureDeployName, notFoundContent, placeholder }) => {
-    const { t } = useTranslation('common');
-    const { t: transSetting } = useTranslation('setting');
-    const [setModelProviderConfig, updateEnabledModels] = useUserStore((s) => [
-      s.setModelProviderConfig,
-      s.updateEnabledModels,
-    ]);
-
-    const chatModelCards = useUserStore(
-      modelProviderSelectors.getModelCardsById(provider),
-      isEqual,
-    );
-
-    const defaultEnableModel = useUserStore(
-      modelProviderSelectors.getDefaultEnabledModelsById(provider),
-      isEqual,
-    );
-    const enabledModels = useUserStore(
-      modelProviderSelectors.getEnableModelsById(provider),
-      isEqual,
-    );
-
-    const showReset = !!enabledModels && !isEqual(defaultEnableModel, enabledModels);
-
-    return (
-      <>
-        <Flexbox gap={8}>
-          <div className={cx(styles.divStyle)}>
-            <div className={cx(styles.reset)}>
-              {showReset && (
-                <ActionIcon
-                  icon={RotateCwIcon}
-                  onClick={() => {
-                    setModelProviderConfig(provider, { enabledModels: null });
-                  }}
-                  size={'small'}
-                  title={t('reset')}
-                />
-              )}
-            </div>
-            <Select
-              allowClear
-              mode="tags"
-              notFoundContent={notFoundContent}
-              onChange={(value, options) => {
-                updateEnabledModels(provider, value, options as any[]);
-              }}
-              optionFilterProp="label"
-              optionRender={({ label, value }) => {
-                // model is in the chatModels
-                if (chatModelCards.some((c) => c.id === value))
-                  return (
-                    <OptionRender
-                      displayName={label as string}
-                      id={value as string}
-                      isAzure={showAzureDeployName}
-                      provider={provider}
-                    />
-                  );
-
-                if (enabledModels?.some((m) => value === m)) {
-                  return (
-                    <OptionRender
-                      displayName={label as string}
-                      id={value as string}
-                      isAzure={showAzureDeployName}
-                      provider={provider}
-                      removed
-                    />
-                  );
-                }
-
-                // model is defined by user in client
-                return (
-                  <Flexbox align={'center'} gap={8} horizontal>
-                    {transSetting('llm.customModelCards.addNew', { id: value })}
-                  </Flexbox>
-                );
-              }}
-              options={chatModelCards.map((model) => ({
-                label: model.displayName || model.id,
-                value: model.id,
-              }))}
-              placeholder={placeholder}
-              popupClassName={cx(styles.popup)}
-              value={enabledModels ?? defaultEnableModel}
-            />
-          </div>
-          {showModelFetcher && <ModelFetcher provider={provider} />}
-        </Flexbox>
-        <ModelConfigModal provider={provider} showAzureDeployName={showAzureDeployName} />
-      </>
-    );
-  },
-);
-
-export default ProviderModelListSelect;

package/src/app/[variants]/(main)/settings/llm/const.ts

@@ -1,20 +0,0 @@
-export const LLMProviderConfigKey = 'languageModel';
-export const KeyVaultsConfigKey = 'keyVaults';
-
-/**
- * we use this key to define default api key
- * equal GOOGLE_API_KEY or ZHIPU_API_KEY
- */
-export const LLMProviderApiTokenKey = 'apiKey';
-
-/**
- * we use this key to define the baseURL
- * equal OPENAI_PROXY_URL
- */
-export const LLMProviderBaseUrlKey = 'baseURL';
-
-/**
- * we use this key to define the custom model name
- * equal CUSTOM_MODELS
- */
-export const LLMProviderModelListKey = 'enabledModels';

package/src/app/[variants]/(main)/settings/llm/features/Footer.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { useTheme } from 'antd-style';
-import Link from 'next/link';
-import { memo } from 'react';
-import { Trans } from 'react-i18next';
-import { Center } from 'react-layout-kit';
-
-import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
-
-const Footer = memo(() => {
-  const theme = useTheme();
-  return (
-    <Center
-      style={{
-        background: theme.colorFillQuaternary,
-        border: `1px dashed ${theme.colorFillSecondary}`,
-        borderRadius: theme.borderRadiusLG,
-        padding: 12,
-      }}
-    >
-      <div style={{ color: theme.colorTextSecondary, fontSize: 12, textAlign: 'center' }}>
-        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
-          更多模型正在
-          <Link aria-label={'todo'} href={MORE_MODEL_PROVIDER_REQUEST_URL} target="_blank">
-            计划接入
-          </Link>
-          中 ，敬请期待
-        </Trans>
-      </div>
-    </Center>
-  );
-});
-
-export default Footer;

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

@@ -1,30 +0,0 @@
-'use client';
-
-import { isCustomBranding } from '@/const/version';
-
-import { useProviderList } from './ProviderList/providers';
-import ProviderConfig from './components/ProviderConfig';
-import Footer from './features/Footer';
-
-const Page = () => {
-  const list = useProviderList();
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 24,
-      }}
-    >
-      {list.map(({ id, ...res }) => (
-        <ProviderConfig id={id as any} key={id} {...res} />
-      ))}
-      {!isCustomBranding && <Footer />}
-    </div>
-  );
-};
-
-Page.displayName = 'LlmSetting';
-
-export default Page;

package/src/app/[variants]/(main)/settings/llm/type.ts

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