From c90ba431e861ff9b4ee513fb0a2b87d1e89c41e4 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Fri, 20 Mar 2026 21:25:45 +0100
Subject: [PATCH] fix: resolve mentions in reply previews to display usernames

Reply preview was rendering raw <@userId> tokens as plain text instead
of resolving them to MentionBadge components with proper usernames.
---
 packages/web/src/components/chat/Message.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index e3c1003b..237cdac1 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import type { MessageWithUser } from '@backspace/shared';
 import { MarkdownRenderer } from './MarkdownRenderer';
+import { MentionBadge } from './MentionBadge';
 import { Avatar } from '../ui/Avatar';
 import { useContextMenu } from '../../hooks/useContextMenu';
 import type { ContextMenuItem } from '../../stores/contextMenuStore';
@@ -40,6 +41,16 @@ function formatHoverTime(timestamp: number): string {
   return new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 }
 
+/** Lightweight inline renderer that resolves <@userId> mentions to MentionBadge components. */
+function renderInlineWithMentions(content: string): React.ReactNode {
+  const parts = content.split(/(<@[a-zA-Z0-9_-]+>)/g);
+  return parts.map((part, i) => {
+    const match = part.match(/^<@([a-zA-Z0-9_-]+)>$/);
+    if (match) return <MentionBadge key={i} userId={match[1]!} />;
+    return part;
+  });
+}
+
 const GIF_URL_REGEX = /^https:\/\/(?:media\.tenor\.com|static\.klipy\.com)\/.+$/;
 
 function isGifOnlyMessage(content: string | null): boolean {
@@ -285,7 +296,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
                 style={replyRoleColor(message.replyTo)}
               />
               <span className="text-[14px] text-txt-message truncate max-w-[400px] hover:text-txt-primary">
-                {message.replyTo.content}
+                {message.replyTo.content ? renderInlineWithMentions(message.replyTo.content) : ''}
               </span>
             </div>
           );