refactor(web): 发送消息时重新聚焦

shared/redux/hooks/useConverseMessage.ts

@@ -23,6 +23,7 @@ export function useConverseMessage(context: ConverseContext) {
   const dispatch = useAppDispatch();
   const messages = converse?.messages ?? [];
 
+  // NOTICE: 该hook只会在第一次执行
   const { loading, error } = useAsync(async () => {
     if (!converse) {
       // 如果是一个新会话(或者当前会话列表中没有)
@@ -53,7 +54,7 @@ export function useConverseMessage(context: ConverseContext) {
         })
       );
     }
-  }, [converse, converseId, isGroup]);
+  }, []);
 
   const handleSendMessage = useCallback(async (payload: SendMessagePayload) => {
     // TODO: 增加临时消息, 对网络环境不佳的状态进行优化

web/package.json

@@ -16,6 +16,7 @@
     "@loadable/component": "^5.15.0",
     "antd": "^4.16.6",
     "clsx": "^1.1.1",
+    "is-hotkey": "^0.2.0",
     "jwt-decode": "^3.1.2",
     "p-min-delay": "^4.0.0",
     "react": "^17.0.2",
@@ -35,6 +36,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/copy-webpack-plugin": "^8.0.0",
+    "@types/is-hotkey": "^0.1.3",
     "@types/mini-css-extract-plugin": "^1.4.3",
     "@types/node": "^15.12.5",
     "@types/react": "^17.0.11",

web/src/components/ChatBox/ChatInputBox/index.tsx

@@ -1,16 +1,38 @@
+import { isEnterHotkey } from '@/utils/hot-key';
 import { Input } from 'antd';
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string) => void;
 }
 export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
+  const inputRef = useRef<Input>(null);
+  const [message, setMessage] = useState('');
+  const handleSendMsg = useCallback(() => {
+    props.onSendMsg(message);
+    setMessage('');
+    inputRef.current?.focus();
+  }, [message]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (isEnterHotkey(e.nativeEvent)) {
+        e.preventDefault();
+        handleSendMsg();
+      }
+    },
+    [handleSendMsg]
+  );
+
   return (
     <div className="px-4 pb-2">
       <Input
+        ref={inputRef}
         className="outline-none shadow-none border-0 bg-gray-600 py-2.5 px-4 rounded-md"
         placeholder="输入一些什么"
-        onPressEnter={(e) => props.onSendMsg(e.currentTarget.value)}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={handleKeyDown}
       />
     </div>
   );

web/src/utils/hot-key.ts

@@ -0,0 +1,3 @@
+import { isHotkey } from 'is-hotkey';
+
+export const isEnterHotkey = isHotkey('enter');

yarn.lock

@@ -1045,6 +1045,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/is-hotkey@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@types/is-hotkey/-/is-hotkey-0.1.3.tgz#1e86be048d3af160e8e676d5cd463f6f7061589a"
+  integrity sha512-Hz+eHHpMWLBX1CpDXSuQre9nYXN2e2VGVHvkkldxDzo9eFtRpHm5iOlJlZvnNGvele5584cUSkRnFRQb+Wcu0w==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -4930,6 +4935,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hotkey@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-hotkey/-/is-hotkey-0.2.0.tgz#1835a68171a91e5c9460869d96336947c8340cef"
+  integrity sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==
+
 is-negated-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"