@lobehub/chat 1.123.4 → 1.124.1

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/ShortcutHint.tsx

@@ -1,40 +0,0 @@
-import { Hotkey, combineKeys } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useUserStore } from '@/store/user';
-import { preferenceSelectors } from '@/store/user/selectors';
-import { KeyEnum } from '@/types/hotkey';
-
-const ShortcutHint = memo(() => {
-  const { t } = useTranslation('chat');
-  const theme = useTheme();
-  const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
-
-  const sendShortcut = useCmdEnterToSend
-    ? combineKeys([KeyEnum.Mod, KeyEnum.Enter])
-    : KeyEnum.Enter;
-
-  const wrapperShortcut = useCmdEnterToSend
-    ? KeyEnum.Enter
-    : combineKeys([KeyEnum.Mod, KeyEnum.Enter]);
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={4}
-      horizontal
-      style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
-    >
-      <Hotkey keys={sendShortcut} style={{ color: 'inherit' }} variant={'borderless'} />
-      <span>{t('input.send')}</span>
-      <span>/</span>
-      <Hotkey keys={wrapperShortcut} style={{ color: 'inherit' }} variant={'borderless'} />
-      <span>{t('input.warp')}</span>
-    </Flexbox>
-  );
-});
-
-export default ShortcutHint;

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -1,125 +0,0 @@
-import { Button } from '@lobehub/ui';
-import { Space } from 'antd';
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-import { Suspense, memo, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import StopLoadingIcon from '@/components/StopLoading';
-import LocalFiles from '@/features/ChatInput/Desktop/FilePreview';
-import SaveTopic from '@/features/ChatInput/Topic';
-import { useSendMessage } from '@/features/ChatInput/useSend';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-import { isMacOS } from '@/utils/platform';
-
-import MessageFromUrl from './MessageFromUrl';
-import SendMore from './SendMore';
-import ShortcutHint from './ShortcutHint';
-
-const useStyles = createStyles(({ css, prefixCls, token }) => {
-  return {
-    arrow: css`
-      &.${prefixCls}-btn.${prefixCls}-btn-icon-only {
-        width: 28px;
-      }
-    `,
-    loadingButton: css`
-      display: flex;
-      align-items: center;
-    `,
-    overrideAntdIcon: css`
-      .${prefixCls}-btn.${prefixCls}-btn-icon-only {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .${prefixCls}-btn.${prefixCls}-dropdown-trigger {
-        &::before {
-          background-color: ${rgba(token.colorBgLayout, 0.1)} !important;
-        }
-      }
-    `,
-  };
-});
-
-interface FooterProps {
-  expand: boolean;
-  onExpandChange: (expand: boolean) => void;
-}
-
-const Footer = memo<FooterProps>(({ onExpandChange, expand }) => {
-  const { t } = useTranslation('chat');
-
-  const { styles } = useStyles();
-
-  const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
-    s.stopGenerateMessage,
-  ]);
-
-  const { send: sendMessage, canSend } = useSendMessage();
-
-  const [isMac, setIsMac] = useState<boolean>();
-
-  useEffect(() => {
-    setIsMac(isMacOS());
-  }, [setIsMac]);
-
-  return (
-    <>
-      <Suspense>
-        <MessageFromUrl />
-      </Suspense>
-      <Flexbox
-        align={'end'}
-        className={styles.overrideAntdIcon}
-        distribution={'space-between'}
-        flex={'none'}
-        gap={8}
-        horizontal
-        paddingInline={16}
-      >
-        <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>
-          {expand && <LocalFiles />}
-        </Flexbox>
-        <Flexbox align={'center'} flex={'none'} gap={8} horizontal>
-          <ShortcutHint />
-          <SaveTopic />
-          <Flexbox style={{ minWidth: 92 }}>
-            {isAIGenerating ? (
-              <Button
-                className={styles.loadingButton}
-                icon={StopLoadingIcon}
-                onClick={stopGenerateMessage}
-              >
-                {t('input.stop')}
-              </Button>
-            ) : (
-              <Space.Compact>
-                <Button
-                  disabled={!canSend}
-                  loading={!canSend}
-                  onClick={() => {
-                    sendMessage();
-                    onExpandChange?.(false);
-                  }}
-                  type={'primary'}
-                >
-                  {t('input.send')}
-                </Button>
-                <SendMore disabled={!canSend} isMac={isMac} />
-              </Space.Compact>
-            )}
-          </Flexbox>
-        </Flexbox>
-      </Flexbox>
-    </>
-  );
-});
-
-Footer.displayName = 'Footer';
-
-export default Footer;

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.test.tsx

@@ -1,332 +0,0 @@
-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 { useUserStore } from '@/store/user';
-
-import InputArea from './TextArea';
-
-let sendMessageMock: () => Promise<void>;
-
-// Mock the useSendMessage hook to return our mock function
-vi.mock('@/features/ChatInput/useSend', () => ({
-  useSendMessage: () => ({
-    send: sendMessageMock,
-    canSend: true,
-  }),
-}));
-
-// Mock the Chinese warning hook to always allow sending
-vi.mock('@/hooks/useGeminiChineseWarning', () => ({
-  useGeminiChineseWarning: () => () => Promise.resolve(true),
-}));
-
-let onSendMock: () => void;
-
-beforeEach(() => {
-  onSendMock = vi.fn();
-  sendMessageMock = vi.fn().mockResolvedValue(undefined);
-  vi.clearAllMocks();
-});
-
-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 onSend={onSendMock} />);
-    const textArea = screen.getByPlaceholderText('sendPlaceholder');
-    expect(textArea).toBeInTheDocument();
-  });
-
-  it('has the correct initial value', () => {
-    render(<InputArea onSend={onSendMock} />);
-    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 onSend={onSendMock} />);
-      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(onSendMock).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(onSendMock).toHaveBeenCalled();
-      expect(updateInputMessageMock).toHaveBeenCalled();
-    });
-
-    it('updates the input message when TextArea loses focus', () => {
-      const updateInputMessageMock = vi.fn();
-      act(() => {
-        useChatStore.setState({ updateInputMessage: updateInputMessageMock });
-      });
-
-      render(<InputArea onSend={onSendMock} />);
-      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) => {
-        // @ts-ignore
-        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', () => {
-      act(() => {
-        useChatStore.setState({ chatLoadingIds: ['123'] });
-      });
-
-      render(<InputArea onSend={onSendMock} />);
-      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', async () => {
-      act(() => {
-        useChatStore.setState({
-          chatLoadingIds: [],
-          inputMessage: 'abc',
-        });
-      });
-
-      render(<InputArea />);
-      const textArea = screen.getByRole('textbox');
-      fireEvent.change(textArea, { target: { value: 'Test message' } });
-
-      fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter' });
-
-      await vi.waitFor(() => {
-        expect(sendMessageMock).toHaveBeenCalled();
-      });
-    });
-
-    describe('metaKey behavior for sending messages', () => {
-      it('windows: sends message on ctrl + enter when useCmdEnterToSend is true', async () => {
-        act(() => {
-          useChatStore.setState({
-            chatLoadingIds: [],
-            inputMessage: '123',
-          });
-          useUserStore.getState().updatePreference({ useCmdEnterToSend: true });
-        });
-
-        render(<InputArea onSend={onSendMock} />);
-        const textArea = screen.getByRole('textbox');
-
-        fireEvent.keyDown(textArea, { code: 'Enter', ctrlKey: true, key: 'Enter' });
-
-        await vi.waitFor(() => {
-          expect(sendMessageMock).toHaveBeenCalled();
-        });
-      });
-
-      it('windows: inserts a new line on ctrl + enter when useCmdEnterToSend is false', () => {
-        const updateInputMessageMock = vi.fn();
-        act(() => {
-          useChatStore.setState({
-            chatLoadingIds: [],
-            inputMessage: 'Test',
-            updateInputMessage: updateInputMessageMock,
-          });
-          useUserStore.getState().updatePreference({ useCmdEnterToSend: false });
-        });
-
-        render(<InputArea onSend={onSendMock} />);
-        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', async () => {
-        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',
-        });
-        act(() => {
-          useChatStore.setState({
-            chatLoadingIds: [],
-            inputMessage: '123',
-          });
-          useUserStore.getState().updatePreference({ useCmdEnterToSend: true });
-        });
-
-        render(<InputArea onSend={onSendMock} />);
-        const textArea = screen.getByRole('textbox');
-
-        fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', metaKey: true });
-
-        await vi.waitFor(() => {
-          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 updateInputMessageMock = vi.fn();
-        act(() => {
-          useChatStore.setState({
-            chatLoadingIds: [],
-            inputMessage: 'Test',
-            updateInputMessage: updateInputMessageMock,
-          });
-          useUserStore.getState().updatePreference({ useCmdEnterToSend: false });
-        });
-
-        render(<InputArea onSend={onSendMock} />);
-        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/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.tsx

@@ -1,29 +0,0 @@
-import { memo } from 'react';
-
-import InputArea from '@/features/ChatInput/Desktop/InputArea';
-import { useSendMessage } from '@/features/ChatInput/useSend';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/slices/message/selectors';
-
-const TextArea = memo<{ onSend?: () => void }>(({ onSend }) => {
-  const [loading, value, updateInputMessage] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
-    s.inputMessage,
-    s.updateInputMessage,
-  ]);
-  const { send: sendMessage } = useSendMessage();
-
-  return (
-    <InputArea
-      loading={loading}
-      onChange={updateInputMessage}
-      onSend={() => {
-        sendMessage();
-        onSend?.();
-      }}
-      value={value}
-    />
-  );
-});
-
-export default TextArea;

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/index.tsx

@@ -1,33 +0,0 @@
-import { PreviewGroup } from '@lobehub/ui';
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { filesSelectors, useFileStore } from '@/store/file';
-
-import FileItem from './FileItem';
-
-const Files = memo(() => {
-  const list = useFileStore(filesSelectors.chatUploadFileList, isEqual);
-
-  if (!list || list?.length === 0) return null;
-
-  return (
-    <Flexbox paddingBlock={4} style={{ position: 'relative' }}>
-      <Flexbox
-        gap={4}
-        horizontal
-        padding={'4px 8px 8px'}
-        style={{ overflow: 'scroll', width: '100%' }}
-      >
-        <PreviewGroup>
-          {list.map((i) => (
-            <FileItem {...i} key={i.id} loading={i.status === 'pending'} />
-          ))}
-        </PreviewGroup>
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default Files;

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/InputArea/Container.tsx

@@ -1,41 +0,0 @@
-import { css, cx } from 'antd-style';
-import { FC, ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const container = css`
-  height: inherit;
-  padding-block: 0;
-  padding-inline: 8px;
-`;
-
-interface InnerContainerProps {
-  bottomAddons?: ReactNode;
-  children: ReactNode;
-  expand?: boolean;
-  textAreaLeftAddons?: ReactNode;
-  textAreaRightAddons?: ReactNode;
-  topAddons?: ReactNode;
-}
-
-const InnerContainer: FC<InnerContainerProps> = memo(
-  ({ children, expand, textAreaRightAddons, textAreaLeftAddons, bottomAddons, topAddons }) =>
-    expand ? (
-      <Flexbox className={cx(container)} gap={8}>
-        <Flexbox gap={8} horizontal justify={'flex-end'}>
-          {textAreaLeftAddons}
-          {textAreaRightAddons}
-        </Flexbox>
-        {children}
-        {topAddons}
-        {bottomAddons}
-      </Flexbox>
-    ) : (
-      <Flexbox align={'flex-end'} className={cx(container)} gap={8} horizontal>
-        {textAreaLeftAddons}
-        {children}
-        {textAreaRightAddons}
-      </Flexbox>
-    ),
-);
-
-export default InnerContainer;