ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-15 18:30:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

Fix markdown mention chips

Browse source 
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-21 14:48:10 -05:00
parent cd7c6ee751
commit 8232456ce8
14 changed files with 527 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

93
ui/src/components/AgentIconPicker.tsx
View file

@ -1,46 +1,5 @@
import { useState, useMemo } from "react";
import {
Bot,
Cpu,
Brain,
Zap,
Rocket,
Code,
Terminal,
Shield,
Eye,
Search,
Wrench,
Hammer,
Lightbulb,
Sparkles,
Star,
Heart,
Flame,
Bug,
Cog,
Database,
Globe,
Lock,
Mail,
MessageSquare,
FileCode,
GitBranch,
Package,
Puzzle,
Target,
Wand2,
Atom,
CircuitBoard,
Radar,
Swords,
Telescope,
Microscope,
Crown,
Gem,
Hexagon,
Pentagon,
Fingerprint,
type LucideIcon,
} from "lucide-react";
import { AGENT_ICON_NAMES, type AgentIconName } from "@paperclipai/shared";
@ -51,60 +10,10 @@ import {
} from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
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,
};
import { AGENT_ICONS, getAgentIcon } from "../lib/agent-icons";
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];
}
interface AgentIconProps {
icon: string | null | undefined;
className?: string;

5
ui/src/components/CommentThread.tsx
View file

@ -311,8 +311,11 @@ export function CommentThread({
return Array.from(agentMap.values())
.filter((a) => a.status !== "terminated")
.map((a) => ({
id: a.id,
id: `agent:${a.id}`,
name: a.name,
kind: "agent",
agentId: a.id,
agentIcon: a.icon,
}));
}, [agentMap, providedMentions]);

18
ui/src/components/MarkdownBody.test.tsx
View file

@ -2,6 +2,7 @@
import { describe, expect, it } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";
import { buildAgentMentionHref, buildProjectMentionHref } from "@paperclipai/shared";
import { ThemeProvider } from "../context/ThemeContext";
import { MarkdownBody } from "./MarkdownBody";
@ -28,4 +29,21 @@ describe("MarkdownBody", () => {
expect(html).toContain('src="/resolved/images/org-chart.png"');
expect(html).toContain('alt="Org chart"');
});
it("renders agent and project mentions as chips", () => {
const html = renderToStaticMarkup(
<ThemeProvider>
<MarkdownBody>
{`[@CodexCoder](${buildAgentMentionHref("agent-123", "code")}) [@Paperclip App](${buildProjectMentionHref("project-456", "#336699")})`}
</MarkdownBody>
</ThemeProvider>,
);
expect(html).toContain('href="/agents/agent-123"');
expect(html).toContain('data-mention-kind="agent"');
expect(html).toContain("--paperclip-mention-icon-mask");
expect(html).toContain('href="/projects/project-456"');
expect(html).toContain('data-mention-kind="project"');
expect(html).toContain("--paperclip-mention-project-color:#336699");
});
});

48
ui/src/components/MarkdownBody.tsx
View file

@ -1,9 +1,9 @@
import { isValidElement, useEffect, useId, useState, type CSSProperties, type ReactNode } from "react";
import { isValidElement, useEffect, useId, useState, type ReactNode } from "react";
import Markdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import { parseProjectMentionHref } from "@paperclipai/shared";
import { cn } from "../lib/utils";
import { useTheme } from "../context/ThemeContext";
import { mentionChipInlineStyle, parseMentionChipHref } from "../lib/mention-chips";
interface MarkdownBodyProps {
children: string;
@ -36,29 +36,6 @@ function extractMermaidSource(children: ReactNode): string | null {
return flattenText(childProps.children).replace(/\n$/, "");
}
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 mentionChipStyle(color: string | null): CSSProperties | undefined {
if (!color) return undefined;
const rgb = hexToRgb(color);
if (!rgb) return undefined;
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 MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: boolean }) {
const renderId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
const [svg, setSvg] = useState<string | null>(null);
@ -125,16 +102,23 @@ export function MarkdownBody({ children, className, resolveImageSrc }: MarkdownB
return <pre {...preProps}>{preChildren}</pre>;
},
a: ({ href, children: linkChildren }) => {
const parsed = href ? parseProjectMentionHref(href) : null;
const parsed = href ? parseMentionChipHref(href) : null;
if (parsed) {
const label = linkChildren;
const targetHref = parsed.kind === "project"
? `/projects/${parsed.projectId}`
: `/agents/${parsed.agentId}`;
return (
<a
href={`/projects/${parsed.projectId}`}
className="paperclip-project-mention-chip"
style={mentionChipStyle(parsed.color)}
href={targetHref}
className={cn(
"paperclip-mention-chip",
`paperclip-mention-chip--${parsed.kind}`,
parsed.kind === "project" && "paperclip-project-mention-chip",
)}
data-mention-kind={parsed.kind}
style={mentionChipInlineStyle(parsed)}
>
{label}
{linkChildren}
</a>
);
}
@ -160,7 +144,7 @@ export function MarkdownBody({ children, className, resolveImageSrc }: MarkdownB
className,
)}
>
<Markdown remarkPlugins={[remarkGfm]} components={components}>
<Markdown remarkPlugins={[remarkGfm]} components={components} urlTransform={(url) => url}>
{children}
</Markdown>
</div>

228
ui/src/components/MarkdownEditor.tsx
View file

@ -6,7 +6,6 @@ import {
useMemo,
useRef,
useState,
type CSSProperties,
type DragEvent,
} from "react";
import {
@ -27,7 +26,9 @@ import {
thematicBreakPlugin,
type RealmPlugin,
} from "@mdxeditor/editor";
import { buildProjectMentionHref, parseProjectMentionHref } from "@paperclipai/shared";
import { buildAgentMentionHref, buildProjectMentionHref } from "@paperclipai/shared";
import { AgentIcon } from "./AgentIconPicker";
import { applyMentionChipDecoration, clearMentionChipDecoration, parseMentionChipHref } from "../lib/mention-chips";
import { cn } from "../lib/utils";
/* ---- Mention types ---- */
@ -36,6 +37,8 @@ export interface MentionOption {
id: string;
name: string;
kind?: "agent" | "project";
agentId?: string;
agentIcon?: string | null;
projectId?: string;
projectColor?: string | null;
}
@ -154,7 +157,8 @@ function mentionMarkdown(option: MentionOption): string {
if (option.kind === "project" && option.projectId) {
return `[@${option.name}](${buildProjectMentionHref(option.projectId, option.projectColor ?? null)}) `;
}
return `@${option.name} `;
const agentId = option.agentId ?? option.id.replace(/^agent:/, "");
return `[@${option.name}](${buildAgentMentionHref(agentId, option.agentIcon ?? null)}) `;
}
/** Replace `@<query>` in the markdown string with the selected mention token. */
@ -166,31 +170,6 @@ function applyMention(markdown: string, query: string, option: MentionOption): s
return markdown.slice(0, idx) + replacement + markdown.slice(idx + search.length);
}
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
const trimmed = hex.trim();
const match = /^#([0-9a-f]{6})$/i.exec(trimmed);
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 mentionChipStyle(color: string | null): CSSProperties | undefined {
if (!color) return undefined;
const rgb = hexToRgb(color);
if (!rgb) return undefined;
const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
const textColor = luminance > 0.55 ? "#111827" : "#f8fafc";
return {
borderColor: color,
backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.22)`,
color: textColor,
};
}
/* ---- Component ---- */
export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(function MarkdownEditor({
@ -221,11 +200,15 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
const mentionStateRef = useRef<MentionState | null>(null);
const [mentionIndex, setMentionIndex] = useState(0);
const mentionActive = mentionState !== null && mentions && mentions.length > 0;
const projectColorById = useMemo(() => {
const map = new Map<string, string | null>();
const mentionOptionByKey = useMemo(() => {
const map = new Map<string, MentionOption>();
for (const mention of mentions ?? []) {
if (mention.kind === "agent") {
const agentId = mention.agentId ?? mention.id.replace(/^agent:/, "");
map.set(`agent:${agentId}`, mention);
}
if (mention.kind === "project" && mention.projectId) {
map.set(mention.projectId, mention.projectColor ?? null);
map.set(`project:${mention.projectId}`, mention);
}
}
return map;
@ -315,31 +298,28 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
const links = editable.querySelectorAll("a");
for (const node of links) {
const link = node as HTMLAnchorElement;
const parsed = parseProjectMentionHref(link.getAttribute("href") ?? "");
const parsed = parseMentionChipHref(link.getAttribute("href") ?? "");
if (!parsed) {
if (link.dataset.projectMention === "true") {
link.dataset.projectMention = "false";
link.classList.remove("paperclip-project-mention-chip");
link.removeAttribute("contenteditable");
link.style.removeProperty("border-color");
link.style.removeProperty("background-color");
link.style.removeProperty("color");
}
clearMentionChipDecoration(link);
continue;
}
const color = parsed.color ?? projectColorById.get(parsed.projectId) ?? null;
link.dataset.projectMention = "true";
link.classList.add("paperclip-project-mention-chip");
link.setAttribute("contenteditable", "false");
const style = mentionChipStyle(color);
if (style) {
link.style.borderColor = style.borderColor ?? "";
link.style.backgroundColor = style.backgroundColor ?? "";
link.style.color = style.color ?? "";
if (parsed.kind === "project") {
const option = mentionOptionByKey.get(`project:${parsed.projectId}`);
applyMentionChipDecoration(link, {
...parsed,
color: parsed.color ?? option?.projectColor ?? null,
});
continue;
}
const option = mentionOptionByKey.get(`agent:${parsed.agentId}`);
applyMentionChipDecoration(link, {
...parsed,
icon: parsed.icon ?? option?.agentIcon ?? null,
});
}
}, [projectColorById]);
}, [mentionOptionByKey]);
// Mention detection: listen for selection changes and input events
const checkMention = useCallback(() => {
@ -395,94 +375,67 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
// update state between the last render and this callback firing).
const state = mentionStateRef.current;
if (!state) return;
if (option.kind === "project" && option.projectId) {
const current = latestValueRef.current;
const next = applyMention(current, state.query, option);
if (next !== current) {
latestValueRef.current = next;
ref.current?.setMarkdown(next);
onChange(next);
}
requestAnimationFrame(() => {
ref.current?.focus(undefined, { defaultSelection: "rootEnd" });
decorateProjectMentions();
});
mentionStateRef.current = null;
setMentionState(null);
return;
}
const replacement = mentionMarkdown(option);
// Replace @query directly via DOM selection so the cursor naturally
// lands after the inserted text. Lexical picks up the change through
// its normal input-event handling.
const sel = window.getSelection();
if (sel && state.textNode.isConnected) {
const range = document.createRange();
range.setStart(state.textNode, state.atPos);
range.setEnd(state.textNode, state.endPos);
sel.removeAllRanges();
sel.addRange(range);
document.execCommand("insertText", false, replacement);
// After Lexical reconciles the DOM, the cursor position set by
// execCommand may be lost. Explicitly reposition it after the
// inserted mention text.
const cursorTarget = state.atPos + replacement.length;
requestAnimationFrame(() => {
const newSel = window.getSelection();
if (!newSel) return;
// Try the original text node first (it may still be valid)
if (state.textNode.isConnected) {
const len = state.textNode.textContent?.length ?? 0;
if (cursorTarget <= len) {
const r = document.createRange();
r.setStart(state.textNode, cursorTarget);
r.collapse(true);
newSel.removeAllRanges();
newSel.addRange(r);
return;
}
}
// Fallback: search for the replacement in text nodes
const editable = containerRef.current?.querySelector('[contenteditable="true"]');
if (!editable) return;
const walker = document.createTreeWalker(editable, NodeFilter.SHOW_TEXT);
let node: Text | null;
while ((node = walker.nextNode() as Text | null)) {
const text = node.textContent ?? "";
const idx = text.indexOf(replacement);
if (idx !== -1) {
const pos = idx + replacement.length;
if (pos <= text.length) {
const r = document.createRange();
r.setStart(node, pos);
r.collapse(true);
newSel.removeAllRanges();
newSel.addRange(r);
return;
}
}
}
});
} else {
// Fallback: full markdown replacement when DOM node is stale
const current = latestValueRef.current;
const next = applyMention(current, state.query, option);
if (next !== current) {
latestValueRef.current = next;
ref.current?.setMarkdown(next);
onChange(next);
}
requestAnimationFrame(() => {
ref.current?.focus(undefined, { defaultSelection: "rootEnd" });
});
const current = latestValueRef.current;
const next = applyMention(current, state.query, option);
if (next !== current) {
latestValueRef.current = next;
ref.current?.setMarkdown(next);
onChange(next);
}
requestAnimationFrame(() => {
decorateProjectMentions();
requestAnimationFrame(() => {
const editable = containerRef.current?.querySelector('[contenteditable="true"]');
if (!(editable instanceof HTMLElement)) return;
decorateProjectMentions();
editable.focus();
const mentionHref = option.kind === "project" && option.projectId
? buildProjectMentionHref(option.projectId, option.projectColor ?? null)
: buildAgentMentionHref(
option.agentId ?? option.id.replace(/^agent:/, ""),
option.agentIcon ?? null,
);
const matchingMentions = Array.from(editable.querySelectorAll("a"))
.filter((node): node is HTMLAnchorElement => node instanceof HTMLAnchorElement)
.filter((link) => {
const href = link.getAttribute("href") ?? "";
return href === mentionHref && link.textContent === `@${option.name}`;
});
const containerRect = containerRef.current?.getBoundingClientRect();
const target = matchingMentions.sort((a, b) => {
const rectA = a.getBoundingClientRect();
const rectB = b.getBoundingClientRect();
const leftA = containerRect ? rectA.left - containerRect.left : rectA.left;
const topA = containerRect ? rectA.top - containerRect.top : rectA.top;
const leftB = containerRect ? rectB.left - containerRect.left : rectB.left;
const topB = containerRect ? rectB.top - containerRect.top : rectB.top;
const distA = Math.hypot(leftA - state.left, topA - state.top);
const distB = Math.hypot(leftB - state.left, topB - state.top);
return distA - distB;
})[0] ?? null;
if (!target) return;
const selection = window.getSelection();
if (!selection) return;
const range = document.createRange();
const nextSibling = target.nextSibling;
if (nextSibling?.nodeType === Node.TEXT_NODE) {
const text = nextSibling.textContent ?? "";
if (text.startsWith(" ")) {
range.setStart(nextSibling, 1);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
return;
}
}
range.setStartAfter(target);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
});
});
mentionStateRef.current = null;
@ -616,7 +569,10 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
style={{ backgroundColor: option.projectColor ?? "#64748b" }}
/>
) : (
<span className="text-muted-foreground">@</span>
<AgentIcon
icon={option.agentIcon}
className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
/>
)}
<span>{option.name}</span>
{option.kind === "project" && option.projectId && (

2
ui/src/components/NewIssueDialog.tsx
View file

@ -376,6 +376,8 @@ export function NewIssueDialog() {
id: `agent:${agent.id}`,
name: agent.name,
kind: "agent",
agentId: agent.id,
agentIcon: agent.icon,
});
}
for (const project of orderedProjects) {