fix(session-ui): emphasize mentions and soften at prefixes (#48029)

packages/session-ui/src/components/message-part.css

@@ -8,6 +8,8 @@
 }
 
 [data-component="user-message"] {
+  --user-message-mention-prefix-color: var(--v2-blue-500);
+
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base);
   font-style: normal;
@@ -144,16 +146,16 @@
     padding: 8px 12px;
     border-radius: 10px;
 
-    [data-highlight="file"] {
-      color: var(--syntax-property);
+    [data-highlight="file"],
+    [data-highlight="agent"] {
+      color: inherit;
+      font-weight: 600;
       direction: ltr;
       unicode-bidi: isolate;
     }
 
-    [data-highlight="agent"] {
-      color: var(--syntax-type);
-      direction: ltr;
-      unicode-bidi: isolate;
+    [data-slot="user-message-mention-prefix"] {
+      color: var(--user-message-mention-prefix-color);
     }
 
     max-width: 100%;
@@ -1448,18 +1450,26 @@
 }
 
 :root body [data-workspace-session] [data-component="user-message"] [data-slot="user-message-text"] {
+  --user-message-mention-prefix-color: var(--v2-blue-300);
+
   background: var(--v2-background-bg-accent);
   color: var(--v2-text-text-contrast);
 }
 
-:root[data-color-scheme="light"] body [data-local-session] [data-component="user-message"]
+:root[data-color-scheme="light"]
+  body
+  [data-local-session]
+  [data-component="user-message"]
   [data-slot="user-message-text"] {
   background: var(--v2-blue-100);
   color: var(--v2-blue-700);
   border-radius: 8px;
 }
 
-:root[data-color-scheme="dark"] body [data-local-session] [data-component="user-message"]
+:root[data-color-scheme="dark"]
+  body
+  [data-local-session]
+  [data-component="user-message"]
   [data-slot="user-message-text"] {
   background: var(--v2-blue-1200);
   color: var(--v2-blue-300);

packages/session-ui/src/message/message-content.tsx

@@ -372,7 +372,18 @@ function CurrentHighlightedText(props: {
     if (last < props.text.length) result.push({ text: props.text.slice(last) })
     return result
   })
-  return <For each={segments()}>{(segment) => <span data-highlight={segment.type}>{segment.text}</span>}</For>
+  return (
+    <For each={segments()}>
+      {(segment) => (
+        <span data-highlight={segment.type}>
+          <Show when={segment.type && segment.text.startsWith("@")} fallback={segment.text}>
+            <span data-slot="user-message-mention-prefix">@</span>
+            {segment.text.slice(1)}
+          </Show>
+        </span>
+      )}
+    </For>
+  )
 }
 
 type HighlightSegment = { text: string; type?: "file" | "agent" }