diff --git a/client/web/plugins/com.msgbyte.bbcode/src/index.tsx b/client/web/plugins/com.msgbyte.bbcode/src/index.tsx
index 39447a21..9fefff9d 100644
--- a/client/web/plugins/com.msgbyte.bbcode/src/index.tsx
+++ b/client/web/plugins/com.msgbyte.bbcode/src/index.tsx
@@ -36,7 +36,7 @@ regMessageTextDecorators(() => ({
 
     return `[${h}]${plain}[/card]`;
   },
-  mention: (userId, userName) => `[at=${userId}]${userName}[/at]`,
+  mention: (userId, userName) => `[at=${userId} origin="${userName}"][/at]`, // keep empty content to auto generate with context, useful for friend nickname. NOTE: `origin` is not meaningless just for react-mention to locate text.
   emoji: (emojiCode) => `[emoji]${stripColons(emojiCode)}[/emoji]`,
   serialize: (plain: string) => (serialize ? serialize(plain) : plain),
 }));
diff --git a/client/web/src/components/Panel/group/TextPanel.tsx b/client/web/src/components/Panel/group/TextPanel.tsx
index af7fdc2d..3b1230d8 100644
--- a/client/web/src/components/Panel/group/TextPanel.tsx
+++ b/client/web/src/components/Panel/group/TextPanel.tsx
@@ -19,6 +19,7 @@ import {
   useGroupInfo,
   GroupPanelType,
 } from 'tailchat-shared';
+import { useFriendNicknameMap } from 'tailchat-shared/redux/hooks/useFriendNickname';
 import { MembersPanel } from './MembersPanel';
 import { GroupPanelContainer } from './shared/GroupPanelContainer';
 
@@ -80,6 +81,7 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
     const groupMembers = useGroupMemberInfos(groupId);
     const panelInfo = useGroupPanelInfo(groupId, panelId);
     const { disabled, placeholder } = useChatInputInfo(groupId);
+    const friendNicknameMap = useFriendNicknameMap();
 
     if (!group) {
       return null;
@@ -134,7 +136,9 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
         <ChatInputMentionsContextProvider
           users={groupMembers.map((m) => ({
             id: m._id,
-            display: m.nickname,
+            display: friendNicknameMap[m._id]
+              ? friendNicknameMap[m._id]
+              : m.nickname,
           }))}
           panels={group.panels
             .filter((p) => p.type !== GroupPanelType.GROUP)