@lobehub/chat 1.123.3 → 1.124.0

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

@@ -1,143 +0,0 @@
-import { TextArea } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { TextAreaRef } from 'antd/es/input/TextArea';
-import { RefObject, memo, useEffect, useRef } from 'react';
-import { useHotkeysContext } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
-
-import { isDesktop } from '@/const/version';
-import { useUserStore } from '@/store/user';
-import { preferenceSelectors } from '@/store/user/selectors';
-import { HotkeyEnum } from '@/types/hotkey';
-import { isCommandPressed } from '@/utils/keyboard';
-
-import { useAutoFocus } from '../useAutoFocus';
-
-const useStyles = createStyles(({ css }) => {
-  return {
-    textarea: css`
-      resize: none !important;
-
-      height: 100% !important;
-      padding-block: 0;
-      padding-inline: 16px;
-
-      line-height: 1.5;
-
-      box-shadow: none !important;
-    `,
-    textareaContainer: css`
-      position: relative;
-      flex: 1;
-    `,
-  };
-});
-
-interface InputAreaProps {
-  loading?: boolean;
-  onChange: (string: string) => void;
-  onSend: () => void;
-  value: string;
-}
-
-const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) => {
-  const { enableScope, disableScope } = useHotkeysContext();
-  const { t } = useTranslation('chat');
-  const { styles } = useStyles();
-
-  const ref = useRef<TextAreaRef>(null);
-  const isChineseInput = useRef(false);
-
-  const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
-
-  useAutoFocus(ref as RefObject<TextAreaRef>);
-
-  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) => {
-          onChange?.(e.target.value);
-          disableScope(HotkeyEnum.AddUserMessage);
-        }}
-        onChange={(e) => {
-          onChange?.(e.target.value);
-        }}
-        onCompositionEnd={() => {
-          isChineseInput.current = false;
-        }}
-        onCompositionStart={() => {
-          isChineseInput.current = true;
-        }}
-        onContextMenu={async (e) => {
-          if (isDesktop) {
-            e.preventDefault();
-            const textArea = ref.current?.resizableTextArea?.textArea;
-            const hasSelection = textArea && textArea.selectionStart !== textArea.selectionEnd;
-            const { electronSystemService } = await import('@/services/electron/system');
-
-            electronSystemService.showContextMenu('editor', {
-              hasSelection: !!hasSelection,
-              value: value,
-            });
-          }
-        }}
-        onFocus={() => {
-          enableScope(HotkeyEnum.AddUserMessage);
-        }}
-        onPressEnter={(e) => {
-          if (loading || e.altKey || e.shiftKey || isChineseInput.current) return;
-
-          // eslint-disable-next-line unicorn/consistent-function-scoping
-          const send = () => {
-            // avoid inserting newline when sending message.
-            // refs: https://github.com/lobehub/lobe-chat/pull/989
-            e.preventDefault();
-
-            onSend();
-          };
-          const commandKey = isCommandPressed(e);
-
-          // when user like cmd + enter to send message
-          if (useCmdEnterToSend) {
-            if (commandKey) send();
-          } else {
-            // cmd + enter to wrap
-            if (commandKey) {
-              onChange?.((e.target as any).value + '\n');
-              return;
-            }
-
-            send();
-          }
-        }}
-        placeholder={t('sendPlaceholder')}
-        ref={ref}
-        value={value}
-        variant={'borderless'}
-      />
-    </div>
-  );
-});
-
-InputArea.displayName = 'DesktopInputArea';
-
-export default InputArea;

package/src/features/ChatInput/Desktop/__tests__/useAutoFocus.test.ts

@@ -1,45 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-
-import { useAutoFocus } from '../useAutoFocus';
-
-vi.mock('zustand/traditional');
-
-describe('useAutoFocus', () => {
-  it('should focus the input when chatKey changes', () => {
-    const focusMock = vi.fn();
-    const inputRef = { current: { focus: focusMock } };
-
-    act(() => {
-      useChatStore.setState({ activeId: '1', activeTopicId: '2' });
-    });
-
-    renderHook(() => useAutoFocus(inputRef as any));
-
-    expect(focusMock).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      useChatStore.setState({ activeId: '1', activeTopicId: '3' });
-    });
-
-    renderHook(() => useAutoFocus(inputRef as any));
-
-    // I don't know why its 3, but is large than 2 is fine
-    expect(focusMock).toHaveBeenCalledTimes(3);
-  });
-
-  it('should not focus the input if inputRef is not available', () => {
-    const inputRef = { current: null };
-
-    act(() => {
-      useChatStore.setState({ activeId: '1', activeTopicId: '2' });
-    });
-
-    renderHook(() => useAutoFocus(inputRef as any));
-
-    expect(inputRef.current).toBeNull();
-  });
-});

package/src/features/ChatInput/Desktop/useAutoFocus.ts

@@ -1,13 +0,0 @@
-import { TextAreaRef } from 'antd/es/input/TextArea';
-import { RefObject, useEffect } from 'react';
-
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-
-export const useAutoFocus = (inputRef: RefObject<TextAreaRef>) => {
-  const chatKey = useChatStore(chatSelectors.currentChatKey);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, [chatKey]);
-};

package/src/features/ChatInput/useSend.ts

@@ -1,102 +0,0 @@
-import { useAnalytics } from '@lobehub/analytics/react';
-import { useCallback, useMemo } from 'react';
-
-import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
-import { getAgentStoreState } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
-import { fileChatSelectors, useFileStore } from '@/store/file';
-import { getUserStoreState } from '@/store/user';
-import { SendMessageParams } from '@/types/message';
-
-export type UseSendMessageParams = Pick<
-  SendMessageParams,
-  'onlyAddUserMessage' | 'isWelcomeQuestion'
->;
-
-export const useSendMessage = () => {
-  const [sendMessage, updateInputMessage] = useChatStore((s) => [
-    s.sendMessage,
-    s.updateInputMessage,
-  ]);
-  const { analytics } = useAnalytics();
-  const checkGeminiChineseWarning = useGeminiChineseWarning();
-
-  const clearChatUploadFileList = useFileStore((s) => s.clearChatUploadFileList);
-
-  const isUploadingFiles = useFileStore(fileChatSelectors.isUploadingFiles);
-  const isSendButtonDisabledByMessage = useChatStore(chatSelectors.isSendButtonDisabledByMessage);
-
-  const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
-
-  const send = useCallback(async (params: UseSendMessageParams = {}) => {
-    const store = useChatStore.getState();
-    if (chatSelectors.isAIGenerating(store)) return;
-
-    // if uploading file or send button is disabled by message, then we should not send the message
-    const isUploadingFiles = fileChatSelectors.isUploadingFiles(useFileStore.getState());
-    const isSendButtonDisabledByMessage = chatSelectors.isSendButtonDisabledByMessage(
-      useChatStore.getState(),
-    );
-
-    const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
-    if (!canSend) return;
-
-    const fileList = fileChatSelectors.chatUploadFileList(useFileStore.getState());
-    // if there is no message and no image, then we should not send the message
-    if (!store.inputMessage && fileList.length === 0) return;
-
-    // Check for Chinese text warning with Gemini model
-    const agentStore = getAgentStoreState();
-    const currentModel = agentSelectors.currentAgentModel(agentStore);
-    const shouldContinue = await checkGeminiChineseWarning({
-      model: currentModel,
-      prompt: store.inputMessage,
-      scenario: 'chat',
-    });
-
-    if (!shouldContinue) return;
-
-    sendMessage({
-      files: fileList,
-      message: store.inputMessage,
-      ...params,
-    });
-
-    updateInputMessage('');
-    clearChatUploadFileList();
-
-    // 获取分析数据
-    const userStore = getUserStoreState();
-
-    // 直接使用现有数据结构判断消息类型
-    const hasImages = fileList.some((file) => file.file?.type?.startsWith('image'));
-    const messageType = fileList.length === 0 ? 'text' : hasImages ? 'image' : 'file';
-
-    analytics?.track({
-      name: 'send_message',
-      properties: {
-        chat_id: store.activeId || 'unknown',
-        current_topic: topicSelectors.currentActiveTopic(store)?.title || null,
-        has_attachments: fileList.length > 0,
-        history_message_count: chatSelectors.activeBaseChats(store).length,
-        message: store.inputMessage,
-        message_length: store.inputMessage.length,
-        message_type: messageType,
-        selected_model: agentSelectors.currentAgentModel(agentStore),
-        session_id: store.activeId || 'inbox', // 当前活跃的会话ID
-        user_id: userStore.user?.id || 'anonymous',
-      },
-    });
-    // const hasSystemRole = agentSelectors.hasSystemRole(useAgentStore.getState());
-    // const agentSetting = useAgentStore.getState().agentSettingInstance;
-
-    // // if there is a system role, then we need to use agent setting instance to autocomplete agent meta
-    // if (hasSystemRole && !!agentSetting) {
-    //   agentSetting.autocompleteAllMeta();
-    // }
-  }, []);
-
-  return useMemo(() => ({ canSend, send }), [canSend]);
-};

package/src/features/Portal/Thread/Chat/ChatInput/Footer.tsx

@@ -1,90 +0,0 @@
-import { Button } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import StopLoadingIcon from '@/components/StopLoading';
-import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
-
-import { useSendThreadMessage } from './useSend';
-
-const useStyles = createStyles(({ css, prefixCls, token }) => {
-  return {
-    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 {
-  onExpandChange: (expand: boolean) => void;
-}
-
-const Footer = memo<FooterProps>(({ onExpandChange }) => {
-  const { t } = useTranslation('chat');
-
-  const { styles } = useStyles();
-
-  const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
-    threadSelectors.isThreadAIGenerating(s),
-    s.stopGenerateMessage,
-  ]);
-
-  const { send: sendMessage, canSend } = useSendThreadMessage();
-
-  return (
-    <Flexbox
-      align={'end'}
-      className={styles.overrideAntdIcon}
-      distribution={'space-between'}
-      flex={'none'}
-      gap={8}
-      horizontal
-      paddingInline={16}
-    >
-      <div />
-      {isAIGenerating ? (
-        <Button
-          className={styles.loadingButton}
-          icon={<StopLoadingIcon />}
-          onClick={stopGenerateMessage}
-        >
-          {t('input.stop')}
-        </Button>
-      ) : (
-        <Button
-          disabled={!canSend}
-          loading={!canSend}
-          onClick={() => {
-            sendMessage();
-            onExpandChange?.(false);
-          }}
-          type={'primary'}
-        >
-          {t('input.send')}
-        </Button>
-      )}
-    </Flexbox>
-  );
-});
-
-Footer.displayName = 'Footer';
-
-export default Footer;

package/src/features/Portal/Thread/Chat/ChatInput/TextArea.tsx

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

package/src/libs/trpc/client/types.ts

@@ -1,18 +0,0 @@
-export type ErrorResponse = ErrorItem[];
-
-export interface ErrorItem {
-  error: {
-    json: {
-      code: number;
-      data: Data;
-      message: string;
-    };
-  };
-}
-
-export interface Data {
-  code: string;
-  httpStatus: number;
-  path: string;
-  stack: string;
-}