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}`);
@@ -151,12 +158,19 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
             ),
           ]);
         }}
+      >
+        <ChatInputMentionsContextProvider
+          users={userInfos.map((m) => ({
+            id: m._id,
+            display: m.nickname,
+          }))}
         >
           <ChatBox
             converseId={converseId}
             converseTitle={converseHeader}
             isGroup={false}
           />
+        </ChatInputMentionsContextProvider>
       </CommonPanelWrapper>
     );
   }