Merge branch 'main' into Intro

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.161.22](https://github.com/lobehub/lobe-chat/compare/v0.161.21...v0.161.22)
+
+<sup>Released on **2024-05-26**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix connection checker.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix connection checker, closes [#2672](https://github.com/lobehub/lobe-chat/issues/2672) ([bef8926](https://github.com/lobehub/lobe-chat/commit/bef8926))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.21](https://github.com/lobehub/lobe-chat/compare/v0.161.20...v0.161.21)
 
 <sup>Released on **2024-05-26**</sup>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.21",
+  "version": "0.161.22",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

src/app/(main)/settings/llm/Bedrock/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelProvider } from '@/libs/agent-runtime';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import ProviderConfig from '../components/ProviderConfig';
 import { LLMProviderConfigKey } from '../const';

src/app/(main)/settings/llm/components/Checker.tsx

@@ -50,10 +50,19 @@ const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
   const [error, setError] = useState<ChatMessageError | undefined>();
 
   const checkConnection = async () => {
-    const data = await chatService.fetchPresetTaskResult({
+    let isError = false;
+
+    await chatService.fetchPresetTaskResult({
       onError: (_, rawError) => {
         setError(rawError);
         setPass(false);
+        isError = true;
+      },
+      onFinish: async () => {
+        if (!isError) {
+          setError(undefined);
+          setPass(true);
+        }
       },
       onLoadingChange: (loading) => {
         setLoading(loading);
@@ -74,11 +83,6 @@ const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
         traceName: TraceNameMap.ConnectivityChecker,
       },
     });
-
-    if (data) {
-      setError(undefined);
-      setPass(true);
-    }
   };
   const isMobile = useIsMobile();
 

src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -18,7 +18,7 @@ import {
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
 import { modelConfigSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import Checker from '../Checker';
 import ProviderModelListSelect from '../ProviderModelList';

src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -10,7 +10,7 @@ import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useUserStore } from '@/store/user';
 import { modelConfigSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 interface CustomModelOptionProps {
   id: string;

src/app/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx

@@ -13,7 +13,7 @@ import {
   modelProviderSelectors,
   settingsSelectors,
 } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 const useStyles = createStyles(({ css, token }) => ({
   hover: css`

src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx

@@ -11,7 +11,7 @@ import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import CustomModelOption from './CustomModelOption';
 

src/app/(main)/settings/llm/components/ProviderModelList/index.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import ModelConfigModal from './ModelConfigModal';
 import ModelFetcher from './ModelFetcher';

src/const/settings/agent.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { ModelProvider } from '@/libs/agent-runtime';
 import { LobeAgentChatConfig, LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
-import { GlobalDefaultAgent } from '@/types/settings';
+import { UserDefaultAgent } from '@/types/user/settings';
 
 export const DEFAUTT_AGENT_TTS_CONFIG: LobeAgentTTSConfig = {
   showAllLocaleVoice: false,
@@ -34,7 +34,7 @@ export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
   tts: DEFAUTT_AGENT_TTS_CONFIG,
 };
 
-export const DEFAULT_AGENT: GlobalDefaultAgent = {
+export const DEFAULT_AGENT: UserDefaultAgent = {
   config: DEFAULT_AGENT_CONFIG,
   meta: DEFAULT_AGENT_META,
 };

src/const/settings/common.ts

@@ -1,6 +1,6 @@
-import { GlobalBaseSettings } from '@/types/settings';
+import { UserGeneralSettings } from '@/types/user/settings';
 
-export const DEFAULT_COMMON_SETTINGS: GlobalBaseSettings = {
+export const DEFAULT_COMMON_SETTINGS: UserGeneralSettings = {
   fontSize: 14,
   language: 'auto',
   password: '',

src/const/settings/index.ts

@@ -1,4 +1,4 @@
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
 
 import { DEFAULT_AGENT } from './agent';
 import { DEFAULT_COMMON_SETTINGS } from './common';
@@ -16,7 +16,7 @@ export * from './systemAgent';
 export * from './tool';
 export * from './tts';
 
-export const DEFAULT_SETTINGS: GlobalSettings = {
+export const DEFAULT_SETTINGS: UserSettings = {
   defaultAgent: DEFAULT_AGENT,
   languageModel: DEFAULT_LLM_CONFIG,
   sync: DEFAULT_SYNC_CONFIG,

src/const/settings/llm.ts

@@ -17,9 +17,9 @@ import {
   filterEnabledModels,
 } from '@/config/modelProviders';
 import { ModelProvider } from '@/libs/agent-runtime';
-import { GlobalLLMConfig } from '@/types/settings';
+import { UserModelProviderConfig } from '@/types/user/settings';
 
-export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
+export const DEFAULT_LLM_CONFIG: UserModelProviderConfig = {
   anthropic: {
     apiKey: '',
     enabled: false,

src/const/settings/sync.ts

@@ -1,5 +1,5 @@
-import { GlobalSyncSettings } from '@/types/settings';
+import { UserSyncSettings } from '@/types/user/settings';
 
-export const DEFAULT_SYNC_CONFIG: GlobalSyncSettings = {
+export const DEFAULT_SYNC_CONFIG: UserSyncSettings = {
   webrtc: { enabled: false },
 };

src/const/settings/systemAgent.ts

@@ -1,4 +1,4 @@
-import { GlobalSystemAgentConfig, GlobalTranslationConfig } from '@/types/settings';
+import { UserSystemAgentConfig, GlobalTranslationConfig } from '@/types/user/settings';
 
 import { DEFAULT_MODEL, DEFAULT_PROVIDER } from './llm';
 
@@ -7,6 +7,6 @@ export const DEFAULT_TRANSLATION_CONFIG: GlobalTranslationConfig = {
   provider: DEFAULT_PROVIDER,
 };
 
-export const DEFAULT_SYSTEM_AGENT_CONFIG: GlobalSystemAgentConfig = {
+export const DEFAULT_SYSTEM_AGENT_CONFIG: UserSystemAgentConfig = {
   translation: DEFAULT_TRANSLATION_CONFIG,
 };

src/const/settings/tts.ts

@@ -1,6 +1,6 @@
-import { GlobalTTSConfig } from '@/types/settings';
+import { UserTTSConfig } from '@/types/user/settings';
 
-export const DEFAULT_TTS_CONFIG: GlobalTTSConfig = {
+export const DEFAULT_TTS_CONFIG: UserTTSConfig = {
   openAI: {
     sttModel: 'whisper-1',
     ttsModel: 'tts-1',

src/database/client/core/migrations/migrateSettingsToUser/type.ts

@@ -3,7 +3,7 @@ import type { ThemeMode } from 'antd-style';
 import { LobeAgentTTSConfig } from '@/types/agent';
 import { FewShots, LLMParams } from '@/types/llm';
 import { MetaData } from '@/types/meta';
-import { STTServer } from '@/types/settings';
+import { STTServer } from '@/types/user/settings';
 
 interface V4LobeAgentConfig {
   autoCreateTopicThreshold: number;

src/database/client/models/__tests__/user.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
 
 import { UserModel } from '../user';
 

src/database/client/models/user.ts

@@ -2,7 +2,7 @@ import { DeepPartial } from 'utility-types';
 
 import { BaseModel } from '@/database/client/core';
 import { LobeAgentConfig } from '@/types/agent';
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
 import { uuid } from '@/utils/uuid';
 
 import { DB_User, DB_UserSchema } from '../schemas/user';
@@ -42,7 +42,7 @@ class _UserModel extends BaseModel {
 
   // **************** Update *************** //
 
-  async updateSettings(settings: DeepPartial<GlobalSettings>) {
+  async updateSettings(settings: DeepPartial<UserSettings>) {
     const user = await this.getUser();
 
     return this.update(user.id, { settings: settings as any });

src/features/Conversation/Error/APIKeyForm/ProviderApiKeyForm.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { FormAction } from '../style';
 

src/features/Conversation/Error/APIKeyForm/index.tsx

@@ -5,7 +5,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useChatStore } from '@/store/chat';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import BedrockForm from './Bedrock';
 import ProviderApiKeyForm from './ProviderApiKeyForm';

src/features/Conversation/components/BubblesLoading.tsx

@@ -1,52 +1,60 @@
-import { useTheme } from 'antd-style';
+import { css, cx, useTheme } from 'antd-style';
+import { Center } from 'react-layout-kit';
+
+const container = css`
+  circle {
+    animation: bubble 1.5s cubic-bezier(0.05, 0.2, 0.35, 1) infinite;
+  }
+
+  circle:nth-child(2) {
+    animation-delay: 0.3s;
+  }
+
+  circle:nth-child(3) {
+    animation-delay: 0.6s;
+  }
+
+  @keyframes bubble {
+    0% {
+      opacity: 1;
+
+      /* transform: translateY(0); */
+    }
+
+    25% {
+      opacity: 0.5;
+
+      /* transform: translateY(-4px); */
+    }
+
+    75% {
+      opacity: 0.25;
+
+      /* transform: translateY(4px); */
+    }
+
+    to {
+      opacity: 1;
+
+      /* transform: translateY(0); */
+    }
+  }
+`;
 
 const Svg = () => (
-  <svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="0" cy="12" r="0" transform="translate(8 0)">
-      <animate
-        attributeName="r"
-        begin="0"
-        calcMode="spline"
-        dur="1.2s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        keyTimes="0;0.2;0.7;1"
-        repeatCount="indefinite"
-        values="0; 4; 0; 0"
-      />
-    </circle>
-    <circle cx="0" cy="12" r="0" transform="translate(16 0)">
-      <animate
-        attributeName="r"
-        begin="0.3"
-        calcMode="spline"
-        dur="1.2s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        keyTimes="0;0.2;0.7;1"
-        repeatCount="indefinite"
-        values="0; 4; 0; 0"
-      />
-    </circle>
-    <circle cx="0" cy="12" r="0" transform="translate(24 0)">
-      <animate
-        attributeName="r"
-        begin="0.6"
-        calcMode="spline"
-        dur="1.2s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        keyTimes="0;0.2;0.7;1"
-        repeatCount="indefinite"
-        values="0; 4; 0; 0"
-      />
-    </circle>
+  <svg className={cx(container)} viewBox="0 0 60 32" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="7" cy="16" r="6"></circle>
+    <circle cx="30" cy="16" r="6"></circle>
+    <circle cx="53" cy="16" r="6"></circle>
   </svg>
 );
 
 const BubblesLoading = () => {
-  const { colorTextTertiary } = useTheme();
+  const theme = useTheme();
   return (
-    <div style={{ fill: colorTextTertiary, height: 24, width: 32 }}>
+    <Center style={{ fill: theme.colorTextSecondary, height: 24, width: 32 }}>
       <Svg />
-    </div>
+    </Center>
   );
 };
 

src/services/__tests__/share.test.ts

@@ -2,8 +2,8 @@ import { DeepPartial } from 'utility-types';
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { LOBE_URL_IMPORT_NAME } from '@/const/url';
-import { GlobalSettings } from '@/types/settings';
 import { ShareGPTConversation } from '@/types/share';
+import { UserSettings } from '@/types/user/settings';
 import { parseMarkdown } from '@/utils/parseMarkdown';
 
 import { SHARE_GPT_URL, shareService } from '../share';
@@ -91,7 +91,7 @@ describe('ShareGPTService', () => {
 describe('ShareViaUrl', () => {
   describe('createShareSettingsUrl', () => {
     it('should create a share settings URL with the provided settings', () => {
-      const settings: DeepPartial<GlobalSettings> = {
+      const settings: DeepPartial<UserSettings> = {
         languageModel: {
           openai: {
             apiKey: 'user-key',