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]>
This commit is contained in:
Claude Opus 5.5
@@ -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] });
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user