@lobehub/lobehub 2.0.0-next.2 → 2.0.0-next.21

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/Option.tsx

@@ -1,68 +0,0 @@
-import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Text, Tooltip } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { Recycle } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { ModelInfoTags } from '@/components/ModelSelect';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import CustomModelOption from './CustomModelOption';
-
-interface OptionRenderProps {
-  displayName: string;
-  id: string;
-  isAzure?: boolean;
-  provider: GlobalLLMProviderKey;
-  removed?: boolean;
-}
-const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure, removed }) => {
-  const model = useUserStore(
-    (s) => modelProviderSelectors.getModelCardById(id, provider)(s),
-    isEqual,
-  );
-  const { t } = useTranslation('components');
-  const theme = useTheme();
-  // if there is isCustom, it means it is a user defined custom model
-  if (model?.isCustom || isAzure) return <CustomModelOption id={id} provider={provider} />;
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={8}
-      horizontal
-      justify={'space-between'}
-      style={{ paddingInlineEnd: 8 }}
-    >
-      <Flexbox align={'center'} gap={8} horizontal>
-        <ModelIcon model={id} size={32} />
-        <Flexbox>
-          <Flexbox align={'center'} gap={8} horizontal>
-            {displayName}
-            <ModelInfoTags directionReverse placement={'top'} {...model!} />
-          </Flexbox>
-          <Text style={{ fontSize: 12 }} type={'secondary'}>
-            {id}
-          </Text>
-        </Flexbox>
-      </Flexbox>
-      {removed && (
-        <Tooltip
-          placement={'top'}
-          style={{ pointerEvents: 'none' }}
-          styles={{ root: { maxWidth: 300 } }}
-          title={t('ModelSelect.removed')}
-        >
-          <ActionIcon icon={Recycle} style={{ color: theme.colorWarning }} />
-        </Tooltip>
-      )}
-    </Flexbox>
-  );
-});
-
-export default OptionRender;

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/index.tsx

@@ -1,146 +0,0 @@
-import { ActionIcon, Select } from '@lobehub/ui';
-import { css, cx } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { RotateCwIcon } from 'lucide-react';
-import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/user/settings';
-
-import ModelConfigModal from './ModelConfigModal';
-import ModelFetcher from './ModelFetcher';
-import OptionRender from './Option';
-
-const styles = {
-  divStyle: css`
-    position: relative;
-
-    .ant-select-selector {
-      padding-inline-end: 50px !important;
-    }
-  `,
-  popup: css`
-    &.ant-select-dropdown {
-      .ant-select-item-option-selected {
-        font-weight: normal;
-      }
-    }
-  `,
-  reset: css`
-    position: absolute;
-    z-index: 20;
-    inset-block-start: 50%;
-    inset-inline-end: 28px;
-    transform: translateY(-50%);
-  `,
-};
-
-interface CustomModelSelectProps {
-  notFoundContent?: ReactNode;
-  placeholder?: string;
-  provider: GlobalLLMProviderKey;
-  showAzureDeployName?: boolean;
-  showModelFetcher?: boolean;
-}
-
-const ProviderModelListSelect = memo<CustomModelSelectProps>(
-  ({ showModelFetcher = false, provider, showAzureDeployName, notFoundContent, placeholder }) => {
-    const { t } = useTranslation('common');
-    const { t: transSetting } = useTranslation('setting');
-    const [setModelProviderConfig, updateEnabledModels] = useUserStore((s) => [
-      s.setModelProviderConfig,
-      s.updateEnabledModels,
-    ]);
-
-    const chatModelCards = useUserStore(
-      modelProviderSelectors.getModelCardsById(provider),
-      isEqual,
-    );
-
-    const defaultEnableModel = useUserStore(
-      modelProviderSelectors.getDefaultEnabledModelsById(provider),
-      isEqual,
-    );
-    const enabledModels = useUserStore(
-      modelProviderSelectors.getEnableModelsById(provider),
-      isEqual,
-    );
-
-    const showReset = !!enabledModels && !isEqual(defaultEnableModel, enabledModels);
-
-    return (
-      <>
-        <Flexbox gap={8}>
-          <div className={cx(styles.divStyle)}>
-            <div className={cx(styles.reset)}>
-              {showReset && (
-                <ActionIcon
-                  icon={RotateCwIcon}
-                  onClick={() => {
-                    setModelProviderConfig(provider, { enabledModels: null });
-                  }}
-                  size={'small'}
-                  title={t('reset')}
-                />
-              )}
-            </div>
-            <Select
-              allowClear
-              mode="tags"
-              notFoundContent={notFoundContent}
-              onChange={(value, options) => {
-                updateEnabledModels(provider, value, options as any[]);
-              }}
-              optionFilterProp="label"
-              optionRender={({ label, value }) => {
-                // model is in the chatModels
-                if (chatModelCards.some((c) => c.id === value))
-                  return (
-                    <OptionRender
-                      displayName={label as string}
-                      id={value as string}
-                      isAzure={showAzureDeployName}
-                      provider={provider}
-                    />
-                  );
-
-                if (enabledModels?.some((m) => value === m)) {
-                  return (
-                    <OptionRender
-                      displayName={label as string}
-                      id={value as string}
-                      isAzure={showAzureDeployName}
-                      provider={provider}
-                      removed
-                    />
-                  );
-                }
-
-                // model is defined by user in client
-                return (
-                  <Flexbox align={'center'} gap={8} horizontal>
-                    {transSetting('llm.customModelCards.addNew', { id: value })}
-                  </Flexbox>
-                );
-              }}
-              options={chatModelCards.map((model) => ({
-                label: model.displayName || model.id,
-                value: model.id,
-              }))}
-              placeholder={placeholder}
-              popupClassName={cx(styles.popup)}
-              value={enabledModels ?? defaultEnableModel}
-            />
-          </div>
-          {showModelFetcher && <ModelFetcher provider={provider} />}
-        </Flexbox>
-        <ModelConfigModal provider={provider} showAzureDeployName={showAzureDeployName} />
-      </>
-    );
-  },
-);
-
-export default ProviderModelListSelect;

package/src/app/[variants]/(main)/settings/llm/const.ts

@@ -1,20 +0,0 @@
-export const LLMProviderConfigKey = 'languageModel';
-export const KeyVaultsConfigKey = 'keyVaults';
-
-/**
- * we use this key to define default api key
- * equal GOOGLE_API_KEY or ZHIPU_API_KEY
- */
-export const LLMProviderApiTokenKey = 'apiKey';
-
-/**
- * we use this key to define the baseURL
- * equal OPENAI_PROXY_URL
- */
-export const LLMProviderBaseUrlKey = 'baseURL';
-
-/**
- * we use this key to define the custom model name
- * equal CUSTOM_MODELS
- */
-export const LLMProviderModelListKey = 'enabledModels';

package/src/app/[variants]/(main)/settings/llm/features/Footer.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { useTheme } from 'antd-style';
-import Link from 'next/link';
-import { memo } from 'react';
-import { Trans } from 'react-i18next';
-import { Center } from 'react-layout-kit';
-
-import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
-
-const Footer = memo(() => {
-  const theme = useTheme();
-  return (
-    <Center
-      style={{
-        background: theme.colorFillQuaternary,
-        border: `1px dashed ${theme.colorFillSecondary}`,
-        borderRadius: theme.borderRadiusLG,
-        padding: 12,
-      }}
-    >
-      <div style={{ color: theme.colorTextSecondary, fontSize: 12, textAlign: 'center' }}>
-        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
-          更多模型正在
-          <Link aria-label={'todo'} href={MORE_MODEL_PROVIDER_REQUEST_URL} target="_blank">
-            计划接入
-          </Link>
-          中 ，敬请期待
-        </Trans>
-      </div>
-    </Center>
-  );
-});
-
-export default Footer;

package/src/app/[variants]/(main)/settings/llm/index.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import { isCustomBranding } from '@/const/version';
-
-import { useProviderList } from './ProviderList/providers';
-import ProviderConfig from './components/ProviderConfig';
-import Footer from './features/Footer';
-
-const Page = () => {
-  const list = useProviderList();
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 24,
-      }}
-    >
-      {list.map(({ id, ...res }) => (
-        <ProviderConfig id={id as any} key={id} {...res} />
-      ))}
-      {!isCustomBranding && <Footer />}
-    </div>
-  );
-};
-
-Page.displayName = 'LlmSetting';
-
-export default Page;

package/src/app/[variants]/(main)/settings/llm/type.ts

@@ -1,5 +0,0 @@
-import { ProviderConfigProps } from './components/ProviderConfig';
-
-export interface ProviderItem extends Omit<ProviderConfigProps, 'id'> {
-  id: string;
-}

package/src/app/[variants]/loading/Client/Content.tsx

@@ -1,48 +0,0 @@
-import dynamic from 'next/dynamic';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import FullscreenLoading from '@/components/Loading/FullscreenLoading';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
-import { DatabaseLoadingState } from '@/types/clientDB';
-
-import { CLIENT_LOADING_STAGES } from '../stage';
-
-const InitError = dynamic(() => import('./Error'), { ssr: false });
-
-interface InitProps {
-  setActiveStage: (value: string) => void;
-}
-
-const Init = memo<InitProps>(({ setActiveStage }) => {
-  const useInitClientDB = useGlobalStore((s) => s.useInitClientDB);
-
-  useInitClientDB({ onStateChange: setActiveStage });
-
-  return null;
-});
-
-interface ContentProps {
-  loadingStage: string;
-  setActiveStage: (value: string) => void;
-}
-
-const Content = memo<ContentProps>(({ loadingStage, setActiveStage }) => {
-  const { t } = useTranslation('common');
-  const isPgliteNotInited = useGlobalStore(systemStatusSelectors.isPgliteNotInited);
-  const isError = useGlobalStore((s) => s.initClientDBStage === DatabaseLoadingState.Error);
-
-  return (
-    <>
-      {isPgliteNotInited && <Init setActiveStage={setActiveStage} />}
-      <FullscreenLoading
-        activeStage={CLIENT_LOADING_STAGES.indexOf(loadingStage)}
-        contentRender={isError && <InitError />}
-        stages={CLIENT_LOADING_STAGES.map((key) => t(`appLoading.${key}` as any))}
-      />
-    </>
-  );
-});
-
-export default Content;

package/src/app/[variants]/loading/Client/Error.tsx

@@ -1,27 +0,0 @@
-import { Button } from '@lobehub/ui';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
-
-import ErrorResult from '@/features/InitClientDB/ErrorResult';
-
-const InitError = () => {
-  const { t } = useTranslation('common');
-
-  return (
-    <ErrorResult>
-      {({ setOpen }) => (
-        <Center gap={8}>
-          {t('appLoading.failed')}
-          <div>
-            <Button onClick={() => setOpen(true)} type={'primary'}>
-              {t('appLoading.showDetail')}
-            </Button>
-          </div>
-        </Center>
-      )}
-    </ErrorResult>
-  );
-};
-
-export default InitError;

package/src/app/[variants]/loading/Client/Redirect.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { memo, useEffect } from 'react';
-
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
-import { useUserStore } from '@/store/user';
-
-import { AppLoadingStage } from '../stage';
-
-interface RedirectProps {
-  setActiveStage: (value: AppLoadingStage) => void;
-}
-
-const Redirect = memo<RedirectProps>(({ setActiveStage }) => {
-  const router = useRouter();
-  const isUserStateInit = useUserStore((s) => s.isUserStateInit);
-
-  const isPgliteNotEnabled = useGlobalStore(systemStatusSelectors.isPgliteNotEnabled);
-
-  const navToChat = () => {
-    setActiveStage(AppLoadingStage.GoToChat);
-    router.replace('/chat');
-  };
-
-  useEffect(() => {
-    // if pglite is not enabled, redirect to chat
-    if (isPgliteNotEnabled) {
-      navToChat();
-      return;
-    }
-
-    // if user state not init, wait for loading
-    if (!isUserStateInit) {
-      setActiveStage(AppLoadingStage.InitUser);
-      return;
-    }
-
-    // finally check the conversation status
-    navToChat();
-  }, [isUserStateInit, isPgliteNotEnabled]);
-
-  return null;
-});
-
-export default Redirect;

package/src/app/[variants]/loading/Client/index.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { AppLoadingStage } from '../stage';
-import Content from './Content';
-import Redirect from './Redirect';
-
-const ClientMode = () => {
-  const [activeStage, setActiveStage] = useState<string>(AppLoadingStage.Initializing);
-
-  return (
-    <>
-      <Content loadingStage={activeStage} setActiveStage={setActiveStage} />
-      <Redirect setActiveStage={setActiveStage} />
-    </>
-  );
-};
-
-ClientMode.displayName = 'ClientMode';
-
-export default ClientMode;

package/src/components/InnerLink.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import Link, { LinkProps } from 'next/link';
-import { AnchorHTMLAttributes, ReactNode } from 'react';
-
-import { useServerConfigStore } from '@/store/serverConfig';
-
-interface InnerLinkProps
-  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>,
-    LinkProps {
-  children?: ReactNode | undefined;
-}
-
-const InnerLink = ({ href, ...props }: InnerLinkProps) => {
-  const variants = useServerConfigStore((s) => s.segmentVariants);
-
-  return <Link {...props} as={href} href={`/${variants}${href}`} />;
-};
-
-export default InnerLink;

package/src/database/_deprecated/core/__tests__/db-upgrade.test.ts

@@ -1,42 +0,0 @@
-import Dexie from 'dexie';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-
-import { BrowserDB } from '../db';
-import { dbSchemaV3 } from '../schemas';
-import { LOBE_CHAT_LOCAL_DB_NAME } from '../types/db';
-
-beforeEach(async () => {
-  // 确保在测试开始前删除数据库
-  await Dexie.delete(LOBE_CHAT_LOCAL_DB_NAME);
-});
-
-afterEach(async () => {
-  // 确保在测试结束后删除数据库
-  await Dexie.delete(LOBE_CHAT_LOCAL_DB_NAME);
-});
-
-describe('LocalDB migration', () => {
-  it('should upgrade from version 3 to version 4 correctly', async () => {
-    // 使用版本3的schema创建数据库实例并填充测试数据
-    const dbV3 = new Dexie(LOBE_CHAT_LOCAL_DB_NAME);
-    dbV3.version(3).stores(dbSchemaV3);
-    await dbV3.open();
-    await dbV3.table('sessions').bulkAdd([
-      { id: 's1', group: 'pinned' },
-      { id: 's2', group: 'default' },
-    ]);
-    dbV3.close();
-
-    // 创建新的数据库实例，包含版本4的迁移逻辑
-    const dbV4 = new BrowserDB();
-    await dbV4.open();
-
-    // 验证迁移后的数据
-    const updatedSession1 = await dbV4.sessions.get('s1');
-    const updatedSession2 = await dbV4.sessions.get('s2');
-    expect(updatedSession1).toEqual({ id: 's1', pinned: 1, group: 'default' });
-    expect(updatedSession2).toEqual({ id: 's2', pinned: 0, group: 'default' });
-
-    dbV4.close();
-  });
-});

package/src/database/_deprecated/core/__tests__/db.test.ts

@@ -1,79 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-
-import { DB_File } from '../../schemas/files';
-import { BrowserDB } from '../db';
-import { DBModel } from '../types/db';
-
-describe('LocalDB', () => {
-  let db: BrowserDB;
-
-  beforeEach(() => {
-    db = new BrowserDB();
-  });
-
-  afterEach(async () => {
-    await db.delete();
-    db.close();
-  });
-
-  it('should be instantiated with the correct schema', () => {
-    const filesTable = db.files;
-
-    expect(filesTable).toBeDefined();
-  });
-
-  it('should allow adding a file', async () => {
-    const file: DBModel<DB_File> = {
-      id: 'file1',
-      name: 'testfile.txt',
-      data: new ArrayBuffer(3),
-      saveMode: 'local',
-      fileType: 'plain/text',
-      size: 3,
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    };
-
-    await db.files.add(file);
-
-    expect(await db.files.get(file.id)).toEqual(file);
-  });
-
-  it('should allow updating a file', async () => {
-    const file: DBModel<DB_File> = {
-      id: 'file1',
-      name: 'testfile.txt',
-      data: new ArrayBuffer(3),
-      saveMode: 'local',
-      fileType: 'plain/text',
-      size: 3,
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    };
-    await db.files.add(file);
-
-    // Act
-    await db.files.update(file.id, { name: 'update.txt' });
-
-    // Assert
-    expect(await db.files.get(file.id)).toHaveProperty('name', 'update.txt');
-  });
-
-  it('should allow deleting a file', async () => {
-    const file: DBModel<DB_File> = {
-      id: 'file1',
-      name: 'testfile.txt',
-      data: new ArrayBuffer(3),
-      saveMode: 'local',
-      fileType: 'plain/text',
-      size: 3,
-      updatedAt: Date.now(),
-      createdAt: Date.now(),
-    };
-    await db.files.add(file);
-
-    await db.files.delete(file.id);
-
-    expect(await db.files.get(file.id)).toBeUndefined();
-  });
-});

package/src/database/_deprecated/core/__tests__/model.test.ts

@@ -1,55 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { z } from 'zod';
-
-import { BaseModel } from '../model';
-
-// Define a mock schema for testing
-const mockSchema = z.object({
-  name: z.string(),
-  content: z.string(),
-});
-
-// Define a mock table name
-const mockTableName = 'files';
-
-describe('BaseModel', () => {
-  let baseModel: BaseModel<typeof mockTableName>;
-
-  beforeEach(() => {
-    baseModel = new BaseModel(mockTableName, mockSchema);
-    // Mock the console.error to test error logging
-    vi.spyOn(console, 'error').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    // console.error = originalConsoleError;
-  });
-
-  it('should have a table property', () => {
-    expect(baseModel.table).toBeDefined();
-  });
-
-  describe('add method', () => {
-    it('should add a valid record to the database', async () => {
-      const validData = {
-        name: 'testfile.txt',
-        content: 'Hello, World!',
-      };
-
-      const result = await baseModel['_addWithSync'](validData);
-
-      expect(result).toHaveProperty('id');
-      expect(console.error).not.toHaveBeenCalled();
-    });
-
-    it('should throw an error and log to console when adding an invalid record', async () => {
-      const invalidData = {
-        name: 123, // Invalid type, should be a string
-        content: 'Hello, World!',
-      };
-
-      await expect(baseModel['_addWithSync'](invalidData)).rejects.toThrow(TypeError);
-    });
-  });
-});