51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { FileText } from "lucide-react";
|
|
import React from "react";
|
|
import { cn } from "../../lib/utils";
|
|
import { MessageResponse } from "../ai-elements/message";
|
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from "../ui/hover-card";
|
|
|
|
export interface HostNotesIndicatorProps {
|
|
notes?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const HostNotesIndicator: React.FC<HostNotesIndicatorProps> = ({
|
|
notes,
|
|
className,
|
|
}) => {
|
|
const trimmed = notes?.trim();
|
|
if (!trimmed) return null;
|
|
|
|
return (
|
|
<HoverCard openDelay={180} closeDelay={80}>
|
|
<HoverCardTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground",
|
|
className,
|
|
)}
|
|
aria-label="Host notes"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
>
|
|
<FileText size={12} className="text-muted-foreground" aria-hidden />
|
|
</button>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent
|
|
side="top"
|
|
align="start"
|
|
className="w-[320px] max-w-[calc(100vw-32px)] p-3"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="max-h-[240px] overflow-y-auto pr-1">
|
|
<MessageResponse className="text-xs leading-relaxed text-popover-foreground/90 [&_h1]:text-sm [&_h1]:mt-2 [&_h1]:mb-1 [&_h2]:text-sm [&_h2]:mt-2 [&_h2]:mb-1 [&_h3]:text-xs [&_h3]:mt-1.5 [&_h3]:mb-1 [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
|
|
{trimmed}
|
|
</MessageResponse>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
};
|