@lobehub/chat 1.32.4 → 1.32.5

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.32.5](https://github.com/lobehub/lobe-chat/compare/v1.32.4...v1.32.5)
+
+<sup>Released on **2024-11-24**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the main chat.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the main chat, closes [#4773](https://github.com/lobehub/lobe-chat/issues/4773) ([6973f4e](https://github.com/lobehub/lobe-chat/commit/6973f4e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.32.4](https://github.com/lobehub/lobe-chat/compare/v1.32.3...v1.32.4)
 
 <sup>Released on **2024-11-20**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.32.4",
+  "version": "1.32.5",
   "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",
@@ -302,7 +302,7 @@
     "vitest": "~1.2.2",
     "vitest-canvas-mock": "^0.3.3"
   },
-  "packageManager": "pnpm@9.13.2",
+  "packageManager": "pnpm@9.14.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/index.tsx

@@ -0,0 +1,39 @@
+import React, { memo, useMemo } from 'react';
+
+import { ChatItem } from '@/features/Conversation';
+import ActionsBar from '@/features/Conversation/components/ChatItem/ActionsBar';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+export interface ThreadChatItemProps {
+  id: string;
+  index: number;
+}
+
+const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
+  const [historyLength] = useChatStore((s) => [chatSelectors.mainDisplayChatIDs(s).length]);
+
+  const enableHistoryDivider = useAgentStore((s) => {
+    const config = agentSelectors.currentAgentChatConfig(s);
+    return (
+      config.enableHistoryCount &&
+      historyLength > (config.historyCount ?? 0) &&
+      config.historyCount === historyLength - index
+    );
+  });
+
+  const actionBar = useMemo(() => <ActionsBar id={id} />, [id]);
+
+  return (
+    <ChatItem
+      actionBar={actionBar}
+      enableHistoryDivider={enableHistoryDivider}
+      id={id}
+      index={index}
+    />
+  );
+});
+
+export default MainChatItem;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx

@@ -1,35 +1,41 @@
 'use client';
 
-import isEqual from 'fast-deep-equal';
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 
-import { InboxWelcome, VirtualizedList } from '@/features/Conversation';
+import { SkeletonList, VirtualizedList } from '@/features/Conversation';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 
+import MainChatItem from './ChatItem';
+import Welcome from './WelcomeChatItem';
+
 interface ListProps {
   mobile?: boolean;
 }
 
 const Content = memo<ListProps>(({ mobile }) => {
-  const [activeTopicId, useFetchMessages, showInboxWelcome, isCurrentChatLoaded] = useChatStore(
-    (s) => [
-      s.activeTopicId,
-      s.useFetchMessages,
-      chatSelectors.showInboxWelcome(s),
-      chatSelectors.isCurrentChatLoaded(s),
-    ],
-  );
+  const [activeTopicId, useFetchMessages, isCurrentChatLoaded] = useChatStore((s) => [
+    s.activeTopicId,
+    s.useFetchMessages,
+    chatSelectors.isCurrentChatLoaded(s),
+  ]);
 
   const [sessionId] = useSessionStore((s) => [s.activeId]);
   useFetchMessages(sessionId, activeTopicId);
 
-  const data = useChatStore(chatSelectors.currentChatIDsWithGuideMessage, isEqual);
+  const data = useChatStore(chatSelectors.mainDisplayChatIDs);
+
+  const itemContent = useCallback(
+    (index: number, id: string) => <MainChatItem id={id} index={index} />,
+    [mobile],
+  );
+
+  if (!isCurrentChatLoaded) return <SkeletonList mobile={mobile} />;
 
-  if (showInboxWelcome && isCurrentChatLoaded) return <InboxWelcome />;
+  if (data.length === 0) return <Welcome />;
 
-  return <VirtualizedList dataSource={data} mobile={mobile} />;
+  return <VirtualizedList dataSource={data} itemContent={itemContent} mobile={mobile} />;
 });
 
 Content.displayName = 'ChatListRender';

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/WelcomeMessage.tsx

@@ -0,0 +1,44 @@
+import { ChatItem } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+
+const WelcomeMessage = () => {
+  const { t } = useTranslation('chat');
+  const [type = 'chat'] = useAgentStore((s) => {
+    const config = agentSelectors.currentAgentChatConfig(s);
+    return [config.displayMode];
+  });
+
+  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
+  const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
+  const activeId = useChatStore((s) => s.activeId);
+
+  const agentSystemRoleMsg = t('agentDefaultMessageWithSystemRole', {
+    name: meta.title || t('defaultAgent'),
+    systemRole: meta.description,
+  });
+
+  const agentMsg = t(isAgentEditable ? 'agentDefaultMessage' : 'agentDefaultMessageWithoutEdit', {
+    name: meta.title || t('defaultAgent'),
+    url: `/chat/settings?session=${activeId}`,
+  });
+
+  return (
+    <ChatItem
+      avatar={meta}
+      editing={false}
+      message={!!meta.description ? agentSystemRoleMsg : agentMsg}
+      placement={'left'}
+      type={type === 'chat' ? 'block' : 'pure'}
+    />
+  );
+};
+export default WelcomeMessage;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/index.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import InboxWelcome from './InboxWelcome';
+import WelcomeMessage from './WelcomeMessage';
+
+const WelcomeChatItem = memo(() => {
+  const showInboxWelcome = useChatStore(chatSelectors.showInboxWelcome);
+
+  if (showInboxWelcome) return <InboxWelcome />;
+
+  return <WelcomeMessage />;
+});
+
+export default WelcomeChatItem;

package/src/app/(main)/chat/(workspace)/@portal/features/Header.tsx

@@ -1,23 +1,11 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
-import { XIcon } from 'lucide-react';
 import { memo } from 'react';
 
-import SidebarHeader from '@/components/SidebarHeader';
 import { PortalHeader } from '@/features/Portal/router';
-import { useChatStore } from '@/store/chat';
 
 const Header = memo(() => {
-  const [toggleInspector] = useChatStore((s) => [s.togglePortal]);
-
-  return (
-    <SidebarHeader
-      actions={<ActionIcon icon={XIcon} onClick={() => toggleInspector(false)} />}
-      style={{ paddingBlock: 8, paddingInline: 8 }}
-      title={<PortalHeader />}
-    />
-  );
+  return <PortalHeader />;
 });
 
 export default Header;

package/src/components/BrandWatermark/index.tsx

@@ -26,6 +26,7 @@ const BrandWatermark = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest })
   return (
     <Flexbox
       align={'center'}
+      dir={'ltr'}
       flex={'none'}
       gap={4}
       horizontal

package/src/const/message.ts

@@ -2,6 +2,6 @@ export const LOADING_FLAT = '...';
 
 export const MESSAGE_CANCEL_FLAT = 'canceled';
 
-export const MESSAGE_THREAD_DIVIDER_ID = 'thread-divider';
+export const MESSAGE_THREAD_DIVIDER_ID = '__THREAD_DIVIDER__';
 
 export const MESSAGE_WELCOME_GUIDE_ID = 'welcome';

package/src/features/Conversation/components/ChatItem/ActionsBar.tsx

@@ -4,8 +4,7 @@ import { memo, useCallback } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionMetaSelectors } from '@/store/session/selectors';
+import { MessageRoleType } from '@/types/message';
 
 import { renderActions, useActionsClick } from '../../Actions';
 import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
@@ -25,34 +24,31 @@ const ActionsBar = memo<ActionsBarProps>((props) => {
 });
 
 interface ActionsProps {
-  index: number;
-  setEditing: (edit: boolean) => void;
+  id: string;
 }
-const Actions = memo<ActionsProps>(({ index, setEditing }) => {
-  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
 
-  const item = useChatStore(
-    (s) => chatSelectors.currentChatsWithGuideMessage(meta)(s)[index],
-    isEqual,
-  );
+const Actions = memo<ActionsProps>(({ id }) => {
+  const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+  const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
   const onActionsClick = useActionsClick();
 
   const handleActionClick = useCallback(
     async (action: ActionEvent) => {
       switch (action.key) {
         case 'edit': {
-          setEditing(true);
+          toggleMessageEditing(id, true);
         }
       }
+      if (!item) return;
 
       onActionsClick(action, item);
     },
     [item],
   );
 
-  const RenderFunction = renderActions[item?.role] ?? ActionsBar;
+  const RenderFunction = renderActions[(item?.role || '') as MessageRoleType] ?? ActionsBar;
 
-  return <RenderFunction {...item} onActionClick={handleActionClick} />;
+  return <RenderFunction {...item!} onActionClick={handleActionClick} />;
 });
 
 export default Actions;