tbenandClaude Opus 5.5
bea656ade8
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]>
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useContext, useEffect, useMemo, useState } from "react";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
import Row from "@moduletrace/twui/layout/Row";
|
|
import { AppContext } from "@/src/pages/__root";
|
|
import useConnectionEpoch from "@/src/hooks/use-connection-epoch";
|
|
import useOnlineStatus from "@/src/hooks/use-online-status";
|
|
import { RailDrawerContext } from "./(data)/rail-drawer-context";
|
|
import BotsRail from "./(sections)/bots-rail";
|
|
import LiveSocket from "./(sections)/live-socket";
|
|
import AddFlow from "./(partials)/add-flow";
|
|
import OfflineBanner from "./(partials)/offline-banner";
|
|
import isRaillessPage from "./(utils)/is-railless-page";
|
|
|
|
/**
|
|
* Full-bleed shell for every `/admin/*` page: the rail of bot conversations
|
|
* and workspaces, then the page (a conversation, a workspace, or
|
|
* settings), inside the Add flow both can open. A graphic's own page
|
|
* (`isRaillessPage`) goes without the rail. No cards, no shadows;
|
|
* regions are separated by 1px hairlines. Below `md` the rail slides over
|
|
* the page instead of taking width. Height is `dvh`, so the on-screen
|
|
* keyboard doesn't push the composer out of view.
|
|
*/
|
|
export default function BotsLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { pageProps } = useContext(AppContext);
|
|
const pathname = pageProps?.url?.pathname;
|
|
|
|
const [drawer_open, setDrawerOpen] = useState(false);
|
|
const epoch = useConnectionEpoch();
|
|
const online = useOnlineStatus();
|
|
|
|
/**
|
|
* Opening a conversation closes the drawer on a phone.
|
|
*/
|
|
useEffect(() => {
|
|
setDrawerOpen(false);
|
|
}, [pathname]);
|
|
|
|
useEffect(() => {
|
|
if (!drawer_open) return;
|
|
|
|
const onKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key == "Escape") setDrawerOpen(false);
|
|
};
|
|
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
}, [drawer_open]);
|
|
|
|
const has_rail = !isRaillessPage({ pathname });
|
|
|
|
const drawer = useMemo(
|
|
() => ({ open: drawer_open, setOpen: setDrawerOpen, has_rail }),
|
|
[drawer_open, has_rail],
|
|
);
|
|
|
|
return (
|
|
<RailDrawerContext.Provider value={drawer}>
|
|
<AddFlow>
|
|
<Stack className="w-full h-dvh gap-0! items-stretch overflow-hidden bg-paper text-ink pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
|
|
{online ? null : <OfflineBanner />}
|
|
<Row className="grow min-h-0 w-full gap-0! flex-nowrap items-stretch overflow-hidden">
|
|
{has_rail ? <BotsRail /> : null}
|
|
<Row className="grow min-w-0 h-full gap-0! flex-nowrap items-stretch">
|
|
{children}
|
|
</Row>
|
|
</Row>
|
|
</Stack>
|
|
<LiveSocket key={epoch} />
|
|
</AddFlow>
|
|
</RailDrawerContext.Provider>
|
|
);
|
|
}
|