@lobehub/chat 1.43.5 → 1.44.0

package/src/app/(main)/settings/provider/features/ModelList/CreateNewModelModal/Form.tsx

@@ -0,0 +1,105 @@
+import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MaxTokenSlider from '@/components/MaxTokenSlider';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { AiModelType } from '@/types/aiModel';
+import { ChatModelCard } from '@/types/llm';
+
+interface ModelConfigFormProps {
+  initialValues?: ChatModelCard;
+  onFormInstanceReady: (instance: FormInstance) => void;
+  showAzureDeployName?: boolean;
+  type?: AiModelType;
+}
+
+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={['config', '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={['abilities', 'functionCall']}
+            valuePropName={'checked'}
+          >
+            <Checkbox />
+          </Form.Item>
+          <Form.Item
+            extra={t('llm.customModelCards.modelConfig.vision.extra')}
+            label={t('llm.customModelCards.modelConfig.vision.title')}
+            name={['abilities', 'vision']}
+            valuePropName={'checked'}
+          >
+            <Checkbox />
+          </Form.Item>
+          {/*<Form.Item*/}
+          {/*  extra={t('llm.customModelCards.modelConfig.files.extra')}*/}
+          {/*  label={t('llm.customModelCards.modelConfig.files.title')}*/}
+          {/*  name={['abilities', 'files']}*/}
+          {/*  valuePropName={'checked'}*/}
+          {/*>*/}
+          {/*  <Checkbox />*/}
+          {/*</Form.Item>*/}
+        </Form>
+      </div>
+    );
+  },
+);
+export default ModelConfigForm;

package/src/app/(main)/settings/provider/features/ModelList/CreateNewModelModal/index.tsx

@@ -0,0 +1,69 @@
+import { Modal } from '@lobehub/ui';
+import { Button, FormInstance } from 'antd';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useAiInfraStore } from '@/store/aiInfra';
+
+import ModelConfigForm from './Form';
+
+interface ModelConfigModalProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const ModelConfigModal = memo<ModelConfigModalProps>(({ open, setOpen }) => {
+  const { t } = useTranslation(['modelProvider', 'common']);
+  const [formInstance, setFormInstance] = useState<FormInstance>();
+  const [loading, setLoading] = useState(false);
+  const [editingProvider, createNewAiModel] = useAiInfraStore((s) => [
+    s.activeAiProvider!,
+    s.createNewAiModel,
+  ]);
+
+  const closeModal = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      footer={[
+        <Button key="cancel" onClick={closeModal}>
+          {t('cancel', { ns: 'common' })}
+        </Button>,
+
+        <Button
+          key="ok"
+          loading={loading}
+          onClick={async () => {
+            if (!editingProvider || !formInstance) return;
+            const data = formInstance.getFieldsValue();
+
+            setLoading(true);
+            await createNewAiModel({ ...data, providerId: editingProvider });
+            setLoading(false);
+
+            closeModal();
+          }}
+          style={{ marginInlineStart: '16px' }}
+          type="primary"
+        >
+          {t('ok', { ns: 'common' })}
+        </Button>,
+      ]}
+      maskClosable
+      onCancel={closeModal}
+      open={open}
+      title={t('providerModels.createNew.title')}
+      zIndex={1251} // Select is 1150
+    >
+      <ModelConfigForm
+        onFormInstanceReady={setFormInstance}
+        showAzureDeployName={editingProvider === ModelProvider.Azure}
+      />
+    </Modal>
+  );
+});
+export default ModelConfigModal;

package/src/app/(main)/settings/provider/features/ModelList/DisabledModels.tsx

@@ -0,0 +1,29 @@
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAiInfraStore } from '@/store/aiInfra';
+import { aiModelSelectors } from '@/store/aiInfra/selectors';
+
+import ModelItem from './ModelItem';
+
+const DisabledModels = memo(() => {
+  const { t } = useTranslation('modelProvider');
+
+  const disabledModels = useAiInfraStore(aiModelSelectors.disabledAiProviderModelList, isEqual);
+
+  return (
+    <Flexbox>
+      <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+        {t('providerModels.list.disabled')}
+      </Typography.Text>
+      {disabledModels.map((item) => (
+        <ModelItem {...item} key={item.id} />
+      ))}
+    </Flexbox>
+  );
+});
+
+export default DisabledModels;

package/src/app/(main)/settings/provider/features/ModelList/EmptyModels.tsx

@@ -0,0 +1,101 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { BrainIcon, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useAiInfraStore } from '@/store/aiInfra';
+
+import CreateNewModelModal from './CreateNewModelModal';
+
+const useStyles = createStyles(({ css, token }) => ({
+  circle: css`
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: ${token.colorFillSecondary};
+  `,
+  container: css`
+    width: 100%;
+    border: 1px dashed ${token.colorBorder};
+    border-radius: 12px;
+    background: ${token.colorBgContainer};
+  `,
+  description: css`
+    max-width: 280px;
+
+    font-size: ${token.fontSize}px;
+    color: ${token.colorTextDescription};
+    text-align: center;
+    text-wrap: balance;
+  `,
+  iconWrapper: css`
+    position: relative;
+    width: 64px;
+    height: 64px;
+  `,
+  sparklesIcon: css`
+    font-size: 40px;
+    color: ${token.colorText};
+  `,
+  title: css`
+    font-size: ${token.fontSizeLG}px;
+    font-weight: 500;
+  `,
+}));
+
+const EmptyState = memo<{ provider: string }>(({ provider }) => {
+  const { t } = useTranslation('modelProvider');
+  const { styles } = useStyles();
+
+  const [fetchRemoteModelList] = useAiInfraStore((s) => [s.fetchRemoteModelList]);
+
+  const [fetchRemoteModelsLoading, setFetchRemoteModelsLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <Center className={styles.container} gap={24} paddingBlock={40}>
+      <Center className={styles.circle}>
+        <Icon className={styles.sparklesIcon} icon={BrainIcon} />
+      </Center>
+      <Flexbox align={'center'} gap={8}>
+        <div className={styles.title}>{t('providerModels.list.empty.title')}</div>
+        <div className={styles.description}>{t('providerModels.list.empty.desc')}</div>
+      </Flexbox>
+
+      <Flexbox gap={8} horizontal>
+        <Button
+          icon={<Icon icon={PlusIcon} />}
+          onClick={() => {
+            setShowModal(true);
+          }}
+        >
+          {t('providerModels.list.addNew')}
+        </Button>
+        <CreateNewModelModal open={showModal} setOpen={setShowModal} />
+        <Button
+          icon={<Icon icon={LucideRefreshCcwDot} />}
+          loading={fetchRemoteModelsLoading}
+          onClick={async () => {
+            setFetchRemoteModelsLoading(true);
+            try {
+              await fetchRemoteModelList(provider);
+            } catch (e) {
+              console.error(e);
+            }
+            setFetchRemoteModelsLoading(false);
+          }}
+          type={'primary'}
+        >
+          {fetchRemoteModelsLoading
+            ? t('providerModels.list.fetcher.fetching')
+            : t('providerModels.list.fetcher.fetch')}
+        </Button>
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default EmptyState;

package/src/app/(main)/settings/provider/features/ModelList/EnabledModelList/index.tsx

@@ -0,0 +1,85 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ArrowDownUpIcon, ToggleLeft } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useAiInfraStore } from '@/store/aiInfra';
+import { aiModelSelectors } from '@/store/aiInfra/selectors';
+
+import ModelItem from '../ModelItem';
+import SortModelModal from '../SortModelModal';
+
+const EnabledModelList = () => {
+  const { t } = useTranslation('modelProvider');
+
+  const enabledModels = useAiInfraStore(aiModelSelectors.enabledAiProviderModelList, isEqual);
+  const batchToggleAiModels = useAiInfraStore((s) => s.batchToggleAiModels);
+  const [open, setOpen] = useState(false);
+  const [batchLoading, setBatchLoading] = useState(false);
+
+  const isEmpty = enabledModels.length === 0;
+  return (
+    <>
+      <Flexbox horizontal justify={'space-between'}>
+        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+          {t('providerModels.list.enabled')}
+        </Typography.Text>
+        {!isEmpty && (
+          <Flexbox horizontal>
+            <ActionIcon
+              icon={ToggleLeft}
+              loading={batchLoading}
+              onClick={async () => {
+                setBatchLoading(true);
+                await batchToggleAiModels(
+                  enabledModels.map((i) => i.id),
+                  false,
+                );
+                setBatchLoading(false);
+              }}
+              size={'small'}
+              title={t('providerModels.list.enabledActions.disableAll')}
+            />
+
+            <ActionIcon
+              icon={ArrowDownUpIcon}
+              onClick={() => {
+                setOpen(true);
+              }}
+              size={'small'}
+              title={t('providerModels.list.enabledActions.sort')}
+            />
+          </Flexbox>
+        )}
+        {open && (
+          <SortModelModal
+            defaultItems={enabledModels}
+            onCancel={() => {
+              setOpen(false);
+            }}
+            open={open}
+          />
+        )}
+      </Flexbox>
+      {isEmpty ? (
+        <Center padding={12}>
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {t('providerModels.list.enabledEmpty')}
+          </Typography.Text>
+        </Center>
+      ) : (
+        <Flexbox gap={2}>
+          {enabledModels.map(({ displayName, id, ...res }) => {
+            const label = displayName || id;
+
+            return <ModelItem displayName={label as string} id={id as string} key={id} {...res} />;
+          })}
+        </Flexbox>
+      )}
+    </>
+  );
+};
+export default EnabledModelList;

package/src/app/(main)/settings/provider/features/ModelList/ModelConfigModal/Form.tsx

@@ -0,0 +1,109 @@
+import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MaxTokenSlider from '@/components/MaxTokenSlider';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { AiModelType } from '@/types/aiModel';
+import { ChatModelCard } from '@/types/llm';
+
+interface ModelConfigFormProps {
+  idEditable?: boolean;
+  initialValues?: ChatModelCard;
+  onFormInstanceReady: (instance: FormInstance) => void;
+  showAzureDeployName?: boolean;
+  type?: AiModelType;
+}
+
+const ModelConfigForm = memo<ModelConfigFormProps>(
+  ({ showAzureDeployName, idEditable, 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
+              disabled={!idEditable}
+              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={['config', '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={['abilities', 'functionCall']}
+            valuePropName={'checked'}
+          >
+            <Checkbox />
+          </Form.Item>
+          <Form.Item
+            extra={t('llm.customModelCards.modelConfig.vision.extra')}
+            label={t('llm.customModelCards.modelConfig.vision.title')}
+            name={['abilities', 'vision']}
+            valuePropName={'checked'}
+          >
+            <Checkbox />
+          </Form.Item>
+          {/*<Form.Item*/}
+          {/*  extra={t('llm.customModelCards.modelConfig.files.extra')}*/}
+          {/*  label={t('llm.customModelCards.modelConfig.files.title')}*/}
+          {/*  name={['abilities', 'files']}*/}
+          {/*  valuePropName={'checked'}*/}
+          {/*>*/}
+          {/*  <Checkbox />*/}
+          {/*</Form.Item>*/}
+        </Form>
+      </div>
+    );
+  },
+);
+export default ModelConfigForm;

package/src/app/(main)/settings/provider/features/ModelList/ModelConfigModal/index.tsx

@@ -0,0 +1,76 @@
+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 { ModelProvider } from '@/libs/agent-runtime';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { AiModelSourceEnum } from '@/types/aiModel';
+
+import ModelConfigForm from './Form';
+
+interface ModelConfigModalProps {
+  id: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const ModelConfigModal = memo<ModelConfigModalProps>(({ id, open, setOpen }) => {
+  const { t } = useTranslation(['common', 'setting']);
+  const [formInstance, setFormInstance] = useState<FormInstance>();
+  const [loading, setLoading] = useState(false);
+  const [editingProvider, updateAiModelsConfig] = useAiInfraStore((s) => [
+    s.activeAiProvider!,
+    s.updateAiModelsConfig,
+  ]);
+  const model = useAiInfraStore(aiModelSelectors.getAiModelById(id), isEqual);
+
+  const closeModal = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      footer={[
+        <Button key="cancel" onClick={closeModal}>
+          {t('cancel')}
+        </Button>,
+
+        <Button
+          key="ok"
+          loading={loading}
+          onClick={async () => {
+            if (!editingProvider || !id || !formInstance) return;
+            const data = formInstance.getFieldsValue();
+
+            setLoading(true);
+            await updateAiModelsConfig(id, editingProvider, data);
+            setLoading(false);
+
+            closeModal();
+          }}
+          style={{ marginInlineStart: '16px' }}
+          type="primary"
+        >
+          {t('ok')}
+        </Button>,
+      ]}
+      maskClosable
+      onCancel={closeModal}
+      open={open}
+      title={t('llm.customModelCards.modelConfig.modalTitle', { ns: 'setting' })}
+      zIndex={1251} // Select is 1150
+    >
+      <ModelConfigForm
+        idEditable={model?.source !== AiModelSourceEnum.Builtin}
+        initialValues={model}
+        onFormInstanceReady={setFormInstance}
+        showAzureDeployName={editingProvider === ModelProvider.Azure}
+        type={model?.type}
+      />
+    </Modal>
+  );
+});
+export default ModelConfigModal;