@lobehub/chat 1.31.9 → 1.31.11

package/src/features/ChatInput/Desktop/Footer/index.tsx

@@ -1,23 +1,20 @@
-import { Icon } from '@lobehub/ui';
-import { Button, Skeleton, Space } from 'antd';
+import { Button, Space } from 'antd';
 import { createStyles } from 'antd-style';
-import { ChevronUp, CornerDownLeft, LucideCommand } from 'lucide-react';
 import { rgba } from 'polished';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import StopLoadingIcon from '@/components/StopLoading';
-import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { useUserStore } from '@/store/user';
-import { preferenceSelectors } from '@/store/user/selectors';
 import { isMacOS } from '@/utils/platform';
 
+import SaveTopic from '../../Topic';
 import LocalFiles from '../FilePreview';
 import SendMore from './SendMore';
+import ShortcutHint from './ShortcutHint';
 
 const useStyles = createStyles(({ css, prefixCls, token }) => {
   return {
@@ -48,51 +45,29 @@ const useStyles = createStyles(({ css, prefixCls, token }) => {
 
 interface FooterProps {
   expand: boolean;
+  saveTopic?: boolean;
   setExpand?: (expand: boolean) => void;
+  shortcutHint?: boolean;
 }
 
-const Footer = memo<FooterProps>(({ setExpand, expand }) => {
+const Footer = memo<FooterProps>(({ setExpand, expand, shortcutHint = true, saveTopic = true }) => {
   const { t } = useTranslation('chat');
 
-  const { theme, styles } = useStyles();
+  const { styles } = useStyles();
 
   const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
     chatSelectors.isAIGenerating(s),
     s.stopGenerateMessage,
   ]);
 
-  const [useCmdEnterToSend] = useUserStore((s) => [preferenceSelectors.useCmdEnterToSend(s)]);
-
   const { send: sendMessage, canSend } = useSendMessage();
 
   const [isMac, setIsMac] = useState<boolean>();
+
   useEffect(() => {
     setIsMac(isMacOS());
   }, [setIsMac]);
 
-  const cmdEnter = (
-    <Flexbox gap={2} horizontal>
-      {typeof isMac === 'boolean' ? (
-        <Icon icon={isMac ? LucideCommand : ChevronUp} />
-      ) : (
-        <Skeleton.Node active style={{ height: '100%', width: 12 }}>
-          {' '}
-        </Skeleton.Node>
-      )}
-      <Icon icon={CornerDownLeft} />
-    </Flexbox>
-  );
-
-  const enter = (
-    <Center>
-      <Icon icon={CornerDownLeft} />
-    </Center>
-  );
-
-  const sendShortcut = useCmdEnterToSend ? cmdEnter : enter;
-
-  const wrapperShortcut = useCmdEnterToSend ? enter : cmdEnter;
-
   return (
     <Flexbox
       align={'end'}
@@ -107,18 +82,8 @@ const Footer = memo<FooterProps>(({ setExpand, expand }) => {
         {expand && <LocalFiles />}
       </Flexbox>
       <Flexbox align={'center'} flex={'none'} gap={8} horizontal>
-        <Flexbox
-          gap={4}
-          horizontal
-          style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
-        >
-          {sendShortcut}
-          <span>{t('input.send')}</span>
-          <span>/</span>
-          {wrapperShortcut}
-          <span>{t('input.warp')}</span>
-        </Flexbox>
-        <SaveTopic />
+        {shortcutHint && <ShortcutHint />}
+        {saveTopic && <SaveTopic />}
         <Flexbox style={{ minWidth: 92 }}>
           {isAIGenerating ? (
             <Button

package/src/features/ChatInput/Desktop/{TextArea.tsx → InputArea/index.tsx}

@@ -4,14 +4,11 @@ import { TextAreaRef } from 'antd/es/input/TextArea';
 import { memo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSendMessage } from '@/features/ChatInput/useSend';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 import { isCommandPressed } from '@/utils/keyboard';
 
-import { useAutoFocus } from './useAutoFocus';
+import { useAutoFocus } from '../useAutoFocus';
 
 const useStyles = createStyles(({ css }) => {
   return {
@@ -34,25 +31,20 @@ const useStyles = createStyles(({ css }) => {
 });
 
 interface InputAreaProps {
-  setExpand?: (expand: boolean) => void;
+  loading?: boolean;
+  onChange: (string: string) => void;
+  onSend: () => void;
+  value: string;
 }
 
-const InputArea = memo<InputAreaProps>(({ setExpand }) => {
+const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const ref = useRef<TextAreaRef>(null);
   const isChineseInput = useRef(false);
 
-  const [loading, value, updateInputMessage] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
-    s.inputMessage,
-    s.updateInputMessage,
-  ]);
-
   const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
 
-  const { send: sendMessage } = useSendMessage();
-
   useAutoFocus(ref);
 
   const hasValue = !!value;
@@ -78,10 +70,10 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
         autoFocus
         className={styles.textarea}
         onBlur={(e) => {
-          updateInputMessage?.(e.target.value);
+          onChange?.(e.target.value);
         }}
         onChange={(e) => {
-          updateInputMessage?.(e.target.value);
+          onChange?.(e.target.value);
         }}
         onCompositionEnd={() => {
           isChineseInput.current = false;
@@ -98,8 +90,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
             // refs: https://github.com/lobehub/lobe-chat/pull/989
             e.preventDefault();
 
-            sendMessage();
-            setExpand?.(false);
+            onSend();
           };
           const commandKey = isCommandPressed(e);
 
@@ -109,7 +100,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
           } else {
             // cmd + enter to wrap
             if (commandKey) {
-              updateInputMessage?.((e.target as any).value + '\n');
+              onChange?.((e.target as any).value + '\n');
               return;
             }
 
@@ -125,6 +116,6 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
   );
 });
 
-InputArea.displayName = 'InputArea';
+InputArea.displayName = 'DesktopInputArea';
 
 export default InputArea;

package/src/features/ChatInput/Desktop/index.tsx

@@ -1,59 +1,50 @@
 'use client';
 
 import { DraggablePanel } from '@lobehub/ui';
-import { memo, useState } from 'react';
+import { ReactNode, memo, useCallback, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { CHAT_TEXTAREA_HEIGHT, CHAT_TEXTAREA_MAX_HEIGHT } from '@/const/layoutTokens';
-import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
 
+import { ActionKeys } from '../ActionBar/config';
 import LocalFiles from './FilePreview';
 import Footer from './Footer';
 import Head from './Header';
-import TextArea from './TextArea';
-
-const defaultLeftActions = [
-  'model',
-  'fileUpload',
-  'knowledgeBase',
-  'temperature',
-  'history',
-  'stt',
-  'tools',
-  'token',
-] as ActionKeys[];
-
-const defaultRightActions = ['clear'] as ActionKeys[];
 
 interface DesktopChatInputProps {
-  leftActions?: ActionKeys[];
-  rightActions?: ActionKeys[];
+  footer?: {
+    saveTopic?: boolean;
+    shortcutHint?: boolean;
+  };
+  inputHeight: number;
+  leftActions: ActionKeys[];
+  onInputHeightChange?: (height: number) => void;
+  renderTextArea: (onSend: () => void) => ReactNode;
+  rightActions: ActionKeys[];
 }
+
 const DesktopChatInput = memo<DesktopChatInputProps>(
-  ({ leftActions = defaultLeftActions, rightActions = defaultRightActions }) => {
+  ({ leftActions, rightActions, footer, renderTextArea, inputHeight, onInputHeightChange }) => {
     const [expand, setExpand] = useState<boolean>(false);
 
-    const [inputHeight, updatePreference] = useGlobalStore((s) => [
-      systemStatusSelectors.inputHeight(s),
-      s.updateSystemStatus,
-    ]);
+    const onSend = useCallback(() => {
+      setExpand(false);
+    }, []);
 
     return (
       <>
-        {!expand && <LocalFiles />}
+        {!expand && leftActions.includes('fileUpload') && <LocalFiles />}
         <DraggablePanel
           fullscreen={expand}
           maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
           minHeight={CHAT_TEXTAREA_HEIGHT}
           onSizeChange={(_, size) => {
             if (!size) return;
+            const height =
+              typeof size.height === 'string' ? Number.parseInt(size.height) : size.height;
+            if (!height) return;
 
-            updatePreference({
-              inputHeight:
-                typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-            });
+            onInputHeightChange?.(height);
           }}
           placement="bottom"
           size={{ height: inputHeight, width: '100%' }}
@@ -71,8 +62,8 @@ const DesktopChatInput = memo<DesktopChatInputProps>(
               rightActions={rightActions}
               setExpand={setExpand}
             />
-            <TextArea setExpand={setExpand} />
-            <Footer expand={expand} setExpand={setExpand} />
+            {renderTextArea(onSend)}
+            <Footer expand={expand} setExpand={setExpand} {...footer} />
           </Flexbox>
         </DraggablePanel>
       </>

package/src/features/Conversation/Messages/index.ts

@@ -1,9 +1,11 @@
+import { useCallback } from 'react';
+
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import { MarkdownCustomRender, OnAvatarsClick, RenderBelowMessage, RenderMessage } from '../types';
+import { MarkdownCustomRender, RenderBelowMessage, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
 import { DefaultBelowMessage, DefaultMessage } from './Default';
 import { ToolMessage } from './Tool';
@@ -26,22 +28,20 @@ export const markdownCustomRenders: Record<string, MarkdownCustomRender> = {
   user: UserMarkdownRender,
 };
 
-export const useAvatarsClick = (): OnAvatarsClick => {
+export const useAvatarsClick = (role?: string) => {
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
   const openChatSettings = useOpenChatSettings();
 
-  return (role) => {
+  return useCallback(() => {
     switch (role) {
       case 'assistant': {
-        return () => {
-          if (!isInbox) {
-            toggleSystemRole(true);
-          } else {
-            openChatSettings();
-          }
-        };
+        if (!isInbox) {
+          toggleSystemRole(true);
+        } else {
+          openChatSettings();
+        }
       }
     }
-  };
+  }, [isInbox, role]);
 };

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

@@ -1,7 +1,9 @@
+'use client';
+
 import { ChatItem } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ReactNode, memo, useCallback, useMemo } from 'react';
+import { MouseEventHandler, ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
@@ -42,11 +44,13 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 }));
 
 export interface ChatListItemProps {
+  hideActionBar?: boolean;
   id: string;
   index: number;
+  showThreadDivider?: boolean;
 }
 
-const Item = memo<ChatListItemProps>(({ index, id }) => {
+const Item = memo<ChatListItemProps>(({ index, id, hideActionBar }) => {
   const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
   const { t } = useTranslation('common');
   const { styles, cx } = useStyles();
@@ -61,7 +65,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
     if (index >= chats.length) return;
 
-    return chats[index];
+    return chats.find((s) => s.id === id);
   }, isEqual);
 
   const [
@@ -83,18 +87,18 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   // when the message is in RAG flow or the AI generating, it should be in loading state
   const isProcessing = isInRAGFlow || generating;
 
-  const onAvatarsClick = useAvatarsClick();
+  const onAvatarsClick = useAvatarsClick(item?.role);
 
-  const RenderMessage = useCallback(
-    ({ editableContent, data }: { data: ChatMessage; editableContent: ReactNode }) => {
+  const renderMessage = useCallback(
+    (editableContent: ReactNode) => {
       if (!item?.role) return;
       const RenderFunction = renderMessages[item.role] ?? renderMessages['default'];
 
       if (!RenderFunction) return;
 
-      return <RenderFunction {...data} editableContent={editableContent} />;
+      return <RenderFunction {...item} editableContent={editableContent} />;
     },
-    [item?.role],
+    [item],
   );
 
   const BelowMessage = useCallback(
@@ -136,7 +140,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
   const error = useErrorContent(item?.error);
 
-  const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
+  const [historyLength] = useChatStore((s) => [chatSelectors.currentChats(s).length]);
 
   const enableHistoryDivider = useAgentStore((s) => {
     const config = agentSelectors.currentAgentChatConfig(s);
@@ -151,6 +155,11 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   const message =
     !editing && item?.role === 'assistant' ? processWithArtifact(item?.content) : item?.content;
 
+  // ======================= Performance Optimization ======================= //
+  // these useMemo/useCallback are all for the performance optimization
+  // maybe we can remove it in React 19
+  // ======================================================================== //
+
   const components = useMemo(
     () =>
       Object.fromEntries(
@@ -163,55 +172,83 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
     [id],
   );
 
+  const markdownProps = useMemo(
+    () => ({
+      components,
+      customRender: markdownCustomRender,
+      rehypePlugins,
+    }),
+    [components, markdownCustomRender],
+  );
+
+  const onChange = useCallback((value: string) => updateMessageContent(id, value), [id]);
+
+  const onDoubleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (e) => {
+      if (!item) return;
+      if (item.id === 'default' || item.error) return;
+      if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
+        toggleMessageEditing(id, true);
+      }
+    },
+    [item],
+  );
+
+  const text = useMemo(
+    () => ({
+      cancel: t('cancel'),
+      confirm: t('ok'),
+      edit: t('edit'),
+    }),
+    [t],
+  );
+
+  const onEditingChange = useCallback((edit: boolean) => {
+    toggleMessageEditing(id, edit);
+  }, []);
+
+  const actions = useMemo(
+    () =>
+      !hideActionBar && (
+        <ActionsBar
+          index={index}
+          setEditing={(edit) => {
+            toggleMessageEditing(id, edit);
+          }}
+        />
+      ),
+    [hideActionBar, index, id],
+  );
+
+  const belowMessage = useMemo(() => item && <BelowMessage data={item} />, [item]);
+  const errorMessage = useMemo(() => item && <ErrorMessageExtra data={item} />, [item]);
+  const messageExtra = useMemo(() => item && <MessageExtra data={item} />, [item]);
+
   return (
     item && (
       <>
         {enableHistoryDivider && <History />}
         <ChatItem
-          actions={
-            <ActionsBar
-              index={index}
-              setEditing={(edit) => {
-                toggleMessageEditing(id, edit);
-              }}
-            />
-          }
+          actions={actions}
           avatar={item.meta}
-          belowMessage={<BelowMessage data={item} />}
+          belowMessage={belowMessage}
           className={cx(styles.message, isMessageLoading && styles.loading)}
           editing={editing}
           error={error}
-          errorMessage={<ErrorMessageExtra data={item} />}
+          errorMessage={errorMessage}
           fontSize={fontSize}
           loading={isProcessing}
-          markdownProps={{
-            components,
-            customRender: markdownCustomRender,
-            rehypePlugins,
-          }}
+          markdownProps={markdownProps}
           message={message}
-          messageExtra={<MessageExtra data={item} />}
-          onAvatarClick={onAvatarsClick?.(item.role)}
-          onChange={(value) => updateMessageContent(item.id, value)}
-          onDoubleClick={(e) => {
-            if (item.id === 'default' || item.error) return;
-            if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
-              toggleMessageEditing(id, true);
-            }
-          }}
-          onEditingChange={(edit) => {
-            toggleMessageEditing(id, edit);
-          }}
+          messageExtra={messageExtra}
+          onAvatarClick={onAvatarsClick}
+          onChange={onChange}
+          onDoubleClick={onDoubleClick}
+          onEditingChange={onEditingChange}
           placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
           primary={item.role === 'user'}
-          renderMessage={(editableContent) => (
-            <RenderMessage data={item} editableContent={editableContent} />
-          )}
-          text={{
-            cancel: t('cancel'),
-            confirm: t('ok'),
-            edit: t('edit'),
-          }}
+          renderMessage={renderMessage}
+          text={text}
           time={item.updatedAt || item.createdAt}
           type={type === 'chat' ? 'block' : 'pure'}
         />
@@ -220,4 +257,6 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   );
 });
 
+Item.displayName = 'ChatItem';
+
 export default Item;