feat: allow @ feature in conversation #212

client/web/src/components/ChatBox/ChatInputBox/context.tsx

@@ -25,8 +25,8 @@ export function useChatInputActionContext() {
  * Input Mentions
  */
 interface ChatInputMentionsContextProps extends PropsWithChildren {
-  users: SuggestionDataItem[];
+  users?: SuggestionDataItem[];
-  panels: SuggestionDataItem[];
+  panels?: SuggestionDataItem[];
   placeholder?: string;
   disabled?: boolean;
 }

client/web/src/components/Panel/personal/ConversePanel.tsx

@@ -6,6 +6,8 @@ import {
   t,
   useAppSelector,
   useDMConverseName,
+  useUserId,
+  useUserInfoList,
 } from 'tailchat-shared';
 import { CommonPanelWrapper } from '../common/Wrapper';
 import _compact from 'lodash/compact';
@@ -17,6 +19,7 @@ import { IconBtn } from '@/components/IconBtn';
 import { DMPluginPanelActionProps, pluginPanelActions } from '@/plugin/common';
 import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import { MessageSearchPanel } from '../common/MessageSearch';
+import { ChatInputMentionsContextProvider } from '@/components/ChatBox/ChatInputBox/context';
 
 const ConversePanelTitle: React.FC<{ converse: ChatConverseState }> =
   React.memo(({ converse }) => {
@@ -47,6 +50,10 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
     const converse = useAppSelector(
       (state) => state.chat.converses[converseId]
     );
+    const userId = useUserId();
+    const userInfos = useUserInfoList(
+      (converse?.members ?? []).filter((m) => m !== userId)
+    );
 
     const { hasOpenedPanel, openPanelWindow, closePanelWindow } =
       usePanelWindow(`/panel/personal/converse/${converseId}`);
@@ -152,11 +159,18 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
           ]);
         }}
       >
-        <ChatBox
+        <ChatInputMentionsContextProvider
-          converseId={converseId}
+          users={userInfos.map((m) => ({
-          converseTitle={converseHeader}
+            id: m._id,
-          isGroup={false}
+            display: m.nickname,
-        />
+          }))}
+        >
+          <ChatBox
+            converseId={converseId}
+            converseTitle={converseHeader}
+            isGroup={false}
+          />
+        </ChatInputMentionsContextProvider>
       </CommonPanelWrapper>
     );
   }