@lobehub/chat 0.146.2 → 0.147.0

package/src/app/settings/llm/components/ProviderModelList/MaxTokenSlider.tsx

@@ -0,0 +1,88 @@
+import { InputNumber, Slider, SliderSingleProps } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+const exponent = (num: number) => Math.log2(num);
+const getRealValue = (num: number) => Math.round(Math.pow(2, num));
+
+const marks: SliderSingleProps['marks'] = {
+  [exponent(1)]: '1k',
+  [exponent(2)]: '2k',
+  [exponent(4)]: '4k',
+  [exponent(8)]: '8k',
+  [exponent(16)]: '16k',
+  [exponent(32)]: '32k',
+  [exponent(64)]: '64k',
+  [exponent(128)]: '128k',
+  [exponent(200)]: '200k',
+  [exponent(1000)]: '1M',
+};
+
+interface MaxTokenSliderProps {
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValue }) => {
+  const [token, setTokens] = useMergeState(0, {
+    defaultValue,
+    onChange,
+    value: value,
+  });
+
+  const [powValue, setPowValue] = useMergeState(0, {
+    defaultValue: exponent(typeof defaultValue === 'undefined' ? 0 : defaultValue / 1000),
+    value: exponent(typeof value === 'undefined' ? 0 : value / 1000),
+  });
+
+  const updateWithPowValue = (value: number) => {
+    setPowValue(value);
+
+    setTokens(getRealValue(value) * 1024);
+  };
+  const updateWithRealValue = (value: number) => {
+    setTokens(value);
+
+    setPowValue(exponent(value / 1024));
+  };
+
+  return (
+    <Flexbox align={'center'} gap={12} horizontal>
+      <Flexbox flex={1}>
+        <Slider
+          marks={marks}
+          max={exponent(1000)}
+          min={0}
+          onChange={updateWithPowValue}
+          step={1}
+          tooltip={{
+            formatter: (x) => {
+              if (typeof x === 'undefined') return;
+
+              const value = getRealValue(x);
+
+              if (value < 1000) return value.toFixed(0) + 'K';
+
+              return (value / 1000).toFixed(0) + 'M';
+            },
+          }}
+          value={powValue}
+        />
+      </Flexbox>
+      <div>
+        <InputNumber
+          onChange={(e) => {
+            if (!e) return;
+
+            updateWithRealValue(e);
+          }}
+          step={1024}
+          value={token}
+        />
+      </div>
+    </Flexbox>
+  );
+});
+export default MaxTokenSlider;

package/src/app/settings/llm/components/ProviderModelList/ModelConfigModal.tsx

@@ -0,0 +1,128 @@
+import { Modal } from '@lobehub/ui';
+import { Checkbox, Form, Input } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { modelConfigSelectors } from '@/store/global/slices/settings/selectors';
+
+import MaxTokenSlider from './MaxTokenSlider';
+
+interface ModelConfigModalProps {
+  provider?: string;
+  showAzureDeployName?: boolean;
+}
+const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
+  const [formInstance] = Form.useForm();
+  const { t } = useTranslation('setting');
+
+  const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
+    useGlobalStore((s) => [
+      !!s.editingCustomCardModel && provider === s.editingCustomCardModel?.provider,
+      s.editingCustomCardModel?.id,
+      s.editingCustomCardModel?.provider,
+      s.dispatchCustomModelCards,
+      s.toggleEditingCustomModelCard,
+    ]);
+
+  const modelCard = useGlobalStore(
+    modelConfigSelectors.getCustomModelCardById({ id, provider: editingProvider }),
+    isEqual,
+  );
+
+  const closeModal = () => {
+    toggleEditingCustomModelCard(undefined);
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      maskClosable
+      onCancel={() => {
+        closeModal();
+      }}
+      onOk={() => {
+        if (!editingProvider || !id) return;
+        const data = formInstance.getFieldsValue();
+
+        dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
+
+        closeModal();
+      }}
+      open={open}
+      title={t('llm.customModelCards.modelConfig.modalTitle')}
+    >
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <Form
+          colon={false}
+          form={formInstance}
+          initialValues={modelCard}
+          labelCol={{ span: 4 }}
+          style={{ marginTop: 16 }}
+          wrapperCol={{ 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={'tokens'}>
+            <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>
+    </Modal>
+  );
+});
+export default ModelConfigModal;

package/src/app/settings/llm/components/ProviderModelList/ModelFetcher.tsx

@@ -0,0 +1,81 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { LucideLoaderCircle, LucideRefreshCcwDot } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { modelConfigSelectors } from '@/store/global/selectors';
+import { GlobalLLMProviderKey } from '@/types/settings';
+
+const useStyles = createStyles(({ css, token }) => ({
+  hover: css`
+    cursor: pointer;
+    padding: 4px 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] = useGlobalStore((s) => [
+    s.useFetchProviderModelList,
+    s.setModelProviderConfig,
+  ]);
+  const enabledAutoFetch = useGlobalStore(modelConfigSelectors.enabledAutoFetchModels(provider));
+  const latestFetchTime = useGlobalStore(
+    (s) => modelConfigSelectors.providerConfig(provider)(s)?.latestFetchTime,
+  );
+  const totalModels = useGlobalStore(
+    (s) => modelConfigSelectors.providerModelCards(provider)(s).length,
+  );
+
+  const { mutate, isValidating } = useFetchProviderModelList(provider, enabledAutoFetch);
+
+  return (
+    <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+      <Flexbox align={'center'} gap={0} horizontal justify={'space-between'}>
+        <div>{t('llm.modelList.total', { count: totalModels })}</div>
+        <Tooltip
+          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>
+    </Typography.Text>
+  );
+});
+export default ModelFetcher;

package/src/app/settings/llm/components/ProviderModelList/Option.tsx

@@ -0,0 +1,38 @@
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ModelIcon from '@/components/ModelIcon';
+import { ModelInfoTags } from '@/components/ModelSelect';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+import { GlobalLLMProviderKey } from '@/types/settings';
+
+import CustomModelOption from './CustomModelOption';
+
+const OptionRender = memo<{ displayName: string; id: string; provider: GlobalLLMProviderKey }>(
+  ({ displayName, id, provider }) => {
+    const model = useGlobalStore((s) => modelProviderSelectors.modelCardById(id)(s), isEqual);
+
+    // if there is no model, it means it is a user custom model
+    if (!model) return <CustomModelOption id={id} provider={provider} />;
+
+    return (
+      <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>
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {id}
+          </Typography.Text>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default OptionRender;

package/src/app/settings/llm/components/ProviderModelList/index.tsx

@@ -0,0 +1,142 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Select } from 'antd';
+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 { useGlobalStore } from '@/store/global';
+import { modelConfigSelectors, modelProviderSelectors } from '@/store/global/selectors';
+import { GlobalLLMProviderKey } from '@/types/settings';
+
+import ModelConfigModal from './ModelConfigModal';
+import ModelFetcher from './ModelFetcher';
+import OptionRender from './Option';
+
+const styles = {
+  popup: css`
+    &.ant-select-dropdown {
+      .ant-select-item-option-selected {
+        font-weight: normal;
+      }
+    }
+  `,
+  reset: css`
+    position: absolute;
+    z-index: 20;
+    top: 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, dispatchCustomModelCards] = useGlobalStore((s) => [
+      s.setModelProviderConfig,
+      s.dispatchCustomModelCards,
+      s.useFetchProviderModelList,
+    ]);
+
+    const chatModelCards = useGlobalStore(
+      modelConfigSelectors.providerModelCards(provider),
+      isEqual,
+    );
+
+    const defaultEnableModel = useGlobalStore(
+      modelProviderSelectors.defaultEnabledProviderModels(provider),
+      isEqual,
+    );
+    const enabledModels = useGlobalStore(
+      modelConfigSelectors.providerEnableModels(provider),
+      isEqual,
+    );
+
+    const showReset = !!enabledModels && !isEqual(defaultEnableModel, enabledModels);
+
+    return (
+      <>
+        <Flexbox gap={8}>
+          <div style={{ position: 'relative' }}>
+            <div className={cx(styles.reset)}>
+              {showReset && (
+                <ActionIcon
+                  icon={RotateCwIcon}
+                  onClick={() => {
+                    setModelProviderConfig(provider, { enabledModels: null });
+                  }}
+                  size={'small'}
+                  title={t('reset')}
+                />
+              )}
+            </div>
+            <Select<string[]>
+              allowClear
+              mode="tags"
+              notFoundContent={notFoundContent}
+              onChange={(value, options) => {
+                setModelProviderConfig(provider, { enabledModels: value.filter(Boolean) });
+
+                // if there is a new model, add it to `customModelCards`
+                options.forEach((option: { label?: string; value?: string }, index: number) => {
+                  // if is a known model, it should have value
+                  // if is an unknown model, the option will be {}
+                  if (option.value) return;
+
+                  const modelId = value[index];
+
+                  dispatchCustomModelCards(provider, {
+                    modelCard: { id: modelId },
+                    type: 'add',
+                  });
+                });
+              }}
+              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}
+                      provider={provider}
+                    />
+                  );
+
+                // 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/settings/llm/const.ts

@@ -16,4 +16,4 @@ export const LLMProviderBaseUrlKey = 'endpoint';
  * we use this key to define the custom model name
  * equal CUSTOM_MODELS
  */
-export const LLMProviderCustomModelKey = 'customModelName';
+export const LLMProviderModelListKey = 'enabledModels';

package/src/app/settings/llm/index.tsx

@@ -9,6 +9,7 @@ import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
 
 import Footer from '../features/Footer';
 import Anthropic from './Anthropic';
+import Azure from './Azure';
 import Bedrock from './Bedrock';
 import Google from './Google';
 import Groq from './Groq';
@@ -29,19 +30,19 @@ export default memo<{ showOllama: boolean }>(({ showOllama }) => {
     <>
       <PageTitle title={t('tab.llm')} />
       <OpenAI />
-      {/*<AzureOpenAI />*/}
+      <Azure />
       {showOllama && <Ollama />}
-      <Anthropic />
       <Google />
-      <Groq />
+      <Anthropic />
       <Bedrock />
+      <OpenRouter />
+      <TogetherAI />
+      <Groq />
       <Perplexity />
       <Mistral />
-      <OpenRouter />
       <Moonshot />
-      <ZeroOne />
       <Zhipu />
-      <TogetherAI />
+      <ZeroOne />
       <Footer>
         <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
           更多模型正在

package/src/app/settings/tts/TTS/index.tsx

@@ -57,7 +57,7 @@ const TTS = memo(() => {
       },
     ],
     icon: Webhook,
-    title: t('llm.openai.title'),
+    title: t('settingTTS.openai.title'),
   };
 
   return (

package/src/components/AntdStaticMethods/index.test.tsx

@@ -0,0 +1,43 @@
+// EntryComponent.test.tsx
+import { render } from '@testing-library/react';
+import { App } from 'antd';
+import { describe, expect, it, vi } from 'vitest';
+
+import EntryComponent, { message, modal, notification } from './index';
+
+// 模拟 App.useApp 方法返回的对象
+const mockUseApp = {
+  message: { success: vi.fn() },
+  modal: { confirm: vi.fn() },
+  notification: { open: vi.fn() },
+};
+
+vi.mock('antd', () => ({
+  App: {
+    useApp: vi.fn(() => mockUseApp),
+  },
+}));
+
+describe('EntryComponent', () => {
+  it('should correctly initialize message, modal, and notification', () => {
+    render(<EntryComponent />);
+
+    // 验证 App.useApp 是否被调用
+    expect(App.useApp).toHaveBeenCalled();
+
+    // 验证 message, modal, 和 notification 是否被正确赋值
+    expect(message).toBeDefined();
+    expect(modal).toBeDefined();
+    expect(notification).toBeDefined();
+
+    // 验证是否赋值的对象与模拟的对象匹配
+    expect(message).toEqual(mockUseApp.message);
+    expect(modal).toEqual(mockUseApp.modal);
+    expect(notification).toEqual(mockUseApp.notification);
+  });
+
+  it('should render without crashing', () => {
+    const { container } = render(<EntryComponent />);
+    expect(container).toBeDefined();
+  });
+});

package/src/components/ModelIcon/index.tsx

@@ -3,16 +3,21 @@ import {
   Baichuan,
   ChatGLM,
   Claude,
+  Cohere,
   Gemini,
   Gemma,
+  Hunyuan,
   LLaVA,
   Meta,
   Minimax,
   Mistral,
   Moonshot,
   OpenAI,
+  OpenRouter,
   Perplexity,
+  Spark,
   Tongyi,
+  Wenxin,
   Yi,
 } from '@lobehub/icons';
 import { memo } from 'react';
@@ -22,12 +27,15 @@ interface ModelProviderIconProps {
   size?: number;
 }
 
-const ModelIcon = memo<ModelProviderIconProps>(({ model, size = 12 }) => {
-  if (!model) return;
+const ModelIcon = memo<ModelProviderIconProps>(({ model: originModel, size = 12 }) => {
+  if (!originModel) return;
 
-  if (model.startsWith('gpt-3')) return <OpenAI.Avatar size={size} type={'gpt3'} />;
-  if (model.startsWith('gpt-4')) return <OpenAI.Avatar size={size} type={'gpt4'} />;
-  if (model.startsWith('glm')) return <ChatGLM.Avatar size={size} />;
+  // lower case the origin model so to better match more model id case
+  const model = originModel.toLowerCase();
+
+  if (model.includes('gpt-3')) return <OpenAI.Avatar size={size} type={'gpt3'} />;
+  if (model.includes('gpt-4')) return <OpenAI.Avatar size={size} type={'gpt4'} />;
+  if (model.startsWith('glm') || model.includes('chatglm')) return <ChatGLM.Avatar size={size} />;
   if (model.includes('claude')) return <Claude.Avatar size={size} />;
   if (model.includes('titan')) return <Aws.Avatar size={size} />;
   if (model.includes('llama')) return <Meta.Avatar size={size} />;
@@ -39,9 +47,19 @@ const ModelIcon = memo<ModelProviderIconProps>(({ model, size = 12 }) => {
   if (model.includes('moonshot')) return <Moonshot.Avatar size={size} />;
   if (model.includes('baichuan'))
     return <Baichuan.Avatar background={Baichuan.colorPrimary} size={size} />;
+
   if (model.includes('mistral') || model.includes('mixtral')) return <Mistral.Avatar size={size} />;
-  if (model.includes('pplx')) return <Perplexity.Avatar size={size} />;
-  if (model.startsWith('yi-')) return <Yi.Avatar size={size} />;
+
+  if (model.includes('pplx') || model.includes('sonar')) return <Perplexity.Avatar size={size} />;
+
+  if (model.includes('yi-')) return <Yi.Avatar size={size} />;
+  if (model.includes('openrouter')) return <OpenRouter.Avatar size={size} />;
+  if (model.includes('command')) return <Cohere.Color size={size} />;
+
+  if (model.includes('ernie')) return <Wenxin.Avatar size={size} />;
+  if (model.includes('spark')) return <Spark.Avatar size={size} />;
+  if (model.includes('hunyuan')) return <Hunyuan.Avatar size={size} />;
+  if (model.includes('abab')) return <Minimax.Avatar size={size} />;
 });
 
 export default ModelIcon;