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,33 @@
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import userAuth from "@/src/functions/backend/auth/user-auth";
+import grabBotGraphicView from "@/src/functions/backend/db/bot-graphics/grab-bot-graphic-view";
+import { AdminHomePath } from "@/src/dict/admin-sections-dict";
+
+type Params = Parameters<BunextPageServerFn<PagePropsType>>[0];
+
+/**
+ * A graphic's page: the graphic, for the user it was made for. Anyone
+ * else, or a missing graphic, lands on the bot's conversation (which
+ * leads on to the bots when that isn't theirs either).
+ */
+export default async function grabGraphicPageProps(params: Params) {
+    const { user } = await userAuth({ req: params.req });
+
+    if (!user?.id) {
+        return { redirect: { destination: "/auth/login" } };
+    }
+
+    const bot_id = Number(params.query?.bot_id);
+    const graphic_id = Number(params.query?.graphic_id);
+    const graphic =
+        Number.isInteger(graphic_id) && graphic_id > 0
+            ? await grabBotGraphicView({ graphic_id, user_id: user.id }).catch(() => null)
+            : null;
+
+    if (!graphic) {
+        return { redirect: { destination: bot_id ? `/admin/bots/${bot_id}` : AdminHomePath } };
+    }
+
+    return { props: { graphic } };
+}
@@ -0,0 +1,54 @@
+import { useContext } from "react";
+import Link from "@moduletrace/twui/layout/Link";
+import Stack from "@moduletrace/twui/layout/Stack";
+import { MessagesSquare } from "lucide-react";
+import GraphicFrame from "@/src/components/general/graphic-frame";
+import SettingsPaneHeader from "@/src/pages/admin/settings/(partials)/settings-pane-header";
+import { AppContext } from "@/src/pages/__root";
+import conversationHref from "@/src/utils/conversation-href";
+import Center from "@moduletrace/twui/layout/Center";
+
+/**
+ * A graphic filling the window (the page has no rail), under a header
+ * naming it and its bot, with a link back to the conversation it was made
+ * in.
+ */
+export default function GraphicPageSection() {
+    const { pageProps } = useContext(AppContext);
+    const graphic = pageProps?.graphic;
+
+    if (!graphic) return null;
+
+    return (
+        <Stack className="grow min-w-0 h-full gap-0! items-stretch">
+            <SettingsPaneHeader
+                title={graphic.title}
+                description={`By ${graphic.bot_name}`}
+                action={
+                    <Link
+                        href={conversationHref({
+                            bot_id: graphic.bot_id,
+                            workspace_id: graphic.workspace_id,
+                            session_id: graphic.session_id,
+                        })}
+                        title="Back to the conversation"
+                        aria-label="Back to the conversation"
+                        className="p-2 text-ink-secondary hover:text-ink rounded-default hover:bg-sunken"
+                    >
+                        <MessagesSquare size={16} aria-hidden />
+                    </Link>
+                }
+            />
+            <Center>
+                <Stack className="grow min-h-0 gap-0! items-stretch max-w-[1200px] w-full">
+                    <GraphicFrame
+                        graphic_id={graphic.id}
+                        title={graphic.title}
+                        version={graphic.version}
+                        className="grow h-full"
+                    />
+                </Stack>
+            </Center>
+        </Stack>
+    );
+}
@@ -0,0 +1,7 @@
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+import grabGraphicPageProps from "./(functions)/grab-graphic-page-props";
+
+export const server: BunextPageServerFn<PagePropsType> = async (params) => {
+    return await grabGraphicPageProps(params);
+};
@@ -0,0 +1,17 @@
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageModuleMetaFn } from "@moduletrace/bunext/types";
+import { SiteData } from "@/src/data/site-data";
+import GraphicPageSection from "./(sections)/graphic-page-section";
+
+export default function AdminBotGraphicPage() {
+    return <GraphicPageSection />;
+}
+
+export const meta: BunextPageModuleMetaFn = async (params) => {
+    const graphic = (params.serverRes?.props as PagePropsType | undefined)?.graphic;
+
+    return {
+        title: `${graphic?.title || "Graphic"} | ${SiteData["SiteName"]}`,
+        description: graphic ? `A graphic by ${graphic.bot_name}.` : "A graphic a bot made.",
+    };
+};