@lobehub/lobehub 2.0.0-next.3 → 2.0.0-next.30

package/src/store/user/slices/modelList/selectors/modelProvider.test.ts

@@ -1,138 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { merge } from '@/utils/merge';
-
-import { UserState, initialState } from '../../../initialState';
-import { UserStore, useUserStore } from '../../../store';
-import { getDefaultModeProviderById, modelProviderSelectors } from './modelProvider';
-
-describe('modelProviderSelectors', () => {
-  describe('getDefaultModeProviderById', () => {
-    it('should return the correct ModelProviderCard when provider ID matches', () => {
-      const s = merge(initialState, {}) as unknown as UserStore;
-
-      const result = getDefaultModeProviderById('openai')(s);
-      expect(result).not.toBeUndefined();
-    });
-
-    it('should return undefined when provider ID does not exist', () => {
-      const s = merge(initialState, {}) as unknown as UserStore;
-      const result = getDefaultModeProviderById('nonExistingProvider')(s);
-      expect(result).toBeUndefined();
-    });
-  });
-
-  describe('getModelCardsById', () => {
-    it('should return model cards including custom model cards', () => {
-      const s = merge(initialState, {
-        settings: {
-          languageModel: {
-            perplexity: {
-              customModelCards: [{ id: 'custom-model', displayName: 'Custom Model' }],
-            },
-          },
-        },
-      } as UserState) as unknown as UserStore;
-
-      const modelCards = modelProviderSelectors.getModelCardsById('perplexity')(s);
-
-      expect(modelCards).toContainEqual({
-        id: 'custom-model',
-        displayName: 'Custom Model',
-        isCustom: true,
-      });
-    });
-  });
-
-  describe('defaultEnabledProviderModels', () => {
-    it('should return undefined for a non-existing provider', () => {
-      const s = merge(initialState, {}) as unknown as UserStore;
-
-      const result = modelProviderSelectors.getDefaultEnabledModelsById('nonExistingProvider')(s);
-      expect(result).toBeUndefined();
-    });
-  });
-  describe('modelEnabledVision', () => {
-    it('should return true if the model has vision ability', () => {
-      const hasAbility = modelProviderSelectors.isModelEnabledVision('gpt-4-vision-preview')(
-        useUserStore.getState(),
-      );
-      expect(hasAbility).toBeTruthy();
-    });
-
-    it('should return false if the model does not have vision ability', () => {
-      const hasAbility = modelProviderSelectors.isModelEnabledVision('some-other-model')(
-        useUserStore.getState(),
-      );
-
-      expect(hasAbility).toBeFalsy();
-    });
-
-    it('should return false if the model include vision in id', () => {
-      const hasAbility = modelProviderSelectors.isModelEnabledVision('some-other-model-vision')(
-        useUserStore.getState(),
-      );
-
-      expect(hasAbility).toBeTruthy();
-    });
-  });
-
-  describe('modelEnabledFiles', () => {
-    it('should return false if the model does not have file ability', () => {
-      const enabledFiles = modelProviderSelectors.isModelEnabledFiles('gpt-4-vision-preview')(
-        useUserStore.getState(),
-      );
-      expect(enabledFiles).toBeFalsy();
-    });
-
-    it.skip('should return true if the model has file ability', () => {
-      const enabledFiles = modelProviderSelectors.isModelEnabledFiles('gpt-4-all')(
-        useUserStore.getState(),
-      );
-      expect(enabledFiles).toBeTruthy();
-    });
-  });
-
-  describe('modelHasMaxToken', () => {
-    it('should return true if the model is in the list of models that show tokens', () => {
-      const show = modelProviderSelectors.isModelHasMaxToken('gpt-3.5-turbo')(
-        useUserStore.getState(),
-      );
-      expect(show).toBeTruthy();
-    });
-
-    it('should return false if the model is not in the list of models that show tokens', () => {
-      const show = modelProviderSelectors.isModelHasMaxToken('some-other-model')(
-        useUserStore.getState(),
-      );
-      expect(show).toBe(false);
-    });
-  });
-
-  describe('modelMaxToken', () => {
-    it('should return the correct token count for a model with specified tokens', () => {
-      const model1Tokens = modelProviderSelectors.modelMaxToken('gpt-3.5-turbo')(
-        useUserStore.getState(),
-      );
-
-      expect(model1Tokens).toEqual(16385);
-    });
-
-    it('should return 0 for a model without a specified token count', () => {
-      // 测试未指定tokens属性的模型的tokens值，期望为0
-      const tokens = modelProviderSelectors.modelMaxToken('chat-bison-001')(
-        useUserStore.getState(),
-      );
-      expect(tokens).toEqual(0);
-    });
-
-    it('should return 0 for a non-existing model', () => {
-      // 测试一个不存在的模型的tokens值，期望为0
-      const tokens = modelProviderSelectors.modelMaxToken('nonExistingModel')(
-        useUserStore.getState(),
-      );
-
-      expect(tokens).toEqual(0);
-    });
-  });
-});

package/src/store/user/slices/modelList/selectors/modelProvider.ts

@@ -1,170 +0,0 @@
-import type {
-  ChatModelCard,
-  EnabledProviderWithModels,
-  GlobalLLMProviderKey,
-  ModelProviderCard,
-} from '@lobechat/types';
-import { ServerModelProviderConfig } from '@lobechat/types';
-import { uniqBy } from 'lodash-es';
-
-import { filterEnabledModels } from '@/config/modelProviders';
-import type { UserStore } from '@/store/user';
-
-import { currentSettings, getProviderConfigById } from '../../settings/selectors/settings';
-
-/**
- * get the server side model cards
- */
-const serverProviderModelCards =
-  (provider: GlobalLLMProviderKey) =>
-  (s: UserStore): ChatModelCard[] | undefined => {
-    const config = s.serverLanguageModel?.[provider] as ServerModelProviderConfig | undefined;
-
-    if (!config) return;
-
-    return config.serverModelCards;
-  };
-
-const remoteProviderModelCards =
-  (provider: GlobalLLMProviderKey) =>
-  (s: UserStore): ChatModelCard[] | undefined => {
-    const cards = currentSettings(s).languageModel?.[provider]?.remoteModelCards as
-      | ChatModelCard[]
-      | undefined;
-
-    if (!cards) return;
-
-    return cards;
-  };
-
-const isProviderEnabled = (provider: GlobalLLMProviderKey) => (s: UserStore) =>
-  getProviderConfigById(provider)(s)?.enabled || false;
-
-// Default Model Provider List
-
-/**
- * define all the model list of providers
- */
-const defaultModelProviderList = (s: UserStore): ModelProviderCard[] => s.defaultModelProviderList;
-
-export const getDefaultModeProviderById = (provider: string) => (s: UserStore) =>
-  defaultModelProviderList(s).find((s) => s.id === provider);
-
-/**
- * get the default enabled models for a provider
- * it's a default enabled model list by Lobe Chat
- * e.g. openai is ['gpt-4o-mini','gpt-4o','gpt-4-turbo']
- */
-const getDefaultEnabledModelsById = (provider: string) => (s: UserStore) => {
-  const modelProvider = getDefaultModeProviderById(provider)(s);
-
-  if (modelProvider) return filterEnabledModels(modelProvider);
-
-  return undefined;
-};
-
-const getDefaultModelCardById = (id: string) => (s: UserStore) => {
-  const list = defaultModelProviderList(s);
-
-  return list.flatMap((i) => i.chatModels).find((m) => m.id === id);
-};
-
-// Model Provider List
-
-const getModelCardsById =
-  (provider: string) =>
-  (s: UserStore): ChatModelCard[] => {
-    const builtinCards = getDefaultModeProviderById(provider)(s)?.chatModels || [];
-
-    const userCards = (getProviderConfigById(provider)(s)?.customModelCards || []).map((model) => ({
-      ...model,
-      isCustom: true,
-    }));
-
-    return uniqBy([...userCards, ...builtinCards], 'id');
-  };
-
-const getEnableModelsById = (provider: string) => (s: UserStore) => {
-  if (!getProviderConfigById(provider)(s)?.enabledModels) return;
-
-  return getProviderConfigById(provider)(s)?.enabledModels?.filter(Boolean);
-};
-
-const modelProviderList = (s: UserStore): ModelProviderCard[] => s.modelProviderList;
-
-const modelProviderListForModelSelect = (s: UserStore): EnabledProviderWithModels[] =>
-  modelProviderList(s)
-    .filter((s) => s.enabled)
-    .map((provider) => ({
-      ...provider,
-      children: provider.chatModels
-        .filter((model) => model.enabled)
-        .map((m) => ({
-          abilities: {
-            functionCall: m.functionCall,
-            vision: m.vision,
-          },
-          contextWindowTokens: m.contextWindowTokens,
-          displayName: m.displayName,
-          id: m.id,
-        })),
-      source: 'builtin',
-    }));
-
-const getModelCardById = (id: string, provider?: GlobalLLMProviderKey) => (s: UserStore) => {
-  const list = modelProviderList(s);
-
-  return list
-    .filter((i) => !provider || i.id === provider)
-    .flatMap((i) => i.chatModels)
-    .find((m) => m.id === id);
-};
-
-const isModelEnabledFunctionCall = (id: string) => (s: UserStore) =>
-  getModelCardById(id)(s)?.functionCall || false;
-
-// vision model white list, these models will change the content from string to array
-// refs: https://github.com/lobehub/lobe-chat/issues/790
-const isModelEnabledVision = (id: string) => (s: UserStore) =>
-  getModelCardById(id)(s)?.vision || id.includes('vision');
-
-const isModelEnabledReasoning = (id: string) => (s: UserStore) =>
-  getModelCardById(id)(s)?.reasoning || false;
-
-const isModelEnabledFiles = (id: string) => (s: UserStore) => getModelCardById(id)(s)?.files;
-
-const isModelEnabledUpload = (id: string) => (s: UserStore) =>
-  isModelEnabledVision(id)(s) || isModelEnabledFiles(id)(s);
-
-const isModelHasMaxToken = (id: string) => (s: UserStore) =>
-  typeof getModelCardById(id)(s)?.contextWindowTokens !== 'undefined';
-
-const modelMaxToken = (id: string) => (s: UserStore) =>
-  getModelCardById(id)(s)?.contextWindowTokens || 0;
-
-export const modelProviderSelectors = {
-  defaultModelProviderList,
-  getDefaultEnabledModelsById,
-  getDefaultModelCardById,
-
-  getEnableModelsById,
-  getModelCardById,
-
-  getModelCardsById,
-  isModelEnabledFiles,
-  isModelEnabledFunctionCall,
-  isModelEnabledReasoning,
-  isModelEnabledUpload,
-  isModelEnabledVision,
-  isModelHasMaxToken,
-
-  isProviderEnabled,
-
-  modelMaxToken,
-  modelProviderList,
-
-  modelProviderListForModelSelect,
-
-  remoteProviderModelCards,
-  serverProviderModelCards,
-};

package/src/tools/dalle/Render/GalleyGrid.tsx

@@ -1,60 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { ReactNode, memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Grid from '@/components/GalleyGrid/Grid';
-
-const MAX_SIZE_DESKTOP = 640;
-const MAX_SIZE_MOBILE = 280;
-
-interface GalleyGridProps<T = any> {
-  items: T[];
-  renderItem: (props: T) => ReactNode;
-}
-
-const GalleyGrid = memo<GalleyGridProps>(({ items, renderItem: Render }) => {
-  const { mobile } = useResponsive();
-
-  const { firstRow, lastRow } = useMemo(() => {
-    if (items.length === 4) {
-      return {
-        firstRow: items.slice(0, 2),
-        lastRow: items.slice(2, 4),
-      };
-    }
-
-    const firstCol = items.length % 3 === 0 ? 3 : items.length % 3;
-
-    return {
-      firstRow: items.slice(0, firstCol),
-      lastRow: items.slice(firstCol, items.length),
-    };
-  }, [items]);
-
-  const { gap, max } = useMemo(
-    () => ({
-      gap: mobile ? 4 : 6,
-      max: (mobile ? MAX_SIZE_MOBILE : MAX_SIZE_DESKTOP) * firstRow.length,
-    }),
-    [mobile],
-  );
-
-  return (
-    <Flexbox gap={gap}>
-      <Grid col={firstRow.length} gap={gap} max={max}>
-        {firstRow.map((i, index) => (
-          <Render {...i} index={index} key={index} />
-        ))}
-      </Grid>
-      {lastRow.length > 0 && (
-        <Grid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
-          {lastRow.map((i, index) => (
-            <Render {...i} index={index} key={index} />
-          ))}
-        </Grid>
-      )}
-    </Flexbox>
-  );
-});
-
-export default GalleyGrid;

package/src/tools/dalle/Render/Item/EditMode.tsx

@@ -1,66 +0,0 @@
-import { Button, Select, TextArea } from '@lobehub/ui';
-import { Radio } from 'antd';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { DallEImageItem } from '@/types/tool/dalle';
-
-interface EditModeProps extends DallEImageItem {
-  setEdit: (edit: boolean) => void;
-}
-
-const EditMode = memo<EditModeProps>(({ prompt, setEdit, style, size, quality }) => {
-  const { t } = useTranslation('tool');
-
-  return (
-    <Flexbox gap={16}>
-      <TextArea style={{ minHeight: 120 }} value={prompt} variant={'filled'} />
-      <Flexbox horizontal justify={'space-between'}>
-        风格
-        <Radio.Group
-          defaultValue={style}
-          options={[
-            { label: 'vivid', value: 'vivid' },
-            { label: 'natural', value: 'natural' },
-          ]}
-        />
-      </Flexbox>
-      <Flexbox horizontal justify={'space-between'}>
-        质量
-        <Radio.Group
-          defaultValue={quality}
-          options={[
-            { label: 'standard', value: 'standard' },
-            { label: 'hd', value: 'hd' },
-          ]}
-        />
-      </Flexbox>
-      <Flexbox horizontal justify={'space-between'}>
-        尺寸
-        <Select
-          defaultValue={size}
-          options={[
-            { label: '1792x1024', value: '1792x1024' },
-            { label: '1024x1024', value: '1024x1024' },
-            { label: '1024x1792', value: '1024x1792' },
-          ]}
-          size={'small'}
-        />
-      </Flexbox>
-
-      <Flexbox direction={'horizontal-reverse'} gap={12}>
-        <Button type={'primary'}>{t('dalle.generate')}</Button>
-        <Button
-          onClick={() => {
-            setEdit(false);
-          }}
-        >
-          {t('cancel', { ns: 'common' })}
-        </Button>
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default EditMode;

package/src/tools/dalle/Render/Item/Error.tsx

@@ -1,49 +0,0 @@
-import { Alert, Button, Highlighter } from '@lobehub/ui';
-import { LucideRefreshCw } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-
-interface ErrorProps {
-  index: number;
-  messageId: string;
-}
-
-const Error = memo<ErrorProps>(({ messageId, index }) => {
-  const { t } = useTranslation('error');
-  const { t: ct } = useTranslation('common');
-
-  const error = useChatStore(
-    (s) => chatSelectors.getMessageById(messageId)(s)?.pluginState?.['error']?.[index],
-  );
-  const [reInvokeToolMessage] = useChatStore((s) => [s.reInvokeToolMessage]);
-
-  return (
-    error && (
-      <Flexbox gap={12}>
-        <Alert
-          extra={
-            <Highlighter actionIconSize={'small'} language={'json'}>
-              {JSON.stringify(error?.body || error, null, 2)}
-            </Highlighter>
-          }
-          extraDefaultExpand
-          message={t(`response.${error.errorType}` as any)}
-          type={'error'}
-        />
-        <Button
-          icon={LucideRefreshCw}
-          onClick={() => reInvokeToolMessage(messageId)}
-          type={'primary'}
-        >
-          {ct('retry')}
-        </Button>
-      </Flexbox>
-    )
-  );
-});
-
-export default Error;

package/src/tools/dalle/Render/Item/Image.tsx

@@ -1,44 +0,0 @@
-import { Icon, Image, Tooltip } from '@lobehub/ui';
-import { Loader2 } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import ImageFileItem from './ImageFileItem';
-
-interface ImagePreviewProps {
-  imageId?: string;
-  previewUrl?: string;
-  prompt: string;
-}
-
-const ImagePreview = memo<ImagePreviewProps>(({ imageId, previewUrl, prompt }) => {
-  const { t } = useTranslation('tool');
-
-  return imageId ? (
-    // <Flexbox className={styles.action}>
-    //   <ActionIconGroup
-    //     items={[{ icon: LucideEdit, key: 'edit', label: t('edit', { ns: 'common' }) }]}
-    //     onActionClick={(e) => {
-    //       if (e.key === 'edit') {
-    //         setEdit(true);
-    //       }
-    //     }}
-    //   />
-    // </Flexbox>
-    <ImageFileItem id={imageId} />
-  ) : (
-    previewUrl && (
-      <Flexbox style={{ position: 'relative' }}>
-        <div style={{ position: 'absolute', right: 8, top: 8, zIndex: 10 }}>
-          <Tooltip title={t('dalle.downloading')}>
-            <Icon icon={Loader2} size={'large'} spin />
-          </Tooltip>
-        </div>
-        <Image alt={prompt} size={'100%'} src={previewUrl} />
-      </Flexbox>
-    )
-  );
-});
-
-export default ImagePreview;

package/src/tools/dalle/Render/Item/ImageFileItem.tsx

@@ -1,57 +0,0 @@
-import { Image } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { CSSProperties, memo } from 'react';
-
-import { usePlatform } from '@/hooks/usePlatform';
-import { useChatStore } from '@/store/chat';
-
-const MIN_IMAGE_SIZE = 64;
-
-export const useStyles = createStyles(({ css, token }) => ({
-  deleteButton: css`
-    color: #fff;
-    background: ${token.colorBgMask};
-
-    &:hover {
-      background: ${token.colorError};
-    }
-  `,
-  editableImage: css`
-    background: ${token.colorBgContainer};
-    box-shadow: 0 0 0 1px ${token.colorFill} inset;
-  `,
-  image: css`
-    margin-block: 0 !important;
-  `,
-}));
-
-interface FileItemProps {
-  alwaysShowClose?: boolean;
-  className?: string;
-  editable?: boolean;
-  id: string;
-  onClick?: () => void;
-  style?: CSSProperties;
-}
-const ImageFileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
-  const [useFetchDalleImageItem] = useChatStore((s) => [s.useFetchDalleImageItem]);
-  const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
-  const { data, isLoading } = useFetchDalleImageItem(id);
-  const { styles, cx } = useStyles();
-  const { isSafari } = usePlatform();
-
-  return (
-    <Image
-      alt={data?.name || id || ''}
-      alwaysShowActions={alwaysShowClose}
-      height={isSafari ? 'auto' : '100%'}
-      isLoading={isLoading}
-      size={IMAGE_SIZE as any}
-      src={data?.url}
-      style={{ height: isSafari ? 'auto' : '100%' }}
-      wrapperClassName={cx(styles.image, editable && styles.editableImage)}
-    />
-  );
-});
-
-export default ImageFileItem;

package/src/tools/dalle/Render/Item/index.tsx

@@ -1,88 +0,0 @@
-import { Highlighter, Icon } from '@lobehub/ui';
-import { Spin } from 'antd';
-import { createStyles } from 'antd-style';
-import { Loader2 } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useChatStore } from '@/store/chat';
-import { chatToolSelectors } from '@/store/chat/selectors';
-import { DallEImageItem } from '@/types/tool/dalle';
-
-import EditMode from './EditMode';
-import Error from './Error';
-import ImagePreview from './Image';
-
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  action: css`
-    position: absolute;
-    z-index: 100;
-    inset-block-start: 4px;
-    inset-inline-end: 4px;
-  `,
-  container: css`
-    overflow: scroll;
-    aspect-ratio: 1;
-    border: 1px solid ${token.colorBorder};
-    border-radius: 8px;
-
-    .${prefixCls}-spin-nested-loading {
-      height: 100%;
-    }
-  `,
-}));
-
-const ImageItem = memo<DallEImageItem & { index: number; messageId: string }>(
-  ({ prompt, messageId, imageId, previewUrl, index, style, size, quality }) => {
-    const { t } = useTranslation('tool');
-    const { styles } = useStyles();
-
-    const [edit, setEdit] = useState(false);
-    const loading = useChatStore(chatToolSelectors.isDallEImageGenerating(messageId + prompt));
-
-    if (edit)
-      return (
-        <Flexbox className={styles.container} padding={8}>
-          <EditMode
-            imageId={imageId}
-            prompt={prompt}
-            quality={quality}
-            setEdit={setEdit}
-            size={size}
-            style={style}
-          />
-        </Flexbox>
-      );
-
-    if (imageId || previewUrl)
-      return <ImagePreview imageId={imageId} previewUrl={previewUrl} prompt={prompt} />;
-
-    return (
-      <Flexbox className={styles.container} padding={8}>
-        {loading ? (
-          <Spin indicator={<Icon icon={Loader2} spin />} size={'large'} tip={t('dalle.generating')}>
-            {prompt}
-          </Spin>
-        ) : (
-          <Flexbox gap={12}>
-            <Flexbox>
-              <Highlighter
-                actionIconSize={'small'}
-                fileName={t('dalle.prompt')}
-                fullFeatured
-                language={'prompt'}
-                showLanguage
-              >
-                {prompt}
-              </Highlighter>
-            </Flexbox>
-            <Error index={index} messageId={messageId} />
-          </Flexbox>
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-export default ImageItem;