tbenandClaude Opus 5.5
bea656ade8
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]>
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
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)}
|
|
/>
|
|
);
|
|
}
|