@lobehub/chat 0.35.1 → 0.36.1

package/.github/workflows/release.yml

@@ -24,6 +24,9 @@ jobs:
       - name: Install deps
         run: pnpm install
 
+      - name: Lint
+        run: pnpm run type-check
+
       - name: Test
         run: pnpm run test
 

package/CHANGELOG.md

@@ -2,6 +2,72 @@
 
 # Changelog
 
+### [Version 0.36.1](https://github.com/lobehub/lobe-chat/compare/v0.36.0...v0.36.1)
+
+<sup>Released on **2023-08-03**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor zustand usage with v4.4.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor zustand usage with v4.4, closes [#52](https://github.com/lobehub/lobe-chat/issues/52) ([4c65aa7](https://github.com/lobehub/lobe-chat/commit/4c65aa7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.36.0](https://github.com/lobehub/lobe-chat/compare/v0.35.1...v0.36.0)
+
+<sup>Released on **2023-08-03**</sup>
+
+#### ✨ Features
+
+- **misc**: 实现自定义历史消息数功能.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix setting type.
+
+#### 💄 Styles
+
+- **misc**: Fix session item height.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 实现自定义历史消息数功能 ([7baa022](https://github.com/lobehub/lobe-chat/commit/7baa022))
+
+#### What's fixed
+
+- **misc**: Fix setting type ([57e415e](https://github.com/lobehub/lobe-chat/commit/57e415e))
+
+#### Styles
+
+- **misc**: Fix session item height ([6cd1de5](https://github.com/lobehub/lobe-chat/commit/6cd1de5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.35.1](https://github.com/lobehub/lobe-chat/compare/v0.35.0...v0.35.1)
 
 <sup>Released on **2023-07-31**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.35.1",
+  "version": "0.36.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -93,7 +93,7 @@
     "swr": "^2",
     "ts-md5": "^1",
     "uuid": "^9",
-    "zustand": "^4",
+    "zustand": "^4.4",
     "zustand-utils": "^1"
   },
   "devDependencies": {

package/src/components/SliderWithInput/index.tsx

@@ -21,6 +21,7 @@ const SliderWithInput = memo<SliderWithInputProps>(
     controls,
     style,
     className,
+    disabled,
     ...props
   }) => {
     const handleOnchange = useCallback((value: number | null) => {
@@ -38,6 +39,7 @@ const SliderWithInput = memo<SliderWithInputProps>(
       >
         <Slider
           defaultValue={defaultValue}
+          disabled={disabled}
           max={max}
           min={min}
           onChange={handleOnchange}
@@ -50,6 +52,7 @@ const SliderWithInput = memo<SliderWithInputProps>(
         <InputNumber
           controls={size !== 'small' || controls}
           defaultValue={defaultValue}
+          disabled={disabled}
           max={max}
           min={min}
           onChange={handleOnchange}

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -11,10 +11,11 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LanguageModel } from '@/types/llm';
 import type { LobeAgentConfig } from '@/types/session';
+import { LobeAgentConfigKeys } from '@/types/session';
 
 type SettingItemGroup = ItemGroup & {
   children: {
-    name?: keyof LobeAgentConfig | string[];
+    name?: LobeAgentConfigKeys | string | string[];
   }[];
 };
 

package/src/locales/default/setting.ts

@@ -61,7 +61,10 @@ export default {
       title: '是否开启历史消息长度压缩阈值',
     },
     enableHistoryCount: {
-      title: '是否开启携带的历史消息数限制',
+      alias: '不限制',
+      limited: '只包含 {{number}} 条会话消息',
+      title: '限制历史消息数',
+      unlimited: '不限历史消息数',
     },
     historyCount: {
       desc: '每次请求携带的历史消息数',

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

@@ -56,7 +56,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       meta.backgroundColor,
       session?.updateAt,
       session.config.model,
-      chatSelectors.currentChats(s).length,
+      chatSelectors.getChatsById(id)(s).length,
       s.removeSession,
       s.pinSession,
     ];
@@ -177,7 +177,6 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       pin={pin}
       ref={ref}
       showAction={open || isHovering}
-      style={{ color: theme.colorText }}
       title={title}
     />
   );

package/src/pages/chat/SessionList/List/style.ts

@@ -21,7 +21,6 @@ export const useStyles = createStyles(({ css, token }) => {
     `,
     container: css`
       position: relative;
-      height: 72px;
     `,
 
     modalRoot: css`

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

@@ -1,8 +1,9 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Dropdown, Popconfirm, Popover } from 'antd';
-import { BrainCog, Eraser, Thermometer } from 'lucide-react';
+import { Dropdown, Popover, Switch } from 'antd';
+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';
@@ -11,16 +12,15 @@ import { LanguageModel } from '@/types/llm';
 
 const InputActions = memo(() => {
   const { t } = useTranslation('setting');
-  const [clearMessage, updateAgentConfig] = useSessionStore(
-    (s) => [s.clearMessage, s.updateAgentConfig],
-    shallow,
-  );
-  const [model, temperature] = useSessionStore((s) => {
+
+  const [model, temperature, historyCount, unlimited, updateAgentConfig] = useSessionStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
     return [
       config.model,
       config.params.temperature,
-      // config.historyCount
+      config.historyCount,
+      !config.enableHistoryCount,
+      s.updateAgentConfig,
     ];
   }, shallow);
 
@@ -54,6 +54,7 @@ const InputActions = memo(() => {
             value={temperature}
           />
         }
+        placement={'top'}
         trigger={'click'}
       >
         <ActionIcon
@@ -62,36 +63,47 @@ const InputActions = memo(() => {
           title={t('settingModel.temperature.titleWithValue', { value: temperature })}
         />
       </Popover>
-      {/*TODO 历史记录功能实现 */}
-      {/*<Popover*/}
-      {/*  content={*/}
-      {/*    <SliderWithInput*/}
-      {/*      min={0}*/}
-      {/*      onChange={(v) => {*/}
-      {/*        updateAgentConfig({ historyCount: v });*/}
-      {/*      }}*/}
-      {/*      step={1}*/}
-      {/*      style={{ width: 120 }}*/}
-      {/*      value={historyCount}*/}
-      {/*    />*/}
-      {/*  }*/}
-      {/*  trigger={'click'}*/}
-      {/*>*/}
-      {/*  <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />*/}
-      {/*</Popover>*/}
-      <Popconfirm
-        cancelText={t('cancel', { ns: 'common' })}
-        okButtonProps={{ danger: true }}
-        okText={t('ok', { ns: 'common' })}
-        onConfirm={() => clearMessage()}
-        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      <Popover
+        arrow={false}
+        content={
+          <Flexbox align={'center'} gap={16} horizontal>
+            <SliderWithInput
+              disabled={unlimited}
+              max={30}
+              min={1}
+              onChange={(v) => {
+                updateAgentConfig({ historyCount: v });
+              }}
+              step={1}
+              style={{ width: 160 }}
+              value={historyCount}
+            />
+            <Flexbox align={'center'} gap={4} horizontal>
+              <Switch
+                checked={unlimited}
+                onChange={(checked) => {
+                  updateAgentConfig({ enableHistoryCount: !checked });
+                }}
+                size={'small'}
+              />
+              {t('settingChat.enableHistoryCount.alias')}
+            </Flexbox>
+          </Flexbox>
+        }
+        placement={'top'}
+        trigger={'click'}
       >
         <ActionIcon
-          icon={Eraser}
+          icon={unlimited ? TimerOff : Timer}
           placement={'bottom'}
-          title={t('clearCurrentMessages', { ns: 'common' })}
+          title={t(
+            unlimited
+              ? 'settingChat.enableHistoryCount.unlimited'
+              : 'settingChat.enableHistoryCount.limited',
+            { number: historyCount || 0 },
+          )}
         />
-      </Popconfirm>
+      </Popover>
     </>
   );
 });

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

@@ -0,0 +1,31 @@
+import { ActionIcon } from '@lobehub/ui';
+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);
+
+  return (
+    <Popconfirm
+      cancelText={t('cancel', { ns: 'common' })}
+      okButtonProps={{ danger: true }}
+      okText={t('ok', { ns: 'common' })}
+      onConfirm={() => clearMessage()}
+      title={t('confirmClearCurrentMessages', { ns: 'common' })}
+    >
+      <ActionIcon
+        icon={Eraser}
+        placement={'bottom'}
+        title={t('clearCurrentMessages', { ns: 'common' })}
+      />
+    </Popconfirm>
+  );
+});
+
+export default ActionsRight;

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

@@ -10,6 +10,7 @@ import { useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
 import InputActions from './Action';
+import ActionsRight from './ActionRight';
 import Token from './Token';
 
 const ChatInput = () => {
@@ -52,6 +53,7 @@ const ChatInput = () => {
             <Token input={text} />
           </>
         }
+        actionsRight={<ActionsRight />}
         expand={expand}
         footer={footer}
         minHeight={CHAT_TEXTAREA_HEIGHT}

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

@@ -20,7 +20,7 @@ import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches';
 
 type SettingItemGroup = ItemGroup & {
   children: {
-    name?: ConfigKeys;
+    name?: ConfigKeys | string;
   }[];
 };
 

package/src/store/session/index.ts

@@ -1,5 +1,6 @@
-import { create } from 'zustand';
+import equal from 'fast-deep-equal';
 import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
 
 import { isDev } from '@/utils/env';
 
@@ -22,13 +23,14 @@ const persistOptions: PersistOptions<SessionStore, SessionPersist> = {
   // version: Migration.targetVersion,
 };
 
-export const useSessionStore = create<SessionStore>()(
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
   persist(
     devtools(createStore, {
       name: LOBE_CHAT + (isDev ? '_DEV' : ''),
     }),
     persistOptions,
   ),
+  equal,
 );
 
 export * from './selectors';

package/src/store/session/slices/chat/actions/message.ts

@@ -5,6 +5,7 @@ import { LOADING_FLAT } from '@/const/message';
 import { fetchChatModel } from '@/services/chatModel';
 import { fetchPlugin } from '@/services/plugin';
 import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
+import { getSlicedMessagesWithConfig } from '@/store/session/slices/chat/utils';
 import { ChatMessage, OpenAIFunctionCall } from '@/types/chatMessage';
 import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
@@ -123,12 +124,17 @@ export const chatMessage: StateCreator<
 
     const compiler = template(config.inputTemplate, { interpolate: /{{([\S\s]+?)}}/g });
 
-    // 对 message 做统一预处理
+    // ========================== //
+    //   对 messages 做统一预处理    //
+    // ========================== //
 
-    // 1. 替换 inputMessage 模板
+    // 1. 按参数设定截断长度
+    const slicedMessages = getSlicedMessagesWithConfig(messages, config);
+
+    // 2. 替换 inputMessage 模板
     const postMessages = !config.inputTemplate
-      ? messages
-      : messages.map((m) => {
+      ? slicedMessages
+      : slicedMessages.map((m) => {
           if (m.role === 'user') {
             try {
               return { ...m, content: compiler({ text: m.content }) };
@@ -141,12 +147,9 @@ export const chatMessage: StateCreator<
           return m;
         });
 
-    // 2. TODO 按参数设定截断长度
-
     // 3. 添加 systemRole
-    const { systemRole } = agentSelectors.currentAgentConfig(get());
-    if (systemRole) {
-      postMessages.unshift({ content: systemRole, role: 'system' } as ChatMessage);
+    if (config.systemRole) {
+      postMessages.unshift({ content: config.systemRole, role: 'system' } as ChatMessage);
     }
 
     const fetcher = () =>

package/src/store/session/slices/chat/selectors/chat.ts

@@ -1,29 +1,40 @@
 import { DEFAULT_USER_AVATAR } from '@/const/meta';
-import { agentSelectors } from '@/store/session';
 import { useSettings } from '@/store/settings';
 import { ChatMessage } from '@/types/chatMessage';
 
 import type { SessionStore } from '../../../store';
+import { agentSelectors } from '../../agentConfig';
 import { sessionSelectors } from '../../session';
+import { getSlicedMessagesWithConfig } from '../utils';
 import { organizeChats } from './utils';
 
-// 展示在聊天框中的消息
+export const getChatsById =
+  (id: string) =>
+  (s: SessionStore): ChatMessage[] => {
+    const session = sessionSelectors.getSessionById(id)(s);
+
+    if (!session) return [];
+
+    return organizeChats(
+      session,
+      {
+        assistant: agentSelectors.currentAgentAvatar(s),
+        user: useSettings.getState().settings.avatar || DEFAULT_USER_AVATAR,
+      },
+      s.activeTopicId,
+    );
+  };
+
+// 当前激活的消息列表
 export const currentChats = (s: SessionStore): ChatMessage[] => {
-  const session = sessionSelectors.currentSession(s);
-  if (!session) return [];
-
-  return organizeChats(
-    session,
-    {
-      assistant: agentSelectors.currentAgentAvatar(s),
-      user: useSettings.getState().settings.avatar || DEFAULT_USER_AVATAR,
-    },
-    s.activeTopicId,
-  );
+  if (!s.activeId) return [];
+
+  return getChatsById(s.activeId)(s);
 };
 
-export const systemRoleSel = (s: SessionStore): string => {
+export const currentChatsWithHistoryConfig = (s: SessionStore): ChatMessage[] => {
+  const chats = currentChats(s);
   const config = agentSelectors.currentAgentConfig(s);
 
-  return config.systemRole;
+  return getSlicedMessagesWithConfig(chats, config);
 };

package/src/store/session/slices/chat/selectors/index.ts

@@ -1,10 +1,11 @@
-import { currentChats } from './chat';
+import { currentChats, getChatsById } from './chat';
 import { chatsTokenCount, systemRoleTokenCount, totalTokenCount } from './token';
 import { currentTopics, getTopicMessages } from './topic';
 
 export const chatSelectors = {
   chatsTokenCount,
   currentChats,
+  getChatsById,
   systemRoleTokenCount,
   totalTokenCount,
 };

package/src/store/session/slices/chat/selectors/token.ts

@@ -1,7 +1,15 @@
 import { encode } from 'gpt-tokenizer';
 
+import { agentSelectors } from '@/store/session';
+
 import type { SessionStore } from '../../../store';
-import { currentChats, systemRoleSel } from './chat';
+import { currentChatsWithHistoryConfig } from './chat';
+
+export const systemRoleSel = (s: SessionStore): string => {
+  const config = agentSelectors.currentAgentConfig(s);
+
+  return config.systemRole;
+};
 
 const systemRoleTokens = (s: SessionStore): number[] => {
   const systemRole = systemRoleSel(s);
@@ -10,7 +18,7 @@ const systemRoleTokens = (s: SessionStore): number[] => {
 };
 
 const chatsTokens = (s: SessionStore): number[] => {
-  const chats = currentChats(s);
+  const chats = currentChatsWithHistoryConfig(s);
   return encode(chats.map((m) => m.content).join(''));
 };
 

package/src/store/session/slices/chat/utils.ts

@@ -0,0 +1,13 @@
+import { ChatMessage } from '@/types/chatMessage';
+import { LobeAgentConfig } from '@/types/session';
+
+export const getSlicedMessagesWithConfig = (
+  messages: ChatMessage[],
+  config: LobeAgentConfig,
+): ChatMessage[] => {
+  // 如果没有开启历史消息数限制，或者限制为 0，则直接返回
+  if (!config.enableHistoryCount || !config.historyCount) return messages;
+
+  // 如果开启了，则返回尾部的N条消息
+  return messages.reverse().slice(0, config.historyCount).reverse();
+};

package/src/store/settings/index.ts

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

package/src/types/session.ts

@@ -85,3 +85,7 @@ export interface LobeAgentSession extends LobeSessionBase {
 }
 
 export type LobeSessions = Record<string, LobeAgentSession>;
+
+export type LobeAgentConfigKeys =
+  | keyof LobeAgentConfig
+  | ['params', keyof LobeAgentConfig['params']];