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,28 @@
+import { AppData } from "@/src/data/app-data";
+import AppError from "@/src/utils/app-error";
+
+type Params = {
+    title?: string;
+    html?: string;
+};
+
+/**
+ * A graphic's title and HTML as they're stored: trimmed, the title one
+ * line, the HTML within `AppData.BotGraphicMaxChars`. Throws an `AppError`
+ * the bot can act on.
+ */
+export default function checkGraphicInput({ title, html }: Params) {
+    const final_title = title?.replace(/\s+/g, " ").trim().slice(0, 200);
+    const final_html = html?.trim();
+
+    if (title !== undefined && !final_title) throw new AppError(`Give the graphic a title.`);
+    if (html !== undefined && !final_html) throw new AppError(`The graphic's HTML is empty.`);
+
+    if (final_html && final_html.length > AppData.BotGraphicMaxChars) {
+        throw new AppError(
+            `The HTML is ${final_html.length} characters; a graphic holds at most ${AppData.BotGraphicMaxChars}. Make it leaner: draw with SVG or a chart library instead of inlining data or images.`,
+        );
+    }
+
+    return { title: final_title, html: final_html };
+}
@@ -0,0 +1,53 @@
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { BUN_SQLITE_COBBLE_BOT_GRAPHICS, BunSQLiteTables } from "@/db/types/db";
+import checkGraphicInput from "./check-graphic-input";
+
+type Params = {
+    user_id: number | string;
+    bot_id: number | string;
+    session_id?: number | string | null;
+    workspace_id?: number | string | null;
+    /**
+     * The run that made it, so its message is linked once posted.
+     */
+    job_id?: number | string | null;
+    title: string;
+    html: string;
+};
+
+/**
+ * Stores a graphic a bot made for a user. Returns its id.
+ */
+export default async function createBotGraphic({
+    user_id,
+    bot_id,
+    session_id,
+    workspace_id,
+    job_id,
+    title,
+    html,
+}: Params) {
+    const checked = checkGraphicInput({ title, html });
+
+    const res = await BunSQLite.insert<BUN_SQLITE_COBBLE_BOT_GRAPHICS, (typeof BunSQLiteTables)[number]>({
+        table: "bot_graphics",
+        data: [
+            {
+                title: checked.title,
+                html: checked.html,
+                version: 1,
+                user_id: Number(user_id),
+                bot_id: Number(bot_id),
+                session_id: session_id ? Number(session_id) : undefined,
+                workspace_id: workspace_id ? Number(workspace_id) : undefined,
+                job_id: job_id ? Number(job_id) : undefined,
+            },
+        ],
+    });
+
+    const id = Number(res.singleRes?.id || res.postInsertReturn?.insertId);
+
+    if (!res.success || !id) throw new Error(`Couldn't store the graphic: ${res.msg}`);
+
+    return id;
+}
@@ -0,0 +1,38 @@
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { BotGraphicView } from "@/src/types";
+import { viewerGraphicsSql } from "@/src/utils/bot-graphic-sql";
+
+type Params = {
+    graphic_id: number | string;
+    user_id: number | string;
+};
+
+/**
+ * A graphic as its card and page name it (never its HTML, which only
+ * `/graphics/<id>` serves), for the user it was made for; null otherwise.
+ */
+export default async function grabBotGraphicView({ graphic_id, user_id }: Params): Promise<BotGraphicView | null> {
+    const reach = viewerGraphicsSql({ alias: "g", user_id });
+
+    const row = (
+        await BunSQLite.sql<BotGraphicView & { bot_name: string | null }>({
+            sql: `SELECT g.id, g.title, g.version, g.bot_id, g.workspace_id, g.session_id, g.updated_at, b.name AS bot_name
+                FROM bot_graphics g LEFT JOIN bots b ON b.id = g.bot_id
+                WHERE g.id = ? AND ${reach.sql} LIMIT 1`,
+            values: [Number(graphic_id), ...reach.values],
+        })
+    ).payload?.[0];
+
+    if (!row) return null;
+
+    return {
+        id: Number(row.id),
+        title: row.title || `Graphic ${row.id}`,
+        version: Number(row.version) || 1,
+        bot_id: Number(row.bot_id),
+        bot_name: row.bot_name || "A bot",
+        workspace_id: row.workspace_id ? Number(row.workspace_id) : null,
+        session_id: row.session_id ? Number(row.session_id) : null,
+        updated_at: Number(row.updated_at) || 0,
+    };
+}
@@ -0,0 +1,28 @@
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { BUN_SQLITE_COBBLE_BOT_GRAPHICS } from "@/db/types/db";
+import { viewerGraphicsSql } from "@/src/utils/bot-graphic-sql";
+
+type Params = {
+    graphic_id: number | string;
+    /**
+     * The viewer: only the user it was made for reads it.
+     */
+    user_id: number | string;
+};
+
+/**
+ * A graphic with its HTML, for the user it was made for; null for anyone
+ * else or a missing one.
+ */
+export default async function grabBotGraphic({ graphic_id, user_id }: Params) {
+    const reach = viewerGraphicsSql({ alias: "g", user_id });
+
+    return (
+        (
+            await BunSQLite.sql<BUN_SQLITE_COBBLE_BOT_GRAPHICS>({
+                sql: `SELECT g.* FROM bot_graphics g WHERE g.id = ? AND ${reach.sql} LIMIT 1`,
+                values: [Number(graphic_id), ...reach.values],
+            })
+        ).payload?.[0] || null
+    );
+}
@@ -0,0 +1,31 @@
+import BunSQLite from "@moduletrace/bun-sqlite";
+import { runGraphicsSql } from "@/src/utils/bot-graphic-sql";
+
+type Params = {
+    bot_id: number | string;
+    user_id: number | string;
+    /**
+     * The place: a workspace, or null for the bot's own chat.
+     */
+    workspace_id?: number | string | null;
+    limit?: number;
+};
+
+/**
+ * The graphics a bot made for a user in one place, newest first, without
+ * their HTML.
+ */
+export default async function listBotGraphics({ bot_id, user_id, workspace_id, limit = 20 }: Params) {
+    const reach = runGraphicsSql({ alias: "g", user_id, bot_id });
+
+    return (
+        (
+            await BunSQLite.sql<{ id: number; title: string; version: number; updated_at: number; chars: number }>({
+                sql: `SELECT g.id, g.title, g.version, g.updated_at, LENGTH(g.html) AS chars FROM bot_graphics g
+                    WHERE ${reach.sql} AND g.workspace_id IS ?
+                    ORDER BY g.updated_at DESC, g.id DESC LIMIT ?`,
+                values: [...reach.values, workspace_id ? Number(workspace_id) : null, limit] as (string | number)[],
+            })
+        ).payload || []
+    );
+}
@@ -0,0 +1,46 @@
+import BunSQLite from "@moduletrace/bun-sqlite";
+import AppError from "@/src/utils/app-error";
+import { runGraphicsSql } from "@/src/utils/bot-graphic-sql";
+import checkGraphicInput from "./check-graphic-input";
+
+type Params = {
+    graphic_id: number | string;
+    /**
+     * The run's bot and user: only the graphics that bot made for that
+     * user are changed.
+     */
+    bot_id: number | string;
+    user_id: number | string;
+    title?: string;
+    html?: string;
+};
+
+/**
+ * Replaces a graphic's HTML (and title, when given) and bumps its
+ * version. Every message naming it shows the new one. Returns its new
+ * version.
+ */
+export default async function updateBotGraphic({ graphic_id, bot_id, user_id, title, html }: Params) {
+    const checked = checkGraphicInput({ title, html });
+
+    if (!checked.title && !checked.html) throw new AppError(`Nothing to change: give new html or a title.`);
+
+    const reach = runGraphicsSql({ alias: "bot_graphics", user_id, bot_id });
+
+    const row = (
+        await BunSQLite.sql<{ version: number }>({
+            sql: `UPDATE bot_graphics SET
+                    title = COALESCE(?, title),
+                    html = COALESCE(?, html),
+                    version = COALESCE(version, 1) + 1,
+                    updated_at = ?
+                WHERE id = ? AND ${reach.sql}
+                RETURNING version`,
+            values: [checked.title ?? null, checked.html ?? null, Date.now(), Number(graphic_id), ...reach.values],
+        })
+    ).payload?.[0];
+
+    if (!row) throw new AppError(`Graphic ${graphic_id} isn't one you made for this user.`);
+
+    return Number(row.version);
+}
@@ -110,6 +110,14 @@ export default async function completeBotJob({
            sql: `UPDATE token_usages SET message_id = ? WHERE job_id = ? AND message_id IS NULL`,
            values: [inserted.id, job.id],
        }).catch(() => {});
+
+        /**
+         * Graphics the run made belong to the message it posted.
+         */
+        await BunSQLite.sql({
+            sql: `UPDATE bot_graphics SET message_id = ? WHERE job_id = ? AND message_id IS NULL`,
+            values: [inserted.id, job.id],
+        }).catch(() => {});
    }

    /**
@@ -46,6 +46,7 @@ export default async function deleteBot({ user_id, bot_id }: Params) {
    await BunSQLite.sql({ sql: `DELETE FROM bot_types WHERE bot_id = ?`, values: [bot.id] });
    await BunSQLite.sql({ sql: `DELETE FROM envs WHERE bot_id = ?`, values: [bot.id] });
    await BunSQLite.sql({ sql: `DELETE FROM secret_requests WHERE bot_id = ?`, values: [bot.id] });
+    await BunSQLite.sql({ sql: `DELETE FROM bot_graphics WHERE bot_id = ?`, values: [bot.id] });

    const res = await BunSQLite.sql({ sql: `DELETE FROM bots WHERE id = ?`, values: [bot.id] });

@@ -71,7 +71,7 @@ export default async function deleteUser({ actor_user_id, actor_user_types, user
    /**
     * These point at the user without a foreign key, so nothing cascades.
     */
-    for (const table of ["user_types", "user_passwords", "sso_login_codes", "secret_requests"]) {
+    for (const table of ["user_types", "user_passwords", "sso_login_codes", "secret_requests", "bot_graphics"]) {
        await BunSQLite.sql({ sql: `DELETE FROM ${table} WHERE user_id = ?`, values: [user.id] });
    }

@@ -0,0 +1,23 @@
+import fs from "fs";
+import path from "path";
+import parseThemeVars, { type ThemeVars } from "@/src/utils/parse-theme-vars";
+
+let cached: ThemeVars | null = null;
+
+/**
+ * The app's theme colours and fonts for graphics, read once from
+ * `src/styles/main.css` so a theme change there reaches them too.
+ */
+export default function grabGraphicThemeVars(): ThemeVars {
+    if (cached) return cached;
+
+    try {
+        cached = parseThemeVars({
+            css: fs.readFileSync(path.join(process.cwd(), "src/styles/main.css"), "utf-8"),
+        });
+    } catch {
+        cached = { light: {}, dark: {}, fonts: {} };
+    }
+
+    return cached;
+}
@@ -0,0 +1,82 @@
+import path from "node:path";
+import { GraphicsLibPrefix, GraphicsLibs, GraphicsPrefix } from "@/src/dict/graphics-dict";
+import userAuth from "@/src/functions/backend/auth/user-auth";
+import grabBotGraphic from "@/src/functions/backend/db/bot-graphics/grab-bot-graphic";
+import graphicDocument from "@/src/utils/graphic-document";
+import graphicHeaders from "@/src/utils/graphic-headers";
+import isSecureRequest from "@/src/utils/is-secure-request";
+import grabGraphicThemeVars from "./grab-graphic-theme-vars";
+
+type Params = {
+    req: Request;
+    url: URL;
+};
+
+/**
+ * Serves bot graphics and the libraries they may load:
+ *
+ * - `/graphics/<id>[?theme=dark]`: the graphic, for the user it was made
+ *   for only (anyone else, signed in or not, gets the same 404), themed
+ *   and sandboxed (`graphicHeaders`).
+ * - `/graphics-lib/<file>`: a library from `GraphicsLibs`, public (a
+ *   sandboxed graphic sends no cookie of the app's) and cached for a day.
+ *
+ * Null for any other path.
+ */
+export default async function handleGraphicsRequest({ req, url }: Params): Promise<Response | null> {
+    if (url.pathname.startsWith(`${GraphicsLibPrefix}/`)) {
+        return await serveLib({ file: url.pathname.slice(GraphicsLibPrefix.length + 1) });
+    }
+
+    if (!url.pathname.startsWith(`${GraphicsPrefix}/`)) return null;
+
+    const id = url.pathname.slice(GraphicsPrefix.length + 1).replace(/\/$/, "");
+
+    if (req.method != "GET" || !/^\d+$/.test(id)) return notFound();
+
+    const { user } = await userAuth({ req });
+
+    if (!user?.id) return notFound();
+
+    const graphic = await grabBotGraphic({ graphic_id: id, user_id: user.id });
+
+    if (!graphic?.html) return notFound();
+
+    const origin = `${isSecureRequest({ req }) ? "https" : "http"}://${req.headers.get("host") || url.host}`;
+
+    return new Response(
+        graphicDocument({
+            html: graphic.html,
+            title: graphic.title || `Graphic ${graphic.id}`,
+            dark: url.searchParams.get("theme") == "dark",
+            vars: grabGraphicThemeVars(),
+        }),
+        { headers: graphicHeaders({ origin }) },
+    );
+}
+
+async function serveLib({ file }: { file: string }) {
+    const lib = GraphicsLibs.find((it) => it.file == file);
+
+    if (!lib) return notFound();
+
+    const source = Bun.file(path.join(process.cwd(), lib.source));
+
+    if (!(await source.exists())) return notFound();
+
+    const response = new Response(source, {
+        headers: {
+            "Content-Type": "text/javascript; charset=utf-8",
+            "Cache-Control": "public, max-age=86400",
+            "X-Content-Type-Options": "nosniff",
+        },
+    });
+
+    response.headers.delete("content-disposition");
+
+    return response;
+}
+
+function notFound() {
+    return new Response("Not Found", { status: 404, headers: { "Cache-Control": "no-store" } });
+}