Fix markdown mention chips

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/lib/agent-icons.ts

@@ -0,0 +1,98 @@
+import {
+  Atom,
+  Bot,
+  Brain,
+  Bug,
+  CircuitBoard,
+  Code,
+  Cog,
+  Cpu,
+  Crown,
+  Database,
+  Eye,
+  FileCode,
+  Fingerprint,
+  Flame,
+  Gem,
+  GitBranch,
+  Globe,
+  Hammer,
+  Heart,
+  Hexagon,
+  Lightbulb,
+  Lock,
+  Mail,
+  MessageSquare,
+  Microscope,
+  Package,
+  Pentagon,
+  Puzzle,
+  Radar,
+  Rocket,
+  Search,
+  Shield,
+  Sparkles,
+  Star,
+  Swords,
+  Target,
+  Telescope,
+  Terminal,
+  Wand2,
+  Wrench,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+import { AGENT_ICON_NAMES, type AgentIconName } from "@paperclipai/shared";
+
+export const AGENT_ICONS: Record<AgentIconName, LucideIcon> = {
+  bot: Bot,
+  cpu: Cpu,
+  brain: Brain,
+  zap: Zap,
+  rocket: Rocket,
+  code: Code,
+  terminal: Terminal,
+  shield: Shield,
+  eye: Eye,
+  search: Search,
+  wrench: Wrench,
+  hammer: Hammer,
+  lightbulb: Lightbulb,
+  sparkles: Sparkles,
+  star: Star,
+  heart: Heart,
+  flame: Flame,
+  bug: Bug,
+  cog: Cog,
+  database: Database,
+  globe: Globe,
+  lock: Lock,
+  mail: Mail,
+  "message-square": MessageSquare,
+  "file-code": FileCode,
+  "git-branch": GitBranch,
+  package: Package,
+  puzzle: Puzzle,
+  target: Target,
+  wand: Wand2,
+  atom: Atom,
+  "circuit-board": CircuitBoard,
+  radar: Radar,
+  swords: Swords,
+  telescope: Telescope,
+  microscope: Microscope,
+  crown: Crown,
+  gem: Gem,
+  hexagon: Hexagon,
+  pentagon: Pentagon,
+  fingerprint: Fingerprint,
+};
+
+const DEFAULT_ICON: AgentIconName = "bot";
+
+export function getAgentIcon(iconName: string | null | undefined): LucideIcon {
+  if (iconName && AGENT_ICON_NAMES.includes(iconName as AgentIconName)) {
+    return AGENT_ICONS[iconName as AgentIconName];
+  }
+  return AGENT_ICONS[DEFAULT_ICON];
+}

ui/src/lib/mention-chips.ts

@@ -0,0 +1,160 @@
+import type { CSSProperties } from "react";
+import { parseAgentMentionHref, parseProjectMentionHref } from "@paperclipai/shared";
+import { getAgentIcon } from "./agent-icons";
+
+export type ParsedMentionChip =
+  | {
+      kind: "agent";
+      agentId: string;
+      icon: string | null;
+    }
+  | {
+      kind: "project";
+      projectId: string;
+      color: string | null;
+    };
+
+const iconMaskCache = new Map<string, string>();
+
+export function parseMentionChipHref(href: string): ParsedMentionChip | null {
+  const agent = parseAgentMentionHref(href);
+  if (agent) {
+    return {
+      kind: "agent",
+      agentId: agent.agentId,
+      icon: agent.icon,
+    };
+  }
+
+  const project = parseProjectMentionHref(href);
+  if (project) {
+    return {
+      kind: "project",
+      projectId: project.projectId,
+      color: project.color,
+    };
+  }
+
+  return null;
+}
+
+export function mentionChipInlineStyle(mention: ParsedMentionChip): CSSProperties | undefined {
+  const style: CSSProperties & Record<string, string> = {};
+
+  if (mention.kind === "project" && mention.color) {
+    const projectStyle = projectMentionColors(mention.color);
+    Object.assign(style, projectStyle);
+    style["--paperclip-mention-project-color"] = mention.color;
+  }
+
+  if (mention.kind === "agent") {
+    const iconMask = buildAgentIconMask(mention.icon);
+    if (iconMask) {
+      style["--paperclip-mention-icon-mask"] = iconMask;
+    }
+  }
+
+  return Object.keys(style).length > 0 ? (style as CSSProperties) : undefined;
+}
+
+export function applyMentionChipDecoration(element: HTMLElement, mention: ParsedMentionChip) {
+  clearMentionChipDecoration(element);
+  element.dataset.mentionKind = mention.kind;
+  element.setAttribute("contenteditable", "false");
+  element.classList.add("paperclip-mention-chip", `paperclip-mention-chip--${mention.kind}`);
+  if (mention.kind === "project") {
+    element.classList.add("paperclip-project-mention-chip");
+  }
+
+  const style = mentionChipInlineStyle(mention);
+  if (!style) return;
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value === "string") {
+      if (key.startsWith("--")) {
+        element.style.setProperty(key, value);
+      } else {
+        (element.style as CSSStyleDeclaration & Record<string, string>)[key] = value;
+      }
+    }
+  }
+}
+
+export function clearMentionChipDecoration(element: HTMLElement) {
+  delete element.dataset.mentionKind;
+  element.classList.remove(
+    "paperclip-mention-chip",
+    "paperclip-mention-chip--agent",
+    "paperclip-mention-chip--project",
+    "paperclip-project-mention-chip",
+  );
+  element.removeAttribute("contenteditable");
+  element.style.removeProperty("border-color");
+  element.style.removeProperty("background-color");
+  element.style.removeProperty("color");
+  element.style.removeProperty("--paperclip-mention-project-color");
+  element.style.removeProperty("--paperclip-mention-icon-mask");
+}
+
+function projectMentionColors(color: string): Pick<CSSProperties, "borderColor" | "backgroundColor" | "color"> {
+  const rgb = hexToRgb(color);
+  if (!rgb) return {};
+  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+  return {
+    borderColor: color,
+    backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.22)`,
+    color: luminance > 0.55 ? "#111827" : "#f8fafc",
+  };
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return null;
+  const value = match[1];
+  return {
+    r: parseInt(value.slice(0, 2), 16),
+    g: parseInt(value.slice(2, 4), 16),
+    b: parseInt(value.slice(4, 6), 16),
+  };
+}
+
+function buildAgentIconMask(iconName: string | null): string | null {
+  const cacheKey = iconName ?? "__default__";
+  const cached = iconMaskCache.get(cacheKey);
+  if (cached) return cached;
+
+  const Icon = getAgentIcon(iconName);
+  const rendered = (
+    Icon as unknown as {
+      render: (
+        props: Record<string, unknown>,
+        ref: unknown,
+      ) => { props?: { iconNode?: Array<[string, Record<string, string>]> } };
+    }
+  ).render({ size: 12, strokeWidth: 2 }, null);
+  const iconNode = rendered?.props?.iconNode;
+  if (!Array.isArray(iconNode) || iconNode.length === 0) return null;
+
+  const body = iconNode.map(([tag, attrs]) => {
+    const attrString = Object.entries(attrs)
+      .filter(([key]) => key !== "key")
+      .map(([key, value]) => `${key}="${escapeAttribute(String(value))}"`)
+      .join(" ");
+    return `<${tag}${attrString ? ` ${attrString}` : ""}></${tag}>`;
+  }).join("");
+
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ` +
+    `fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" ` +
+    `stroke-linejoin="round">${body}</svg>`;
+  const url = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+  iconMaskCache.set(cacheKey, url);
+  return url;
+}
+
+function escapeAttribute(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}