@lobehub/chat 1.43.5 → 1.44.0

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

@@ -0,0 +1,346 @@
+import { ModelIcon } from '@lobehub/icons';
+import { ActionIcon, Tag, copyToClipboard } from '@lobehub/ui';
+import { App, Switch, Typography } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { LucidePencil, TrashIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ModelInfoTags } from '@/components/ModelSelect';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { AiModelSourceEnum, AiProviderModelListItem, ChatModelPricing } from '@/types/aiModel';
+
+import ModelConfigModal from './ModelConfigModal';
+
+const f = (number: number | undefined, text: string) =>
+  typeof number !== 'undefined' ? text : undefined;
+
+export const useStyles = createStyles(({ css, token, cx }) => {
+  const config = css`
+    opacity: 0;
+    transition: all 100ms ease-in-out;
+  `;
+
+  return {
+    config,
+    container: css`
+      position: relative;
+      border-radius: 12px;
+      transition: all 200ms ease-in-out;
+
+      &:hover {
+        background-color: ${token.colorFillTertiary};
+
+        .${cx(config)} {
+          opacity: 1;
+        }
+      }
+    `,
+    desc: css`
+      flex: 1;
+      min-width: 0;
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `,
+  };
+});
+
+interface ModelItemProps extends AiProviderModelListItem {
+  enabled: boolean;
+  id: string;
+  isAzure?: boolean;
+  pricing?: ChatModelPricing;
+  releasedAt?: string;
+  removed?: boolean;
+}
+
+const ModelItem = memo<ModelItemProps>(
+  ({
+    displayName,
+    id,
+    enabled,
+    // removed,
+    releasedAt,
+    pricing,
+    source,
+    contextWindowTokens,
+    abilities,
+    type,
+  }) => {
+    const { styles } = useStyles();
+    const { t } = useTranslation(['modelProvider', 'components', 'models']);
+    const theme = useTheme();
+
+    const [activeAiProvider, isModelLoading, toggleModelEnabled, removeAiModel] = useAiInfraStore(
+      (s) => [
+        s.activeAiProvider,
+        aiModelSelectors.isModelLoading(id)(s),
+        s.toggleModelEnabled,
+        s.removeAiModel,
+      ],
+    );
+
+    const [checked, setChecked] = useState(enabled);
+    const [showConfig, setShowConfig] = useState(false);
+
+    const formatPricing = (): string[] => {
+      switch (type) {
+        case 'chat': {
+          return [
+            f(
+              pricing?.input,
+              t('providerModels.item.pricing.inputTokens', { amount: pricing?.input }),
+            ),
+            f(
+              pricing?.output,
+              t('providerModels.item.pricing.outputTokens', { amount: pricing?.output }),
+            ),
+          ].filter(Boolean) as string[];
+        }
+        case 'embedding': {
+          return [
+            f(
+              pricing?.input,
+              t('providerModels.item.pricing.inputTokens', { amount: pricing?.input }),
+            ),
+          ].filter(Boolean) as string[];
+        }
+        case 'tts': {
+          return [
+            f(
+              pricing?.input,
+              t('providerModels.item.pricing.inputCharts', { amount: pricing?.input }),
+            ),
+          ].filter(Boolean) as string[];
+        }
+        case 'stt': {
+          return [
+            f(
+              pricing?.input,
+              t('providerModels.item.pricing.inputMinutes', { amount: pricing?.input }),
+            ),
+          ].filter(Boolean) as string[];
+        }
+
+        case 'image': {
+          return [];
+        }
+
+        default: {
+          return [];
+        }
+      }
+    };
+
+    const content = [
+      releasedAt && t('providerModels.item.releasedAt', { releasedAt }),
+      ...formatPricing(),
+    ].filter(Boolean) as string[];
+    const { message, modal } = App.useApp();
+
+    const isMobile = useIsMobile();
+
+    const dom = isMobile ? (
+      <Flexbox
+        align={'center'}
+        gap={12}
+        horizontal
+        justify={'space-between'}
+        padding={'12px 6px'}
+        width={'100%'}
+      >
+        <Flexbox align={'center'} flex={1} gap={16} horizontal style={{ minWidth: 0 }}>
+          <ModelIcon model={id} size={32} />
+          <Flexbox flex={1} gap={4} style={{ minWidth: 0 }}>
+            <Flexbox align={'center'} gap={8} horizontal>
+              {displayName || id}
+              <Flexbox align={'center'} gap={8} horizontal>
+                <ModelInfoTags
+                  placement={'top'}
+                  {...abilities}
+                  contextWindowTokens={contextWindowTokens}
+                />
+                {/*{removed && (*/}
+                {/*  <Tooltip*/}
+                {/*    overlayStyle={{ maxWidth: 300 }}*/}
+                {/*    placement={'top'}*/}
+                {/*    style={{ pointerEvents: 'none' }}*/}
+                {/*    title={t('ModelSelect.removed')}*/}
+                {/*  >*/}
+                {/*    <ActionIcon icon={Recycle} style={{ color: theme.colorWarning }} />*/}
+                {/*  </Tooltip>*/}
+                {/*)}*/}
+              </Flexbox>
+            </Flexbox>
+            <div>
+              <Tag
+                onClick={() => {
+                  copyToClipboard(id);
+                }}
+                style={{ cursor: 'pointer', marginRight: 0 }}
+              >
+                {id}
+              </Tag>
+            </div>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Flexbox className={styles.config} horizontal style={{ opacity: 1 }}>
+            <ActionIcon
+              icon={LucidePencil}
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowConfig(true);
+              }}
+              size={'small'}
+              title={t('providerModels.item.config')}
+            />
+            {source !== AiModelSourceEnum.Builtin && (
+              <ActionIcon
+                icon={TrashIcon}
+                onClick={() => {
+                  modal.confirm({
+                    centered: true,
+                    okButtonProps: {
+                      danger: true,
+                      type: 'primary',
+                    },
+                    onOk: async () => {
+                      await removeAiModel(id, activeAiProvider!);
+                      message.success(t('providerModels.item.delete.success'));
+                    },
+                    title: t('providerModels.item.delete.confirm', {
+                      displayName: displayName || id,
+                    }),
+                  });
+                }}
+                size={'small'}
+                title={t('providerModels.item.delete.title')}
+              />
+            )}
+          </Flexbox>
+          <Switch
+            checked={checked}
+            loading={isModelLoading}
+            onChange={async (e) => {
+              setChecked(e);
+              await toggleModelEnabled({ enabled: e, id, source });
+            }}
+            size={'small'}
+          />
+        </Flexbox>
+      </Flexbox>
+    ) : (
+      <Flexbox
+        align={'center'}
+        className={styles.container}
+        gap={24}
+        horizontal
+        justify={'space-between'}
+        padding={12}
+        width={'100%'}
+      >
+        <Flexbox align={'center'} flex={1} gap={8} horizontal style={{ minWidth: 0 }}>
+          <ModelIcon model={id} size={32} />
+          <Flexbox flex={1} gap={2} style={{ minWidth: 0 }}>
+            <Flexbox align={'center'} gap={8} horizontal>
+              {displayName || id}
+              <Tag
+                onClick={() => {
+                  copyToClipboard(id);
+                }}
+                style={{ cursor: 'pointer', marginRight: 0 }}
+              >
+                {id}
+              </Tag>
+              <Flexbox className={styles.config} horizontal>
+                <ActionIcon
+                  icon={LucidePencil}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setShowConfig(true);
+                  }}
+                  size={'small'}
+                  title={t('providerModels.item.config')}
+                />
+                {source !== AiModelSourceEnum.Builtin && (
+                  <ActionIcon
+                    icon={TrashIcon}
+                    onClick={() => {
+                      modal.confirm({
+                        centered: true,
+                        okButtonProps: {
+                          danger: true,
+                          type: 'primary',
+                        },
+                        onOk: async () => {
+                          await removeAiModel(id, activeAiProvider!);
+                          message.success(t('providerModels.item.delete.success'));
+                        },
+                        title: t('providerModels.item.delete.confirm', {
+                          displayName: displayName || id,
+                        }),
+                      });
+                    }}
+                    size={'small'}
+                    title={t('providerModels.item.delete.title')}
+                  />
+                )}
+              </Flexbox>
+            </Flexbox>
+            <Flexbox align={'baseline'} gap={8} horizontal>
+              {content.length > 0 && (
+                <Typography.Text
+                  style={{ color: theme.colorTextSecondary, fontSize: 12, marginBottom: 0 }}
+                >
+                  {content.join(' · ')}
+                </Typography.Text>
+              )}
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <ModelInfoTags
+            placement={'top'}
+            {...abilities}
+            contextWindowTokens={contextWindowTokens}
+          />
+          {/*{removed && (*/}
+          {/*  <Tooltip*/}
+          {/*    overlayStyle={{ maxWidth: 300 }}*/}
+          {/*    placement={'top'}*/}
+          {/*    style={{ pointerEvents: 'none' }}*/}
+          {/*    title={t('ModelSelect.removed')}*/}
+          {/*  >*/}
+          {/*    <ActionIcon icon={Recycle} style={{ color: theme.colorWarning }} />*/}
+          {/*  </Tooltip>*/}
+          {/*)}*/}
+          <Switch
+            checked={checked}
+            loading={isModelLoading}
+            onChange={async (e) => {
+              setChecked(e);
+              await toggleModelEnabled({ enabled: e, id, source });
+            }}
+            size={'small'}
+          />
+        </Flexbox>
+      </Flexbox>
+    );
+
+    return (
+      <>
+        {dom}
+        {showConfig && <ModelConfigModal id={id} open={showConfig} setOpen={setShowConfig} />}
+      </>
+    );
+  },
+);
+
+export default ModelItem;

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

@@ -0,0 +1,37 @@
+import { Icon } from '@lobehub/ui';
+import { Input, InputProps } from 'antd';
+import { SearchIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface SearchProps {
+  onChange: (value: string) => void;
+  value: string;
+  variant?: InputProps['variant'];
+}
+
+const Search = memo<SearchProps>(({ value, onChange, variant }) => {
+  const { t } = useTranslation('modelProvider');
+  const [keyword, setValue] = useState<string>(value);
+
+  return (
+    <Input
+      allowClear
+      onBlur={() => {
+        onChange(keyword);
+      }}
+      onChange={(e) => {
+        setValue(e.target.value);
+      }}
+      onPressEnter={() => {
+        onChange(keyword);
+      }}
+      placeholder={t('providerModels.list.search')}
+      prefix={<Icon icon={SearchIcon} />}
+      size={'small'}
+      value={keyword}
+      variant={variant}
+    />
+  );
+});
+export default Search;

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

@@ -0,0 +1,145 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Skeleton, Space, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { CircleX, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useAiInfraStore } from '@/store/aiInfra';
+import { aiModelSelectors } from '@/store/aiInfra/selectors';
+
+import CreateNewModelModal from '../CreateNewModelModal';
+import Search from './Search';
+
+interface ModelFetcherProps {
+  provider: string;
+}
+
+const ModelTitle = memo<ModelFetcherProps>(({ provider }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('modelProvider');
+  const [
+    searchKeyword,
+    totalModels,
+    isEmpty,
+    hasRemoteModels,
+    fetchRemoteModelList,
+    clearObtainedModels,
+    useFetchAiProviderModels,
+  ] = useAiInfraStore((s) => [
+    s.modelSearchKeyword,
+    aiModelSelectors.totalAiProviderModelList(s),
+    aiModelSelectors.isEmptyAiProviderModelList(s),
+    aiModelSelectors.hasRemoteModels(s),
+    s.fetchRemoteModelList,
+    s.clearRemoteModels,
+    s.useFetchAiProviderModels,
+  ]);
+
+  const { isLoading } = useFetchAiProviderModels(provider);
+
+  const [fetchRemoteModelsLoading, setFetchRemoteModelsLoading] = useState(false);
+  const [clearRemoteModelsLoading, setClearRemoteModelsLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  const mobile = useIsMobile();
+
+  return (
+    <Flexbox
+      gap={12}
+      paddingBlock={8}
+      style={{
+        background: theme.colorBgLayout,
+        position: 'sticky',
+        top: mobile ? -2 : -16,
+        zIndex: 15,
+      }}
+    >
+      <Flexbox align={'center'} gap={0} horizontal justify={'space-between'}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+            {t('providerModels.list.title')}
+          </Typography.Text>
+
+          {isLoading ? (
+            <Skeleton.Button active style={{ height: 22 }} />
+          ) : (
+            <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+              <div style={{ display: 'flex', lineHeight: '24px' }}>
+                {t('providerModels.list.total', { count: totalModels })}
+                {hasRemoteModels && (
+                  <ActionIcon
+                    icon={CircleX}
+                    loading={clearRemoteModelsLoading}
+                    onClick={async () => {
+                      setClearRemoteModelsLoading(true);
+                      await clearObtainedModels(provider);
+                      setClearRemoteModelsLoading(false);
+                    }}
+                    size={'small'}
+                    title={t('providerModels.list.fetcher.clear')}
+                  />
+                )}
+              </div>
+            </Typography.Text>
+          )}
+        </Flexbox>
+        {isLoading ? (
+          <Skeleton.Button active size={'small'} style={{ width: 120 }} />
+        ) : isEmpty ? null : (
+          <Flexbox gap={8} horizontal>
+            {!mobile && (
+              <Search
+                onChange={(value) => {
+                  useAiInfraStore.setState({ modelSearchKeyword: value });
+                }}
+                value={searchKeyword}
+              />
+            )}
+            <Space.Compact>
+              <Button
+                icon={<Icon icon={LucideRefreshCcwDot} />}
+                loading={fetchRemoteModelsLoading}
+                onClick={async () => {
+                  setFetchRemoteModelsLoading(true);
+                  try {
+                    await fetchRemoteModelList(provider);
+                  } catch (e) {
+                    console.error(e);
+                  }
+                  setFetchRemoteModelsLoading(false);
+                }}
+                size={'small'}
+              >
+                {fetchRemoteModelsLoading
+                  ? t('providerModels.list.fetcher.fetching')
+                  : t('providerModels.list.fetcher.fetch')}
+              </Button>
+              <Button
+                icon={<Icon icon={PlusIcon} />}
+                onClick={() => {
+                  setShowModal(true);
+                }}
+                size={'small'}
+              />
+              <CreateNewModelModal open={showModal} setOpen={setShowModal} />
+            </Space.Compact>
+          </Flexbox>
+        )}
+      </Flexbox>
+
+      {mobile && (
+        <Search
+          onChange={(value) => {
+            useAiInfraStore.setState({ modelSearchKeyword: value });
+          }}
+          value={searchKeyword}
+          variant={'filled'}
+        />
+      )}
+    </Flexbox>
+  );
+});
+export default ModelTitle;

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

@@ -0,0 +1,67 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ToggleRightIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+import ModelItem from './ModelItem';
+
+const SearchResult = memo(() => {
+  const { t } = useTranslation('modelProvider');
+
+  const searchKeyword = useAiInfraStore((s) => s.modelSearchKeyword);
+  const batchToggleAiModels = useAiInfraStore((s) => s.batchToggleAiModels);
+
+  const filteredModels = useAiInfraStore(aiModelSelectors.filteredAiProviderModelList, isEqual);
+  console.log('filteredModels:', filteredModels);
+  const [batchLoading, setBatchLoading] = useState(false);
+
+  const isEmpty = filteredModels.length === 0;
+  return (
+    <>
+      <Flexbox horizontal justify={'space-between'}>
+        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+          {t('providerModels.list.searchResult', { count: filteredModels.length })}
+        </Typography.Text>
+        {!isEmpty && (
+          <Flexbox horizontal>
+            <ActionIcon
+              icon={ToggleRightIcon}
+              loading={batchLoading}
+              onClick={async () => {
+                setBatchLoading(true);
+                await batchToggleAiModels(
+                  filteredModels.map((i) => i.id),
+                  true,
+                );
+                setBatchLoading(false);
+              }}
+              size={'small'}
+              title={t('providerModels.list.enabledActions.enableAll')}
+            />
+          </Flexbox>
+        )}
+      </Flexbox>
+
+      {searchKeyword && isEmpty ? (
+        <Flexbox align="center" justify="center" padding={16}>
+          {t('providerModels.searchNotFound')}
+        </Flexbox>
+      ) : (
+        <Flexbox gap={4}>
+          {filteredModels.map((item) => (
+            <ModelItem {...item} key={`${item.id}-${item.enabled}`} />
+          ))}
+        </Flexbox>
+      )}
+    </>
+  );
+});
+
+export default SearchResult;

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  avatar: css`
+    width: 32px !important;
+    height: 32px !important;
+  `,
+  container: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 56px;
+    padding: 12px;
+
+    .${prefixCls}-skeleton-content {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+  paragraph: css`
+    > li {
+      height: 22px !important;
+    }
+  `,
+}));
+
+export const Placeholder = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} horizontal justify={'space-between'}>
+      <Skeleton
+        active
+        avatar={{ className: styles.avatar }}
+        className={styles.container}
+        paragraph={{
+          className: styles.paragraph,
+          rows: 1,
+          style: { marginBottom: 0 },
+          width: '40%',
+        }}
+        title={false}
+      />
+      <Skeleton.Button active size={'small'} />
+    </Flexbox>
+  );
+});
+
+export const SkeletonList = memo(() => (
+  <Flexbox gap={4} style={{ paddingTop: 26 }}>
+    {Array.from({ length: 6 }).map((_, i) => (
+      <Placeholder key={i} />
+    ))}
+  </Flexbox>
+));
+
+export default SkeletonList;

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

@@ -0,0 +1,20 @@
+import { ModelIcon } from '@lobehub/icons';
+import { SortableList } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { AiProviderModelListItem } from '@/types/aiModel';
+
+const ListItem = memo<AiProviderModelListItem>(({ id, displayName }) => {
+  return (
+    <>
+      <Flexbox gap={8} horizontal>
+        <ModelIcon model={id} size={24} type={'avatar'} />
+        {displayName || id}
+      </Flexbox>
+      <SortableList.DragHandle />
+    </>
+  );
+});
+
+export default ListItem;