@lobehub/chat 1.123.4 → 1.124.0

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

@@ -1,156 +0,0 @@
-import { ActionIcon, TextArea } from '@lobehub/ui';
-import { SafeArea } from '@lobehub/ui/mobile';
-import { useSize } from 'ahooks';
-import { createStyles } from 'antd-style';
-import { TextAreaRef } from 'antd/es/input/TextArea';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import { rgba } from 'polished';
-import { CSSProperties, ReactNode, forwardRef, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import InnerContainer from './Container';
-
-const useStyles = createStyles(({ css, token }) => {
-  return {
-    container: css`
-      flex: none;
-      padding-block: 12px 12px;
-      border-block-start: 1px solid ${rgba(token.colorBorder, 0.25)};
-      background: ${token.colorFillQuaternary};
-    `,
-    expand: css`
-      position: absolute;
-      height: 100%;
-    `,
-    expandButton: css`
-      position: absolute;
-      inset-inline-start: 14px;
-    `,
-    textarea: css`
-      flex: 1;
-      transition: none !important;
-    `,
-  };
-});
-
-export interface MobileChatInputAreaProps {
-  bottomAddons?: ReactNode;
-  className?: string;
-  expand?: boolean;
-  loading?: boolean;
-  onInput?: (value: string) => void;
-  onSend?: () => void;
-  safeArea?: boolean;
-  setExpand?: (expand: boolean) => void;
-  style?: CSSProperties;
-  textAreaLeftAddons?: ReactNode;
-  textAreaRightAddons?: ReactNode;
-  topAddons?: ReactNode;
-  value: string;
-}
-
-const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
-  (
-    {
-      className,
-      style,
-      topAddons,
-      textAreaLeftAddons,
-      textAreaRightAddons,
-      bottomAddons,
-      expand = false,
-      setExpand,
-      onSend,
-      onInput,
-      loading,
-      value,
-      safeArea,
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation('chat');
-    const isChineseInput = useRef(false);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const { cx, styles } = useStyles();
-    const size = useSize(containerRef);
-    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);
-    const [isFocused, setIsFocused] = useState<boolean>(false);
-
-    useEffect(() => {
-      if (!size?.height) return;
-      setShowFullscreen(size.height > 72);
-    }, [size]);
-
-    const showAddons = !expand && !isFocused;
-
-    return (
-      <Flexbox
-        className={cx(styles.container, expand && styles.expand, className)}
-        gap={12}
-        style={style}
-      >
-        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}
-        <Flexbox
-          className={cx(expand && styles.expand)}
-          ref={containerRef}
-          style={{ position: 'relative' }}
-        >
-          {showFullscreen && (
-            <ActionIcon
-              active
-              className={styles.expandButton}
-              icon={expand ? ChevronDown : ChevronUp}
-              onClick={() => setExpand?.(!expand)}
-              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}
-              style={expand ? { top: 6 } : {}}
-            />
-          )}
-          <InnerContainer
-            bottomAddons={bottomAddons}
-            expand={expand}
-            textAreaLeftAddons={textAreaLeftAddons}
-            textAreaRightAddons={textAreaRightAddons}
-            topAddons={topAddons}
-          >
-            <TextArea
-              autoSize={expand ? false : { maxRows: 6, minRows: 0 }}
-              className={styles.textarea}
-              onBlur={(e) => {
-                onInput?.(e.target.value);
-                setIsFocused(false);
-              }}
-              onChange={(e) => {
-                onInput?.(e.target.value);
-              }}
-              onCompositionEnd={() => {
-                isChineseInput.current = false;
-              }}
-              onCompositionStart={() => {
-                isChineseInput.current = true;
-              }}
-              onFocus={() => setIsFocused(true)}
-              onPressEnter={(e) => {
-                if (!loading && !isChineseInput.current && e.shiftKey) {
-                  e.preventDefault();
-                  onSend?.();
-                }
-              }}
-              placeholder={t('sendPlaceholder')}
-              ref={ref}
-              style={{ height: 36, paddingBlock: 6 }}
-              value={value}
-              variant={expand ? 'borderless' : 'filled'}
-            />
-          </InnerContainer>
-        </Flexbox>
-        {bottomAddons && (
-          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>
-        )}
-        {safeArea && !isFocused && <SafeArea position={'bottom'} />}
-      </Flexbox>
-    );
-  },
-);
-
-export default MobileChatInputArea;

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

@@ -1,33 +0,0 @@
-import { ActionIcon, type ActionIconSize, Button } from '@lobehub/ui';
-import { Loader2, SendHorizontal } from 'lucide-react';
-import { memo } from 'react';
-
-export interface MobileChatSendButtonProps {
-  disabled?: boolean;
-  loading?: boolean;
-  onSend?: () => void;
-  onStop?: () => void;
-}
-
-const MobileChatSendButton = memo<MobileChatSendButtonProps>(
-  ({ loading, onStop, onSend, disabled }) => {
-    const size: ActionIconSize = {
-      blockSize: 36,
-      size: 16,
-    };
-
-    return loading ? (
-      <ActionIcon active icon={Loader2} onClick={onStop} size={size} spin />
-    ) : (
-      <Button
-        disabled={disabled}
-        icon={SendHorizontal}
-        onClick={onSend}
-        style={{ flex: 'none' }}
-        type={'primary'}
-      />
-    );
-  },
-);
-
-export default MobileChatSendButton;

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

@@ -1,30 +0,0 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Maximize2, Minimize2 } from 'lucide-react';
-import { memo } from 'react';
-
-import ActionBar from '@/features/ChatInput/ActionBar';
-import { ActionKeys } from '@/features/ChatInput/types';
-
-interface HeaderProps {
-  expand: boolean;
-  leftActions: ActionKeys[];
-  rightActions: ActionKeys[];
-  setExpand: (expand: boolean) => void;
-}
-
-const Header = memo<HeaderProps>(({ expand, setExpand, leftActions, rightActions }) => (
-  <ActionBar
-    leftActions={leftActions}
-    rightActions={rightActions}
-    rightAreaEndRender={
-      <ActionIcon
-        icon={expand ? Minimize2 : Maximize2}
-        onClick={() => {
-          setExpand(!expand);
-        }}
-      />
-    }
-  />
-));
-
-export default Header;

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;
-}