@lobehub/chat 0.44.2 → 0.44.4

package/CHANGELOG.md

@@ -2,6 +2,73 @@
 
 # Changelog
 
+### [Version 0.44.4](https://github.com/lobehub/lobe-chat/compare/v0.44.3...v0.44.4)
+
+<sup>Released on **2023-08-13**</sup>
+
+#### 💄 Styles
+
+- **misc**: 优化 Chat Skeleton 样式, 优化 Inbox 样式.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 优化 Chat Skeleton 样式 ([3f83be0](https://github.com/lobehub/lobe-chat/commit/3f83be0))
+- **misc**: 优化 Inbox 样式 ([924c12e](https://github.com/lobehub/lobe-chat/commit/924c12e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.44.3](https://github.com/lobehub/lobe-chat/compare/v0.44.2...v0.44.3)
+
+<sup>Released on **2023-08-13**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 重构 organizeChats 方法.
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正 inbox 点击重新生成会报错的问题.
+
+#### 💄 Styles
+
+- **misc**: 修正话题列表无法滚动的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 重构 organizeChats 方法 ([799612e](https://github.com/lobehub/lobe-chat/commit/799612e))
+
+#### What's fixed
+
+- **misc**: 修正 inbox 点击重新生成会报错的问题 ([064ef56](https://github.com/lobehub/lobe-chat/commit/064ef56))
+
+#### Styles
+
+- **misc**: 修正话题列表无法滚动的问题 ([26772e7](https://github.com/lobehub/lobe-chat/commit/26772e7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.44.2](https://github.com/lobehub/lobe-chat/compare/v0.44.1...v0.44.2)
 
 <sup>Released on **2023-08-13**</sup>

package/package.json

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

package/src/locales/default/common.ts

@@ -4,7 +4,7 @@ export default {
   agentMaxToken: '会话最大长度',
   agentModel: '模型',
   agentProfile: '助手信息',
-  appInitializing: '应用加载中...',
+  appInitializing: '智能集群启动中，请耐心等待...',
   archive: '归档',
   autoGenerate: '自动补全',
   autoGenerateTooltip: '基于提示词自动补全助手描述',

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

@@ -16,6 +16,7 @@ const Inbox = memo(() => {
       <List.Item
         active={activeId === INBOX_SESSION_ID}
         avatar={<Avatar avatar={DEFAULT_INBOX_AVATAR} size={46} style={{ padding: 3 }} />}
+        style={{ alignItems: 'center' }}
         title={t('inbox.title')}
       />
     </Link>

package/src/pages/chat/features/Conversation/ChatList/SkeletonList.tsx

@@ -24,6 +24,7 @@ const SkeletonList = memo(() => {
       <Skeleton
         active
         avatar={{ size: 40 }}
+        className={styles.user}
         paragraph={{ width: ['50%', '30%'] }}
         round
         title={false}
@@ -31,10 +32,8 @@ const SkeletonList = memo(() => {
       <Skeleton
         active
         avatar={{ size: 40 }}
-        className={styles.user}
         paragraph={{ width: ['50%', '30%'] }}
         round
-        // style={{ display: 'flex', flexDirection: 'row-reverse' }}
         title={false}
       />
     </Flexbox>

package/src/pages/chat/features/Sidebar/SystemRole.tsx

@@ -52,7 +52,7 @@ const SystemRole = memo(() => {
   const hydrated = useSessionHydrated();
   const { t } = useTranslation('common');
   return (
-    <>
+    <Flexbox height={'fit-content'}>
       <Header
         actions={
           <ActionIcon
@@ -90,7 +90,7 @@ const SystemRole = memo(() => {
           <Skeleton active avatar={false} style={{ marginTop: 12 }} title={false} />
         )}
       </Flexbox>
-    </>
+    </Flexbox>
   );
 });
 

package/src/pages/chat/features/Sidebar/Topic/SkeletonList.tsx

@@ -0,0 +1,22 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const SkeletonList = memo(() => {
+  return (
+    <Flexbox gap={8} style={{ marginTop: 8 }}>
+      {Array.from({ length: 8 }).map((_, i) => (
+        <Skeleton
+          active
+          avatar={false}
+          key={i}
+          paragraph={{ rows: 1, width: '100%' }}
+          round
+          title={false}
+        />
+      ))}
+    </Flexbox>
+  );
+});
+
+export default SkeletonList;

package/src/pages/chat/features/Sidebar/Topic/index.tsx

@@ -5,11 +5,13 @@ import { Flexbox } from 'react-layout-kit';
 
 import Empty from '@/components/Empty';
 import { useGlobalStore } from '@/store/global';
-import { topicSelectors, useSessionStore } from '@/store/session';
+import { topicSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
+import SkeletonList from './SkeletonList';
 import TopicItem from './TopicItem';
 
 export const Topic = () => {
+  const hydrated = useSessionHydrated();
   const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
   const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
@@ -20,8 +22,10 @@ export const Topic = () => {
     s.updateGuideState,
   ]);
 
-  return (
-    <Flexbox gap={2}>
+  return !hydrated ? (
+    <SkeletonList />
+  ) : (
+    <Flexbox gap={2} style={{ marginBottom: 12 }}>
       {topics?.length === 0 && (
         <Empty
           alt={t('topic.desc')}

package/src/pages/chat/features/Sidebar/index.tsx

@@ -1,15 +1,22 @@
-import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
+import { DraggablePanel, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
-import Inner from './Inner';
+import SystemRole from './SystemRole';
+import { Topic } from './Topic';
 
 const useStyles = createStyles(({ cx, css, token, stylish }) => ({
+  content: css`
+    display: flex;
+    flex-direction: column;
+  `,
   drawer: cx(
     stylish.blurStrong,
     css`
@@ -31,18 +38,29 @@ const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
     s.toggleChatSideBar,
   ]);
 
+  const { t } = useTranslation('common');
+
   return (
     <DraggablePanel
       className={styles.drawer}
+      classNames={{
+        content: styles.content,
+      }}
       expand={showAgentSettings}
       minWidth={CHAT_SIDEBAR_WIDTH}
       onExpandChange={toggleConfig}
       placement={'right'}
     >
       <HeaderSpacing />
-      <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
-        <Inner systemRole={systemRole} />
-      </DraggablePanelContainer>
+      {systemRole && <SystemRole />}
+      <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
+        <Flexbox padding={16}>
+          <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
+        </Flexbox>
+        <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
+          <Topic />
+        </Flexbox>
+      </Flexbox>
     </DraggablePanel>
   );
 });

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

@@ -223,7 +223,10 @@ export const chatMessage: StateCreator<
     const chats = chatSelectors.currentChats(get());
 
     const currentIndex = chats.findIndex((c) => c.id === messageId);
+    if (currentIndex < 0) return;
+
     const currentMessage = chats[currentIndex];
+
     let contextMessages: ChatMessage[] = [];
 
     switch (currentMessage.role) {

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

@@ -15,15 +15,18 @@ export const getChatsById =
 
     if (!session) return [];
 
-    return organizeChats(
-      session,
-      {
-        assistant: agentSelectors.currentAgentAvatar(s),
-        assistantBackground: agentSelectors.currentAgentBackgroundColor(s),
-        user: useGlobalStore.getState().settings.avatar || DEFAULT_USER_AVATAR,
+    return organizeChats(session, {
+      meta: {
+        assistant: {
+          avatar: agentSelectors.currentAgentAvatar(s),
+          backgroundColor: agentSelectors.currentAgentBackgroundColor(s),
+        },
+        user: {
+          avatar: useGlobalStore.getState().settings.avatar || DEFAULT_USER_AVATAR,
+        },
       },
-      s.activeTopicId,
-    );
+      topicId: s.activeTopicId,
+    });
   };
 
 // 当前激活的消息列表

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

@@ -22,5 +22,5 @@ export const getTopicMessages = (topicId: string) => (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
   if (!session) return [];
 
-  return organizeChats(session, { assistant: '', user: '' }, topicId);
+  return organizeChats(session, { topicId });
 };

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

@@ -52,7 +52,7 @@ beforeEach(() => {
 
 describe('organizeChats', () => {
   it('should return an array of chat messages', () => {
-    const result = organizeChats(session, { assistant: '', user: '' });
+    const result = organizeChats(session);
     expect(Array.isArray(result)).toBe(true);
     expect(result.length).toBe(3);
     expect(result[0].id).toBe('1');
@@ -61,7 +61,7 @@ describe('organizeChats', () => {
   });
 
   it('should sort chat messages in ascending order of createAt', () => {
-    const result = organizeChats(session, { assistant: '', user: '' });
+    const result = organizeChats(session);
     expect(result[0].id).toBe('1');
     expect(result[1].id).toBe('2');
     expect(result[2].id).toBe('3');
@@ -69,7 +69,7 @@ describe('organizeChats', () => {
 
   it('should filter out archived messages', () => {
     session.chats['2'].topicId = '123';
-    const result = organizeChats(session, { assistant: '', user: '' });
+    const result = organizeChats(session);
     expect(result.length).toBe(2);
     expect(result[0].id).toBe('1');
     expect(result[1].id).toBe('3');
@@ -82,8 +82,10 @@ describe('organizeChats', () => {
     };
 
     const result = organizeChats(session, {
-      assistant: avatar,
-      user: settings.avatar,
+      meta: {
+        user: { avatar: settings.avatar },
+        assistant: { avatar },
+      },
     });
 
     expect(result[0].meta.avatar).toBe(avatar);
@@ -94,7 +96,7 @@ describe('organizeChats', () => {
   it('should reorder messages based on parent-child relationship', () => {
     session.chats['2'].parentId = '1';
     session.chats['3'].parentId = '2';
-    const result = organizeChats(session, { assistant: '', user: '' });
+    const result = organizeChats(session);
     expect(result.length).toBe(3);
     expect(result[0].id).toBe('1');
     expect(result[1].id).toBe('2');
@@ -105,7 +107,7 @@ describe('organizeChats', () => {
     session.chats['2'].parentId = '1';
     session.chats['3'].parentId = '2';
     session.chats['3'].id = '2';
-    const result = organizeChats(session, { assistant: '', user: '' });
+    const result = organizeChats(session);
     expect(result.length).toBe(2);
     expect(result[0].id).toBe('1');
     expect(result[1].id).toBe('2');
@@ -117,7 +119,7 @@ describe('organizeChats', () => {
       config: {},
       type: 'agent',
     } as LobeAgentSession;
-    const result = organizeChats(emptySession, { assistant: '', user: '' });
+    const result = organizeChats(emptySession);
     expect(Array.isArray(result)).toBe(true);
     expect(result.length).toBe(0);
   });
@@ -143,7 +145,7 @@ describe('organizeChats', () => {
       };
     }
 
-    const result = organizeChats(largeSession, { assistant: '', user: '' });
+    const result = organizeChats(largeSession);
     expect(result.length).toBe(numMessages);
     expect(result[0].id).toBe('1');
     expect(result[numMessages - 1].id).toBe(numMessages.toString());
@@ -222,7 +224,7 @@ describe('organizeChats', () => {
       updateAt: 1690110700808,
     } as LobeAgentSession;
 
-    const result = organizeChats(realSession, { assistant: '', user: '' });
+    const result = organizeChats(realSession);
 
     expect(
       result.map((i) => ({ id: i.id, content: i.content, role: i.role, createAt: i.createAt })),
@@ -263,13 +265,15 @@ describe('organizeChats', () => {
     ]);
   });
 
-  const avatar = {
-    assistant: 'assistant-avatar',
-    user: 'user-avatar',
+  const params = {
+    meta: {
+      user: { avatar: 'user-avatar' },
+      assistant: { avatar: 'assistant-avatar' },
+    },
   };
 
   it('should organize chats in chronological order when topicId is not provided', () => {
-    const result = organizeChats(session, avatar);
+    const result = organizeChats(session, params);
 
     expect(result.length).toBe(3);
     expect(result[0].id).toBe('1');
@@ -278,21 +282,21 @@ describe('organizeChats', () => {
   });
 
   it('should only return chats with specified topicId when topicId is provided', () => {
-    const result = organizeChats(session, avatar, 'topic-id');
+    const result = organizeChats(session, { ...params, topicId: 'topic-id' });
 
     expect(result.length).toBe(0);
   });
 
   describe('user Meta', () => {
     it('should return correct meta for user role', () => {
-      const result = organizeChats(session, avatar);
+      const result = organizeChats(session, params);
       const meta = result[1].meta;
 
-      expect(meta.avatar).toBe(avatar.user);
+      expect(meta.avatar).toBe(params.meta.user.avatar);
     });
 
     it('should return correct meta for assistant role', () => {
-      const result = organizeChats(session, avatar);
+      const result = organizeChats(session, params);
       const meta = result[0].meta;
 
       expect(meta.avatar).toBe('assistant-avatar');
@@ -313,7 +317,7 @@ describe('organizeChats', () => {
 
         session.chats[message.id] = message;
 
-        const result = organizeChats(session, avatar);
+        const result = organizeChats(session, params);
         const meta = result[3].meta;
 
         expect(meta.avatar).toBe('🧩');
@@ -334,7 +338,7 @@ describe('organizeChats', () => {
 
         session.chats[message.id] = message;
 
-        const result = organizeChats(session, avatar);
+        const result = organizeChats(session, params);
         const meta = result[3].meta;
 
         expect(meta.avatar).toBe('🧩');

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

@@ -1,17 +1,25 @@
 import { PluginsMap } from '@/plugins';
 import { ChatMessage } from '@/types/chatMessage';
+import { MetaData } from '@/types/meta';
 import { LobeAgentSession } from '@/types/session';
 
+interface OrganizeParams {
+  meta?: {
+    assistant?: MetaData;
+    user?: MetaData;
+  };
+  topicId?: string;
+}
+
 export const organizeChats = (
   session: LobeAgentSession,
-  avatar: { assistant: string; assistantBackground?: string; user: string },
-  topicId?: string,
+  { topicId, meta }: OrganizeParams = {},
 ) => {
   const getMeta = (message: ChatMessage) => {
     switch (message.role) {
       case 'user': {
         return {
-          avatar: avatar.user,
+          avatar: meta?.user?.avatar,
         };
       }
 
@@ -21,9 +29,9 @@ export const organizeChats = (
 
       case 'assistant': {
         return {
-          avatar: avatar.assistant,
-          backgroundColor: avatar.assistantBackground,
-          title: session.meta.title,
+          avatar: meta?.assistant?.avatar,
+          backgroundColor: meta?.assistant?.backgroundColor,
+          title: meta?.assistant?.title || session.meta.title,
         };
       }
 

package/src/pages/chat/features/Sidebar/Inner.tsx

@@ -1,42 +0,0 @@
-import { DraggablePanelBody, SearchBar } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useSessionHydrated } from '@/store/session';
-
-import SystemRole from './SystemRole';
-import { Topic } from './Topic';
-
-const Inner = memo<{ systemRole: boolean }>(({ systemRole }) => {
-  const hydrated = useSessionHydrated();
-  const { t } = useTranslation('common');
-
-  return (
-    <DraggablePanelBody style={{ padding: 0 }}>
-      {systemRole && <SystemRole />}
-      <Flexbox gap={16} padding={16}>
-        <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
-        {!hydrated ? (
-          <Flexbox gap={8} style={{ marginTop: 8 }}>
-            {Array.from({ length: 8 }).map((_, i) => (
-              <Skeleton
-                active
-                avatar={false}
-                key={i}
-                paragraph={{ rows: 1, width: '100%' }}
-                round
-                title={false}
-              />
-            ))}
-          </Flexbox>
-        ) : (
-          <Topic />
-        )}
-      </Flexbox>
-    </DraggablePanelBody>
-  );
-});
-
-export default Inner;