@lobehub/chat 0.127.0 → 0.127.1

package/src/layout/ResponsiveLayout.client.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import { PropsWithChildren, ReactNode, Suspense } from 'react';
+import { ReactNode, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FullscreenLoading from '@/components/FullscreenLoading';
 import { useIsMobile } from '@/hooks/useIsMobile';
 
-interface ServerResponsiveLayoutProps {
-  Desktop: (props: PropsWithChildren) => ReactNode;
-  Mobile: (props: PropsWithChildren) => ReactNode;
+interface ServerResponsiveLayoutProps extends Record<string, any> {
+  Desktop: (props: any) => ReactNode;
+  Mobile: (props: any) => ReactNode;
   children?: ReactNode;
 }
-const ResponsiveLayout = ({ children, Desktop, Mobile }: ServerResponsiveLayoutProps) => {
+const ResponsiveLayout = ({ children, Desktop, Mobile, ...res }: ServerResponsiveLayoutProps) => {
   const { t } = useTranslation();
   const mobile = useIsMobile();
 
   return mobile ? (
     <Suspense fallback={<FullscreenLoading title={t('layoutInitializing', { ns: 'common' })} />}>
-      <Mobile>{children}</Mobile>
+      <Mobile {...res}>{children}</Mobile>
     </Suspense>
   ) : (
-    <Desktop>{children}</Desktop>
+    <Desktop {...res}>{children}</Desktop>
   );
 };
 

package/src/layout/ResponsiveLayout.server.tsx

@@ -1,16 +1,16 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { isMobileDevice } from '@/utils/responsive';
 
-interface ServerResponsiveLayoutProps {
-  Desktop: (props: PropsWithChildren) => ReactNode;
-  Mobile: (props: PropsWithChildren) => ReactNode;
+interface ServerResponsiveLayoutProps extends Record<string, any> {
+  Desktop: (props: any) => ReactNode;
+  Mobile: (props: any) => ReactNode;
   children?: ReactNode;
 }
-const ResponsiveLayout = ({ children, Desktop, Mobile }: ServerResponsiveLayoutProps) => {
+const ResponsiveLayout = ({ children, Desktop, Mobile, ...res }: ServerResponsiveLayoutProps) => {
   const mobile = isMobileDevice();
 
-  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+  return mobile ? <Mobile {...res}>{children}</Mobile> : <Desktop {...res}>{children}</Desktop>;
 };
 
 export default ResponsiveLayout;

package/src/services/_auth.test.ts

@@ -0,0 +1,132 @@
+import { act } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useGlobalStore } from '@/store/global';
+import { GlobalLLMConfig, GlobalLLMProviderKey } from '@/types/settings';
+
+import { getProviderAuthPayload } from './_auth';
+
+// Mock data for different providers
+const mockZhiPuAPIKey = 'zhipu-api-key';
+const mockMoonshotAPIKey = 'moonshot-api-key';
+const mockGoogleAPIKey = 'google-api-key';
+
+// mock the traditional zustand
+vi.mock('zustand/traditional');
+
+const setModelProviderConfig = <T extends GlobalLLMProviderKey>(
+  provider: T,
+  config: Partial<GlobalLLMConfig[T]>,
+) => {
+  useGlobalStore.setState({
+    settings: { languageModel: { [provider]: config } },
+  });
+};
+
+describe('getProviderAuthPayload', () => {
+  it('should return correct payload for ZhiPu provider', () => {
+    act(() => {
+      setModelProviderConfig('zhipu', { apiKey: mockZhiPuAPIKey });
+    });
+
+    const payload = getProviderAuthPayload(ModelProvider.ZhiPu);
+    expect(payload).toEqual({ apiKey: mockZhiPuAPIKey });
+  });
+
+  it('should return correct payload for Moonshot provider', () => {
+    act(() => {
+      setModelProviderConfig('moonshot', { apiKey: mockMoonshotAPIKey });
+    });
+
+    const payload = getProviderAuthPayload(ModelProvider.Moonshot);
+    expect(payload).toEqual({ apiKey: mockMoonshotAPIKey });
+  });
+
+  it('should return correct payload for Google provider', () => {
+    act(() => {
+      setModelProviderConfig('google', { apiKey: mockGoogleAPIKey });
+    });
+
+    const payload = getProviderAuthPayload(ModelProvider.Google);
+    expect(payload).toEqual({ apiKey: mockGoogleAPIKey });
+  });
+
+  it('should return correct payload for Bedrock provider', () => {
+    // 假设的 Bedrock 配置
+    const mockBedrockConfig = {
+      accessKeyId: 'bedrock-access-key-id',
+      region: 'bedrock-region',
+      secretAccessKey: 'bedrock-secret-access-key',
+    };
+    act(() => {
+      setModelProviderConfig('bedrock', mockBedrockConfig);
+    });
+
+    const payload = getProviderAuthPayload(ModelProvider.Bedrock);
+    expect(payload).toEqual({
+      apiKey: mockBedrockConfig.secretAccessKey + mockBedrockConfig.accessKeyId,
+      awsAccessKeyId: mockBedrockConfig.accessKeyId,
+      awsRegion: mockBedrockConfig.region,
+      awsSecretAccessKey: mockBedrockConfig.secretAccessKey,
+    });
+  });
+
+  it('should return correct payload for Azure provider', () => {
+    // 假设的 Azure 配置
+    const mockAzureConfig = {
+      apiKey: 'azure-api-key',
+      apiVersion: 'azure-api-version',
+      endpoint: 'azure-endpoint',
+    };
+    act(() => {
+      setModelProviderConfig('azure', mockAzureConfig);
+    });
+
+    const payload = getProviderAuthPayload(ModelProvider.Azure);
+    expect(payload).toEqual({
+      apiKey: mockAzureConfig.apiKey,
+      azureApiVersion: mockAzureConfig.apiVersion,
+      endpoint: mockAzureConfig.endpoint,
+    });
+  });
+
+  it('should return correct payload for Ollama provider', () => {
+    // 假设的 Ollama 配置
+    const mockOllamaProxyUrl = 'ollama-proxy-url';
+    act(() => {
+      setModelProviderConfig('ollama', { endpoint: mockOllamaProxyUrl });
+    });
+
+    const payload = getProviderAuthPayload(ModelProvider.Ollama);
+    expect(payload).toEqual({
+      endpoint: mockOllamaProxyUrl,
+    });
+  });
+
+  it('should return correct payload for OpenAI provider', () => {
+    // 假设的 OpenAI 配置
+    const mockOpenAIConfig = {
+      OPENAI_API_KEY: 'openai-api-key',
+      endpoint: 'openai-endpoint',
+      useAzure: true,
+      azureApiVersion: 'openai-azure-api-version',
+    };
+    act(() => {
+      setModelProviderConfig('openAI', mockOpenAIConfig);
+    });
+
+    const payload = getProviderAuthPayload(ModelProvider.OpenAI);
+    expect(payload).toEqual({
+      apiKey: mockOpenAIConfig.OPENAI_API_KEY,
+      azureApiVersion: mockOpenAIConfig.azureApiVersion,
+      endpoint: mockOpenAIConfig.endpoint,
+      useAzure: mockOpenAIConfig.useAzure,
+    });
+  });
+
+  it('should return an empty object or throw an error for an unknown provider', () => {
+    const payload = getProviderAuthPayload('UnknownProvider');
+    expect(payload).toEqual({ apiKey: '', endpoint: '' });
+  });
+});

package/src/services/_auth.ts

@@ -4,7 +4,7 @@ import { useGlobalStore } from '@/store/global';
 import { modelProviderSelectors, settingsSelectors } from '@/store/global/selectors';
 import { createJWT } from '@/utils/jwt';
 
-const getProviderAuthPayload = (provider: string) => {
+export const getProviderAuthPayload = (provider: string) => {
   switch (provider) {
     case ModelProvider.ZhiPu: {
       return { apiKey: modelProviderSelectors.zhipuAPIKey(useGlobalStore.getState()) };

package/src/store/global/slices/common/initialState.ts

@@ -23,12 +23,10 @@ export interface GlobalCommonState {
   isMobile?: boolean;
   latestVersion?: string;
   router?: AppRouterInstance;
-  settingsTab: SettingsTabs;
   sidebarKey: SidebarTabKey;
 }
 
 export const initialCommonState: GlobalCommonState = {
   isMobile: false,
-  settingsTab: SettingsTabs.Common,
   sidebarKey: SidebarTabKey.Chat,
 };

package/src/store/global/slices/settings/action.test.ts

@@ -6,7 +6,6 @@ import { withSWR } from '~test-utils';
 import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import { userService } from '@/services/user';
 import { useGlobalStore } from '@/store/global';
-import { SettingsTabs } from '@/store/global/initialState';
 import { LobeAgentSettings } from '@/types/session';
 import { GlobalSettings, OpenAIConfig } from '@/types/settings';
 
@@ -100,18 +99,6 @@ describe('SettingsAction', () => {
     });
   });
 
-  describe('switchSettingTabs', () => {
-    it('should switch settings tabs', () => {
-      const { result } = renderHook(() => useGlobalStore());
-
-      act(() => {
-        result.current.switchSettingTabs(SettingsTabs.Agent);
-      });
-
-      expect(result.current.settingsTab).toEqual(SettingsTabs.Agent);
-    });
-  });
-
   describe('switchThemeMode', () => {
     it('should switch theme mode', async () => {
       const { result } = renderHook(() => useGlobalStore());

package/src/store/global/slices/settings/action.ts

@@ -5,7 +5,6 @@ import type { StateCreator } from 'zustand/vanilla';
 
 import { userService } from '@/services/user';
 import type { GlobalStore } from '@/store/global';
-import { SettingsTabs } from '@/store/global/initialState';
 import { LobeAgentSettings } from '@/types/session';
 import { GlobalLLMConfig, GlobalLLMProviderKey, GlobalSettings } from '@/types/settings';
 import { difference } from '@/utils/difference';
@@ -22,7 +21,6 @@ export interface SettingsAction {
     config: Partial<GlobalLLMConfig[T]>,
   ) => Promise<void>;
   setSettings: (settings: DeepPartial<GlobalSettings>) => Promise<void>;
-  switchSettingTabs: (tab: SettingsTabs) => void;
   switchThemeMode: (themeMode: ThemeMode) => Promise<void>;
   toggleProviderEnabled: (provider: GlobalLLMProviderKey, enabled: boolean) => Promise<void>;
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => Promise<void>;
@@ -61,9 +59,6 @@ export const createSettingsSlice: StateCreator<
     await get().refreshUserConfig();
   },
 
-  switchSettingTabs: (tab) => {
-    set({ settingsTab: tab });
-  },
   switchThemeMode: async (themeMode) => {
     await get().setSettings({ themeMode });
   },

package/src/store/global/slices/settings/selectors/modelProvider.ts

@@ -10,12 +10,16 @@ import {
   ZhiPuProvider,
 } from '@/config/modelProviders';
 import { ChatModelCard, ModelProviderCard } from '@/types/llm';
+import { GlobalLLMProviderKey } from '@/types/settings';
 import { parseModelString } from '@/utils/parseModels';
 
 import { GlobalStore } from '../../../store';
 import { currentSettings } from './settings';
 
 const modelProvider = (s: GlobalStore) => currentSettings(s).languageModel;
+const providerEnabled = (provider: GlobalLLMProviderKey) => (s: GlobalStore) =>
+  currentSettings(s).languageModel[provider]?.enabled || false;
+
 const openAIConfig = (s: GlobalStore) => modelProvider(s).openAI;
 
 const openAIAPIKey = (s: GlobalStore) => openAIConfig(s).OPENAI_API_KEY;
@@ -169,6 +173,9 @@ export const modelProviderSelectors = {
   modelEnabledFiles,
   modelEnabledUpload,
 
+  modelProviderConfig: modelProvider,
+  providerEnabled,
+
   // OpenAI
   openAIConfig,
   openAIAPIKey,

package/src/types/settings/modelProvider.ts

@@ -7,6 +7,7 @@ export interface OpenAIConfig {
    * custom mode name for fine-tuning or openai like model
    */
   customModelName?: string;
+  enabled: boolean;
   endpoint?: string;
   /**
    * @deprecated

package/src/app/settings/agent/index.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-import Agent from './Agent';
-
-export default memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.Agent);
-  const { t } = useTranslation('setting');
-  return (
-    <>
-      <PageTitle title={t('tab.agent')} />
-      <Agent />
-    </>
-  );
-});

package/src/app/settings/features/SideBar/Item.tsx

@@ -1,44 +0,0 @@
-import { Icon, List } from '@lobehub/ui';
-import { createStyles, useResponsive } from 'antd-style';
-import { ChevronRight, type LucideIcon } from 'lucide-react';
-import { CSSProperties, ReactNode, memo } from 'react';
-
-const { Item } = List;
-
-const useStyles = createStyles(({ css, token, responsive }) => ({
-  container: css`
-    position: relative;
-    padding-top: 20px;
-    padding-bottom: 20px;
-    border-radius: ${token.borderRadius}px;
-    ${responsive.mobile} {
-      border-radius: 0;
-    }
-  `,
-}));
-
-export interface ItemProps {
-  active?: boolean;
-  className?: string;
-  icon: LucideIcon;
-  label: ReactNode;
-  style?: CSSProperties;
-}
-
-const SettingItem = memo<ItemProps>(({ label, icon, active = false, style, className }) => {
-  const { cx, styles } = useStyles();
-  const { mobile } = useResponsive();
-  return (
-    <Item
-      active={active}
-      avatar={<Icon icon={icon} size={{ fontSize: 16 }} />}
-      className={cx(styles.container, className)}
-      style={style}
-      title={label as string}
-    >
-      {mobile && <Icon icon={ChevronRight} size={{ fontSize: 16 }} />}
-    </Item>
-  );
-});
-
-export default SettingItem;

package/src/app/settings/features/SideBar/index.tsx

@@ -1,42 +0,0 @@
-import { DraggablePanelBody, Logo } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import FolderPanel from '@/features/FolderPanel';
-
-import UpgradeAlert from '../UpgradeAlert';
-import List from './List';
-
-const useStyles = createStyles(({ stylish, token, css }) => ({
-  body: stylish.noScrollbar,
-  logo: css`
-    fill: ${token.colorText};
-  `,
-  top: css`
-    position: sticky;
-    top: 0;
-  `,
-}));
-
-const SideBar = memo(() => {
-  const { styles } = useStyles();
-
-  return (
-    <FolderPanel>
-      <DraggablePanelBody className={styles.body} style={{ padding: 0 }}>
-        <Flexbox className={styles.top} padding={16}>
-          <div>
-            <Logo className={styles.logo} extra={'Settings'} size={36} type={'text'} />
-          </div>
-        </Flexbox>
-        <Flexbox gap={2} style={{ paddingInline: 8 }}>
-          <UpgradeAlert />
-          <List />
-        </Flexbox>
-      </DraggablePanelBody>
-    </FolderPanel>
-  );
-});
-
-export default SideBar;

package/src/app/settings/tts/index.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-import TTS from './TTS';
-
-export default memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.TTS);
-  const { t } = useTranslation('setting');
-  return (
-    <>
-      <PageTitle title={t('tab.llm')} />
-      <TTS />
-    </>
-  );
-});

package/src/store/global/hooks/useSwitchSettingsOnInit.ts

@@ -1,12 +0,0 @@
-import { useOnFinishHydrationGlobal } from '@/store/global';
-
-import { SettingsTabs } from '../initialState';
-
-/**
- * 切换设置侧边栏选项
- */
-export const useSwitchSideBarOnInit = (key: SettingsTabs) => {
-  useOnFinishHydrationGlobal((store) => {
-    store.switchSettingTabs(key);
-  });
-};