@lobehub/chat 0.161.7 → 0.161.9

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 0.161.9](https://github.com/lobehub/lobe-chat/compare/v0.161.8...v0.161.9)
+
+<sup>Released on **2024-05-23**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix image style and improve drag upload box.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix image style and improve drag upload box, closes [#2610](https://github.com/lobehub/lobe-chat/issues/2610) ([5e1a4d6](https://github.com/lobehub/lobe-chat/commit/5e1a4d6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.161.8](https://github.com/lobehub/lobe-chat/compare/v0.161.7...v0.161.8)
+
+<sup>Released on **2024-05-22**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.7](https://github.com/lobehub/lobe-chat/compare/v0.161.6...v0.161.7)
 
 <sup>Released on **2024-05-22**</sup>

package/docs/self-hosting/advanced/feature-flags.mdx

@@ -0,0 +1,45 @@
+---
+title: LobeChat Feature Flags Environment Variables Configuration Guide
+description: >-
+  Learn how to use environment variables to customize LobeChat's feature flags,
+  including controlling whether a feature is enabled or disabled, or enabling or
+  disabling features for specific user groups or environments as needed.
+tags:
+  - LobeChat
+  - Environment Variables
+  - Configuration Guide
+  - Feature Flags
+---
+
+# Feature Flags
+
+In addition to basic environment variable configuration, LobeChat also offers feature flags to control whether a feature is enabled globally, or to enable or disable features for specific user groups or environments as needed.
+
+## Feature Flags Environment Variable `FEATURE_FLAGS`
+
+- Type: Optional
+- Description: Used to control LobeChat's feature functionalities. Supports multiple feature flags, using `+` to add a feature and `-` to disable a feature. Separate multiple feature flags with a comma `,` and enclose the entire value in quotes `"` to avoid parsing errors.
+- Default: `-`
+- Example: `"-welcome_suggest"`
+
+All features are controlled by the `FEATURE_FLAGS` variable as the sole configuration variable.
+
+You can achieve various feature combinations using the above configuration syntax. All feature flags are Boolean values, enabled with `+` and disabled with `-`.
+
+<Callout type={'tip'}>
+Attention: Unlike the `OPENAI_MODEL_LIST` variable, the `FEATURE_FLAGS` variable does not support the `all` keyword. You need to manually control all feature flags (otherwise, they will adopt their default values).
+</Callout>
+
+| Configuration Item        | Description                       | Default Value |
+| ------------------------- | --------------------------------- | ------------- |
+| `webrtc_sync`             | Enables WebRTC sync functionality.| Enabled       |
+| `language_model_settings` | Enables language model settings.  | Enabled       |
+| `openai_api_key`          | Allows users to customize the OpenAI API Key. | Enabled       |
+| `openai_proxy_url`        | Allows users to customize the OpenAI proxy URL. | Enabled       |
+| `create_session`          | Allows users to create sessions.  | Enabled       |
+| `edit_agent`              | Allows users to edit assistants.  | Enabled       |
+| `dalle`                   | Enables the DALL-E functionality. | Enabled       |
+| `check_updates`           | Allows checking for updates.      | Enabled       |
+| `welcome_suggest`         | Displays welcome suggestions.     | Enabled       |
+
+You can always check the [featureFlags](https://github.com/lobehub/lobe-chat/blob/main/src/config/featureFlags/schema.ts) to get the latest list of feature flags.

package/docs/self-hosting/advanced/feature-flags.zh-CN.mdx

@@ -0,0 +1,42 @@
+---
+title: LobeChat 特性标志环境变量配置指南
+description: 了解如何使用环境变量自定义 LobeChat 的特性标志，包括控制否启用某个功能、或者根据需要对特定用户群体或环境启用或禁用功能。
+tags:
+  - LobeChat
+  - 环境变量
+  - 配置指南
+  - 特征标志
+---
+
+# 特性标志
+
+除了基础的环境变量配置外，LobeChat 还提供了一些特性标志（Feature Flags），用于控制是否全局启用某个功能，或者根据需要对特定用户群体或环境启用或禁用功能。
+
+## 特性标志环境变量 `FEATURE_FLAGS`
+
+- 类型：可选
+- 描述：用于控制 LobeChat 的特性功能，支持多个功能标志，使用 `+` 增加一个功能，使用 `-` 来关闭一个功能，多个功能标志之间使用英文逗号 `,` 隔开，最外层建议添加引号 `"` 以避免解析错误。
+- 默认值：`-`
+- 示例：`"-welcome_suggest"`
+
+所有的功能统一以特性标志 `FEATURE_FLAGS` 作为唯一的配置变量。
+
+你可以通过上述配置语法来实现更多的功能组合。所有的功能配置项都是布尔类型，通过 `+` 来启用，通过 `-` 来关闭。
+
+<Callout type={'tip'}>
+注意：与 `OPENAI_MODEL_LIST` 变量不同，`FEATURE_FLAGS` 变量不支持 `all` 关键字，你需要手动控制所有的功能标志（否则它们会采用对应的默认值）。
+</Callout>
+
+| 配置项                    | 解释                             | 默认值 |
+| ------------------------- | -------------------------------- | ------ |
+| `webrtc_sync`             | 启用 WebRTC 同步功能。           | 开启   |
+| `language_model_settings` | 启用语言模型设置。               | 开启   |
+| `openai_api_key`          | 允许用户自定义 OpenAI API Key。  | 开启   |
+| `openai_proxy_url`        | 允许用户自定义 OpenAI 代理 URL。 | 开启   |
+| `create_session`          | 允许用户创建会话。               | 开启   |
+| `edit_agent`              | 允许用户编辑助手。               | 开启   |
+| `dalle`                   | 启用 DALL-E 功能。               | 开启   |
+| `check_updates`           | 允许检查更新。                   | 开启   |
+| `welcome_suggest`         | 显示欢迎建议。                   | 开启   |
+
+你可以随时检查 [featureFlags](https://github.com/lobehub/lobe-chat/blob/main/src/config/featureFlags/schema.ts) 以获取最新的特性标志列表。

package/docs/self-hosting/environment-variables/basic.mdx

@@ -36,7 +36,7 @@ LobeChat provides some additional configuration options during deployment, which
 
 When using the `random` mode, a random API Key will be selected from the available multiple API Keys.
 
-When using the `turn` mode, the API Keys will be retrieved in a round-robin manner according to the specified order.
+When using the `turn` mode, the API Keys will be retrieved in a polling manner according to the specified order.
 
 ### `NEXT_PUBLIC_BASE_PATH`
 
@@ -50,7 +50,7 @@ When using the `turn` mode, the API Keys will be retrieved in a round-robin mann
 - Type: Optional
 - Description: Used to configure the default settings for the LobeChat default agent. It supports various data types and structures, including key-value pairs, nested fields, array values, and more.
 - Default: -
-- Example: `'model=gpt-4-1106-preview;params.max_tokens=300;plugins=search-engine,lobe-image-designer`
+- Example: `'model=gpt-4-1106-preview;params.max_tokens=300;plugins=search-engine,lobe-image-designer'`
 
 The `DEFAULT_AGENT_CONFIG` is used to configure the default settings for the LobeChat default agent. It supports various data types and structures, including key-value pairs, nested fields, array values, and more. The table below provides detailed information on the configuration options, examples, and corresponding explanations for the `DEFAULT_AGENT_CONFIG` environment variable:
 
@@ -71,6 +71,15 @@ Further reading:
 
 - [[RFC] 022 - Default Assistant Parameters Configuration via Environment Variables](https://github.com/lobehub/lobe-chat/discussions/913)
 
+### `FEATURE_FLAGS`
+
+- Type: Optional
+- Description: Used to control LobeChat's feature functionalities. Supports multiple feature flags, using `+` to add a feature and `-` to disable a feature. Separate multiple feature flags with a comma `,` and enclose the entire value in quotes `"` to avoid parsing errors.
+- Default: `-`
+- Example: `"-welcome_suggest"`
+
+For specific content, please refer to the [Feature Flags](/docs/self-hosting/advanced/feature-flags) documentation.
+
 ## Plugin Service
 
 ### `PLUGINS_INDEX_URL`

package/docs/self-hosting/environment-variables/basic.zh-CN.mdx

@@ -32,7 +32,7 @@ LobeChat 在部署时提供了一些额外的配置项，你可以使用环境
 
 使用 `random` 模式下，将在多个 API Keys 中随机获取一个 API Key。
 
-使用 `turn` 模式下，将按照填写的顺序，轮训获取得到 API Key。
+使用 `turn` 模式下，将按照填写的顺序，轮询获取得到 API Key。
 
 ### `NEXT_PUBLIC_BASE_PATH`
 
@@ -46,7 +46,7 @@ LobeChat 在部署时提供了一些额外的配置项，你可以使用环境
 - 类型：可选
 - 描述：用于配置 LobeChat 默认助理的默认配置。它支持多种数据类型和结构，包括键值对、嵌套字段、数组值等。
 - 默认值：`-`
-- 示例：`'model=gpt-4-1106-preview;params.max_tokens=300;plugins=search-engine,lobe-image-designer`
+- 示例：`'model=gpt-4-1106-preview;params.max_tokens=300;plugins=search-engine,lobe-image-designer'`
 
 `DEFAULT_AGENT_CONFIG` 用于配置 LobeChat 默认助理的默认配置。它支持多种数据类型和结构，包括键值对、嵌套字段、数组值等。下表详细说明了 `DEFAULT_AGENT_CONFIG` 环境变量的配置项、示例以及相应解释：
 
@@ -67,6 +67,15 @@ LobeChat 在部署时提供了一些额外的配置项，你可以使用环境
 
 - [[RFC] 022 - 环境变量配置默认助手参数](https://github.com/lobehub/lobe-chat/discussions/913)
 
+### `FEATURE_FLAGS`
+
+- 类型：可选
+- 描述：用于控制 LobeChat 的特性功能，支持多个功能标志，使用 `+` 增加一个功能，使用 `-` 来关闭一个功能，多个功能标志之间使用英文逗号 `,` 隔开，最外层建议添加引号 `"` 以避免解析错误。
+- 默认值：`-`
+- 示例：`"-welcome_suggest"`
+
+具体的内容可以参见 [特性标志](/zh/docs/self-hosting/advanced/feature-flags) 中的说明。
+
 ## 插件服务
 
 ### `PLUGINS_INDEX_URL`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.7",
+  "version": "0.161.9",
   "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",

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/DragUpload.tsx

@@ -1,8 +1,9 @@
 import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { FileImage, FileText, FileUpIcon } from 'lucide-react';
-import { rgba } from 'polished';
+import { darken, lighten } from 'polished';
 import { memo, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -12,50 +13,57 @@ import { useFileStore } from '@/store/file';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 
-const useStyles = createStyles(({ css, token, stylish }) => {
+const DRAGGING_ROOT_ID = 'dragging-root';
+const getContainer = () => document.querySelector(`#${DRAGGING_ROOT_ID}`);
+const BLOCK_SIZE = 64;
+const ICON_SIZE = 36;
+
+const useStyles = createStyles(({ css, token }) => {
   return {
     container: css`
-      width: 300px;
-      height: 300px;
-      padding: 16px;
-
-      color: ${token.colorWhite};
+      width: 320px;
+      height: 200px;
+      padding: ${token.borderRadiusLG + 4}px;
 
       background: ${token.geekblue};
       border-radius: 16px;
-      box-shadow:
-        ${rgba(token.geekblue, 0.1)} 0 1px 1px 0 inset,
-        ${rgba(token.geekblue, 0.1)} 0 50px 100px -20px,
-        ${rgba(token.geekblue, 0.3)} 0 30px 60px -30px;
     `,
     content: css`
       width: 100%;
       height: 100%;
       padding: 16px;
 
-      border: 2px dashed ${token.colorWhite};
-      border-radius: 12px;
+      border: 1.5px dashed ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
     `,
     desc: css`
-      color: ${rgba(token.colorTextLightSolid, 0.6)};
+      color: #fff;
+    `,
+    icon: css`
+      color: ${darken(0.05, token.geekblue)};
+      background: ${lighten(0.38, token.geekblue)};
+      border-radius: ${token.borderRadiusLG}px;
+    `,
+    iconGroup: css`
+      margin-top: -44px;
     `,
     title: css`
-      font-size: 24px;
+      font-size: 20px;
       font-weight: bold;
+      color: #fff;
     `,
     wrapper: css`
       position: fixed;
-      z-index: 10000000;
-      top: 0;
-      left: 0;
+      z-index: 9999;
+      inset: 0;
 
       width: 100%;
       height: 100%;
 
-      transition: all 0.3s ease-in-out;
-
       background: ${token.colorBgMask};
-      ${stylish.blur};
+      backdrop-filter: blur(4px);
+
+      transition: all 0.3s ease-in-out;
     `,
   };
 });
@@ -70,7 +78,7 @@ const handleDragOver = (e: DragEvent) => {
 };
 
 const DragUpload = memo(() => {
-  const { styles } = useStyles();
+  const { styles, theme } = useStyles();
   const { t } = useTranslation('chat');
   const [isDragging, setIsDragging] = useState(false);
   // When a file is dragged to a different area, the 'dragleave' event may be triggered,
@@ -151,6 +159,17 @@ const DragUpload = memo(() => {
     uploadImages(files);
   };
 
+  useEffect(() => {
+    if (getContainer()) return;
+    const root = document.createElement('div');
+    root.id = DRAGGING_ROOT_ID;
+    document.body.append(root);
+
+    return () => {
+      root.remove();
+    };
+  }, []);
+
   useEffect(() => {
     window.addEventListener('dragenter', handleDragEnter);
     window.addEventListener('dragover', handleDragOver);
@@ -167,28 +186,59 @@ const DragUpload = memo(() => {
     };
   }, [handleDragEnter, handleDragOver, handleDragLeave, handleDrop, handlePaste]);
 
-  return (
-    isDragging && (
-      <Center className={styles.wrapper}>
-        <div className={styles.container}>
-          <Center className={styles.content} gap={40}>
-            <Flexbox horizontal>
-              <Icon icon={FileImage} size={{ fontSize: 64, strokeWidth: 1 }} />
-              <Icon icon={FileUpIcon} size={{ fontSize: 64, strokeWidth: 1 }} />
-              <Icon icon={FileText} size={{ fontSize: 64, strokeWidth: 1 }} />
+  if (!isDragging) return;
+
+  return createPortal(
+    <Center className={styles.wrapper}>
+      <div className={styles.container}>
+        <Center className={styles.content} gap={12}>
+          <Flexbox className={styles.iconGroup} horizontal>
+            <Center
+              className={styles.icon}
+              height={BLOCK_SIZE * 1.25}
+              style={{
+                background: lighten(0.32, theme.geekblue),
+                transform: 'rotateZ(-20deg) translateX(10px)',
+              }}
+              width={BLOCK_SIZE}
+            >
+              <Icon icon={FileImage} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+            </Center>
+            <Center
+              className={styles.icon}
+              height={BLOCK_SIZE * 1.25}
+              style={{
+                transform: 'translateY(-12px)',
+                zIndex: 1,
+              }}
+              width={BLOCK_SIZE}
+            >
+              <Icon icon={FileUpIcon} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+            </Center>
+            <Center
+              className={styles.icon}
+              height={BLOCK_SIZE * 1.25}
+              style={{
+                background: lighten(0.32, theme.geekblue),
+                transform: 'rotateZ(20deg) translateX(-10px)',
+              }}
+              width={BLOCK_SIZE}
+            >
+              <Icon icon={FileText} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+            </Center>
+          </Flexbox>
+          <Flexbox align={'center'} gap={8} style={{ textAlign: 'center' }}>
+            <Flexbox className={styles.title}>
+              {t(enabledFiles ? 'upload.dragFileTitle' : 'upload.dragTitle')}
             </Flexbox>
-            <Flexbox align={'center'} gap={8} style={{ textAlign: 'center' }}>
-              <Flexbox className={styles.title}>
-                {t(enabledFiles ? 'upload.dragFileTitle' : 'upload.dragTitle')}
-              </Flexbox>
-              <Flexbox className={styles.desc}>
-                {t(enabledFiles ? 'upload.dragFileDesc' : 'upload.dragDesc')}
-              </Flexbox>
+            <Flexbox className={styles.desc}>
+              {t(enabledFiles ? 'upload.dragFileDesc' : 'upload.dragDesc')}
             </Flexbox>
-          </Center>
-        </div>
-      </Center>
-    )
+          </Flexbox>
+        </Center>
+      </div>
+    </Center>,
+    getContainer()!,
   );
 });
 

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -101,7 +101,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
       horizontal
       padding={'0 24px'}
     >
-      <Flexbox align={'center'} gap={8} horizontal>
+      <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>
         {canUpload && (
           <>
             <DragUpload />
@@ -109,7 +109,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
           </>
         )}
       </Flexbox>
-      <Flexbox align={'center'} gap={8} horizontal>
+      <Flexbox align={'center'} flex={'none'} gap={8} horizontal>
         <Flexbox
           gap={4}
           horizontal

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import EditableFileList from '@/components/FileList/EditableFileList';
 import { useFileStore } from '@/store/file';
@@ -9,9 +10,9 @@ const Files = memo(() => {
   if (!inputFilesList || inputFilesList?.length === 0) return null;
 
   return (
-    <div style={{ position: 'relative', width: '100vw' }}>
-      <EditableFileList alwaysShowClose items={inputFilesList} padding={'0 8px'} />
-    </div>
+    <Flexbox paddingBlock={4} style={{ position: 'relative' }}>
+      <EditableFileList alwaysShowClose items={inputFilesList} padding={'4px 8px 8px'} />
+    </Flexbox>
   );
 });
 

package/src/app/(main)/chat/@session/default.tsx

@@ -1,9 +1,13 @@
+import { Suspense, lazy } from 'react';
+
 import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 import SessionHydration from './features/SessionHydration';
-import SessionListContent from './features/SessionListContent';
+import SkeletonList from './features/SkeletonList';
+
+const SessionListContent = lazy(() => import('./features/SessionListContent'));
 
 const Layout = ServerLayout({ Desktop, Mobile });
 
@@ -11,7 +15,9 @@ const Session = () => {
   return (
     <>
       <Layout>
-        <SessionListContent />
+        <Suspense fallback={<SkeletonList />}>
+          <SessionListContent />
+        </Suspense>
       </Layout>
       <SessionHydration />
     </>

package/src/app/(main)/chat/@session/features/SessionListContent/List/index.tsx

@@ -12,7 +12,7 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
 
-import SkeletonList from '../SkeletonList';
+import SkeletonList from '../../SkeletonList';
 import AddButton from './AddButton';
 import SessionItem from './Item';
 

package/src/app/(main)/chat/@session/features/SessionListContent/SearchMode.tsx

@@ -2,8 +2,8 @@ import { memo } from 'react';
 
 import { useSessionStore } from '@/store/session';
 
+import SkeletonList from '../SkeletonList';
 import SessionList from './List';
-import SkeletonList from './SkeletonList';
 
 const SearchMode = memo(() => {
   const [sessionSearchKeywords, useSearchSessions] = useSessionStore((s) => [

package/src/app/(main)/chat/@session/features/{SessionListContent/SkeletonList.tsx → SkeletonList.tsx}

@@ -1,3 +1,5 @@
+'use client';
+
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';

package/src/app/(main)/settings/system-agent/features/Translation.tsx

@@ -3,7 +3,6 @@
 import { Form, type ItemGroup } from '@lobehub/ui';
 import { Form as AntForm } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { Globe } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -40,7 +39,6 @@ const Translation = memo(() => {
         name: [SYSTEM_AGENT_SETTING_KEY, 'translation', 'model'],
       },
     ],
-    icon: Globe,
     title: t('systemAgent.translation.title'),
   };
 

package/src/components/FileList/ImageFileItem.tsx

@@ -19,7 +19,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   editableImage: css`
     background: ${token.colorBgContainer};
-    border: 1px solid ${token.colorBorderSecondary};
+    box-shadow: 0 0 0 1px ${token.colorFill} inset;
   `,
   image: css`
     margin-block: 0 !important;

package/src/const/meta.ts

@@ -5,5 +5,4 @@ export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
 export const DEFAULT_AGENT_META: MetaData = {};
 export const DEFAULT_INBOX_AVATAR = '🤯';
-export const DEFAULT_USER_AVATAR_URL =
-  'https://registry.npmmirror.com/@lobehub/assets-logo/1.2.0/files/assets/logo-3d.webp';
+export const DEFAULT_USER_AVATAR_URL = '/icons/icon-192x192.png';

package/src/layout/AuthProvider/Clerk/useAppearance.ts

@@ -112,7 +112,7 @@ export const useAppearance = () => {
       colorDanger: theme.colorError,
       colorInputBackground: theme.colorFillTertiary,
       colorNeutral: theme.colorText,
-      colorPrimary: theme.colorPrimary,
+
       colorSuccess: theme.colorSuccess,
       colorText: theme.colorText,
       colorTextSecondary: theme.colorTextDescription,

package/src/store/session/slices/session/action.ts

@@ -194,6 +194,10 @@ export const createSessionSlice: StateCreator<
 
   useFetchSessions: () =>
     useClientDataSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
+      fallbackData: {
+        sessionGroups: [],
+        sessions: [],
+      },
       onSuccess: (data) => {
         if (
           get().isSessionsFirstFetchFinished &&
@@ -209,6 +213,7 @@ export const createSessionSlice: StateCreator<
         );
         set({ isSessionsFirstFetchFinished: true }, false, n('useFetchSessions/onSuccess', data));
       },
+      suspense: true,
     }),
   useSearchSessions: (keyword) =>
     useSWR<LobeSessions>(

package/src/store/session/slices/session/initialState.ts

@@ -1,4 +1,4 @@
-import { CustomSessionGroup, LobeAgentSession, LobeSessionGroups } from '@/types/session';
+import { LobeAgentSession } from '@/types/session';
 
 export interface SessionState {
   /**
@@ -6,13 +6,11 @@ export interface SessionState {
    * @description 当前正在编辑或查看的会话
    */
   activeId: string;
-  customSessionGroups: CustomSessionGroup[];
   defaultSessions: LobeAgentSession[];
   isSearching: boolean;
   isSessionsFirstFetchFinished: boolean;
   pinnedSessions: LobeAgentSession[];
   searchKeywords: string;
-  sessionGroups: LobeSessionGroups;
   sessionSearchKeywords?: string;
   /**
    * it means defaultSessions
@@ -22,12 +20,10 @@ export interface SessionState {
 
 export const initialSessionState: SessionState = {
   activeId: 'inbox',
-  customSessionGroups: [],
   defaultSessions: [],
   isSearching: false,
   isSessionsFirstFetchFinished: false,
   pinnedSessions: [],
   searchKeywords: '',
-  sessionGroups: [],
   sessions: [],
 };

package/src/store/session/slices/sessionGroup/initialState.ts

@@ -1,5 +1,12 @@
+import { CustomSessionGroup, LobeSessionGroups } from '@/types/session';
+
 export interface SessionGroupState {
   activeGroupId?: string;
+  customSessionGroups: CustomSessionGroup[];
+  sessionGroups: LobeSessionGroups;
 }
 
-export const initSessionGroupState: SessionGroupState = {};
+export const initSessionGroupState: SessionGroupState = {
+  customSessionGroups: [],
+  sessionGroups: [],
+};

package/src/styles/antdOverride.ts

@@ -9,4 +9,10 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
     border: 1px solid ${token.colorBorder};
     box-shadow: ${token.boxShadow};
   }
+
+  .${token.prefixCls}-menu-item-selected {
+    .${token.prefixCls}-menu-title-content {
+      color: ${token.colorText};
+    }
+  }
 `;