@lobehub/chat 1.0.0 → 1.0.2

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

@@ -0,0 +1,214 @@
+'use client';
+
+import { Form, type FormItemProps, type ItemGroup } from '@lobehub/ui';
+import { Input, Switch } from 'antd';
+import { createStyles } from 'antd-style';
+import { debounce } from 'lodash-es';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import {
+  KeyVaultsConfigKey,
+  LLMProviderApiTokenKey,
+  LLMProviderBaseUrlKey,
+  LLMProviderConfigKey,
+  LLMProviderModelListKey,
+} from '@/app/(main)/settings/llm/const';
+import { FORM_STYLE } from '@/const/layoutTokens';
+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 }) => ({
+  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;
+    }
+  `,
+  safariIconWidthFix: css`
+    svg {
+      width: unset !important;
+    }
+  `,
+}));
+
+export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id'> {
+  apiKeyItems?: FormItemProps[];
+  canDeactivate?: boolean;
+  checkerItem?: FormItemProps;
+  className?: string;
+  hideSwitch?: boolean;
+  id: GlobalLLMProviderKey;
+  modelList?: {
+    azureDeployName?: boolean;
+    notFoundContent?: ReactNode;
+    placeholder?: string;
+    showModelFetcher?: boolean;
+  };
+  title: ReactNode;
+}
+
+const ProviderConfig = memo<ProviderConfigProps>(
+  ({
+    apiKeyItems,
+    id,
+    proxyUrl,
+    showApiKey = true,
+    checkModel,
+    canDeactivate = true,
+    title,
+    checkerItem,
+    modelList,
+    showBrowserRequest,
+    className,
+    name,
+  }) => {
+    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: (
+              <Input.Password
+                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 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. Component props
+       * 2. Provider allow to edit endpoint and the value of endpoint is not empty
+       * 3. There is an apikey provided by user
+       */
+      (showBrowserRequest ||
+        (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],
+      },
+      checkerItem ?? {
+        children: <Checker model={checkModel!} provider={id} />,
+        desc: t('llm.checker.desc'),
+        label: t('llm.checker.title'),
+        minWidth: undefined,
+      },
+    ].filter(Boolean) as FormItemProps[];
+
+    /* ↓ cloud slot ↓ */
+
+    /* ↑ cloud slot ↑ */
+
+    const model: ItemGroup = {
+      children: formItems,
+
+      defaultActive: canDeactivate ? enabled : undefined,
+      extra: canDeactivate ? (
+        <Switch
+          onChange={(enabled) => {
+            toggleProviderEnabled(id, enabled);
+          }}
+          value={enabled}
+        />
+      ) : undefined,
+      title: (
+        <Flexbox
+          align={'center'}
+          className={styles.safariIconWidthFix}
+          horizontal
+          style={{
+            height: 24,
+            maxHeight: 24,
+            ...(enabled ? {} : { filter: 'grayscale(100%)', maxHeight: 24, opacity: 0.66 }),
+          }}
+        >
+          {title}
+        </Flexbox>
+      ),
+    };
+
+    return (
+      <Form
+        className={cx(styles.form, className)}
+        form={form}
+        items={[model]}
+        onValuesChange={debounce(setSettings, 100)}
+        {...FORM_STYLE}
+      />
+    );
+  },
+);
+
+export default ProviderConfig;

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

@@ -0,0 +1,93 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { App, Typography } 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 ModelIcon from '@/components/ModelIcon';
+import { ModelInfoTags } from '@/components/ModelSelect';
+import { useUserStore } from '@/store/user';
+import { modelConfigSelectors } 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,
+  );
+
+  return (
+    <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <ModelIcon model={id} size={32} />
+        <Flexbox>
+          <Flexbox align={'center'} gap={8} horizontal>
+            {modelCard?.displayName || id}
+            <ModelInfoTags id={id} {...modelCard} isCustom />
+          </Flexbox>
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            <Flexbox gap={2} horizontal>
+              {id}
+              {!!modelCard?.deploymentName && (
+                <>
+                  <Icon icon={LucideArrowRight} />
+                  {modelCard?.deploymentName}
+                </>
+              )}
+            </Flexbox>
+          </Typography.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',
+            });
+          }}
+          title={t('delete')}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default CustomModelOption;

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

@@ -0,0 +1,98 @@
+import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ChatModelCard } from '@/types/llm';
+
+import MaxTokenSlider from './MaxTokenSlider';
+
+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();
+
+    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={{ 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>
+    );
+  },
+);
+export default ModelConfigForm;

package/src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/MaxTokenSlider.tsx

@@ -0,0 +1,103 @@
+import { InputNumber, Slider } from 'antd';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
+
+const Kibi = 1024;
+
+const exponent = (num: number) => Math.log2(num);
+const getRealValue = (num: number) => Math.round(Math.pow(2, num));
+const powerKibi = (num: number) => Math.round(Math.pow(2, num) * Kibi);
+
+interface MaxTokenSliderProps {
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValue }) => {
+  const { t } = useTranslation('setting');
+
+  const [token, setTokens] = useMergeState(0, {
+    defaultValue,
+    onChange,
+    value: value,
+  });
+
+  const [powValue, setPowValue] = useMergeState(0, {
+    defaultValue: exponent(typeof defaultValue === 'undefined' ? 0 : defaultValue / 1024),
+    value: exponent(typeof value === 'undefined' ? 0 : value / Kibi),
+  });
+
+  const updateWithPowValue = (value: number) => {
+    setPowValue(value);
+
+    setTokens(getRealValue(value) === 1 ? 0 : powerKibi(value));
+  };
+
+  const updateWithRealValue = (value: number) => {
+    setTokens(Math.round(value));
+
+    setPowValue(exponent(value / Kibi));
+  };
+
+  const isMobile = useServerConfigStore(serverConfigSelectors.isMobile);
+
+  const marks = useMemo(() => {
+    return {
+      [exponent(1)]: '0',
+      [exponent(2)]: isMobile ? '2' : '2K', // 2 Kibi = 2048
+      [exponent(4)]: isMobile ? '4' : '4K',
+      [exponent(8)]: isMobile ? '8' : '8K',
+      [exponent(16)]: isMobile ? '16' : '16K',
+      [exponent(32)]: isMobile ? '32' : '32K',
+      [exponent(64)]: isMobile ? '64' : '64K',
+      [exponent((128 / Kibi) * 1000)]: ' ', // hide tick mark
+      [exponent((200 / Kibi) * 1000)]: isMobile ? '200' : '200k', // 200,000
+      [exponent(Kibi)]: isMobile ? '1024' : '1M',
+    };
+  }, [isMobile]);
+
+  return (
+    <Flexbox align={'center'} gap={12} horizontal>
+      <Flexbox flex={1}>
+        <Slider
+          marks={marks}
+          max={exponent(Kibi)}
+          min={0}
+          onChange={updateWithPowValue}
+          step={null}
+          tooltip={{
+            formatter: (x) => {
+              if (typeof x === 'undefined') return;
+              if (x === 0) return t('llm.customModelCards.modelConfig.tokens.unlimited');
+
+              let value = getRealValue(x);
+              if (value < 125) return value.toFixed(0) + 'K';
+              else if (value < Kibi) return ((value * Kibi) / 1000).toFixed(0) + 'k';
+              return (value / Kibi).toFixed(0) + 'M';
+            },
+          }}
+          value={powValue}
+        />
+      </Flexbox>
+      <div>
+        <InputNumber
+          min={0}
+          onChange={(e) => {
+            if (!e && e !== 0) return;
+
+            updateWithRealValue(e);
+          }}
+          step={2 * Kibi}
+          value={token}
+        />
+      </div>
+    </Flexbox>
+  );
+});
+export default MaxTokenSlider;

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

@@ -0,0 +1,78 @@
+import { Modal } from '@lobehub/ui';
+import { Button, 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/slices/modelList/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
+      destroyOnClose
+      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/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx

@@ -0,0 +1,86 @@
+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 { 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: 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] = useUserStore((s) => [
+    s.useFetchProviderModelList,
+    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 { 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
+          overlayStyle={{ 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>
+    </Typography.Text>
+  );
+});
+export default ModelFetcher;