@lobehub/chat 0.119.10 → 0.119.11

package/src/app/chat/(desktop)/features/ChatInput/index.tsx

@@ -1,124 +1,55 @@
-import { ActionIcon, ChatInputArea, ChatSendButton } from '@lobehub/ui';
-import { Maximize2, Minimize2 } from 'lucide-react';
-import { memo, useCallback, useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { DraggablePanel } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import {
   CHAT_TEXTAREA_HEIGHT,
   CHAT_TEXTAREA_MAX_HEIGHT,
   HEADER_HEIGHT,
 } from '@/const/layoutTokens';
-import ActionBar from '@/features/ChatInput/ActionBar';
-import SaveTopic from '@/features/ChatInput/Topic';
-import { useChatInput } from '@/features/ChatInput/useChatInput';
+import { useGlobalStore } from '@/store/global';
 
-import DragUpload from './DragUpload';
-import { LocalFiles } from './LocalFiles';
-import { useAutoFocus } from './useAutoFocus';
+import Footer from './Footer';
+import Head from './Header';
+import TextArea from './TextArea';
 
-const ChatInputDesktopLayout = memo(() => {
-  const { t } = useTranslation('chat');
-  const {
-    ref,
-    onStop,
-    onSend,
-    loading,
-    value,
-    onInput,
-    expand,
-    setExpand,
-    inputHeight,
-    updatePreference,
-    canUpload,
-  } = useChatInput();
+const ChatInput = memo(() => {
+  const [expand, setExpand] = useState<boolean>(false);
 
-  useAutoFocus(ref);
-
-  const handleSizeChange = useCallback(
-    (_: any, size: any) => {
-      if (!size) return;
-      updatePreference({
-        inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-      });
-    },
-    [updatePreference],
-  );
-
-  const buttonAddons = useMemo(
-    () => (
-      <ChatSendButton
-        leftAddons={canUpload && <LocalFiles />}
-        loading={loading}
-        onSend={onSend}
-        onStop={onStop}
-        rightAddons={<SaveTopic />}
-        texts={{
-          send: t('send'),
-          stop: t('stop'),
-          warp: t('warp'),
-        }}
-      />
-    ),
-    [canUpload, loading, onSend, onStop, t],
-  );
-
-  const topAddons = useMemo(
-    () => (
-      <ActionBar
-        rightAreaEndRender={
-          <ActionIcon
-            icon={expand ? Minimize2 : Maximize2}
-            onClick={() => {
-              setExpand(!expand);
-            }}
-          />
-        }
-      />
-    ),
-    [expand],
-  );
-
-  const hasValue = !!value;
-
-  useEffect(() => {
-    const fn = (e: BeforeUnloadEvent) => {
-      if (hasValue) {
-        // set returnValue to trigger alert modal
-        // Note: No matter what value is set, the browser will display the standard text
-        e.returnValue = '你有正在输入中的内容，确定要离开吗？';
-      }
-    };
-
-    window.addEventListener('beforeunload', fn);
-    return () => {
-      window.removeEventListener('beforeunload', fn);
-    };
-  }, [hasValue]);
+  const [inputHeight, updatePreference] = useGlobalStore((s) => [
+    s.preference.inputHeight,
+    s.updatePreference,
+  ]);
 
   return (
-    <>
-      {canUpload && <DragUpload />}
-      <ChatInputArea
-        autoFocus
-        bottomAddons={buttonAddons}
-        expand={expand}
-        heights={{
-          headerHeight: HEADER_HEIGHT,
-          inputHeight,
-          maxHeight: CHAT_TEXTAREA_MAX_HEIGHT,
-          minHeight: CHAT_TEXTAREA_HEIGHT,
-        }}
-        loading={loading}
-        onInput={onInput}
-        onSend={onSend}
-        onSizeChange={handleSizeChange}
-        placeholder={t('sendPlaceholder')}
-        ref={ref}
-        topAddons={topAddons}
-        value={value}
-      />
-    </>
+    <DraggablePanel
+      fullscreen={expand}
+      headerHeight={HEADER_HEIGHT}
+      maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
+      minHeight={CHAT_TEXTAREA_HEIGHT}
+      onSizeChange={(_, size) => {
+        if (!size) return;
+
+        updatePreference({
+          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+        });
+      }}
+      placement="bottom"
+      size={{ height: inputHeight, width: '100%' }}
+      style={{ zIndex: 10 }}
+    >
+      <Flexbox
+        gap={8}
+        height={'100%'}
+        padding={'12px 0 16px'}
+        style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
+      >
+        <Head expand={expand} setExpand={setExpand} />
+        <TextArea setExpand={setExpand} />
+        <Footer />
+      </Flexbox>
+    </DraggablePanel>
   );
 });
 
-export default ChatInputDesktopLayout;
+export default ChatInput;

package/src/app/chat/(mobile)/features/ChatHeaderTitle.tsx

@@ -9,8 +9,7 @@ import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/slices/agent';
-import { sessionSelectors } from '@/store/session/slices/session/selectors';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 const ChatHeaderTitle = memo(() => {
   const { t } = useTranslation('chat');

package/src/app/chat/features/ChatHeader/SettingButton.tsx

@@ -8,7 +8,7 @@ import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layou
 import { useGlobalStore } from '@/store/global';
 import { SettingsTabs, SidebarTabKey } from '@/store/global/slices/common/initialState';
 import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/slices/session/selectors';
+import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {

package/src/app/chat/features/ChatHeader/ShareButton/useScreenshot.ts

@@ -3,7 +3,7 @@ import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
 import { useCallback, useState } from 'react';
 
 import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/slices/agent';
+import { agentSelectors } from '@/store/session/selectors';
 
 import { ImageType } from './type';
 

package/src/features/ChatInput/useChatInput.ts

@@ -3,9 +3,8 @@ import { useCallback, useRef, useState } from 'react';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
-import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/slices/agent';
+import { agentSelectors } from '@/store/session/selectors';
 
 import { useSendMessage } from './useSend';
 
@@ -13,10 +12,7 @@ export const useChatInput = () => {
   const ref = useRef<TextAreaRef>(null);
   const [expand, setExpand] = useState<boolean>(false);
   const onSend = useSendMessage();
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    s.preference.inputHeight,
-    s.updatePreference,
-  ]);
+
   const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
   const [loading, value, onInput, onStop] = useChatStore((s) => [
     !!s.chatLoadingId,
@@ -37,14 +33,12 @@ export const useChatInput = () => {
   return {
     canUpload,
     expand,
-    inputHeight,
     loading,
     onInput,
     onSend: handleSend,
     onStop,
     ref,
     setExpand,
-    updatePreference,
     value,
   };
 };

package/src/features/ChatInput/useSend.ts

@@ -9,12 +9,19 @@ export const useSendMessage = () => {
     s.updateInputMessage,
   ]);
 
-  return useCallback(() => {
+  return useCallback((onlyAddUserMessage?: boolean) => {
     const store = useChatStore.getState();
     if (!!store.chatLoadingId) return;
+    if (!store.inputMessage) return;
+
     const imageList = filesSelectors.imageUrlOrBase64List(useFileStore.getState());
 
-    sendMessage(store.inputMessage, imageList);
+    sendMessage({
+      files: imageList,
+      message: store.inputMessage,
+      onlyAddUserMessage: onlyAddUserMessage,
+    });
+
     updateInputMessage('');
     useFileStore.getState().clearImageList();
   }, []);

package/src/locales/default/chat.ts

@@ -16,6 +16,14 @@ export default {
     desc: '开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切',
     title: '随便聊聊',
   },
+  input: {
+    onlyAdd: '仅添加消息',
+    send: '发送',
+    sendWithCmdEnter: '按 {{meta}} + Enter 键发送',
+    sendWithEnter: '按 Enter 键发送',
+    stop: '停止',
+    warp: '换行',
+  },
   messageAction: {
     delAndRegenerate: '删除并重新生成',
     regenerate: '重新生成',
@@ -27,7 +35,6 @@ export default {
   regenerate: '重新生成',
   roleAndArchive: '角色与记录',
   searchAgentPlaceholder: '搜索助手和对话...',
-  send: '发送',
   sendPlaceholder: '输入聊天内容...',
   sessionList: '助手列表',
   shareModal: {
@@ -41,7 +48,6 @@ export default {
     withPluginInfo: '包含插件信息',
     withSystemRole: '包含助手角色设定',
   },
-  stop: '停止',
   stt: {
     action: '语音输入',
     loading: '识别中...',
@@ -90,5 +96,4 @@ export default {
     dragDesc: '拖拽文件到这里，支持上传多个图片。按住 Shift 直接发送图片',
     dragTitle: '上传图片',
   },
-  warp: '换行',
 };

package/src/store/chat/slices/message/action.test.ts

@@ -179,7 +179,7 @@ describe('chatMessage actions', () => {
       const message = 'Test message';
 
       await act(async () => {
-        await result.current.sendMessage(message);
+        await result.current.sendMessage({ message });
       });
 
       expect(messageService.create).not.toHaveBeenCalled();
@@ -192,7 +192,7 @@ describe('chatMessage actions', () => {
       const message = '';
 
       await act(async () => {
-        await result.current.sendMessage(message);
+        await result.current.sendMessage({ message });
       });
 
       expect(messageService.create).not.toHaveBeenCalled();
@@ -205,7 +205,7 @@ describe('chatMessage actions', () => {
       const message = '';
 
       await act(async () => {
-        await result.current.sendMessage(message, []);
+        await result.current.sendMessage({ message, files: [] });
       });
 
       expect(messageService.create).not.toHaveBeenCalled();
@@ -222,7 +222,7 @@ describe('chatMessage actions', () => {
       (messageService.create as Mock).mockResolvedValue('new-message-id');
 
       await act(async () => {
-        await result.current.sendMessage(message, files);
+        await result.current.sendMessage({ message, files });
       });
 
       expect(messageService.create).toHaveBeenCalledWith({
@@ -269,7 +269,7 @@ describe('chatMessage actions', () => {
             switchTopic: switchTopicMock,
           });
 
-          await result.current.sendMessage(message);
+          await result.current.sendMessage({ message });
         });
 
         expect(saveToTopicMock).not.toHaveBeenCalled();
@@ -310,7 +310,7 @@ describe('chatMessage actions', () => {
         });
 
         await act(async () => {
-          await result.current.sendMessage(message);
+          await result.current.sendMessage({ message });
         });
 
         expect(saveToTopicMock).toHaveBeenCalled();
@@ -349,7 +349,7 @@ describe('chatMessage actions', () => {
             switchTopic: switchTopicMock,
           });
 
-          await result.current.sendMessage(message);
+          await result.current.sendMessage({ message });
         });
 
         expect(saveToTopicMock).not.toHaveBeenCalled();

package/src/store/chat/slices/message/action.ts

@@ -24,10 +24,16 @@ import { MessageDispatch, messagesReducer } from './reducer';
 
 const n = setNamespace('message');
 
+interface SendMessageParams {
+  message: string;
+  files?: { id: string; url: string }[];
+  onlyAddUserMessage?: boolean;
+}
+
 export interface ChatMessageAction {
   // create
   resendMessage: (id: string) => Promise<void>;
-  sendMessage: (text: string, images?: { id: string; url: string }[]) => Promise<void>;
+  sendMessage: (params: SendMessageParams) => Promise<void>;
   // delete
   /**
    * clear message on the active session
@@ -153,7 +159,7 @@ export const chatMessage: StateCreator<
 
     await coreProcessMessage(contextMessages, latestMsg.id);
   },
-  sendMessage: async (message, files) => {
+  sendMessage: async ({ message, files, onlyAddUserMessage }) => {
     const { coreProcessMessage, activeTopicId, activeId } = get();
     if (!activeId) return;
 
@@ -175,6 +181,9 @@ export const chatMessage: StateCreator<
     const id = await messageService.create(newMessage);
     await get().refreshMessages();
 
+    // if only add user message, then stop
+    if (onlyAddUserMessage) return;
+
     // Get the current messages to generate AI response
     const messages = chatSelectors.currentChats(get());
 

package/src/store/chat/slices/message/initialState.ts

@@ -7,9 +7,6 @@ export interface ChatMessageState {
    * @description 当前正在编辑或查看的会话
    */
   activeId: string;
-  /**
-   * @deprecated
-   */
   chatLoadingId?: string;
   inputMessage: string;
   messageLoadingIds: [];

package/src/store/global/slices/common/initialState.ts

@@ -25,6 +25,10 @@ export interface GlobalPreference {
   showChatSideBar?: boolean;
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
+  /**
+   * whether to use cmd + enter to send message
+   */
+  useCmdEnterToSend?: boolean;
 }
 
 export interface GlobalCommonState {
@@ -49,6 +53,7 @@ export const initialCommonState: GlobalCommonState = {
     showChatSideBar: true,
     showSessionPanel: true,
     showSystemRole: false,
+    useCmdEnterToSend: false,
   },
   settingsTab: SettingsTabs.Common,
   sidebarKey: SidebarTabKey.Chat,

package/src/store/global/slices/common/selectors.ts

@@ -5,6 +5,9 @@ import { initialState } from '../../initialState';
 const sessionGroupKeys = (s: GlobalStore): string[] =>
   s.preference.sessionGroupKeys || initialState.preference.sessionGroupKeys;
 
+const useCmdEnterToSend = (s: GlobalStore): boolean => s.preference.useCmdEnterToSend || false;
+
 export const preferenceSelectors = {
-  sessionGroupKeys: sessionGroupKeys,
+  sessionGroupKeys,
+  useCmdEnterToSend,
 };

package/src/utils/keyboard.ts

@@ -0,0 +1,13 @@
+import { KeyboardEvent } from 'react';
+
+import { isMacOS } from './platform';
+
+export const isCommandPressed = (event: KeyboardEvent) => {
+  const isMac = isMacOS();
+
+  if (isMac) {
+    return event.metaKey; // Use metaKey (Command key) on macOS
+  } else {
+    return event.ctrlKey; // Use ctrlKey on Windows/Linux
+  }
+};

package/src/utils/platform.ts

@@ -1,6 +1,8 @@
 import UAParser from 'ua-parser-js';
 
 const getPaser = () => {
+  if (typeof window === 'undefined') return new UAParser('Node');
+
   let ua = navigator.userAgent;
   return new UAParser(ua);
 };
@@ -12,3 +14,5 @@ export const getPlatform = () => {
 export const getBrowser = () => {
   return getPaser().getResult().browser.name;
 };
+
+export const isMacOS = () => getPlatform() === 'Mac OS';