Add bot graphics
Bots can now show a concept as a visual: create_graphic (with update_graphic, read_graphic and list_graphics, on every run, no computer needed) stores one HTML document in bot_graphics, per user like the conversation, and the chat renders its [graphic:ID] ref as an inline card sized to fit, with a large view and a page of its own (no rail). Graphic HTML is treated as hostile: it is only served at /graphics/<id> with a CSP sandbox allowing scripts under an origin of its own and no network, loading only the vendored Chart.js and Mermaid from /graphics-lib/. The document carries the app's theme vars and scrollbars, reports its height to the thread, and a frame that navigates away is closed. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,86 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import Span from "@moduletrace/twui/layout/Span";
|
||||
import { GraphicSizeMessageType } from "@/src/dict/graphics-dict";
|
||||
import useDocumentDark from "@/src/hooks/use-document-dark";
|
||||
import graphicUrl from "@/src/utils/graphic-url";
|
||||
|
||||
type Props = {
|
||||
graphic_id: number;
|
||||
title: string;
|
||||
version?: number;
|
||||
/**
|
||||
* Grow to fit the graphic up to this height (px), then scroll inside.
|
||||
* Left out, the frame fills its container (`className` sizes it).
|
||||
*/
|
||||
max_height?: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const MinHeight = 120;
|
||||
|
||||
/**
|
||||
* A bot graphic in a sandboxed frame (`/graphics/<id>`): scripts run, but
|
||||
* under an origin of its own with no network, so it can't reach the app
|
||||
* or send anything out. A raw iframe: twui has no equivalent. In the
|
||||
* page's theme, sized to the height the graphic reports. A graphic that
|
||||
* navigates its frame away is closed, since that's never what a graphic
|
||||
* is for.
|
||||
*/
|
||||
export default function GraphicFrame({ graphic_id, title, version, max_height, className }: Props) {
|
||||
const dark = useDocumentDark();
|
||||
const frame = useRef<HTMLIFrameElement>(null);
|
||||
const loads = useRef(0);
|
||||
const [height, setHeight] = useState(MinHeight);
|
||||
const [moved, setMoved] = useState(false);
|
||||
const src = graphicUrl({ graphic_id, dark, version });
|
||||
|
||||
useEffect(() => {
|
||||
loads.current = 0;
|
||||
setMoved(false);
|
||||
}, [src]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!max_height) return;
|
||||
|
||||
const onMessage = (event: MessageEvent) => {
|
||||
if (event.source !== frame.current?.contentWindow) return;
|
||||
if (event.data?.type !== GraphicSizeMessageType) return;
|
||||
|
||||
const reported = Number(event.data.height);
|
||||
|
||||
if (Number.isFinite(reported)) setHeight(Math.min(max_height, Math.max(MinHeight, Math.ceil(reported))));
|
||||
};
|
||||
|
||||
window.addEventListener("message", onMessage);
|
||||
|
||||
return () => window.removeEventListener("message", onMessage);
|
||||
}, [max_height]);
|
||||
|
||||
if (moved) {
|
||||
return (
|
||||
<Span className="block w-full px-3 py-4 text-[13px] leading-[18px] text-ink-secondary bg-sunken">
|
||||
{`This graphic tried to open another page, so it was closed.`}
|
||||
</Span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<iframe
|
||||
key={src}
|
||||
ref={frame}
|
||||
src={src}
|
||||
title={title}
|
||||
sandbox="allow-scripts"
|
||||
referrerPolicy="no-referrer"
|
||||
loading="lazy"
|
||||
height={max_height ? height : undefined}
|
||||
onLoad={() => {
|
||||
loads.current += 1;
|
||||
|
||||
if (loads.current > 1) setMoved(true);
|
||||
}}
|
||||
className={twMerge("block w-full border-0 bg-paper", className)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import Modal from "@moduletrace/twui/elements/Modal";
|
||||
import H2 from "@moduletrace/twui/layout/H2";
|
||||
import Link from "@moduletrace/twui/layout/Link";
|
||||
import Row from "@moduletrace/twui/layout/Row";
|
||||
import Span from "@moduletrace/twui/layout/Span";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import { SquareArrowOutUpRight } from "lucide-react";
|
||||
import type { BotGraphicView } from "@/src/types";
|
||||
import { graphicPageHref } from "@/src/utils/graphic-url";
|
||||
import GraphicFrame from "./graphic-frame";
|
||||
|
||||
type Props = {
|
||||
graphic: BotGraphicView;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* A graphic large, over the page, with a link to its own page.
|
||||
*/
|
||||
export default function GraphicViewerModal({ graphic, onClose }: Props) {
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
setOpen={(next_open) => {
|
||||
if (!next_open) onClose();
|
||||
}}
|
||||
className="max-w-[95vw]! w-[1200px] h-[90vh] p-0 bg-paper flex flex-col overflow-hidden"
|
||||
>
|
||||
<Row className="w-full gap-3! flex-nowrap items-center pl-5 pr-14 py-3 border-0 border-b border-solid border-hairline">
|
||||
<Stack className="min-w-0 gap-0! items-start">
|
||||
<H2 className="text-base! leading-6! tracking-normal! font-bold text-ink truncate w-full">
|
||||
{graphic.title}
|
||||
</H2>
|
||||
<Span className="text-[13px] leading-[18px] text-ink-secondary">{`By ${graphic.bot_name}`}</Span>
|
||||
</Stack>
|
||||
<Link
|
||||
href={graphicPageHref({
|
||||
graphic_id: graphic.id,
|
||||
bot_id: graphic.bot_id,
|
||||
})}
|
||||
title="Open on its own page"
|
||||
aria-label="Open on its own page"
|
||||
className="ml-auto shrink-0 p-2 text-ink-secondary hover:text-ink rounded-default hover:bg-sunken"
|
||||
target="_blank"
|
||||
>
|
||||
<SquareArrowOutUpRight size={16} aria-hidden />
|
||||
</Link>
|
||||
</Row>
|
||||
<GraphicFrame
|
||||
graphic_id={graphic.id}
|
||||
title={graphic.title}
|
||||
version={graphic.version}
|
||||
className="grow h-full"
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user