@lobehub/chat 0.119.10 → 0.119.12

package/locales/zh-CN/chat.json

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

package/locales/zh-TW/chat.json

@@ -14,6 +14,14 @@
     "desc": "開啟大腦集群，激發思維火花。你的智能助理，在這裡與你交流一切",
     "title": "隨便聊聊"
   },
+  "input": {
+    "onlyAdd": "僅新增訊息",
+    "send": "發送",
+    "sendWithCmdEnter": "按 {{meta}} + Enter 鍵發送",
+    "sendWithEnter": "按 Enter 鍵發送",
+    "stop": "停止",
+    "warp": "換行"
+  },
   "messageAction": {
     "delAndRegenerate": "刪除並重新生成",
     "regenerate": "重新生成"
@@ -25,7 +33,6 @@
   "regenerate": "重新生成",
   "roleAndArchive": "角色與記錄",
   "searchAgentPlaceholder": "搜索助手和對話...",
-  "send": "發送",
   "sendPlaceholder": "輸入聊天內容...",
   "sessionList": "助手列表",
   "shareModal": {
@@ -39,7 +46,6 @@
     "withPluginInfo": "包含插件信息",
     "withSystemRole": "包含助手角色設定"
   },
-  "stop": "停止",
   "stt": {
     "action": "語音輸入",
     "loading": "識別中...",
@@ -86,6 +92,5 @@
     "actionTooltip": "上傳圖片",
     "dragDesc": "拖拽文件到這裡，支持上傳多個圖片。按住 Shift 直接發送圖片",
     "dragTitle": "上傳圖片"
-  },
-  "warp": "換行"
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.119.10",
+  "version": "0.119.12",
   "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",

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

@@ -0,0 +1,164 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Dropdown, Space } from 'antd';
+import { createStyles } from 'antd-style';
+import {
+  ChevronUp,
+  CornerDownLeft,
+  Loader2,
+  LucideCheck,
+  LucideChevronDown,
+  LucideCommand,
+  LucidePlus,
+} from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import SaveTopic from '@/features/ChatInput/Topic';
+import { useSendMessage } from '@/features/ChatInput/useSend';
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+import { preferenceSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { isMacOS } from '@/utils/platform';
+
+import { LocalFiles } from './LocalFiles';
+
+const useStyles = createStyles(({ css, prefixCls }) => {
+  return {
+    arrow: css`
+      &.${prefixCls}-btn.${prefixCls}-btn-icon-only {
+        width: 28px;
+      }
+    `,
+    overrideAntdIcon: css`
+      .${prefixCls}-btn.${prefixCls}-btn-icon-only {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `,
+  };
+});
+
+const isMac = isMacOS();
+
+const Footer = memo(() => {
+  const { t } = useTranslation('chat');
+
+  const { theme, styles } = useStyles();
+  const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
+  const [loading, stopGenerateMessage] = useChatStore((s) => [
+    !!s.chatLoadingId,
+    s.stopGenerateMessage,
+  ]);
+  const [useCmdEnterToSend, updatePreference] = useGlobalStore((s) => [
+    preferenceSelectors.useCmdEnterToSend(s),
+    s.updatePreference,
+  ]);
+  const sendMessage = useSendMessage();
+
+  const cmdEnter = (
+    <Flexbox gap={2} horizontal>
+      <Icon icon={isMac ? LucideCommand : ChevronUp} />
+      <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'}
+      className={styles.overrideAntdIcon}
+      distribution={'space-between'}
+      flex={'none'}
+      gap={8}
+      horizontal
+      padding={'0 24px'}
+    >
+      <Flexbox align={'center'} gap={8} horizontal>
+        {canUpload && <LocalFiles />}
+      </Flexbox>
+      <Flexbox align={'center'} 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 />
+        <Flexbox style={{ minWidth: 92 }}>
+          {loading ? (
+            <Button icon={loading && <Icon icon={Loader2} spin />} onClick={stopGenerateMessage}>
+              {t('input.stop')}
+            </Button>
+          ) : (
+            <Space.Compact>
+              <Button onClick={() => sendMessage()} type={'primary'}>
+                {t('input.send')}
+              </Button>
+              <Dropdown
+                menu={{
+                  items: [
+                    {
+                      icon: !useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
+                      key: 'sendWithEnter',
+                      label: t('input.sendWithEnter'),
+                      onClick: () => {
+                        updatePreference({ useCmdEnterToSend: false });
+                      },
+                    },
+                    {
+                      icon: useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
+                      key: 'sendWithCmdEnter',
+                      label: t('input.sendWithCmdEnter', {
+                        meta: isMac ? 'Cmd' : 'Ctrl',
+                      }),
+                      onClick: () => {
+                        updatePreference({ useCmdEnterToSend: true });
+                      },
+                    },
+                    { type: 'divider' },
+                    {
+                      icon: <Icon icon={LucidePlus} />,
+                      key: 'onlyAdd',
+                      label: t('input.onlyAdd'),
+                      onClick: () => {
+                        sendMessage(true);
+                      },
+                    },
+                  ],
+                }}
+                placement={'topRight'}
+                trigger={['hover']}
+              >
+                <Button
+                  className={styles.arrow}
+                  icon={<Icon icon={LucideChevronDown} />}
+                  type={'primary'}
+                />
+              </Dropdown>
+            </Space.Compact>
+          )}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Footer;

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

@@ -0,0 +1,33 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Maximize2, Minimize2 } from 'lucide-react';
+import { memo } from 'react';
+
+import ActionBar from '@/features/ChatInput/ActionBar';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+import DragUpload from './DragUpload';
+
+const Header = memo<{ expand: boolean; setExpand: (expand: boolean) => void }>(
+  ({ expand, setExpand }) => {
+    const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
+
+    return (
+      <>
+        {canUpload && <DragUpload />}
+        <ActionBar
+          rightAreaEndRender={
+            <ActionIcon
+              icon={expand ? Minimize2 : Maximize2}
+              onClick={() => {
+                setExpand(!expand);
+              }}
+            />
+          }
+        />
+      </>
+    );
+  },
+);
+
+export default Header;

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

@@ -0,0 +1,316 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+
+import InputArea from './TextArea';
+
+let setExpandMock: (expand: boolean) => void;
+
+beforeEach(() => {
+  setExpandMock = vi.fn();
+});
+
+describe('<InputArea />', () => {
+  it('renders the TextArea component correctly', () => {
+    render(<InputArea />);
+    const textArea = screen.getByRole('textbox');
+    expect(textArea).toBeInTheDocument();
+  });
+
+  it('auto-focuses the TextArea component on mount', () => {
+    render(<InputArea />);
+    const textArea = screen.getByRole('textbox');
+
+    // The document's active element should be the textarea if it was auto-focused
+    expect(document.activeElement).toBe(textArea);
+  });
+
+  it('renders with correct placeholder text', () => {
+    render(<InputArea setExpand={setExpandMock} />);
+    const textArea = screen.getByPlaceholderText('sendPlaceholder');
+    expect(textArea).toBeInTheDocument();
+  });
+
+  it('has the correct initial value', () => {
+    render(<InputArea setExpand={setExpandMock} />);
+    const textArea = screen.getByRole('textbox');
+    expect(textArea).toHaveValue('');
+  });
+
+  describe('input behavior', () => {
+    it('calls updateInputMessage on input change', async () => {
+      const updateInputMessageMock = vi.fn();
+      act(() => {
+        useChatStore.setState({ updateInputMessage: updateInputMessageMock });
+      });
+
+      render(<InputArea />);
+
+      const textArea = screen.getByRole('textbox');
+      const newValue = 'New message';
+      fireEvent.change(textArea, { target: { value: newValue } });
+
+      expect(updateInputMessageMock).toHaveBeenCalledWith(newValue);
+    });
+
+    it('handles composition events for IME input correctly', () => {
+      const updateInputMessageMock = vi.fn();
+      act(() => {
+        useChatStore.setState({ updateInputMessage: updateInputMessageMock });
+      });
+
+      render(<InputArea />);
+      const textArea = screen.getByRole('textbox');
+
+      // Start composition (IME input starts)
+      fireEvent.compositionStart(textArea);
+      fireEvent.change(textArea, { target: { value: '正在' } });
+      expect(updateInputMessageMock).toHaveBeenCalledWith('正在');
+
+      // End composition (IME input ends)
+      fireEvent.compositionEnd(textArea);
+      fireEvent.change(textArea, { target: { value: '正在输入' } });
+      expect(updateInputMessageMock).toHaveBeenCalledWith('正在输入');
+    });
+
+    it('does not send a message when Enter is pressed during IME composition', () => {
+      const updateInputMessageMock = vi.fn();
+      act(() => {
+        useChatStore.setState({ updateInputMessage: updateInputMessageMock });
+      });
+
+      render(<InputArea setExpand={setExpandMock} />);
+      const textArea = screen.getByRole('textbox');
+
+      // Start composition (IME input starts)
+      fireEvent.compositionStart(textArea);
+
+      // Simulate pressing Enter during IME composition
+      fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter' });
+
+      // Since we are in the middle of IME composition, the message should not be sent
+      expect(setExpandMock).not.toHaveBeenCalled();
+      expect(updateInputMessageMock).not.toHaveBeenCalled();
+
+      // End composition (IME input ends)
+      fireEvent.compositionEnd(textArea);
+
+      // Now simulate pressing Enter after IME composition
+      fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter' });
+
+      // Since IME composition has ended, now the message should be sent
+      expect(setExpandMock).toHaveBeenCalled();
+      expect(updateInputMessageMock).toHaveBeenCalled();
+    });
+
+    it('updates the input message when TextArea loses focus', () => {
+      const updateInputMessageMock = vi.fn();
+      act(() => {
+        useChatStore.setState({ updateInputMessage: updateInputMessageMock });
+      });
+
+      render(<InputArea setExpand={setExpandMock} />);
+      const textArea = screen.getByRole('textbox');
+      const newText = 'New input text';
+
+      fireEvent.change(textArea, { target: { value: newText } });
+      fireEvent.blur(textArea);
+
+      expect(updateInputMessageMock).toHaveBeenCalledWith(newText);
+    });
+  });
+
+  describe('leaving protect', () => {
+    it('triggers a warning when trying to leave the page with unsaved input', () => {
+      const beforeUnloadEvent = new Event('beforeunload', { cancelable: true });
+
+      act(() => {
+        useChatStore.setState({ inputMessage: 'Unsaved input' });
+      });
+
+      render(<InputArea />);
+
+      // trigger beforeunload
+      window.dispatchEvent(beforeUnloadEvent);
+
+      // 检查 returnValue 是否被设置为 true，这是触发警告的标识
+      expect(beforeUnloadEvent.returnValue).toBeTruthy();
+    });
+
+    it('does not trigger a warning when trying to leave the page with empty input', () => {
+      act(() => {
+        useChatStore.setState({ inputMessage: '' });
+      });
+
+      // 模拟 window.addEventListener 来捕获 beforeunload 事件处理程序
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+      const beforeUnloadHandler = vi.fn();
+
+      addEventListenerSpy.mockImplementation((event, handler) => {
+        if (event === 'beforeunload') {
+          beforeUnloadHandler.mockImplementation(handler as any);
+        }
+      });
+
+      // 渲染组件
+      render(<InputArea />);
+
+      // 触发 beforeunload 事件
+      const event = new Event('beforeunload', { cancelable: true });
+      window.dispatchEvent(event);
+
+      // 检查 beforeunload 事件的处理程序是否没有被调用
+      expect(beforeUnloadHandler).not.toHaveBeenCalled();
+
+      // 清理模拟
+      addEventListenerSpy.mockRestore();
+    });
+
+    describe('cleanup', () => {
+      it('removes beforeunload listener on unmount', () => {
+        const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+        const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+        // 渲染并立即卸载组件
+        const { unmount } = render(<InputArea />);
+        unmount();
+
+        // 检查是否为 beforeunload 事件添加了监听器
+        expect(addEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+
+        // 检查是否移除了对应的监听器
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+
+        // 清理 spy
+        addEventListenerSpy.mockRestore();
+        removeEventListenerSpy.mockRestore();
+      });
+    });
+  });
+
+  describe('message sending behavior', () => {
+    it('does not send message when loading or shift key is pressed', () => {
+      const sendMessageMock = vi.fn();
+      act(() => {
+        useChatStore.setState({ chatLoadingId: '123', sendMessage: sendMessageMock });
+      });
+
+      render(<InputArea setExpand={setExpandMock} />);
+      const textArea = screen.getByRole('textbox');
+
+      fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', shiftKey: true });
+      expect(sendMessageMock).not.toHaveBeenCalled();
+    });
+
+    it('sends message on Enter press when not loading and no shift key', () => {
+      const sendMessageMock = vi.fn();
+      act(() => {
+        useChatStore.setState({
+          chatLoadingId: '',
+          inputMessage: 'abc',
+          sendMessage: sendMessageMock,
+        });
+      });
+
+      render(<InputArea />);
+      const textArea = screen.getByRole('textbox');
+      fireEvent.change(textArea, { target: { value: 'Test message' } });
+
+      fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter' });
+      expect(sendMessageMock).toHaveBeenCalled();
+    });
+
+    describe('metaKey behavior for sending messages', () => {
+      it('windows: sends message on ctrl + enter when useCmdEnterToSend is true', () => {
+        const sendMessageMock = vi.fn();
+        act(() => {
+          useChatStore.setState({
+            chatLoadingId: '',
+            inputMessage: '123',
+            sendMessage: sendMessageMock,
+          });
+          useGlobalStore.getState().updatePreference({ useCmdEnterToSend: true });
+        });
+
+        render(<InputArea setExpand={setExpandMock} />);
+        const textArea = screen.getByRole('textbox');
+
+        fireEvent.keyDown(textArea, { code: 'Enter', ctrlKey: true, key: 'Enter' });
+        expect(sendMessageMock).toHaveBeenCalled();
+      });
+
+      it('windows: inserts a new line on ctrl + enter when useCmdEnterToSend is false', () => {
+        const sendMessageMock = vi.fn();
+        const updateInputMessageMock = vi.fn();
+        act(() => {
+          useChatStore.setState({
+            chatLoadingId: '',
+            inputMessage: 'Test',
+            sendMessage: sendMessageMock,
+            updateInputMessage: updateInputMessageMock,
+          });
+          useGlobalStore.getState().updatePreference({ useCmdEnterToSend: false });
+        });
+
+        render(<InputArea setExpand={setExpandMock} />);
+        const textArea = screen.getByRole('textbox');
+
+        fireEvent.keyDown(textArea, { code: 'Enter', ctrlKey: true, key: 'Enter' });
+        expect(updateInputMessageMock).toHaveBeenCalledWith('Test\n');
+        expect(sendMessageMock).not.toHaveBeenCalled(); // sendMessage should not be called
+      });
+
+      it('macOS: sends message on cmd + enter when useCmdEnterToSend is true', () => {
+        vi.stubGlobal('navigator', {
+          userAgent:
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+        });
+        const sendMessageMock = vi.fn();
+        act(() => {
+          useChatStore.setState({
+            chatLoadingId: '',
+            inputMessage: '123',
+            sendMessage: sendMessageMock,
+          });
+          useGlobalStore.getState().updatePreference({ useCmdEnterToSend: true });
+        });
+
+        render(<InputArea setExpand={setExpandMock} />);
+        const textArea = screen.getByRole('textbox');
+
+        fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', metaKey: true });
+        expect(sendMessageMock).toHaveBeenCalled();
+        vi.restoreAllMocks();
+      });
+
+      it('macOS: inserts a new line on cmd + enter when useCmdEnterToSend is false', () => {
+        vi.stubGlobal('navigator', {
+          userAgent:
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+        });
+        const sendMessageMock = vi.fn();
+        const updateInputMessageMock = vi.fn();
+        act(() => {
+          useChatStore.setState({
+            chatLoadingId: '',
+            inputMessage: 'Test',
+            sendMessage: sendMessageMock,
+            updateInputMessage: updateInputMessageMock,
+          });
+          useGlobalStore.getState().updatePreference({ useCmdEnterToSend: false });
+        });
+
+        render(<InputArea setExpand={setExpandMock} />);
+        const textArea = screen.getByRole('textbox');
+
+        fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', metaKey: true });
+        expect(updateInputMessageMock).toHaveBeenCalledWith('Test\n');
+        expect(sendMessageMock).not.toHaveBeenCalled(); // sendMessage should not be called
+        vi.restoreAllMocks();
+      });
+    });
+  });
+});