fix: 修复提及的弹窗无法正常显示的bug

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 />

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;