@lobehub/chat 0.159.6 → 0.159.8

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 0.159.8](https://github.com/lobehub/lobe-chat/compare/v0.159.7...v0.159.8)
+
+<sup>Released on **2024-05-14**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix retry issue when hide page.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix retry issue when hide page, closes [#2503](https://github.com/lobehub/lobe-chat/issues/2503) ([24489bc](https://github.com/lobehub/lobe-chat/commit/24489bc))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.159.7](https://github.com/lobehub/lobe-chat/compare/v0.159.6...v0.159.7)
+
+<sup>Released on **2024-05-14**</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.159.6](https://github.com/lobehub/lobe-chat/compare/v0.159.5...v0.159.6)
 
 <sup>Released on **2024-05-14**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.159.6",
+  "version": "0.159.8",
   "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)/@topic/features/TopicListContent/index.tsx

@@ -3,14 +3,16 @@
 import { EmptyCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import React, { memo, useCallback, useRef } from 'react';
+import React, { Suspense, memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { imageUrl } from '@/const/url';
+import { isServerMode } from '@/const/version';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
 import { ChatTopic } from '@/types/topic';
 
@@ -21,10 +23,11 @@ const TopicListContent = memo(() => {
   const { t } = useTranslation('chat');
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const { isDarkMode } = useThemeMode();
-  const [topicsInit, activeTopicId, topicLength] = useChatStore((s) => [
+  const [topicsInit, activeTopicId, topicLength, useFetchTopics] = useChatStore((s) => [
     s.topicsInit,
     s.activeTopicId,
     topicSelectors.currentTopicLength(s),
+    s.useFetchTopics,
   ]);
   const [visible, updateGuideState] = useUserStore((s) => [
     s.preference.guide?.topic,
@@ -43,6 +46,10 @@ const TopicListContent = memo(() => {
     isEqual,
   );
 
+  const [sessionId] = useSessionStore((s) => [s.activeId]);
+
+  const { isLoading } = useFetchTopics(sessionId);
+
   const itemContent = useCallback(
     (index: number, { id, favorite, title }: ChatTopic) =>
       index === 0 ? (
@@ -55,9 +62,14 @@ const TopicListContent = memo(() => {
 
   const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
 
-  return !topicsInit ? (
-    <SkeletonList />
-  ) : (
+  // first time loading
+  if (!topicsInit) return <SkeletonList />;
+
+  // in server mode and re-loading
+  if (isServerMode && isLoading) return <SkeletonList />;
+
+  // in client mode no need the loading state for better UX
+  return (
     <>
       {topicLength === 0 && visible && (
         <Flexbox paddingInline={8}>
@@ -97,4 +109,10 @@ const TopicListContent = memo(() => {
   );
 });
 
-export default TopicListContent;
+TopicListContent.displayName = 'TopicListContent';
+
+export default memo(() => (
+  <Suspense fallback={<SkeletonList />}>
+    <TopicListContent />;
+  </Suspense>
+));

package/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx

@@ -3,10 +3,11 @@
 import { ActionIcon, Avatar, ChatHeaderTitle } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { memo } from 'react';
+import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useInitAgentConfig } from '@/app/(main)/chat/(workspace)/_layout/useInitAgentConfig';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -17,6 +18,8 @@ import Tags from './Tags';
 const Main = memo(() => {
   const { t } = useTranslation('chat');
 
+  useInitAgentConfig();
+
   const [init, isInbox, title, description, avatar, backgroundColor] = useSessionStore((s) => [
     sessionSelectors.isSomeSessionActive(s),
     sessionSelectors.isInboxSession(s),
@@ -70,4 +73,17 @@ const Main = memo(() => {
   );
 });
 
-export default Main;
+export default () => (
+  <Suspense
+    fallback={
+      <Skeleton
+        active
+        avatar={{ shape: 'circle', size: 'default' }}
+        paragraph={false}
+        title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
+      />
+    }
+  >
+    <Main />
+  </Suspense>
+);

package/src/app/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/ChatHeaderTitle.tsx

@@ -30,6 +30,7 @@ const ChatHeaderTitle = memo(() => {
     <MobileNavBarTitle
       desc={
         <Flexbox align={'center'} gap={4} horizontal onClick={() => toggleConfig()}>
+          <span>{topic?.title || t('topic.title')}</span>
           <ActionIcon
             active
             icon={ChevronDown}
@@ -39,7 +40,6 @@ const ChatHeaderTitle = memo(() => {
               color: theme.colorTextDescription,
             }}
           />
-          <span>{topic?.title || t('topic.title')}</span>
         </Flexbox>
       }
       title={

package/src/app/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/index.tsx

@@ -3,6 +3,7 @@
 import { MobileNavBar } from '@lobehub/ui';
 import { memo, useState } from 'react';
 
+import { useInitAgentConfig } from '@/app/(main)/chat/(workspace)/_layout/useInitAgentConfig';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
@@ -15,6 +16,7 @@ const MobileHeader = memo(() => {
   const [open, setOpen] = useState(false);
 
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
+  useInitAgentConfig();
 
   return (
     <MobileNavBar

package/src/app/(main)/chat/(workspace)/_layout/useInitAgentConfig.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { useAgentStore } from '@/store/agent';
+import { useChatStore } from '@/store/chat';
+import { useSessionStore } from '@/store/session';
+
+export const useInitAgentConfig = () => {
+  const [useFetchAgentConfig] = useAgentStore((s) => [s.useFetchAgentConfig]);
+
+  const [switchTopic] = useChatStore((s) => [s.switchTopic]);
+  const [sessionId] = useSessionStore((s) => [s.activeId]);
+
+  useEffect(() => {
+    // // when activeId changed, switch topic to undefined
+    const unsubscribe = useSessionStore.subscribe(
+      (s) => s.activeId,
+      (activeId) => {
+        switchTopic();
+
+        useAgentStore.setState({ activeId }, false, 'updateActiveId');
+      },
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return useFetchAgentConfig(sessionId);
+};

package/src/config/client.ts

@@ -30,11 +30,15 @@ declare global {
       NEXT_PUBLIC_I18N_DEBUG_SERVER: string;
 
       NEXT_PUBLIC_DEVELOPER_DEBUG: string;
+
+      NEXT_PUBLIC_SERVICE_MODE?: 'server' | 'browser';
     }
   }
 }
 
 export const getClientConfig = () => ({
+  ENABLED_SERVER_SERVICE: process.env.NEXT_PUBLIC_SERVICE_MODE === 'server',
+
   BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH || '',
 
   // Plausible Analytics

package/src/const/user.ts

@@ -0,0 +1,10 @@
+import { UserPreference } from '@/types/user';
+
+export const DEFAULT_PREFERENCE: UserPreference = {
+  guide: {
+    moveSettingsToAvatar: true,
+    topic: true,
+  },
+  telemetry: null,
+  useCmdEnterToSend: false,
+};

package/src/const/version.ts

@@ -1,3 +1,6 @@
 import pkg from '@/../package.json';
+import { getClientConfig } from '@/config/client';
 
 export const CURRENT_VERSION = pkg.version;
+
+export const isServerMode = getClientConfig().ENABLED_SERVER_SERVICE;

package/src/features/ChatInput/ActionBar/Tools/Dropdown.tsx

@@ -0,0 +1,145 @@
+import { Avatar, Icon } from '@lobehub/ui';
+import { Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import type { ItemType } from 'antd/es/menu/hooks/useItems';
+import isEqual from 'fast-deep-equal';
+import { ArrowRight, Store, ToyBrick } from 'lucide-react';
+import { PropsWithChildren, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useWorkspaceModal } from '@/app/(main)/chat/(workspace)/features/useWorkspaceModal';
+import PluginStore from '@/features/PluginStore';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
+
+import ToolItem from './ToolItem';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  menu: css`
+    &.${prefixCls}-dropdown-menu {
+      padding-block: 8px;
+    }
+
+    .${prefixCls}-dropdown-menu-item-group-list .${prefixCls}-dropdown-menu-item {
+      padding: 0;
+      border-radius: 4px;
+    }
+  `,
+}));
+
+const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
+  const { t } = useTranslation('setting');
+  const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
+  const { showDalle } = useServerConfigStore(featureFlagsSelectors);
+  const builtinList = useToolStore(builtinToolSelectors.metaList(showDalle), isEqual);
+
+  const enablePluginCount = useAgentStore(
+    (s) =>
+      agentSelectors
+        .currentAgentPlugins(s)
+        .filter((i) => !builtinList.some((b) => b.identifier === i)).length,
+  );
+
+  const [open, setOpen] = useWorkspaceModal();
+  const { styles } = useStyles();
+
+  const items: ItemType[] = [
+    (builtinList.length !== 0 && {
+      children: builtinList.map((item) => ({
+        icon: <Avatar avatar={item.meta.avatar} size={24} />,
+        key: item.identifier,
+        label: (
+          <ToolItem identifier={item.identifier} label={item.meta?.title || item.identifier} />
+        ),
+      })),
+
+      key: 'builtins',
+      label: t('tools.builtins.groupName'),
+      type: 'group',
+    }) as ItemType,
+    {
+      children: [
+        ...list.map((item) => ({
+          icon: item.meta?.avatar ? (
+            <Avatar avatar={pluginHelpers.getPluginAvatar(item.meta)} size={24} />
+          ) : (
+            <Icon icon={ToyBrick} size={{ fontSize: 16 }} style={{ padding: 4 }} />
+          ),
+          key: item.identifier,
+          label: (
+            <ToolItem
+              identifier={item.identifier}
+              label={pluginHelpers.getPluginTitle(item?.meta) || item.identifier}
+            />
+          ),
+        })),
+        {
+          icon: <Icon icon={Store} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
+
+          key: 'plugin-store',
+          label: (
+            <Flexbox gap={40} horizontal justify={'space-between'} padding={'8px 12px'}>
+              {t('tools.plugins.store')} <Icon icon={ArrowRight} />
+            </Flexbox>
+          ),
+          onClick: (e) => {
+            e.domEvent.stopPropagation();
+            setOpen(true);
+          },
+        },
+      ],
+      key: 'plugins',
+      label: (
+        <Flexbox align={'center'} gap={40} horizontal justify={'space-between'}>
+          {t('tools.plugins.groupName')}
+          {enablePluginCount === 0 ? null : (
+            <div style={{ fontSize: 12, marginInlineEnd: 4 }}>
+              {t('tools.plugins.enabled', { num: enablePluginCount })}
+            </div>
+          )}
+        </Flexbox>
+      ),
+      type: 'group',
+    } as ItemType,
+  ].filter(Boolean);
+
+  const plugins = useAgentStore((s) => agentSelectors.currentAgentPlugins(s));
+
+  const [useFetchPluginStore, useFetchInstalledPlugins, checkPluginsIsInstalled] = useToolStore(
+    (s) => [s.useFetchPluginStore, s.useFetchInstalledPlugins, s.useCheckPluginsIsInstalled],
+  );
+
+  useFetchPluginStore();
+  useFetchInstalledPlugins();
+  checkPluginsIsInstalled(plugins);
+
+  return (
+    <>
+      <Dropdown
+        arrow={false}
+        menu={{
+          className: styles.menu,
+          items,
+          onClick: (e) => {
+            e.domEvent.preventDefault();
+          },
+          style: {
+            maxHeight: 500,
+            overflowY: 'scroll',
+          },
+        }}
+        placement={'top'}
+        trigger={['click']}
+      >
+        {children}
+      </Dropdown>
+      <PluginStore open={open} setOpen={setOpen} />
+    </>
+  );
+});
+
+export default DropdownMenu;

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -1,144 +1,32 @@
-import { ActionIcon, Avatar, Icon } from '@lobehub/ui';
-import { Dropdown } from 'antd';
-import { createStyles } from 'antd-style';
-import type { ItemType } from 'antd/es/menu/hooks/useItems';
-import isEqual from 'fast-deep-equal';
-import { ArrowRight, Blocks, Store, ToyBrick } from 'lucide-react';
-import { memo } from 'react';
+import { ActionIcon } from '@lobehub/ui';
+import { Blocks, LucideLoader2 } from 'lucide-react';
+import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { useWorkspaceModal } from '@/app/(main)/chat/(workspace)/features/useWorkspaceModal';
-import PluginStore from '@/features/PluginStore';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { pluginHelpers, useToolStore } from '@/store/tool';
-import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 
-import ToolItem from './ToolItem';
-
-const useStyles = createStyles(({ css, prefixCls }) => ({
-  menu: css`
-    &.${prefixCls}-dropdown-menu {
-      padding-block: 8px;
-    }
-
-    .${prefixCls}-dropdown-menu-item-group-list .${prefixCls}-dropdown-menu-item {
-      padding: 0;
-      border-radius: 4px;
-    }
-  `,
-}));
+import DropdownMenu from './Dropdown';
 
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
-  const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
-  const { showDalle } = useServerConfigStore(featureFlagsSelectors);
-  const builtinList = useToolStore(builtinToolSelectors.metaList(showDalle), isEqual);
-
-  const enablePluginCount = useAgentStore(
-    (s) =>
-      agentSelectors
-        .currentAgentPlugins(s)
-        .filter((i) => !builtinList.some((b) => b.identifier === i)).length,
-  );
-
-  const [open, setOpen] = useWorkspaceModal();
-  const { styles } = useStyles();
 
   const model = useAgentStore(agentSelectors.currentAgentModel);
   const enableFC = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
 
-  const items: ItemType[] = [
-    (builtinList.length !== 0 && {
-      children: builtinList.map((item) => ({
-        icon: <Avatar avatar={item.meta.avatar} size={24} />,
-        key: item.identifier,
-        label: (
-          <ToolItem identifier={item.identifier} label={item.meta?.title || item.identifier} />
-        ),
-      })),
-
-      key: 'builtins',
-      label: t('tools.builtins.groupName'),
-      type: 'group',
-    }) as ItemType,
-    {
-      children: [
-        ...list.map((item) => ({
-          icon: item.meta?.avatar ? (
-            <Avatar avatar={pluginHelpers.getPluginAvatar(item.meta)} size={24} />
-          ) : (
-            <Icon icon={ToyBrick} size={{ fontSize: 16 }} style={{ padding: 4 }} />
-          ),
-          key: item.identifier,
-          label: (
-            <ToolItem
-              identifier={item.identifier}
-              label={pluginHelpers.getPluginTitle(item?.meta) || item.identifier}
-            />
-          ),
-        })),
-        {
-          icon: <Icon icon={Store} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
-
-          key: 'plugin-store',
-          label: (
-            <Flexbox gap={40} horizontal justify={'space-between'} padding={'8px 12px'}>
-              {t('tools.plugins.store')} <Icon icon={ArrowRight} />
-            </Flexbox>
-          ),
-          onClick: (e) => {
-            e.domEvent.stopPropagation();
-            setOpen(true);
-          },
-        },
-      ],
-      key: 'plugins',
-      label: (
-        <Flexbox align={'center'} gap={40} horizontal justify={'space-between'}>
-          {t('tools.plugins.groupName')}
-          {enablePluginCount === 0 ? null : (
-            <div style={{ fontSize: 12, marginInlineEnd: 4 }}>
-              {t('tools.plugins.enabled', { num: enablePluginCount })}
-            </div>
-          )}
-        </Flexbox>
-      ),
-      type: 'group',
-    } as ItemType,
-  ].filter(Boolean);
-
   return (
-    <>
-      <Dropdown
-        arrow={false}
-        menu={{
-          className: styles.menu,
-          items,
-          onClick: (e) => {
-            e.domEvent.preventDefault();
-          },
-          style: {
-            maxHeight: 500,
-            overflowY: 'scroll',
-          },
-        }}
-        placement={'top'}
-        trigger={['click']}
-      >
+    <Suspense fallback={<ActionIcon icon={LucideLoader2} />}>
+      <DropdownMenu>
         <ActionIcon
           disable={!enableFC}
           icon={Blocks}
           placement={'bottom'}
           title={t(enableFC ? 'tools.title' : 'tools.disabled')}
         />
-      </Dropdown>
-      <PluginStore open={open} setOpen={setOpen} />
-    </>
+      </DropdownMenu>
+    </Suspense>
   );
 });
 

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -1,15 +1,19 @@
 'use client';
 
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { Loader2Icon } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { WELCOME_GUIDE_CHAT_ID } from '@/const/session';
+import { isServerMode } from '@/const/version';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
 
-import { useInitConversation } from '../../hooks/useInitConversation';
 import AutoScroll from '../AutoScroll';
 import Item from '../ChatItem';
 import InboxWelcome from '../InboxWelcome';
@@ -19,16 +23,21 @@ interface VirtualizedListProps {
   mobile?: boolean;
 }
 const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
-  useInitConversation();
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [atBottom, setAtBottom] = useState(true);
   const [isScrolling, setIsScrolling] = useState(false);
 
-  const [id, chatLoading] = useChatStore((s) => [
-    chatSelectors.currentChatKey(s),
+  const [id] = useChatStore((s) => [chatSelectors.currentChatKey(s)]);
+
+  const [activeTopicId, useFetchMessages, isFirstLoading] = useChatStore((s) => [
+    s.activeTopicId,
+    s.useFetchMessages,
     chatSelectors.currentChatLoadingState(s),
   ]);
 
+  const [sessionId] = useSessionStore((s) => [s.activeId]);
+  const { isLoading } = useFetchMessages(sessionId, activeTopicId);
+
   const data = useChatStore((s) => {
     const showInboxWelcome = chatSelectors.showInboxWelcome(s);
     const ids = showInboxWelcome
@@ -51,6 +60,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
     return newFollowOutput;
   }, [data.length]);
 
+  const theme = useTheme();
   // overscan should be 1.5 times the height of the window
   const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0;
 
@@ -67,8 +77,22 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
     [mobile],
   );
 
-  return chatLoading ? (
-    <SkeletonList mobile={mobile} />
+  // first time loading
+  if (isFirstLoading) return <SkeletonList mobile={mobile} />;
+
+  // in server mode and switch page
+  if (isServerMode && isLoading) return <SkeletonList mobile={mobile} />;
+
+  // in client mode using the center loading for more
+  return isLoading ? (
+    <Center height={'100%'} width={'100%'}>
+      <Icon
+        icon={Loader2Icon}
+        size={{ fontSize: 32 }}
+        spin
+        style={{ color: theme.colorTextTertiary }}
+      />
+    </Center>
   ) : (
     <Flexbox height={'100%'}>
       <Virtuoso

package/src/features/Conversation/index.tsx

@@ -1,8 +1,9 @@
-import { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SkeletonList from './components/SkeletonList';
-import ChatList from './components/VirtualizedList';
+
+const ChatList = lazy(() => import('./components/VirtualizedList'));
 
 interface ConversationProps {
   mobile?: boolean;

package/src/features/PluginStore/PluginItem/Action.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button, Dropdown, Popconfirm } from 'antd';
+import { App, Button, Dropdown } from 'antd';
 import { InfoIcon, MoreVerticalIcon, Settings, Trash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
   const { t } = useTranslation('plugin');
   const [open, setOpen] = useState(false);
   const plugin = useToolStore(pluginSelectors.getPluginManifestById(identifier));
-
+  const { modal } = App.useApp();
   const [tab, setTab] = useState('info');
   const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(plugin?.settings);
 
@@ -67,21 +67,16 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
                     danger: true,
                     icon: <Icon icon={Trash2} />,
                     key: 'uninstall',
-                    label: (
-                      <Popconfirm
-                        arrow={false}
-                        cancelText={t('cancel', { ns: 'common' })}
-                        okButtonProps={{ danger: true }}
-                        okText={t('ok', { ns: 'common' })}
-                        onConfirm={() => {
-                          unInstallPlugin(identifier);
-                        }}
-                        placement={'topRight'}
-                        title={t('store.actions.confirmUninstall')}
-                      >
-                        {t('store.actions.uninstall')}
-                      </Popconfirm>
-                    ),
+                    label: t('store.actions.uninstall'),
+                    onClick: () => {
+                      modal.confirm({
+                        centered: true,
+                        okButtonProps: { danger: true },
+                        onOk: async () => unInstallPlugin(identifier),
+                        title: t('store.actions.confirmUninstall'),
+                        type: 'error',
+                      });
+                    },
                   },
                 ],
               }}

package/src/services/message/type.ts

@@ -20,6 +20,7 @@ export interface IMessageService {
   getAllMessages(): Promise<ChatMessage[]>;
   getAllMessagesInSession(sessionId: string): Promise<ChatMessage[]>;
   countMessages(): Promise<number>;
+  countTodayMessages(): Promise<number>;
 
   updateMessageError(id: string, error: ChatMessageError): Promise<any>;
   updateMessage(id: string, message: Partial<DB_Message>): Promise<any>;

package/src/services/plugin/client.test.ts

@@ -6,7 +6,8 @@ import { DB_Plugin } from '@/database/client/schemas/plugin';
 import { LobeTool } from '@/types/tool';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
-import { ClientService, InstallPluginParams } from './client';
+import { ClientService } from './client';
+import { InstallPluginParams } from './type';
 
 const pluginService = new ClientService();
 
@@ -110,7 +111,7 @@ describe('PluginService', () => {
 
       // Assert
       expect(PluginModel.update).toHaveBeenCalledWith(id, value);
-      expect(result).toEqual(1);
+      expect(result).toEqual(undefined);
     });
   });
 
@@ -126,7 +127,7 @@ describe('PluginService', () => {
 
       // Assert
       expect(PluginModel.update).toHaveBeenCalledWith(id, { manifest });
-      expect(result).toEqual(1);
+      expect(result).toEqual(undefined);
     });
   });
 
@@ -149,14 +150,13 @@ describe('PluginService', () => {
       // Arrange
       const id = 'plugin-id';
       const settings = { color: 'blue' };
-      vi.mocked(PluginModel.update).mockResolvedValue(1);
 
       // Act
       const result = await pluginService.updatePluginSettings(id, settings);
 
       // Assert
       expect(PluginModel.update).toHaveBeenCalledWith(id, { settings });
-      expect(result).toEqual(1);
+      expect(result).toEqual(undefined);
     });
   });
 });

package/src/services/plugin/client.ts

@@ -4,13 +4,9 @@ import { PluginModel } from '@/database/client/models/plugin';
 import { LobeTool } from '@/types/tool';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
-export interface InstallPluginParams {
-  identifier: string;
-  manifest: LobeChatPluginManifest;
-  type: 'plugin' | 'customPlugin';
-}
+import { IPluginService, InstallPluginParams } from './type';
 
-export class ClientService {
+export class ClientService implements IPluginService {
   installPlugin = async (plugin: InstallPluginParams) => {
     return PluginModel.create(plugin);
   };
@@ -28,17 +24,19 @@ export class ClientService {
   }
 
   async updatePlugin(id: string, value: LobeToolCustomPlugin) {
-    return PluginModel.update(id, value);
+    await PluginModel.update(id, value);
+    return;
   }
   async updatePluginManifest(id: string, manifest: LobeChatPluginManifest) {
-    return PluginModel.update(id, { manifest });
+    await PluginModel.update(id, { manifest });
   }
 
   async removeAllPlugins() {
     return PluginModel.clear();
   }
 
-  async updatePluginSettings(id: string, settings: any) {
-    return PluginModel.update(id, { settings });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async updatePluginSettings(id: string, settings: any, _?: AbortSignal) {
+    await PluginModel.update(id, { settings });
   }
 }

package/src/services/plugin/type.ts

@@ -0,0 +1,21 @@
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+
+import { LobeTool } from '@/types/tool';
+import { LobeToolCustomPlugin } from '@/types/tool/plugin';
+
+export interface InstallPluginParams {
+  identifier: string;
+  manifest: LobeChatPluginManifest;
+  type: 'plugin' | 'customPlugin';
+}
+
+export interface IPluginService {
+  createCustomPlugin: (customPlugin: LobeToolCustomPlugin) => Promise<void>;
+  getInstalledPlugins: () => Promise<LobeTool[]>;
+  installPlugin: (plugin: InstallPluginParams) => Promise<void>;
+  removeAllPlugins: () => Promise<void>;
+  uninstallPlugin: (identifier: string) => Promise<void>;
+  updatePlugin: (id: string, value: LobeToolCustomPlugin) => Promise<void>;
+  updatePluginManifest: (id: string, manifest: LobeChatPluginManifest) => Promise<void>;
+  updatePluginSettings: (id: string, settings: any, signal?: AbortSignal) => Promise<void>;
+}

package/src/services/topic/type.ts

@@ -22,6 +22,7 @@ export interface ITopicService {
 
   getTopics(params: QueryTopicParams): Promise<ChatTopic[]>;
   getAllTopics(): Promise<ChatTopic[]>;
+  countTopics(): Promise<number>;
   searchTopics(keyword: string, sessionId?: string): Promise<ChatTopic[]>;
 
   updateTopic(id: string, data: Partial<ChatTopic>): Promise<any>;

package/src/store/agent/slices/chat/action.ts

@@ -81,11 +81,13 @@ export const createChatSlice: StateCreator<
       [FETCH_AGENT_CONFIG_KEY, sessionId],
       ([, id]: string[]) => sessionService.getSessionConfig(id),
       {
+        fallbackData: DEFAULT_AGENT_CONFIG,
         onSuccess: (data) => {
           if (get().isAgentConfigInit && isEqual(get().agentConfig, data)) return;
 
           set({ agentConfig: data, isAgentConfigInit: true }, false, 'fetchAgentConfig');
         },
+        suspense: true,
       },
     ),
   useFetchDefaultAgentConfig: () =>

package/src/store/chat/slices/topic/action.ts

@@ -171,6 +171,8 @@ export const chatTopic: StateCreator<
       [SWR_USE_FETCH_TOPIC, sessionId],
       async ([, sessionId]: [string, string]) => topicService.getTopics({ sessionId }),
       {
+        suspense: true,
+        fallbackData: [],
         onSuccess: (topics) => {
           set({ topics, topicsInit: true }, false, n('useFetchTopics(success)', { sessionId }));
         },

package/src/store/tool/slices/plugin/action.test.ts

@@ -90,7 +90,11 @@ describe('useToolStore:plugin', () => {
         await result.current.updatePluginSettings(pluginId, newSettings);
       });
 
-      expect(pluginService.updatePluginSettings).toBeCalledWith(pluginId, newSettings);
+      expect(pluginService.updatePluginSettings).toBeCalledWith(
+        pluginId,
+        newSettings,
+        expect.any(AbortSignal),
+      );
     });
 
     it('should merge settings for a plugin with existing settings', async () => {
@@ -108,7 +112,11 @@ describe('useToolStore:plugin', () => {
         await result.current.updatePluginSettings(pluginId, newSettings);
       });
 
-      expect(pluginService.updatePluginSettings).toBeCalledWith(pluginId, mergedSettings);
+      expect(pluginService.updatePluginSettings).toBeCalledWith(
+        pluginId,
+        mergedSettings,
+        expect.any(AbortSignal),
+      );
     });
   });
 

package/src/store/tool/slices/plugin/action.ts

@@ -45,10 +45,16 @@ export const createPluginSlice: StateCreator<
     await get().refreshPlugins();
   },
   updatePluginSettings: async (id, settings) => {
-    const previousSettings = pluginSelectors.getPluginSettingsById(id)(get());
+    const signal = get().updatePluginSettingsSignal;
+    if (signal) signal.abort('canceled');
+
+    const newSignal = new AbortController();
 
+    const previousSettings = pluginSelectors.getPluginSettingsById(id)(get());
     const nextSettings = merge(previousSettings, settings);
-    await pluginService.updatePluginSettings(id, nextSettings);
+
+    set({ updatePluginSettingsSignal: newSignal });
+    await pluginService.updatePluginSettings(id, nextSettings, newSignal.signal);
 
     await get().refreshPlugins();
   },

package/src/store/tool/slices/plugin/initialState.ts

@@ -6,6 +6,7 @@ export interface PluginState {
   installedPlugins: LobeTool[];
   loadingInstallPlugins: boolean;
   pluginsSettings: PluginsSettings;
+  updatePluginSettingsSignal?: AbortController;
 }
 
 export const initialPluginState: PluginState = {

package/src/store/tool/slices/store/action.test.ts

@@ -157,7 +157,12 @@ describe('useToolStore:pluginStore', () => {
 
       // Then
       expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function), {
+        fallbackData: {
+          plugins: [],
+          schemaVersion: 1,
+        },
         revalidateOnFocus: false,
+        suspense: true,
       });
       expect(result.current.data).toEqual(pluginListMock);
       expect(result.current.error).toBeNull();
@@ -178,7 +183,12 @@ describe('useToolStore:pluginStore', () => {
 
       // Then
       expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function), {
+        fallbackData: {
+          plugins: [],
+          schemaVersion: 1,
+        },
         revalidateOnFocus: false,
+        suspense: true,
       });
       expect(result.current.data).toBeNull();
       expect(result.current.error).toEqual(error);

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

@@ -45,11 +45,12 @@ export const createPluginStoreSlice: StateCreator<
     try {
       updateInstallLoadingState(name, true);
       const data = await toolService.getPluginManifest(plugin.manifest);
-      updateInstallLoadingState(name, undefined);
 
       // 4. 存储 manifest 信息
       await pluginService.installPlugin({ identifier: plugin.identifier, manifest: data, type });
       await refreshPlugins();
+
+      updateInstallLoadingState(name, undefined);
     } catch (error) {
       console.error(error);
       updateInstallLoadingState(name, undefined);
@@ -91,6 +92,7 @@ export const createPluginStoreSlice: StateCreator<
   },
   useFetchInstalledPlugins: () =>
     useSWR<LobeTool[]>(INSTALLED_PLUGINS, pluginService.getInstalledPlugins, {
+      fallbackData: [],
       onSuccess: (data) => {
         set(
           { installedPlugins: data, loadingInstallPlugins: false },
@@ -99,9 +101,12 @@ export const createPluginStoreSlice: StateCreator<
         );
       },
       revalidateOnFocus: false,
+      suspense: true,
     }),
   useFetchPluginStore: () =>
     useSWR<LobeChatPluginsMarketIndex>('loadPluginStore', get().loadPluginStore, {
+      fallbackData: { plugins: [], schemaVersion: 1 },
       revalidateOnFocus: false,
+      suspense: true,
     }),
 });

package/src/store/user/slices/preference/action.test.ts

@@ -2,9 +2,9 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { withSWR } from '~test-utils';
 
+import { DEFAULT_PREFERENCE } from '@/const/user';
 import { useUserStore } from '@/store/user';
-
-import { DEFAULT_PREFERENCE, type Guide, UserPreference } from './initialState';
+import { UserGuide, UserPreference } from '@/types/user';
 
 beforeEach(() => {
   vi.clearAllMocks();
@@ -18,7 +18,7 @@ describe('createPreferenceSlice', () => {
   describe('updateGuideState', () => {
     it('should update guide state', () => {
       const { result } = renderHook(() => useUserStore());
-      const guide: Guide = { topic: true };
+      const guide: UserGuide = { topic: true };
 
       act(() => {
         result.current.updateGuideState(guide);

package/src/store/user/slices/preference/action.ts

@@ -1,17 +1,17 @@
 import { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { DEFAULT_PREFERENCE } from '@/const/user';
 import { useClientDataSWR } from '@/libs/swr';
 import type { UserStore } from '@/store/user';
+import { UserGuide, UserPreference } from '@/types/user';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import { DEFAULT_PREFERENCE, Guide, UserPreference } from './initialState';
-
 const n = setNamespace('preference');
 
 export interface PreferenceAction {
-  updateGuideState: (guide: Partial<Guide>) => void;
+  updateGuideState: (guide: Partial<UserGuide>) => void;
   updatePreference: (preference: Partial<UserPreference>, action?: any) => void;
   useInitPreference: () => SWRResponse;
 }

package/src/store/user/slices/preference/initialState.ts

@@ -1,25 +1,7 @@
+import { DEFAULT_PREFERENCE } from '@/const/user';
+import { UserPreference } from '@/types/user';
 import { AsyncLocalStorage } from '@/utils/localStorage';
 
-export interface Guide {
-  /**
-   * Move the settings button to the avatar dropdown
-   */
-  moveSettingsToAvatar?: boolean;
-
-  // Topic 引导
-  topic?: boolean;
-}
-
-export interface UserPreference {
-  guide?: Guide;
-  hideSyncAlert?: boolean;
-  telemetry: boolean | null;
-  /**
-   * whether to use cmd + enter to send message
-   */
-  useCmdEnterToSend?: boolean;
-}
-
 export interface UserPreferenceState {
   isPreferenceInit: boolean;
   /**
@@ -29,15 +11,6 @@ export interface UserPreferenceState {
   preferenceStorage: AsyncLocalStorage<UserPreference>;
 }
 
-export const DEFAULT_PREFERENCE: UserPreference = {
-  guide: {
-    moveSettingsToAvatar: true,
-    topic: true,
-  },
-  telemetry: null,
-  useCmdEnterToSend: false,
-};
-
 export const initialPreferenceState: UserPreferenceState = {
   isPreferenceInit: false,
   preference: DEFAULT_PREFERENCE,

package/src/types/tool/index.ts

@@ -4,9 +4,9 @@ import { CustomPluginParams } from './plugin';
 import { LobeToolType } from './tool';
 
 export interface LobeTool {
-  customParams?: CustomPluginParams;
+  customParams?: CustomPluginParams | null;
   identifier: string;
-  manifest?: LobeChatPluginManifest;
+  manifest?: LobeChatPluginManifest | null;
   settings?: any;
   type: LobeToolType;
 }

package/src/types/user.ts

@@ -7,3 +7,23 @@ export interface LobeUser {
   latestName?: string | null;
   username?: string | null;
 }
+
+export interface UserGuide {
+  /**
+   * Move the settings button to the avatar dropdown
+   */
+  moveSettingsToAvatar?: boolean;
+
+  // Topic 引导
+  topic?: boolean;
+}
+
+export interface UserPreference {
+  guide?: UserGuide;
+  hideSyncAlert?: boolean;
+  telemetry: boolean | null;
+  /**
+   * whether to use cmd + enter to send message
+   */
+  useCmdEnterToSend?: boolean;
+}

package/src/utils/fetch.ts

@@ -363,7 +363,9 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
           return;
         }
       },
-
+      // we should keep open when page hidden, or it will case lots of token cost
+      // refs: https://github.com/lobehub/lobe-chat/issues/2501
+      openWhenHidden: true,
       signal: options.signal,
     });
   } catch {}

package/src/features/Conversation/hooks/useInitConversation.ts

@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
-import { useChatStore } from '@/store/chat';
-import { useSessionStore } from '@/store/session';
-import { useToolStore } from '@/store/tool';
-
-export const useInitConversation = () => {
-  const [sessionId] = useSessionStore((s) => [s.activeId]);
-  const [useFetchAgentConfig] = useAgentStore((s) => [s.useFetchAgentConfig]);
-  const plugins = useAgentStore((s) => agentSelectors.currentAgentPlugins(s));
-  const [activeTopicId, switchTopic, useFetchMessages, useFetchTopics] = useChatStore((s) => [
-    s.activeTopicId,
-    s.switchTopic,
-    s.useFetchMessages,
-    s.useFetchTopics,
-  ]);
-
-  useFetchMessages(sessionId, activeTopicId);
-  useFetchTopics(sessionId);
-  useFetchAgentConfig(sessionId);
-
-  const [useFetchPluginStore, useFetchInstalledPlugins, checkPluginsIsInstalled] = useToolStore(
-    (s) => [s.useFetchPluginStore, s.useFetchInstalledPlugins, s.useCheckPluginsIsInstalled],
-  );
-
-  useFetchPluginStore();
-  useFetchInstalledPlugins();
-  checkPluginsIsInstalled(plugins);
-
-  useEffect(() => {
-    // // when activeId changed, switch topic to undefined
-    const unsubscribe = useSessionStore.subscribe(
-      (s) => s.activeId,
-      (activeId) => {
-        switchTopic();
-
-        useAgentStore.setState({ activeId }, false, 'updateActiveId');
-      },
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-};