b9ea10c89d
- Comment display: replace <Markdown> with <RichTextEditor editable={false}>
- Link color: primary → brand (blue)
- Mention color: brand → primary + semibold
- Add MentionHoverCard component with HoverCardTrigger render={<span />}
- Markdown.tsx: sync mention style to text-primary font-semibold
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { Bot } from "lucide-react";
|
|
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";
|
|
import { ActorAvatar } from "@/components/common/actor-avatar";
|
|
import { useWorkspaceStore } from "@/features/workspace";
|
|
|
|
interface MentionHoverCardProps {
|
|
type: string;
|
|
id: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
function MentionHoverCard({ type, id, children }: MentionHoverCardProps) {
|
|
const members = useWorkspaceStore((s) => s.members);
|
|
const agents = useWorkspaceStore((s) => s.agents);
|
|
|
|
if (type === "member") {
|
|
const member = members.find((m) => m.user_id === id);
|
|
if (!member) return <>{children}</>;
|
|
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger render={<span />} className="cursor-default">
|
|
{children}
|
|
</HoverCardTrigger>
|
|
<HoverCardContent align="start" className="w-auto min-w-48 max-w-72">
|
|
<div className="flex items-center gap-2.5">
|
|
<ActorAvatar actorType="member" actorId={id} size={32} />
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium truncate">{member.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate">{member.email}</p>
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
if (type === "agent") {
|
|
const agent = agents.find((a) => a.id === id);
|
|
if (!agent) return <>{children}</>;
|
|
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger render={<span />} className="cursor-default">
|
|
{children}
|
|
</HoverCardTrigger>
|
|
<HoverCardContent align="start" className="w-auto min-w-48 max-w-72">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted">
|
|
<Bot className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium truncate">{agent.name}</p>
|
|
{agent.description && (
|
|
<p className="text-xs text-muted-foreground truncate">{agent.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
return <>{children}</>;
|
|
}
|
|
|
|
export { MentionHoverCard };
|