From 5526281a9709c6d16741b70db7fd780e636226ef Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 7 May 2022 23:54:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8F=90=E5=8F=8A?=
 =?UTF-8?q?=E7=9A=84=E5=BC=B9=E7=AA=97=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatBox/ChatInputBox/index.tsx | 26 +++++++++++--------
 .../ChatBox/ChatInputBox/input.less           |  2 +-
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/components/ChatBox/ChatInputBox/index.tsx b/web/src/components/ChatBox/ChatInputBox/index.tsx
index d1917389..06ab4c43 100644
--- a/web/src/components/ChatBox/ChatInputBox/index.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/index.tsx
@@ -13,6 +13,7 @@ import {
   useSharedEventHandler,
 } from 'tailchat-shared';
 import { ChatInputEmotion } from './Emotion';
+import _uniq from 'lodash/uniq';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string, meta?: SendMessagePayloadMeta) => void;
@@ -23,7 +24,7 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
   const [mentions, setMentions] = useState<string[]>([]);
   const handleSendMsg = useCallback(() => {
     props.onSendMsg(message, {
-      mentions,
+      mentions: _uniq(mentions), // 发送前去重
     });
     setMessage('');
     inputRef.current?.focus();
@@ -89,16 +90,19 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
     >
       <div className="px-4 py-2">
         <div className="bg-white dark:bg-gray-600 flex rounded-md items-center">
-          <ChatInputBoxInput
-            inputRef={inputRef}
-            value={message}
-            onChange={(message, mentions) => {
-              setMessage(message);
-              setMentions(mentions);
-            }}
-            onKeyDown={handleKeyDown}
-            onPaste={handlePaste}
-          />
+          {/* This w-0 is magic to ensure show mention and long text */}
+          <div className="flex-1 w-0">
+            <ChatInputBoxInput
+              inputRef={inputRef}
+              value={message}
+              onChange={(message, mentions) => {
+                setMessage(message);
+                setMentions(mentions);
+              }}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+            />
+          </div>
 
           <div className="px-2 flex space-x-1">
             <ChatInputEmotion />
diff --git a/web/src/components/ChatBox/ChatInputBox/input.less b/web/src/components/ChatBox/ChatInputBox/input.less
index 8e684070..a2a415f2 100644
--- a/web/src/components/ChatBox/ChatInputBox/input.less
+++ b/web/src/components/ChatBox/ChatInputBox/input.less
@@ -1,5 +1,5 @@
 .chatbox-mention-input {
-  @apply shadow-none border-0 px-4 py-2 flex-1 overflow-x-auto;
+  @apply shadow-none border-0 px-4 py-2;
 
   &__control {
     @apply relative;