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]>
2026-10-27 08:11:15 +01:00
parent 51fd4d5538
commit bea656ade8
65 changed files with 1959 additions and 21 deletions
@@ -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>
+    );
+}