@lobehub/chat 1.43.5 → 1.44.0

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

@@ -0,0 +1,96 @@
+import { Modal, SortableList } from '@lobehub/ui';
+import { App, Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAiInfraStore } from '@/store/aiInfra';
+import { AiProviderModelListItem } from '@/types/aiModel';
+
+import ListItem from './ListItem';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    height: 36px;
+    padding-inline: 8px;
+    border-radius: ${token.borderRadius}px;
+    transition: background 0.2s ease-in-out;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+}));
+
+interface SortModelModalProps {
+  defaultItems: AiProviderModelListItem[];
+  onCancel: () => void;
+  open: boolean;
+}
+const SortModelModal = memo<SortModelModalProps>(({ open, onCancel, defaultItems }) => {
+  const { t } = useTranslation('modelProvider');
+  const { styles } = useStyles();
+  const [providerId, updateAiModelsSort] = useAiInfraStore((s) => [
+    s.activeAiProvider,
+    s.updateAiModelsSort,
+  ]);
+  const [loading, setLoading] = useState(false);
+  const { message } = App.useApp();
+
+  const [items, setItems] = useState(defaultItems);
+  return (
+    <Modal
+      allowFullscreen
+      footer={null}
+      onCancel={onCancel}
+      open={open}
+      title={t('sortModal.title')}
+      width={400}
+    >
+      <Flexbox gap={16}>
+        <SortableList
+          items={items}
+          onChange={async (items: AiProviderModelListItem[]) => {
+            setItems(items);
+          }}
+          renderItem={(item: AiProviderModelListItem) => (
+            <SortableList.Item
+              align={'center'}
+              className={styles.container}
+              gap={4}
+              horizontal
+              id={item.id}
+              justify={'space-between'}
+            >
+              <ListItem {...item} />
+            </SortableList.Item>
+          )}
+        />
+        <Button
+          block
+          loading={loading}
+          onClick={async () => {
+            if (!providerId) return;
+
+            const sortMap = items.map((item, index) => ({
+              id: item.id,
+              sort: index,
+            }));
+
+            setLoading(true);
+            await updateAiModelsSort(providerId, sortMap);
+            setLoading(false);
+            message.success(t('sortModal.success'));
+            onCancel();
+          }}
+          type={'primary'}
+        >
+          {t('sortModal.update')}
+        </Button>
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default SortModelModal;

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { ReactNode, Suspense, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+import DisabledModels from './DisabledModels';
+import EmptyModels from './EmptyModels';
+import EnabledModelList from './EnabledModelList';
+import ModelTitle from './ModelTitle';
+import SearchResult from './SearchResult';
+import SkeletonList from './SkeletonList';
+
+const Content = memo<{ id: string }>(({ id }) => {
+  const [isSearching, isEmpty, useFetchAiProviderModels] = useAiInfraStore((s) => [
+    !!s.modelSearchKeyword,
+    aiModelSelectors.isEmptyAiProviderModelList(s),
+    s.useFetchAiProviderModels,
+  ]);
+
+  const { isLoading } = useFetchAiProviderModels(id);
+
+  if (isLoading) return <SkeletonList />;
+
+  if (isSearching) return <SearchResult />;
+
+  return isEmpty ? (
+    <EmptyModels provider={id} />
+  ) : (
+    <Flexbox>
+      <EnabledModelList />
+      <DisabledModels />
+    </Flexbox>
+  );
+});
+
+interface ModelListProps {
+  id: string;
+  notFoundContent?: ReactNode;
+  placeholder?: string;
+  showAzureDeployName?: boolean;
+}
+
+const ModelList = memo<ModelListProps>(({ id }) => {
+  const mobile = useIsMobile();
+
+  return (
+    <Flexbox gap={16} paddingInline={mobile ? 12 : 0}>
+      <ModelTitle provider={id} />
+      <Suspense fallback={<SkeletonList />}>
+        <Content id={id} />
+      </Suspense>
+    </Flexbox>
+  );
+});
+
+export default ModelList;

package/src/app/(main)/settings/provider/features/ProviderConfig/Checker.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Alert, Highlighter } from '@lobehub/ui';
+import { Button } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { TraceNameMap } from '@/const/trace';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useProviderName } from '@/hooks/useProviderName';
+import { chatService } from '@/services/chat';
+import { ChatMessageError } from '@/types/message';
+
+interface ConnectionCheckerProps {
+  model: string;
+  provider: string;
+}
+
+const Error = memo<{ error: ChatMessageError }>(({ error }) => {
+  const { t } = useTranslation('error');
+  const providerName = useProviderName(error.body?.provider);
+
+  return (
+    <Flexbox gap={8} style={{ maxWidth: '600px', width: '100%' }}>
+      <Alert
+        banner
+        extra={
+          <Flexbox>
+            <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+              {JSON.stringify(error.body || error, null, 2)}
+            </Highlighter>
+          </Flexbox>
+        }
+        message={t(`response.${error.type}` as any, { provider: providerName })}
+        showIcon
+        type={'error'}
+      />
+    </Flexbox>
+  );
+});
+
+const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
+  const { t } = useTranslation('setting');
+
+  const [loading, setLoading] = useState(false);
+  const [pass, setPass] = useState(false);
+
+  const theme = useTheme();
+  const [error, setError] = useState<ChatMessageError | undefined>();
+
+  const checkConnection = async () => {
+    let isError = false;
+
+    await chatService.fetchPresetTaskResult({
+      onError: (_, rawError) => {
+        setError(rawError);
+        setPass(false);
+        isError = true;
+      },
+      onFinish: async (value) => {
+        if (!isError && value) {
+          setError(undefined);
+          setPass(true);
+        } else {
+          setPass(false);
+          setError({
+            body: value,
+            message: t('response.ConnectionCheckFailed', { ns: 'error' }),
+            type: 'ConnectionCheckFailed',
+          });
+        }
+      },
+      onLoadingChange: (loading) => {
+        setLoading(loading);
+      },
+      params: {
+        messages: [
+          {
+            content: '你好',
+            role: 'user',
+          },
+        ],
+        model,
+        provider,
+      },
+      trace: {
+        sessionId: `connection:${provider}`,
+        topicId: model,
+        traceName: TraceNameMap.ConnectivityChecker,
+      },
+    });
+  };
+  const isMobile = useIsMobile();
+
+  return (
+    <Flexbox align={isMobile ? 'flex-start' : 'flex-end'} gap={8}>
+      <Flexbox align={'center'} direction={isMobile ? 'horizontal-reverse' : 'horizontal'} gap={12}>
+        {pass && (
+          <Flexbox gap={4} horizontal>
+            <CheckCircleFilled
+              style={{
+                color: theme.colorSuccess,
+              }}
+            />
+            {t('llm.checker.pass')}
+          </Flexbox>
+        )}
+        <Button loading={loading} onClick={checkConnection}>
+          {t('llm.checker.button')}
+        </Button>
+      </Flexbox>
+      {error && <Error error={error} />}
+    </Flexbox>
+  );
+});
+
+export default Checker;

package/src/app/(main)/settings/provider/features/ProviderConfig/SkeletonInput.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import { Skeleton } from 'antd';
+
+export const SkeletonInput = () => <Skeleton.Input active block />;

package/src/app/(main)/settings/provider/features/ProviderConfig/UpdateProviderInfo/SettingModal.tsx

@@ -0,0 +1,137 @@
+import { FormModal, Icon } from '@lobehub/ui';
+import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
+import { App, Button, Input } from 'antd';
+import { BrainIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAiInfraStore } from '@/store/aiInfra/store';
+import { AiProviderDetailItem, UpdateAiProviderParams } from '@/types/aiProvider';
+
+interface CreateNewProviderProps {
+  id: string;
+  initialValues: AiProviderDetailItem;
+  onClose?: () => void;
+  open?: boolean;
+}
+
+const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open, initialValues, id }) => {
+  const { t } = useTranslation(['modelProvider', 'common']);
+  const [loading, setLoading] = useState(false);
+  const [updateAiProvider, deleteAiProvider] = useAiInfraStore((s) => [
+    s.updateAiProvider,
+    s.deleteAiProvider,
+  ]);
+
+  const { message, modal } = App.useApp();
+  const router = useRouter();
+
+  const onFinish = async (values: UpdateAiProviderParams) => {
+    setLoading(true);
+
+    try {
+      await updateAiProvider(id, values);
+      setLoading(false);
+      message.success(t('updateAiProvider.updateSuccess'));
+      onClose?.();
+    } catch (e) {
+      console.error(e);
+      setLoading(false);
+    }
+  };
+
+  const basicItems: FormItemProps[] = [
+    {
+      children: initialValues.id,
+      label: t('createNewAiProvider.id.title'),
+      minWidth: 400,
+      rules: [{ message: t('createNewAiProvider.id.required'), required: true }],
+    },
+    {
+      children: (
+        <Input placeholder={t('createNewAiProvider.name.placeholder')} variant={'filled'} />
+      ),
+      label: t('createNewAiProvider.name.title'),
+      minWidth: 400,
+      name: 'name',
+      rules: [{ message: t('createNewAiProvider.name.required'), required: true }],
+    },
+    {
+      children: (
+        <Input.TextArea
+          placeholder={t('createNewAiProvider.description.placeholder')}
+          style={{ minHeight: 80 }}
+          variant={'filled'}
+        />
+      ),
+      label: t('createNewAiProvider.description.title'),
+      minWidth: 400,
+      name: 'description',
+    },
+    {
+      children: <Input allowClear placeholder={'https://logo-url'} variant={'filled'} />,
+      label: t('createNewAiProvider.logo.title'),
+      minWidth: 400,
+      name: 'logo',
+    },
+  ];
+
+  return (
+    <FormModal
+      footer={
+        <Flexbox horizontal justify={'space-between'}>
+          <Button
+            danger
+            disabled={loading}
+            onClick={() => {
+              modal.confirm({
+                okButtonProps: {
+                  danger: true,
+                },
+                okText: t('delete', { ns: 'common' }),
+                onOk: async () => {
+                  await deleteAiProvider(id);
+                  router.push('/settings/provider');
+
+                  onClose?.();
+                  message.success(t('updateAiProvider.deleteSuccess'));
+                },
+                title: t('updateAiProvider.confirmDelete'),
+              });
+            }}
+            type={'primary'}
+          >
+            {t('delete', { ns: 'common' })}
+          </Button>
+          <Flexbox gap={8} horizontal>
+            <Button htmlType={'submit'} loading={loading} type={'primary'}>
+              {t('update', { ns: 'common' })}
+            </Button>
+          </Flexbox>
+        </Flexbox>
+      }
+      initialValues={initialValues}
+      items={[
+        {
+          children: basicItems,
+          title: t('createNewAiProvider.basicTitle'),
+        },
+      ]}
+      onCancel={onClose}
+      onFinish={onFinish}
+      open={open}
+      scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+      submitText={t('createNewAiProvider.confirm')}
+      title={
+        <Flexbox gap={8} horizontal>
+          <Icon icon={BrainIcon} />
+          {t('createNewAiProvider.title')}
+        </Flexbox>
+      }
+    />
+  );
+});
+
+export default CreateNewProvider;

package/src/app/(main)/settings/provider/features/ProviderConfig/UpdateProviderInfo/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { SettingsIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+import SettingModal from './SettingModal';
+
+const UpdateProviderInfo = memo(() => {
+  const { t } = useTranslation('modelProvider');
+
+  const [open, setOpen] = useState(false);
+  const providerConfig = useAiInfraStore(aiProviderSelectors.activeProviderConfig, isEqual);
+
+  return (
+    <>
+      <Tooltip title={t('updateAiProvider.tooltip')}>
+        <Button
+          color={'default'}
+          icon={<Icon icon={SettingsIcon} />}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+          }}
+          size={'small'}
+          variant={'text'}
+        />
+      </Tooltip>
+      {open && providerConfig && (
+        <SettingModal
+          id={providerConfig.id}
+          initialValues={providerConfig}
+          onClose={() => {
+            setOpen(false);
+          }}
+          open={open}
+        />
+      )}
+    </>
+  );
+});
+
+export default UpdateProviderInfo;