From 7b176141be79a4bd223b9900161a7b96f1fca8b2 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 16 May 2023 11:41:03 +0800
Subject: [PATCH] feat: add multi line support for chatbox

---
 .../src/components/ChatBox/ChatInputBox/input.less |  2 +-
 .../src/components/ChatBox/ChatInputBox/input.tsx  | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/web/src/components/ChatBox/ChatInputBox/input.less b/client/web/src/components/ChatBox/ChatInputBox/input.less
index a86ce034..6b2542e1 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/input.less
+++ b/client/web/src/components/ChatBox/ChatInputBox/input.less
@@ -1,5 +1,5 @@
 .chatbox-mention-input {
-  @apply shadow-none border-0 px-4 py-2;
+  @apply shadow-none border-0 px-4 py-2 relative;
 
   &__control {
     @apply relative;
diff --git a/client/web/src/components/ChatBox/ChatInputBox/input.tsx b/client/web/src/components/ChatBox/ChatInputBox/input.tsx
index ca6d9491..771081d3 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/input.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/input.tsx
@@ -8,6 +8,18 @@ import { useChatInputMentionsContext } from './context';
 import { MentionCommandItem } from './MentionCommandItem';
 import './input.less';
 
+const defaultChatInputBoxInputStyle = {
+  input: {
+    overflow: 'auto',
+    maxHeight: 70,
+  },
+  highlighter: {
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    maxHeight: 70,
+  },
+};
+
 interface ChatInputBoxInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
@@ -28,7 +40,7 @@ export const ChatInputBoxInput: React.FC<ChatInputBoxInputProps> = React.memo(
         className="chatbox-mention-input"
         placeholder={placeholder ?? t('输入一些什么')}
         disabled={disabled}
-        singleLine={true}
+        style={defaultChatInputBoxInputStyle}
         maxLength={1000}
         value={props.value}
         onChange={(e, newValue, _, mentions) =>