@lobehub/chat 0.41.0 → 0.41.2

package/.eslintrc.js

@@ -8,5 +8,6 @@ config.rules['unicorn/prefer-logical-operator-over-ternary'] = 0;
 config.rules['unicorn/no-null'] = 0;
 config.rules['unicorn/no-typeof-undefined'] = 0;
 config.rules['unicorn/explicit-length-check'] = 0;
+config.rules['unicorn/prefer-code-point'] = 0;
 
 module.exports = config;

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 # Changelog
 
+### [Version 0.41.2](https://github.com/lobehub/lobe-chat/compare/v0.41.1...v0.41.2)
+
+<sup>Released on **2023-08-10**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 将 sessionStore 默认 equalFn 改为 shallow, 将 settingStore 默认 equalFn 改为 shallow.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 将 sessionStore 默认 equalFn 改为 shallow ([5c1b8d7](https://github.com/lobehub/lobe-chat/commit/5c1b8d7))
+- **misc**: 将 settingStore 默认 equalFn 改为 shallow ([1e72308](https://github.com/lobehub/lobe-chat/commit/1e72308))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.41.1](https://github.com/lobehub/lobe-chat/compare/v0.41.0...v0.41.1)
+
+<sup>Released on **2023-08-10**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 重构 settings store 代码写法.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 重构 settings store 代码写法 ([4b6f917](https://github.com/lobehub/lobe-chat/commit/4b6f917))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.41.0](https://github.com/lobehub/lobe-chat/compare/v0.40.7...v0.41.0)
 
 <sup>Released on **2023-08-10**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/features/AvatarWithUpload/index.tsx

@@ -2,7 +2,6 @@ import { Avatar, Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
@@ -28,7 +27,7 @@ interface AvatarWithUploadProps {
 }
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40 }) => {
-  const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings], shallow);
+  const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings]);
   const { styles } = useStyle();
 
   const handleUploadAvatar = createUploadImageHandler((avatar) => {

package/src/features/FolderPanel/index.tsx

@@ -2,7 +2,6 @@ import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { PropsWithChildren, memo, useState } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
 import { useSettings } from '@/store/settings';
@@ -17,10 +16,10 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const FolderPanel = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
-  const [sessionsWidth, sessionExpandable] = useSettings(
-    (s) => [s.sessionsWidth, s.sessionExpandable],
-    shallow,
-  );
+  const [sessionsWidth, sessionExpandable] = useSettings((s) => [
+    s.sessionsWidth,
+    s.sessionExpandable,
+  ]);
   const [tmpWidth, setWidth] = useState(sessionsWidth);
   if (tmpWidth !== sessionsWidth) setWidth(sessionsWidth);
 

package/src/features/SideBar/index.tsx

@@ -1,6 +1,5 @@
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSettings } from '@/store/settings';
@@ -9,7 +8,7 @@ import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
 export default memo(() => {
-  const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar], shallow);
+  const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar]);
 
   return (
     <SideNav

package/src/layout/index.tsx

@@ -4,7 +4,6 @@ import { useThemeMode } from 'antd-style';
 import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
 import { PropsWithChildren, useCallback, useEffect } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
@@ -29,11 +28,12 @@ const Layout = ({ children }: PropsWithChildren) => {
 };
 
 export default ({ children }: PropsWithChildren) => {
-  const themeMode = useSettings((s) => s.settings.themeMode, shallow);
-  const { primaryColor, neutralColor } = useSettings(
-    (s) => ({ neutralColor: s.settings.neutralColor, primaryColor: s.settings.primaryColor }),
-    shallow,
-  );
+  const themeMode = useSettings((s) => s.settings.themeMode);
+  const [primaryColor, neutralColor] = useSettings((s) => [
+    s.settings.primaryColor,
+    s.settings.neutralColor,
+  ]);
+
   const { browserPrefers } = useThemeMode();
   const isDarkMode = themeMode === 'auto' ? browserPrefers === 'dark' : themeMode === 'dark';
 

package/src/pages/chat/SessionList/Header.tsx

@@ -1,11 +1,10 @@
 import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
@@ -22,10 +21,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
-  const [keywords, createSession] = useSessionStore(
-    (s) => [s.searchKeywords, s.createSession],
-    shallow,
-  );
+  const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
 
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>

package/src/pages/chat/SessionList/List/SessionItem.tsx

@@ -29,7 +29,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
   const { t } = useTranslation('common');
 
   const { styles } = useStyles();
-  const [defaultModel] = useSettings((s) => [s.settings.defaultAgent.config?.model], shallow);
+  const [defaultModel] = useSettings((s) => [s.settings.defaultAgent.config?.model]);
 
   const [
     pin,
@@ -60,7 +60,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       s.removeSession,
       s.pinSession,
     ];
-  }, shallow);
+  });
 
   const { modal } = App.useApp();
   const items: MenuProps['items'] = useMemo(

package/src/pages/chat/SessionList/List/index.tsx

@@ -1,7 +1,6 @@
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
@@ -10,10 +9,7 @@ import SkeletonItem from './SkeletonItem';
 
 const SessionList = memo(() => {
   const list = useSessionStore((s) => sessionSelectors.sessionList(s), isEqual);
-  const [activeId, loading] = useSessionStore(
-    (s) => [s.activeId, s.autocompleteLoading.title],
-    shallow,
-  );
+  const [activeId, loading] = useSessionStore((s) => [s.activeId, s.autocompleteLoading.title]);
 
   const isInit = useSessionHydrated();
 

package/src/pages/chat/[id]/Conversation/ChatList/Error/ApiKeyForm.tsx

@@ -3,7 +3,6 @@ import { Button, Input } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 
@@ -12,10 +11,7 @@ import { useStyles } from './style';
 const APIKeyForm = memo<{ onConfirm?: () => void }>(({ onConfirm }) => {
   const { t } = useTranslation('error');
   const { styles, theme } = useStyles();
-  const [apiKey, setSettings] = useSettings(
-    (s) => [s.settings.OPENAI_API_KEY, s.setSettings],
-    shallow,
-  );
+  const [apiKey, setSettings] = useSettings((s) => [s.settings.OPENAI_API_KEY, s.setSettings]);
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>

package/src/pages/chat/[id]/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -4,7 +4,6 @@ import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
@@ -16,11 +15,8 @@ import { ErrorActionContainer, FormAction } from './style';
 const InvalidAccess = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('error');
   const [mode, setMode] = useState('password');
-  const [password, setSettings] = useSettings((s) => [s.settings.password, s.setSettings], shallow);
-  const [resend, deleteMessage] = useSessionStore(
-    (s) => [s.resendMessage, s.deleteMessage],
-    shallow,
-  );
+  const [password, setSettings] = useSettings((s) => [s.settings.password, s.setSettings]);
+  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (
     <ErrorActionContainer>

package/src/pages/chat/[id]/Conversation/ChatList/Error/OpenAiBizError.tsx

@@ -1,7 +1,6 @@
 import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
@@ -22,10 +21,7 @@ interface OpenAIErrorResponse {
 const OpenAiBizError = memo<{ content: OpenAIErrorResponse; id: string }>(({ content, id }) => {
   const { styles } = useStyles();
 
-  const [resend, deleteMessage] = useSessionStore(
-    (s) => [s.resendMessage, s.deleteMessage],
-    shallow,
-  );
+  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
 
   const errorCode = content.error?.code;
 

package/src/pages/chat/[id]/Conversation/ChatList/MessageExtra.tsx

@@ -1,7 +1,6 @@
 import { createStyles } from 'antd-style';
 import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import Tag from '@/components/Tag';
 import { agentSelectors, useSessionStore } from '@/store/session';
@@ -28,7 +27,7 @@ const MessageExtra = ({
   const { styles } = useStyles();
 
   // const { t } = useTranslation();
-  const [model] = useSessionStore((s) => [agentSelectors.currentAgentModel(s)], shallow);
+  const [model] = useSessionStore((s) => [agentSelectors.currentAgentModel(s)]);
 
   // const plugin = PluginsMap[name || ''];
 

package/src/pages/chat/[id]/Conversation/ChatList/index.tsx

@@ -3,14 +3,8 @@ import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
-import {
-  agentSelectors,
-  chatSelectors,
-  useSessionHydrated,
-  useSessionStore,
-} from '@/store/session';
+import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 import { ErrorType } from '@/types/fetch';
 import { isFunctionMessage } from '@/utils/message';
@@ -34,20 +28,16 @@ const renderErrorMessage: RenderErrorMessage = (error, message) => {
 
 const List = () => {
   const { t } = useTranslation('common');
-  const hydrated = useSessionHydrated();
+
   const data = useSessionStore(chatSelectors.currentChats, isEqual);
-  console.log(hydrated, data);
   const [displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
-    useSessionStore(
-      (s) => [
-        agentSelectors.currentAgentConfig(s).displayMode,
-        s.chatLoadingId,
-        s.deleteMessage,
-        s.resendMessage,
-        s.dispatchMessage,
-      ],
-      shallow,
-    );
+    useSessionStore((s) => [
+      agentSelectors.currentAgentConfig(s).displayMode,
+      s.chatLoadingId,
+      s.deleteMessage,
+      s.resendMessage,
+      s.dispatchMessage,
+    ]);
 
   const renderMessage: RenderMessage = useCallback(
     (content, message: ChatMessage) => {

package/src/pages/chat/[id]/Conversation/Input/Action.tsx

@@ -4,7 +4,6 @@ import { BrainCog, Thermometer, Timer, TimerOff } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import SliderWithInput from '@/components/SliderWithInput';
 import { agentSelectors, useSessionStore } from '@/store/session';
@@ -22,7 +21,7 @@ const InputActions = memo(() => {
       !config.enableHistoryCount,
       s.updateAgentConfig,
     ];
-  }, shallow);
+  });
 
   return (
     <>

package/src/pages/chat/[id]/Conversation/Input/ActionRight.tsx

@@ -3,13 +3,12 @@ import { Popconfirm } from 'antd';
 import { Eraser } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
 const ActionsRight = memo(() => {
   const { t } = useTranslation('setting');
-  const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig], shallow);
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
 
   return (
     <Popconfirm

package/src/pages/chat/[id]/Conversation/Input/Token.tsx

@@ -2,7 +2,6 @@ import { TokenTag, Tooltip } from '@lobehub/ui';
 import { encode } from 'gpt-tokenizer';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
 
 import { ModelTokens } from '@/const/modelTokens';
 import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
@@ -12,15 +11,12 @@ const Token = memo<{ input: string }>(({ input }) => {
 
   const inputTokenCount = useMemo(() => encode(input).length, [input]);
 
-  const [totalToken, systemRoleToken, chatsToken, model] = useSessionStore(
-    (s) => [
-      chatSelectors.totalTokenCount(s),
-      chatSelectors.systemRoleTokenCount(s),
-      chatSelectors.chatsTokenCount(s),
-      agentSelectors.currentAgentModel(s),
-    ],
-    shallow,
-  );
+  const [totalToken, systemRoleToken, chatsToken, model] = useSessionStore((s) => [
+    chatSelectors.totalTokenCount(s),
+    chatSelectors.systemRoleTokenCount(s),
+    chatSelectors.chatsTokenCount(s),
+    agentSelectors.currentAgentModel(s),
+  ]);
 
   return (
     <Tooltip placement={'bottom'} title={t('tokenDetail', { chatsToken, systemRoleToken })}>

package/src/pages/chat/[id]/Conversation/Input/index.tsx

@@ -3,7 +3,6 @@ import { Button } from 'antd';
 import { LucideGalleryVerticalEnd } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
 
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
@@ -18,11 +17,12 @@ const ChatInput = () => {
   const [expand, setExpand] = useState<boolean>(false);
   const [text, setText] = useState('');
 
-  const [inputHeight] = useSettings((s) => [s.inputHeight], shallow);
-  const [sendMessage, hasTopic, saveToTopic] = useSessionStore(
-    (s) => [s.createOrSendMsg, !!s.activeTopicId, s.saveToTopic],
-    shallow,
-  );
+  const [inputHeight] = useSettings((s) => [s.inputHeight]);
+  const [sendMessage, hasTopic, saveToTopic] = useSessionStore((s) => [
+    s.createOrSendMsg,
+    !!s.activeTopicId,
+    s.saveToTopic,
+  ]);
 
   const footer = hasTopic ? null : (
     <Tooltip title={t('topic.saveCurrentMessages')}>

package/src/pages/chat/[id]/Header/index.tsx

@@ -6,7 +6,6 @@ import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
@@ -19,23 +18,20 @@ const Header = memo(() => {
   const init = useSessionHydrated();
   const { t } = useTranslation('common');
 
-  const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore(
-    (s) => [
-      agentSelectors.currentAgentTitle(s),
-      agentSelectors.currentAgentDescription(s),
-      agentSelectors.currentAgentAvatar(s),
-      agentSelectors.currentAgentBackgroundColor(s),
-      s.activeId,
-      agentSelectors.currentAgentModel(s),
-      agentSelectors.currentAgentPlugins(s),
-    ],
-    shallow,
-  );
+  const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore((s) => [
+    agentSelectors.currentAgentTitle(s),
+    agentSelectors.currentAgentDescription(s),
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentBackgroundColor(s),
+    s.activeId,
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentPlugins(s),
+  ]);
 
-  const [showAgentSettings, toggleConfig] = useSettings(
-    (s) => [s.showAgentConfig, s.toggleAgentPanel],
-    shallow,
-  );
+  const [showAgentSettings, toggleConfig] = useSettings((s) => [
+    s.showAgentConfig,
+    s.toggleAgentPanel,
+  ]);
 
   return (
     <ChatHeader

package/src/pages/chat/[id]/Sidebar/Inner.tsx

@@ -5,7 +5,6 @@ import { Maximize2Icon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
@@ -41,10 +40,10 @@ const useStyles = createStyles(({ css, token }) => ({
 const Inner = memo(() => {
   const [openModal, setOpenModal] = useState(false);
   const { styles } = useStyles();
-  const [systemRole, updateAgentConfig] = useSessionStore(
-    (s) => [agentSelectors.currentAgentSystemRole(s), s.updateAgentConfig],
-    shallow,
-  );
+  const [systemRole, updateAgentConfig] = useSessionStore((s) => [
+    agentSelectors.currentAgentSystemRole(s),
+    s.updateAgentConfig,
+  ]);
 
   const hydrated = useSessionHydrated();
   const { t } = useTranslation('common');

package/src/pages/chat/[id]/Sidebar/Topic/TopicContent.tsx

@@ -5,7 +5,6 @@ import { MoreVertical, PencilLine, Star, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
@@ -33,10 +32,11 @@ interface TopicContentProps {
 const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
   const { t } = useTranslation('common');
 
-  const [editing, dispatchTopic, removeTopic] = useSessionStore(
-    (s) => [s.renameTopicId === id, s.dispatchTopic, s.removeTopic],
-    shallow,
-  );
+  const [editing, dispatchTopic, removeTopic] = useSessionStore((s) => [
+    s.renameTopicId === id,
+    s.dispatchTopic,
+    s.removeTopic,
+  ]);
   const { styles, theme } = useStyles();
 
   const toggleEditing = (visible?: boolean) => {

package/src/pages/chat/[id]/Sidebar/Topic/TopicItem.tsx

@@ -1,7 +1,6 @@
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
@@ -50,7 +49,7 @@ export interface ConfigCellProps {
 const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
   const { styles, cx } = useStyles();
 
-  const [toggleTopic] = useSessionStore((s) => [s.toggleTopic], shallow);
+  const [toggleTopic] = useSessionStore((s) => [s.toggleTopic]);
 
   return (
     <Flexbox

package/src/pages/chat/[id]/Sidebar/Topic/index.tsx

@@ -2,7 +2,6 @@ import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import Empty from '@/components/Empty';
 import { topicSelectors, useSessionStore } from '@/store/session';
@@ -13,13 +12,10 @@ import TopicItem from './TopicItem';
 export const Topic = () => {
   const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
-  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId], shallow);
+  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
   const { t } = useTranslation('empty');
 
-  const [visible, updateGuideState] = useSettings(
-    (s) => [s.guide?.topic, s.updateGuideState],
-    shallow,
-  );
+  const [visible, updateGuideState] = useSettings((s) => [s.guide?.topic, s.updateGuideState]);
 
   return (
     <Flexbox gap={2}>

package/src/pages/chat/[id]/Sidebar/index.tsx

@@ -1,7 +1,6 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
-import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -23,10 +22,10 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 
 const Config = () => {
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig] = useSettings(
-    (s) => [s.showAgentConfig, s.toggleAgentPanel],
-    shallow,
-  );
+  const [showAgentSettings, toggleConfig] = useSettings((s) => [
+    s.showAgentConfig,
+    s.toggleAgentPanel,
+  ]);
 
   return (
     <DraggablePanel

package/src/pages/chat/[id]/index.page.tsx

@@ -1,4 +1,3 @@
-import isEqual from 'fast-deep-equal';
 import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -12,10 +11,10 @@ import Header from './Header';
 import Config from './Sidebar';
 
 const Chat = memo(() => {
-  const [avatar, title] = useSessionStore(
-    (s) => [agentSelectors.currentAgentAvatar(s), agentSelectors.currentAgentTitle(s)],
-    isEqual,
-  );
+  const [avatar, title] = useSessionStore((s) => [
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
 
   const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
 

package/src/pages/chat/[id]/setting/index.page.tsx

@@ -3,7 +3,6 @@ import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
@@ -18,16 +17,13 @@ const EditPage = memo(() => {
   const { t } = useTranslation('setting');
   const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
   const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-  const autocomplete = useSessionStore(agentSelectors.currentAutocomplete, shallow);
-  const [updateAgentConfig, toggleAgentPlugin, updateAgentMeta, title] = useSessionStore(
-    (s) => [
-      s.updateAgentConfig,
-      s.toggleAgentPlugin,
-      s.updateAgentMeta,
-      agentSelectors.currentAgentTitle(s),
-    ],
-    shallow,
-  );
+  const autocomplete = useSessionStore(agentSelectors.currentAutocomplete);
+  const [updateAgentConfig, toggleAgentPlugin, updateAgentMeta, title] = useSessionStore((s) => [
+    s.updateAgentConfig,
+    s.toggleAgentPlugin,
+    s.updateAgentMeta,
+    agentSelectors.currentAgentTitle(s),
+  ]);
 
   const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 

package/src/pages/chat/layout.tsx

@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router';
 import { PropsWithChildren, memo, useEffect } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
@@ -19,7 +18,7 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
 
   const [activeSession, toggleTopic] = useSessionStore((s) => {
     return [s.activeSession, s.toggleTopic];
-  }, shallow);
+  });
 
   const router = useRouter();
   const { id } = router.query;

package/src/pages/settings/Settings/Agent.tsx

@@ -1,6 +1,5 @@
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
 import { settingsSelectors, useSettings } from '@/store/settings';
@@ -8,10 +7,11 @@ import { settingsSelectors, useSettings } from '@/store/settings';
 const Agent = memo(() => {
   const config = useSettings(settingsSelectors.currentAgentConfig, isEqual);
   const meta = useSettings(settingsSelectors.currentAgentMeta, isEqual);
-  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings(
-    (s) => [s.setAgentConfig, s.setAgentMeta, s.toggleAgentPlugin],
-    shallow,
-  );
+  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings((s) => [
+    s.setAgentConfig,
+    s.setAgentMeta,
+    s.toggleAgentPlugin,
+  ]);
   return (
     <>
       <AgentPrompt config={config} updateConfig={setAgentConfig} />

package/src/pages/settings/Settings/Common.tsx

@@ -6,7 +6,6 @@ import { AppWindow, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SliderWithInput from 'src/components/SliderWithInput';
-import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
@@ -29,14 +28,11 @@ const Common = memo(() => {
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
   const settings = useSettings(settingsSelectors.currentSettings, isEqual);
-  const { setThemeMode, setSettings, resetSettings } = useSettings(
-    (s) => ({
-      resetSettings: s.resetSettings,
-      setSettings: s.setSettings,
-      setThemeMode: s.setThemeMode,
-    }),
-    shallow,
-  );
+  const [setThemeMode, setSettings, resetSettings] = useSettings((s) => [
+    s.setThemeMode,
+    s.setSettings,
+    s.resetSettings,
+  ]);
 
   const { message, modal } = App.useApp();
   const handleReset = useCallback(() => {

package/src/pages/settings/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -6,15 +6,11 @@ import {
   neutralColorsSwatches,
 } from '@lobehub/ui';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 
 const ThemeSwatchesNeutral = memo(() => {
-  const { neutralColor, setSettings } = useSettings(
-    (s) => ({ neutralColor: s.settings.neutralColor, setSettings: s.setSettings }),
-    shallow,
-  );
+  const [neutralColor, setSettings] = useSettings((s) => [s.settings.neutralColor, s.setSettings]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('neutral', v) as NeutralColors;

package/src/pages/settings/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -6,15 +6,11 @@ import {
   primaryColorsSwatches,
 } from '@lobehub/ui';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 
 const ThemeSwatchesPrimary = memo(() => {
-  const { primaryColor, setSettings } = useSettings(
-    (s) => ({ primaryColor: s.settings.primaryColor, setSettings: s.setSettings }),
-    shallow,
-  );
+  const [primaryColor, setSettings] = useSettings((s) => [s.settings.primaryColor, s.setSettings]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('primary', v) as PrimaryColors;

package/src/store/session/store.ts

@@ -1,5 +1,5 @@
-import equal from 'fast-deep-equal';
 import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
@@ -10,6 +10,8 @@ import { AgentAction, createAgentSlice } from './slices/agentConfig';
 import { ChatAction, createChatSlice } from './slices/chat';
 import { SessionAction, createSessionSlice } from './slices/session';
 
+//  ===============  聚合 createStoreFn ============ //
+
 export type SessionStore = SessionAction & AgentAction & ChatAction & SessionStoreState;
 
 const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
@@ -19,6 +21,8 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
   ...createChatSlice(...parameters),
 });
 
+//  ===============  persist 本地缓存中间件配置 ============ //
+
 type SessionPersist = Pick<SessionStore, 'sessions'>;
 
 const LOBE_CHAT = 'LOBE_CHAT';
@@ -36,6 +40,8 @@ const persistOptions: PersistOptions<SessionStore, SessionPersist> = {
   // version: Migration.targetVersion,
 };
 
+//  ===============  实装 useStore ============ //
+
 export const useSessionStore = createWithEqualityFn<SessionStore>()(
   persist(
     devtools(createStore, {
@@ -43,5 +49,5 @@ export const useSessionStore = createWithEqualityFn<SessionStore>()(
     }),
     persistOptions,
   ),
-  equal,
+  shallow,
 );

package/src/store/settings/hooks/useHydrated.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+import { useSettings } from '../store';
+
+export const useSettingsHydrated = () => {
+  // 根据 sessions 是否有值来判断是否已经初始化
+  const hasInited = !!Object.values(useSettings.getState().settings).length;
+
+  const [isInit, setInit] = useState(hasInited);
+
+  useEffect(() => {
+    const hasRehydrated = useSettings.persist.hasHydrated();
+
+    if (hasRehydrated && !isInit) {
+      setInit(true);
+    }
+  }, []);
+
+  return isInit;
+};

package/src/store/settings/index.ts

@@ -1,27 +1,3 @@
-import equal from 'fast-deep-equal';
-import { type PersistOptions, devtools, persist } from 'zustand/middleware';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { isDev } from '@/utils/env';
-
-import { type SettingsStore, createStore } from './store';
-
-export const LOBE_SETTINGS = 'LOBE_SETTINGS';
-
-const persistOptions: PersistOptions<SettingsStore> = {
-  name: LOBE_SETTINGS,
-  skipHydration: true,
-};
-
-export const useSettings = createWithEqualityFn<SettingsStore>()(
-  persist(
-    devtools(createStore, {
-      name: LOBE_SETTINGS + (isDev ? '_DEV' : ''),
-    }),
-    persistOptions,
-  ),
-  equal,
-);
-
 export * from './selectors';
 export type { SettingsStore } from './store';
+export { useSettings } from './store';

package/src/store/settings/store.ts

@@ -1,15 +1,43 @@
+import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
+import { isDev } from '@/utils/env';
+
 import { type AppSettingsState, initialState } from './initialState';
 import { type AgentAction, createAgentSlice } from './slices/agent';
 import { type CommonAction, createCommonSlice } from './slices/common';
 
+//  ===============  聚合 createStoreFn ============ //
+
 export type SettingsStore = CommonAction & AppSettingsState & AgentAction;
 
-export const createStore: StateCreator<SettingsStore, [['zustand/devtools', never]]> = (
+const createStore: StateCreator<SettingsStore, [['zustand/devtools', never]]> = (
   ...parameters
 ) => ({
   ...initialState,
   ...createCommonSlice(...parameters),
   ...createAgentSlice(...parameters),
 });
+
+//  ===============  persist 本地缓存中间件配置 ============ //
+
+const LOBE_SETTINGS = 'LOBE_SETTINGS';
+
+const persistOptions: PersistOptions<SettingsStore> = {
+  name: LOBE_SETTINGS,
+  skipHydration: true,
+};
+
+//  ===============  实装 useStore ============ //
+
+export const useSettings = createWithEqualityFn<SettingsStore>()(
+  persist(
+    devtools(createStore, {
+      name: LOBE_SETTINGS + (isDev ? '_DEV' : ''),
+    }),
+    persistOptions,
+  ),
+  shallow,
+);