@lobehub/chat 0.117.4 → 0.117.5

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.117.5](https://github.com/lobehub/lobe-chat/compare/v0.117.4...v0.117.5)
+
+<sup>Released on **2023-12-29**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: The input box is prone to losing focus.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: The input box is prone to losing focus, closes [#834](https://github.com/lobehub/lobe-chat/issues/834) ([26a42f6](https://github.com/lobehub/lobe-chat/commit/26a42f6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.117.4](https://github.com/lobehub/lobe-chat/compare/v0.117.3...v0.117.4)
 
 <sup>Released on **2023-12-28**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.117.4",
+  "version": "0.117.5",
   "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/__tests__/useAutoFocus.test.ts

@@ -0,0 +1,85 @@
+import { act, renderHook } from '@testing-library/react';
+import { RefObject } from 'react';
+
+import { useAutoFocus } from '../useAutoFocus';
+
+enum ElType {
+  div,
+  input,
+  markdown,
+}
+
+// 模拟elementFromPoint方法
+document.elementFromPoint = function (x) {
+  if (x === ElType.div) {
+    return document.createElement('div');
+  }
+
+  if (x === ElType.input) {
+    return document.createElement('input');
+  }
+
+  if (x === ElType.markdown) {
+    const markdownEl = document.createElement('article');
+    const markdownChildEl = document.createElement('p');
+    markdownEl.appendChild(markdownChildEl);
+    return markdownChildEl;
+  }
+
+  return null;
+};
+
+describe('useAutoFocus', () => {
+  it('should focus inputRef when mouseup event happens outside of input or markdown element', () => {
+    const inputRef = { current: { focus: vi.fn() } } as RefObject<any>;
+    renderHook(() => useAutoFocus(inputRef));
+
+    // Simulate a mousedown event on an element outside of input or markdown element
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: ElType.div }));
+    });
+
+    // Simulate a mouseup event
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+    });
+
+    expect(inputRef.current?.focus).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not focus inputRef when mouseup event happens inside of input element', () => {
+    const inputRef = { current: { focus: vi.fn() } } as RefObject<any>;
+    renderHook(() => useAutoFocus(inputRef));
+
+    // Simulate a mousedown event on an input element
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: ElType.input }));
+    });
+
+    // Simulate a mouseup event
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+    });
+
+    expect(inputRef.current?.focus).not.toHaveBeenCalled();
+  });
+
+  it('should not focus inputRef when mouseup event happens inside of markdown element', () => {
+    const inputRef = { current: { focus: vi.fn() } } as RefObject<any>;
+    renderHook(() => useAutoFocus(inputRef));
+
+    // Simulate a mousedown event on an input element
+    act(() => {
+      document.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true, clientX: ElType.markdown }),
+      );
+    });
+
+    // Simulate a mouseup event
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+    });
+
+    expect(inputRef.current?.focus).not.toHaveBeenCalled();
+  });
+});

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

@@ -14,6 +14,7 @@ import { useChatInput } from '@/features/ChatInput/useChatInput';
 
 import DragUpload from './DragUpload';
 import { LocalFiles } from './LocalFiles';
+import { useAutoFocus } from './useAutoFocus';
 
 const ChatInputDesktopLayout = memo(() => {
   const { t } = useTranslation('chat');
@@ -31,6 +32,8 @@ const ChatInputDesktopLayout = memo(() => {
     canUpload,
   } = useChatInput();
 
+  useAutoFocus(ref);
+
   const handleSizeChange = useCallback(
     (_: any, size: any) => {
       if (!size) return;
@@ -79,6 +82,7 @@ const ChatInputDesktopLayout = memo(() => {
     <>
       {canUpload && <DragUpload />}
       <ChatInputArea
+        autoFocus
         bottomAddons={buttonAddons}
         expand={expand}
         heights={{

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

@@ -0,0 +1,36 @@
+import { TextAreaRef } from 'antd/es/input/TextArea';
+import { RefObject, useEffect } from 'react';
+
+export const useAutoFocus = (inputRef: RefObject<TextAreaRef>) => {
+  useEffect(() => {
+    let isInputOrMarkdown = false;
+
+    const onMousedown = (e: MouseEvent) => {
+      isInputOrMarkdown = false;
+      const element = document.elementFromPoint(e.clientX, e.clientY);
+      if (!element) return;
+      let currentElement: Element | null = element;
+      // 因为点击 Markdown 元素时，element 会是 article 标签的子元素
+      // 所以向上查找全局点击对象是否是 Markdown 或者 Input 元素
+      while (currentElement && !isInputOrMarkdown) {
+        isInputOrMarkdown = ['TEXTAREA', 'INPUT', 'ARTICLE'].includes(currentElement.tagName);
+        currentElement = currentElement.parentElement;
+      }
+    };
+
+    const onMouseup = () => {
+      // 因为有时候要复制 Markdown 里生成的内容，或者点击别的 Input
+      // 所以全局点击元素不是 Markdown 或者 Input 元素的话就聚焦
+      if (!isInputOrMarkdown) {
+        inputRef.current?.focus();
+      }
+    };
+
+    document.addEventListener('mousedown', onMousedown);
+    document.addEventListener('mouseup', onMouseup);
+    return () => {
+      document.removeEventListener('mousedown', onMousedown);
+      document.removeEventListener('mouseup', onMouseup);
+    };
+  }, []);
+};