@lobehub/chat 0.119.9 → 0.119.11

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();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,118 @@
+import { TextArea } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+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 { useGlobalStore } from '@/store/global';
+import { preferenceSelectors } from '@/store/global/selectors';
+import { isCommandPressed } from '@/utils/keyboard';
+
+import { useAutoFocus } from './useAutoFocus';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    textarea: css`
+      resize: none !important;
+
+      height: 100% !important;
+      padding: 0 24px;
+
+      line-height: 1.5;
+
+      box-shadow: none !important;
+    `,
+    textareaContainer: css`
+      position: relative;
+      flex: 1;
+    `,
+  };
+});
+
+const InputArea = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+  const ref = useRef<TextAreaRef>(null);
+  const isChineseInput = useRef(false);
+
+  const [loading, value, updateInputMessage] = useChatStore((s) => [
+    !!s.chatLoadingId,
+    s.inputMessage,
+    s.updateInputMessage,
+  ]);
+
+  const useCmdEnterToSend = useGlobalStore(preferenceSelectors.useCmdEnterToSend);
+
+  const sendMessage = useSendMessage();
+
+  useAutoFocus(ref);
+
+  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]);
+
+  return (
+    <div className={styles.textareaContainer}>
+      <TextArea
+        autoFocus
+        className={styles.textarea}
+        onBlur={(e) => {
+          updateInputMessage?.(e.target.value);
+        }}
+        onChange={(e) => {
+          updateInputMessage?.(e.target.value);
+        }}
+        onCompositionEnd={() => {
+          isChineseInput.current = false;
+        }}
+        onCompositionStart={() => {
+          isChineseInput.current = true;
+        }}
+        onPressEnter={(e) => {
+          if (loading || e.shiftKey || isChineseInput.current) return;
+
+          // eslint-disable-next-line unicorn/consistent-function-scoping
+          const send = () => {
+            sendMessage();
+            setExpand?.(false);
+          };
+          const commandKey = isCommandPressed(e);
+
+          // when user like cmd + enter to send message
+          if (useCmdEnterToSend) {
+            if (commandKey) send();
+          } else {
+            // cmd + enter to wrap
+            if (commandKey) {
+              updateInputMessage?.((e.target as any).value + '\n');
+              return;
+            }
+
+            send();
+          }
+        }}
+        placeholder={t('sendPlaceholder')}
+        ref={ref}
+        type={'pure'}
+        value={value}
+      />
+    </div>
+  );
+});
+
+export default InputArea;

package/src/app/chat/(desktop)/features/ChatInput/__tests__/useAutoFocus.test.ts

@@ -7,6 +7,7 @@ enum ElType {
   div,
   input,
   markdown,
+  debug,
 }
 
 // 模拟elementFromPoint方法
@@ -19,6 +20,10 @@ document.elementFromPoint = function (x) {
     return document.createElement('input');
   }
 
+  if (x === ElType.debug) {
+    return document.createElement('pre');
+  }
+
   if (x === ElType.markdown) {
     const markdownEl = document.createElement('article');
     const markdownChildEl = document.createElement('p');
@@ -68,7 +73,7 @@ describe('useAutoFocus', () => {
     const inputRef = { current: { focus: vi.fn() } } as RefObject<any>;
     renderHook(() => useAutoFocus(inputRef));
 
-    // Simulate a mousedown event on an input element
+    // Simulate a mousedown event on a markdown element
     act(() => {
       document.dispatchEvent(
         new MouseEvent('mousedown', { bubbles: true, clientX: ElType.markdown }),
@@ -82,4 +87,21 @@ describe('useAutoFocus', () => {
 
     expect(inputRef.current?.focus).not.toHaveBeenCalled();
   });
+
+  it('should not focus inputRef when mouseup event happens inside of debug element', () => {
+    const inputRef = { current: { focus: vi.fn() } } as RefObject<any>;
+    renderHook(() => useAutoFocus(inputRef));
+
+    // Simulate a mousedown event on a debug element
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: ElType.debug }));
+    });
+
+    // Simulate a mouseup event
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+    });
+
+    expect(inputRef.current?.focus).not.toHaveBeenCalled();
+  });
 });