@lobehub/chat 0.162.23 → 0.162.25

package/src/features/Conversation/Error/style.tsx

@@ -1,7 +1,7 @@
 import { Avatar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ReactNode, memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Center, CenterProps, Flexbox } from 'react-layout-kit';
 
 export const useStyles = createStyles(({ css, token }) => ({
   container: css`
@@ -14,38 +14,63 @@ export const useStyles = createStyles(({ css, token }) => ({
     color: ${token.colorTextTertiary};
     text-align: center;
   `,
+  form: css`
+    width: 100%;
+    max-width: 300px;
+  `,
 }));
 
-export const ErrorActionContainer = memo<{ children: ReactNode }>(({ children }) => {
-  const { styles } = useStyles();
+export const ErrorActionContainer = memo<CenterProps>(
+  ({ children, className, gap = 24, padding = 24, ...rest }) => {
+    const { cx, styles } = useStyles();
 
-  return (
-    <Center className={styles.container} gap={24} padding={24}>
-      {children}
-    </Center>
-  );
-});
+    return (
+      <Center className={cx(styles.container, className)} gap={gap} padding={padding} {...rest}>
+        {children}
+      </Center>
+    );
+  },
+);
 
-export const FormAction = memo<{
-  avatar: ReactNode;
-  background?: string;
-  children: ReactNode;
-  description: string;
-  title: string;
-}>(({ children, background, title, description, avatar }) => {
-  const { styles, theme } = useStyles();
+export const FormAction = memo<
+  {
+    animation?: boolean;
+    avatar: ReactNode;
+    background?: string;
+    description: string;
+    title: string;
+  } & CenterProps
+>(
+  ({
+    children,
+    background,
+    title,
+    description,
+    avatar,
+    animation,
+    className,
+    gap = 16,
+    ...rest
+  }) => {
+    const { cx, styles, theme } = useStyles();
 
-  return (
-    <Center gap={16} style={{ maxWidth: 300, width: '100%' }}>
-      <Avatar
-        avatar={avatar}
-        background={background ?? theme.colorFillContent}
-        gap={12}
-        size={80}
-      />
-      <Flexbox style={{ fontSize: 20, textAlign: 'center' }}>{title}</Flexbox>
-      <Flexbox className={styles.desc}>{description}</Flexbox>
-      {children}
-    </Center>
-  );
-});
+    return (
+      <Center className={cx(styles.form, className)} gap={gap} {...rest}>
+        <Avatar
+          animation={animation}
+          avatar={avatar}
+          background={background ?? theme.colorFillContent}
+          gap={12}
+          size={80}
+        />
+        <Flexbox gap={8} width={'100%'}>
+          <Flexbox style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center' }}>
+            {title}
+          </Flexbox>
+          <Flexbox className={styles.desc}>{description}</Flexbox>
+        </Flexbox>
+        {children}
+      </Center>
+    );
+  },
+);

package/src/features/User/UserPanel/useMenu.tsx

@@ -20,7 +20,7 @@ import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import type { MenuProps } from '@/components/Menu';
-import { DISCORD, DOCUMENTS, EMAIL_SUPPORT, GITHUB_ISSUES } from '@/const/url';
+import { DISCORD, DOCUMENTS, EMAIL_SUPPORT, GITHUB_ISSUES, mailTo } from '@/const/url';
 import DataImporter from '@/features/DataImporter';
 import { useOpenSettings } from '@/hooks/useInterceptingRoutes';
 import { usePWAInstall } from '@/hooks/usePWAInstall';
@@ -190,7 +190,7 @@ export const useMenu = () => {
           icon: <Icon icon={Mail} />,
           key: 'email',
           label: (
-            <Link href={`mailto:${EMAIL_SUPPORT}`} target={'_blank'}>
+            <Link href={mailTo(EMAIL_SUPPORT)} target={'_blank'}>
               {t('userPanel.email')}
             </Link>
           ),

package/src/locales/default/common.ts

@@ -9,6 +9,7 @@ export default {
   cancel: '取消',
   changelog: '更新日志',
   close: '关闭',
+  contact: '联系我们',
   copy: '复制',
   copyFail: '复制失败',
   copySuccess: '复制成功',
@@ -35,8 +36,26 @@ export default {
   },
   feedback: '反馈与建议',
   follow: '在 {{name}} 上关注我们',
+  footer: {
+    action: {
+      feedback: '分享您宝贵的建议',
+      star: '在 GitHub 给添加星标',
+    },
+    and: '并',
+    feedback: {
+      action: '分享反馈',
+      desc: '您的每一个想法和建议对我们来说都弥足珍贵，我们迫不及待地想知道您的看法！欢迎联系我们提供产品功能和使用体验反馈，帮助我们将 LobeChat 建设得更好。',
+      title: '在 GitHub 分享您宝贵的反馈',
+    },
+    later: '稍后',
+    star: {
+      action: '点亮星标',
+      desc: '如果您喜爱我们的产品，并希望支持我们，可以去 GitHub 给我们点一颗星吗？这个小小的动作对我们来说意义重大，能激励我们为您持续提供特性体验。',
+      title: '在 GitHub 为我们点亮星标',
+    },
+    title: '喜欢我们的产品？',
+  },
   fullscreen: '全屏模式',
-
   historyRange: '历史范围',
   import: '导入配置',
   importModal: {
@@ -69,6 +88,7 @@ export default {
       speed: '上传速度',
     },
   },
+  information: '社区与资讯',
   installPWA: '安装浏览器应用 (PWA)',
   lang: {
     'ar': '阿拉伯语',
@@ -108,6 +128,11 @@ export default {
     'zh-TW': '繁体中文',
   },
   layoutInitializing: '正在加载布局...',
+  legal: '法律声明',
+  mail: {
+    business: '商务合作',
+    support: '邮件支持',
+  },
   noDescription: '暂无描述',
   oauth: 'SSO 登录',
   officialSite: '官方网站',
@@ -149,7 +174,6 @@ export default {
     title: '同步状态',
     unconnected: { tip: '信令服务器连接失败，将无法建立点对点通信频道，请检查网络后重试' },
   },
-
   tab: {
     chat: '会话',
     market: '发现',
@@ -188,4 +212,5 @@ export default {
     setting: '应用设置',
     usages: '用量统计',
   },
+  version: '版本',
 };

package/src/services/ollama.ts

@@ -42,8 +42,8 @@ export class OllamaService {
     this._client.abort();
   };
 
-  pullModel = async (model: string): Promise<AsyncGenerator<ProgressResponse>> => {
-    let response: Response | AsyncGenerator<ProgressResponse>;
+  pullModel = async (model: string): Promise<AsyncIterable<ProgressResponse>> => {
+    let response: Response | AsyncIterable<ProgressResponse>;
     try {
       response = await this.getOllamaClient().pull({ insecure: true, model, stream: true });
       return response;

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

@@ -0,0 +1,201 @@
+import { describe, expect, it } from 'vitest';
+
+import { UserStore } from '@/store/user';
+import {
+  AWSBedrockKeyVault,
+  AzureOpenAIKeyVault,
+  OpenAICompatibleKeyVault,
+} from '@/types/user/settings';
+import { merge } from '@/utils/merge';
+
+import { initialSettingsState } from '../../settings/initialState';
+import { keyVaultsConfigSelectors } from './keyVaults';
+
+describe('keyVaultsConfigSelectors', () => {
+  describe('isProviderEndpointNotEmpty', () => {
+    describe('OpenAICompatibleKeyVault', () => {
+      it('should return true if provider endpoint is not empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              openai: {
+                endpoint: 'endpoint',
+              } as OpenAICompatibleKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderEndpointNotEmpty('openai')(s)).toBe(true);
+      });
+
+      it('should return false if provider endpoint is empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              openai: {
+                endpoint: undefined,
+              } as OpenAICompatibleKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderEndpointNotEmpty('openai')(s)).toBe(false);
+      });
+    });
+
+    describe('AzureOpenAIKeyVault', () => {
+      it('should return true if provider endpoint is not empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              azure: {
+                baseURL: 'baseURL',
+              } as AzureOpenAIKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderEndpointNotEmpty('azure')(s)).toBe(true);
+      });
+
+      it('should return false if provider endpoint is empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              azure: {
+                baseURL: undefined,
+              } as AzureOpenAIKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderEndpointNotEmpty('azure')(s)).toBe(false);
+      });
+    });
+
+    // Always return false for AWSBedrockKeyVault
+    describe('AWSBedrockKeyVault', () => {
+      it('should return false if provider region is not empty for AWSBedrockKeyVault', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              bedrock: {
+                region: 'region',
+              } as AWSBedrockKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderEndpointNotEmpty('bedrock')(s)).toBe(false);
+      });
+
+      it('should return false if provider region is empty for AWSBedrockKeyVault', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              bedrock: {
+                region: undefined,
+              } as AWSBedrockKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderEndpointNotEmpty('bedrock')(s)).toBe(false);
+      });
+    });
+  });
+
+  describe('isProviderApiKeyNotEmpty', () => {
+    describe('OpenAICompatibleKeyVault', () => {
+      it('should return true if provider apikey is not empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              openai: {
+                apiKey: 'apikey',
+              } as OpenAICompatibleKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderApiKeyNotEmpty('openai')(s)).toBe(true);
+      });
+
+      it('should return false if provider apikey is empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              openai: {
+                apiKey: undefined,
+              } as OpenAICompatibleKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderApiKeyNotEmpty('openai')(s)).toBe(false);
+      });
+    });
+
+    describe('AzureOpenAIKeyVault', () => {
+      it('should return true if provider apikey is not empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              azure: {
+                apiKey: 'apikey',
+              } as AzureOpenAIKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderApiKeyNotEmpty('azure')(s)).toBe(true);
+      });
+
+      it('should return false if provider apikey is empty', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              azure: {
+                apiKey: undefined,
+              } as AzureOpenAIKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderApiKeyNotEmpty('azure')(s)).toBe(false);
+      });
+    });
+
+    describe('AWSBedrockKeyVault', () => {
+      it('should return true if provider accessKeyId is not empty for AWSBedrockKeyVault', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              bedrock: {
+                accessKeyId: 'accessKeyId',
+              } as AWSBedrockKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderApiKeyNotEmpty('bedrock')(s)).toBe(true);
+      });
+
+      it('should return true if provider secretAccessKey is not empty for AWSBedrockKeyVault', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              bedrock: {
+                secretAccessKey: 'secretAccessKey',
+              } as AWSBedrockKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderApiKeyNotEmpty('bedrock')(s)).toBe(true);
+      });
+
+      it('should return false if provider accessKeyId and secretAccessKey are both empty for AWSBedrockKeyVault', () => {
+        const s = merge(initialSettingsState, {
+          settings: {
+            keyVaults: {
+              bedrock: {
+                accessKeyId: undefined,
+                secretAccessKey: undefined,
+              } as AWSBedrockKeyVault,
+            },
+          },
+        }) as unknown as UserStore;
+        expect(keyVaultsConfigSelectors.isProviderApiKeyNotEmpty('bedrock')(s)).toBe(false);
+      });
+    });
+  });
+});

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

@@ -1,5 +1,7 @@
 import { UserStore } from '@/store/user';
 import {
+  AWSBedrockKeyVault,
+  AzureOpenAIKeyVault,
   GlobalLLMProviderKey,
   OpenAICompatibleKeyVault,
   UserKeyVaults,
@@ -15,10 +17,19 @@ const bedrockConfig = (s: UserStore) => keyVaultsSettings(s).bedrock || {};
 const ollamaConfig = (s: UserStore) => keyVaultsSettings(s).ollama || {};
 const azureConfig = (s: UserStore) => keyVaultsSettings(s).azure || {};
 const getVaultByProvider = (provider: GlobalLLMProviderKey) => (s: UserStore) =>
-  (keyVaultsSettings(s)[provider] || {}) as OpenAICompatibleKeyVault;
+  (keyVaultsSettings(s)[provider] || {}) as OpenAICompatibleKeyVault &
+    AzureOpenAIKeyVault &
+    AWSBedrockKeyVault;
 
-const isProviderEndpointNotEmpty = (provider: string) => (s: UserStore) =>
-  !!getVaultByProvider(provider as GlobalLLMProviderKey)(s)?.baseURL;
+const isProviderEndpointNotEmpty = (provider: string) => (s: UserStore) => {
+  const vault = getVaultByProvider(provider as GlobalLLMProviderKey)(s);
+  return !!vault?.baseURL || !!vault?.endpoint;
+};
+
+const isProviderApiKeyNotEmpty = (provider: string) => (s: UserStore) => {
+  const vault = getVaultByProvider(provider as GlobalLLMProviderKey)(s);
+  return !!vault?.apiKey || !!vault?.accessKeyId || !!vault?.secretAccessKey;
+};
 
 const password = (s: UserStore) => keyVaultsSettings(s).password || '';
 
@@ -26,6 +37,7 @@ export const keyVaultsConfigSelectors = {
   azureConfig,
   bedrockConfig,
   getVaultByProvider,
+  isProviderApiKeyNotEmpty,
   isProviderEndpointNotEmpty,
   ollamaConfig,
   openAIConfig,

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

@@ -35,6 +35,7 @@ describe('modelConfigSelectors', () => {
   });
 
   describe('isProviderFetchOnClient', () => {
+    // The next 4 case are base on the rules on https://github.com/lobehub/lobe-chat/pull/2753
     it('client fetch should disabled on default', () => {
       const s = merge(initialSettingsState, {
         settings: {
@@ -46,16 +47,43 @@ describe('modelConfigSelectors', () => {
           },
         },
       } as UserSettingsState) as unknown as UserStore;
+      expect(modelConfigSelectors.isProviderFetchOnClient('azure')(s)).toBe(false);
+    });
 
+    it('client fetch should disabled if no apikey or endpoint provided even user set it enabled', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            azure: { fetchOnClient: true },
+          },
+        },
+      } as UserSettingsState) as unknown as UserStore;
       expect(modelConfigSelectors.isProviderFetchOnClient('azure')(s)).toBe(false);
     });
 
-    it('client fetch should enabled if user set it enabled', () => {
+    it('client fetch should enable if only endpoint provided', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            azure: { fetchOnClient: false },
+          },
+          keyVaults: {
+            azure: { endpoint: 'https://example.com' },
+          },
+        },
+      } as UserSettingsState) as unknown as UserStore;
+      expect(modelConfigSelectors.isProviderFetchOnClient('azure')(s)).toBe(true);
+    });
+
+    it('client fetch should control by user when a apikey or endpoint provided', () => {
       const s = merge(initialSettingsState, {
         settings: {
           languageModel: {
             azure: { fetchOnClient: true },
           },
+          keyVaults: {
+            azure: { apiKey: 'some-key' },
+          },
         },
       } as UserSettingsState) as unknown as UserStore;
       expect(modelConfigSelectors.isProviderFetchOnClient('azure')(s)).toBe(true);

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

@@ -1,15 +1,35 @@
+import { UserStore } from '@/store/user';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
-import { UserStore } from '../../../store';
 import { currentLLMSettings, getProviderConfigById } from '../../settings/selectors/settings';
+import { keyVaultsConfigSelectors } from './keyVaults';
 
 const isProviderEnabled = (provider: GlobalLLMProviderKey) => (s: UserStore) =>
   getProviderConfigById(provider)(s)?.enabled || false;
 
+/**
+ * @description The conditions to enable client fetch
+ * 1. If no baseUrl and apikey input, force on Server.
+ * 2. If only contains baseUrl, force on Client
+ * 3. Follow the user settings.
+ * 4. On Server, by default.
+ */
 const isProviderFetchOnClient = (provider: GlobalLLMProviderKey | string) => (s: UserStore) => {
   const config = getProviderConfigById(provider)(s);
+
+  // 1. If no baseUrl and apikey input, force on Server.
+  const isProviderEndpointNotEmpty =
+    keyVaultsConfigSelectors.isProviderEndpointNotEmpty(provider)(s);
+  const isProviderApiKeyNotEmpty = keyVaultsConfigSelectors.isProviderApiKeyNotEmpty(provider)(s);
+  if (!isProviderEndpointNotEmpty && !isProviderApiKeyNotEmpty) return false;
+
+  // 2. If only contains baseUrl, force on Client
+  if (isProviderEndpointNotEmpty && !isProviderApiKeyNotEmpty) return true;
+
+  // 3. Follow the user settings.
   if (typeof config?.fetchOnClient !== 'undefined') return config?.fetchOnClient;
 
+  // 4. On Server, by default.
   return false;
 };
 

package/src/types/user/settings/keyVaults.ts

@@ -3,7 +3,7 @@ export interface OpenAICompatibleKeyVault {
   baseURL?: string;
 }
 
-interface AzureOpenAIKeyVault {
+export interface AzureOpenAIKeyVault {
   apiKey?: string;
   apiVersion?: string;
   endpoint?: string;

package/src/app/(main)/settings/about/features/Item.tsx

@@ -1,50 +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: 16px;
-    padding-bottom: 16px;
-    border-radius: ${token.borderRadius}px;
-    ${responsive.mobile} {
-      border-radius: 0;
-    }
-  `,
-  noHover: css`
-    pointer-events: none;
-  `,
-}));
-
-export interface ItemProps {
-  active?: boolean;
-  className?: string;
-  hoverable?: boolean;
-  icon: LucideIcon;
-  label: ReactNode;
-  style?: CSSProperties;
-}
-
-const SettingItem = memo<ItemProps>(
-  ({ label, icon, hoverable = true, active = false, style, className }) => {
-    const { cx, styles } = useStyles();
-    const { mobile } = useResponsive();
-    return (
-      <Item
-        active={active}
-        avatar={<Icon icon={icon} size={{ fontSize: 20 }} />}
-        className={cx(styles.container, !hoverable && styles.noHover, className)}
-        style={style}
-        title={label as string}
-      >
-        {mobile && <Icon icon={ChevronRight} size={{ fontSize: 16 }} />}
-      </Item>
-    );
-  },
-);
-
-export default SettingItem;