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

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;
-}