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);
+}