camox 0.44.0 → 0.46.0

package/dist/features/studio/FollowAgentProvider.js

@@ -0,0 +1,327 @@
+import { useProjectUuid } from "../../lib/auth.js";
+import { parseLocalePath } from "../../lib/locale-path.js";
+import { useViewLocale } from "../../lib/view-locale-context.js";
+import { useLocation, useNavigate } from "../navigation/navigation.js";
+import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { reads, useReadQueries, useReadQuery } from "../../lib/studio-reads.js";
+import { FollowAgentContext } from "./followAgentContext.js";
+import { canvasPageId, getCanvasPages } from "../canvas/canvasPages.js";
+import { selectedCanvasPage } from "../canvas/canvasSelection.js";
+import { useDiscoveredPreviewPaths } from "../canvas/useDiscoveredPreviewPaths.js";
+import { createFollowAgent } from "./followAgent.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/studio/FollowAgentProvider.tsx
+const NO_BLOCK_IDS = [];
+/**
+* The blocks of the Page the editor is on, top to bottom, its Layout's included, as far as they
+* are loaded: following locates the agent's touches on the page it's on, which is also where it
+* arrives.
+*/
+function useCurrentPageBlocks(page, path) {
+	const $ = c(14);
+	const projectUuid = useProjectUuid();
+	let t0;
+	if ($[0] !== page) {
+		t0 = canvasPageId(page);
+		$[0] = page;
+		$[1] = t0;
+	} else t0 = $[1];
+	const pageId = t0;
+	const layoutId = page && page.kind !== "curated" ? page.layoutId : void 0;
+	let t1;
+	if ($[2] !== path || $[3] !== projectUuid) {
+		t1 = reads.pageStructure({
+			path,
+			projectUuid
+		});
+		$[2] = path;
+		$[3] = projectUuid;
+		$[4] = t1;
+	} else t1 = $[4];
+	const t2 = !!pageId;
+	let t3;
+	if ($[5] !== t2) {
+		t3 = { enabled: t2 };
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const { data: pageStructure } = useReadQuery(t1, t3);
+	let t4;
+	if ($[7] !== layoutId || $[8] !== projectUuid) {
+		t4 = reads.layoutStructure({
+			projectUuid,
+			layoutId: layoutId ?? ""
+		});
+		$[7] = layoutId;
+		$[8] = projectUuid;
+		$[9] = t4;
+	} else t4 = $[9];
+	const t5 = !!layoutId;
+	let t6;
+	if ($[10] !== t5) {
+		t6 = { enabled: t5 };
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	const { data: layout } = useReadQuery(t4, t6);
+	const structure = pageId ? pageStructure?.page.id === pageId ? {
+		layout: pageStructure.layout,
+		blockIds: pageStructure.page.blockIds
+	} : void 0 : layoutId && layout ? {
+		layout,
+		blockIds: NO_BLOCK_IDS
+	} : void 0;
+	const ids = structure ? [
+		...structure.layout?.beforeBlockIds ?? NO_BLOCK_IDS,
+		...structure.blockIds,
+		...structure.layout?.afterBlockIds ?? NO_BLOCK_IDS
+	] : NO_BLOCK_IDS;
+	const blocks = useReadQueries(ids.map(_temp));
+	const loaded = structure ? ids.flatMap((id_0, index) => {
+		const type = blocks[index]?.data?.block.type;
+		return type ? [{
+			id: id_0,
+			type
+		}] : [];
+	}) : void 0;
+	const json = JSON.stringify(loaded ?? null);
+	let t7;
+	if ($[12] !== json) {
+		t7 = JSON.parse(json) ?? void 0;
+		$[12] = json;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+function _temp(id) {
+	return reads.blockBundle(id);
+}
+/** Where the editor is, and the Studio content following locates the agent's touches with. */
+function useFollowWhere(runtimeBasePath) {
+	const $ = c(35);
+	const app = useCamoxApp();
+	const projectUuid = useProjectUuid();
+	const location = useLocation();
+	const { locale, locales } = useViewLocale();
+	let t0;
+	if ($[0] !== projectUuid) {
+		t0 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: project } = useReadQuery(t0);
+	let t1;
+	if ($[2] !== projectUuid) {
+		t1 = reads.pageList({ projectUuid });
+		$[2] = projectUuid;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = !!project;
+	let t3;
+	if ($[4] !== t2) {
+		t3 = { enabled: t2 };
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const { data: pageList } = useReadQuery(t1, t3);
+	const discoveredPaths = useDiscoveredPreviewPaths(runtimeBasePath);
+	let t4;
+	if ($[6] !== app || $[7] !== discoveredPaths || $[8] !== locale || $[9] !== pageList) {
+		t4 = pageList ? getCanvasPages(pageList, app.getLayouts(), discoveredPaths, locale) : [];
+		$[6] = app;
+		$[7] = discoveredPaths;
+		$[8] = locale;
+		$[9] = pageList;
+		$[10] = t4;
+	} else t4 = $[10];
+	const canvasPages = t4;
+	let t5;
+	if ($[11] !== app || $[12] !== canvasPages || $[13] !== locales || $[14] !== location.pathname) {
+		t5 = selectedCanvasPage(canvasPages, app.getLayouts(), location.pathname, locales);
+		$[11] = app;
+		$[12] = canvasPages;
+		$[13] = locales;
+		$[14] = location.pathname;
+		$[15] = t5;
+	} else t5 = $[15];
+	const current = t5;
+	let t6;
+	if ($[16] !== locales || $[17] !== location.pathname) {
+		t6 = parseLocalePath(location.pathname, locales);
+		$[16] = locales;
+		$[17] = location.pathname;
+		$[18] = t6;
+	} else t6 = $[18];
+	const blocks = useCurrentPageBlocks(current, t6.path);
+	let t7;
+	if ($[19] !== blocks || $[20] !== canvasPages || $[21] !== current?.key || $[22] !== pageList) {
+		t7 = () => {
+			const layoutOf = new Map(pageList?.map(_temp2));
+			return canvasPages.flatMap((page_0) => {
+				const layoutId = page_0.kind === "curated" ? layoutOf.get(page_0.pageId) : page_0.layoutId;
+				if (!layoutId) return [];
+				return [{
+					key: page_0.key,
+					pathname: page_0.pathname,
+					owner: page_0.kind === "curated" ? {
+						kind: "page",
+						pageId: page_0.pageId
+					} : {
+						kind: "layout",
+						layoutId: page_0.layoutId
+					},
+					layoutId,
+					...page_0.key === current?.key && blocks ? { blocks } : {}
+				}];
+			});
+		};
+		$[19] = blocks;
+		$[20] = canvasPages;
+		$[21] = current?.key;
+		$[22] = pageList;
+		$[23] = t7;
+	} else t7 = $[23];
+	current?.key;
+	let t8;
+	if ($[24] !== t7) {
+		t8 = t7();
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	const pages = t8;
+	const { pathname, search, source } = location;
+	current?.key;
+	let t9;
+	if ($[26] !== pathname || $[27] !== search || $[28] !== source) {
+		t9 = {
+			pathname,
+			search,
+			source
+		};
+		$[26] = pathname;
+		$[27] = search;
+		$[28] = source;
+		$[29] = t9;
+	} else t9 = $[29];
+	const t10 = current?.key ?? null;
+	let t11;
+	if ($[30] !== locale.tag || $[31] !== pages || $[32] !== t10 || $[33] !== t9) {
+		t11 = {
+			pages,
+			locale: locale.tag,
+			location: t9,
+			pageKey: t10
+		};
+		$[30] = locale.tag;
+		$[31] = pages;
+		$[32] = t10;
+		$[33] = t9;
+		$[34] = t11;
+	} else t11 = $[34];
+	return t11;
+}
+function _temp2(page) {
+	return [page.id, page.layoutId];
+}
+/**
+* Follows the agent for the Studio session, across its pages and into the draft its Live thread
+* starts: the Canvas or the Preview goes where the editor's runs write. Only the Website Section
+* follows; elsewhere in the Studio, the editor stays where they are.
+*/
+function FollowAgentProvider(t0) {
+	const $ = c(18);
+	const { runtimeBasePath, website, children } = t0;
+	const where = useFollowWhere(runtimeBasePath);
+	const navigate = useNavigate();
+	let t1;
+	if ($[0] !== navigate || $[1] !== where) {
+		t1 = {
+			navigate,
+			where
+		};
+		$[0] = navigate;
+		$[1] = where;
+		$[2] = t1;
+	} else t1 = $[2];
+	const latest = React.useRef(t1);
+	let t2;
+	if ($[3] !== navigate || $[4] !== where) {
+		t2 = () => {
+			latest.current = {
+				navigate,
+				where
+			};
+		};
+		$[3] = navigate;
+		$[4] = where;
+		$[5] = t2;
+	} else t2 = $[5];
+	React.useLayoutEffect(t2);
+	const [follow, setFollow] = React.useState(null);
+	let t3;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			const created = createFollowAgent({
+				navigate: (options) => latest.current.navigate(options),
+				where: latest.current.where
+			});
+			setFollow(created);
+			return () => created.dispose();
+		};
+		t4 = [];
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	React.useEffect(t3, t4);
+	let t5;
+	let t6;
+	if ($[8] !== follow || $[9] !== where) {
+		t5 = () => {
+			follow?.update(where);
+		};
+		t6 = [follow, where];
+		$[8] = follow;
+		$[9] = where;
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t5 = $[10];
+		t6 = $[11];
+	}
+	React.useEffect(t5, t6);
+	let t7;
+	if ($[12] !== follow || $[13] !== website) {
+		t7 = follow && {
+			receive: (batch) => {
+				if (website) follow.receive(batch);
+			},
+			resume: () => follow.resume(),
+			takeOver: () => follow.takeOver()
+		};
+		$[12] = follow;
+		$[13] = website;
+		$[14] = t7;
+	} else t7 = $[14];
+	const value = t7;
+	let t8;
+	if ($[15] !== children || $[16] !== value) {
+		t8 = /* @__PURE__ */ jsx(FollowAgentContext, {
+			value,
+			children
+		});
+		$[15] = children;
+		$[16] = value;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+
+//#endregion
+export { FollowAgentProvider };

package/dist/features/studio/components/ChatSidebar.js

@@ -0,0 +1,356 @@
+import { AuthContext } from "../../../lib/auth.js";
+import { useCurrentDraftId, useDraftScope } from "../../../lib/draft-scope.js";
+import { useNavigate } from "../../navigation/navigation.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { draftLabel } from "../draftLabel.js";
+import { FollowAgentContext } from "../followAgentContext.js";
+import { useThread } from "../../../lib/use-thread.js";
+import { ThreadComposer } from "./ThreadComposer.js";
+import { ThreadMessages } from "./ThreadMessages.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EMPTY_THREAD_VIEW } from "@camox/api-contract/threads";
+
+//#region src/features/studio/components/ChatSidebar.tsx
+/**
+* Where an editor works with Camox's agent in a thread, beside every studio page except the
+* preview, which only hides it: the studio keeps following the editor's runs there. It follows
+* where the studio is: the editor's own Live thread on Live, and the draft's thread in a draft.
+* When the Live thread starts a draft, the studio enters it with the thread.
+*/
+function ChatSidebar(t0) {
+	const $ = c(5);
+	const { hidden: t1 } = t0;
+	const hidden = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { width: 250 };
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	let t4;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs("header", {
+			className: "border-border box-content flex h-8 min-w-0 items-center gap-2 border-b px-3 py-2",
+			children: [/* @__PURE__ */ jsx(CamoxMark, {}), /* @__PURE__ */ jsx("h2", {
+				className: "truncate text-sm font-medium",
+				children: "Chat"
+			})]
+		});
+		t4 = /* @__PURE__ */ jsx(CurrentThread, {});
+		$[1] = t3;
+		$[2] = t4;
+	} else {
+		t3 = $[1];
+		t4 = $[2];
+	}
+	let t5;
+	if ($[3] !== hidden) {
+		t5 = /* @__PURE__ */ jsxs("aside", {
+			"aria-label": "Chat",
+			"data-chat-sidebar": true,
+			hidden,
+			className: "bg-background flex shrink-0 flex-col border-l-2 max-md:hidden",
+			style: t2,
+			children: [t3, t4]
+		});
+		$[3] = hidden;
+		$[4] = t5;
+	} else t5 = $[4];
+	return t5;
+}
+/** Camox's logo, beside the heading: the agent is Camox. */
+function CamoxMark() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": true,
+			viewBox: "0 0 191.03 132",
+			className: "size-5 shrink-0",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0 22.55A22.55 22.55 0 0 1 22.55 0L90.19 0A5.32 5.32 0 0 1 95.52 5.32L95.52 36.48L36.48 36.48L36.48 95.52L5.32 95.52A5.32 5.32 0 0 1 0 90.19ZM95.52 36.48L181.48 36.48A5.32 5.32 0 0 1 186.01 44.61L138.61 121.31A22.55 22.55 0 0 1 119.43 132L41.81 132A5.32 5.32 0 0 1 36.48 126.68L36.48 95.52L95.52 95.52Z",
+				fill: "#00BC7D"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function CurrentThread() {
+	const $ = c(15);
+	const { apiUrl, projectUuid } = React.useContext(AuthContext);
+	let t0;
+	if ($[0] !== projectUuid) {
+		t0 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: project } = useReadQuery(t0);
+	const draftId = useCurrentDraftId();
+	const draftScope = useDraftScope();
+	const [carried, setCarried] = React.useState();
+	let t1;
+	if ($[2] !== draftScope) {
+		t1 = (started, thread) => {
+			if (draftScope.current() !== null) return;
+			const { startedDraft: _, continuedIn: __, ...state } = thread.state;
+			setCarried({
+				draftId: started,
+				thread: {
+					...thread,
+					state
+				}
+			});
+			draftScope.enterStarted(started);
+		};
+		$[2] = draftScope;
+		$[3] = t1;
+	} else t1 = $[3];
+	const enterDraft = t1;
+	let t2;
+	let t3;
+	if ($[4] !== draftScope) {
+		t2 = () => draftScope.subscribe((t4) => {
+			const { move } = t4;
+			if (move !== "started") setCarried(void 0);
+		});
+		t3 = [draftScope];
+		$[4] = draftScope;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	React.useEffect(t2, t3);
+	if (!project) {
+		let t4;
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ThreadMessages, { view: EMPTY_THREAD_VIEW }), /* @__PURE__ */ jsx(ThreadComposer, { disabled: true })] });
+			$[7] = t4;
+		} else t4 = $[7];
+		return t4;
+	}
+	const t4 = `${project.id}:${draftId ?? "live"}`;
+	const t5 = carried?.draftId === draftId ? carried.thread : void 0;
+	let t6;
+	if ($[8] !== apiUrl || $[9] !== draftId || $[10] !== enterDraft || $[11] !== project.id || $[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Thread, {
+			apiUrl,
+			projectId: project.id,
+			draftId,
+			carried: t5,
+			onEnterDraft: enterDraft
+		}, t4);
+		$[8] = apiUrl;
+		$[9] = draftId;
+		$[10] = enterDraft;
+		$[11] = project.id;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+function Thread(t0) {
+	const $ = c(31);
+	const { apiUrl, projectId, draftId, carried, onEnterDraft } = t0;
+	let t1;
+	if ($[0] !== carried || $[1] !== onEnterDraft) {
+		t1 = {
+			carried,
+			onEnterDraft
+		};
+		$[0] = carried;
+		$[1] = onEnterDraft;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { view, sending, send, stop, error, touched } = useThread(apiUrl, projectId, draftId, t1);
+	const follow = React.use(FollowAgentContext);
+	let t2;
+	if ($[3] !== follow) {
+		t2 = (batch) => follow?.receive(batch);
+		$[3] = follow;
+		$[4] = t2;
+	} else t2 = $[4];
+	const followTouched = React.useEffectEvent(t2);
+	let t3;
+	if ($[5] !== followTouched || $[6] !== touched) {
+		t3 = () => {
+			if (touched) followTouched(touched.batch);
+		};
+		$[5] = followTouched;
+		$[6] = touched;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== touched) {
+		t4 = [touched];
+		$[8] = touched;
+		$[9] = t4;
+	} else t4 = $[9];
+	React.useEffect(t3, t4);
+	let t5;
+	if ($[10] !== follow || $[11] !== send) {
+		t5 = (text) => {
+			follow?.resume();
+			send(text);
+		};
+		$[10] = follow;
+		$[11] = send;
+		$[12] = t5;
+	} else t5 = $[12];
+	const sendFollowing = t5;
+	const t6 = draftId !== null;
+	let t7;
+	if ($[13] !== sending || $[14] !== t6 || $[15] !== view) {
+		t7 = {
+			view,
+			sending,
+			showSenders: t6
+		};
+		$[13] = sending;
+		$[14] = t6;
+		$[15] = view;
+		$[16] = t7;
+	} else t7 = $[16];
+	const messages = t7;
+	const continuedIn = draftId === null ? view.continuedIn?.draftId : void 0;
+	let t8;
+	if ($[17] !== continuedIn || $[18] !== messages || $[19] !== projectId) {
+		t8 = continuedIn ? /* @__PURE__ */ jsx(ContinuedInMessages, {
+			...messages,
+			projectId,
+			draftId: continuedIn
+		}) : /* @__PURE__ */ jsx(ThreadMessages, { ...messages });
+		$[17] = continuedIn;
+		$[18] = messages;
+		$[19] = projectId;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== error) {
+		t9 = error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-destructive px-4 pt-2 text-sm",
+			children: error
+		});
+		$[21] = error;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== sendFollowing || $[24] !== stop || $[25] !== view.running) {
+		t10 = /* @__PURE__ */ jsx(ThreadComposer, {
+			onSend: sendFollowing,
+			onStop: stop,
+			running: view.running
+		});
+		$[23] = sendFollowing;
+		$[24] = stop;
+		$[25] = view.running;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t8,
+			t9,
+			t10
+		] });
+		$[27] = t10;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t11;
+	} else t11 = $[30];
+	return t11;
+}
+/**
+* A fresh Live thread's messages, linking to the draft the editor's previous one continued in,
+* named as the drafts control names it.
+*/
+function ContinuedInMessages(t0) {
+	const $ = c(22);
+	let draftId;
+	let messages;
+	let projectId;
+	if ($[0] !== t0) {
+		({projectId, draftId, ...messages} = t0);
+		$[0] = t0;
+		$[1] = draftId;
+		$[2] = messages;
+		$[3] = projectId;
+	} else {
+		draftId = $[1];
+		messages = $[2];
+		projectId = $[3];
+	}
+	const draftScope = useDraftScope();
+	const navigate = useNavigate();
+	let t1;
+	if ($[4] !== draftId || $[5] !== projectId) {
+		t1 = reads.draft({
+			projectId,
+			draftId
+		});
+		$[4] = draftId;
+		$[5] = projectId;
+		$[6] = t1;
+	} else t1 = $[6];
+	const { data: draft } = useReadQuery(t1);
+	let t2;
+	if ($[7] !== draft) {
+		t2 = draft ? draftLabel(draft) : "a draft";
+		$[7] = draft;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== draftId || $[10] !== draftScope) {
+		t3 = draftScope.hrefFor(window.location.href, { draft: draftId });
+		$[9] = draftId;
+		$[10] = draftScope;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== draftId || $[13] !== navigate) {
+		t4 = (event) => {
+			event.preventDefault();
+			navigate({
+				to: window.location.href,
+				draft: draftId
+			});
+		};
+		$[12] = draftId;
+		$[13] = navigate;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== t2 || $[16] !== t3 || $[17] !== t4) {
+		t5 = {
+			label: t2,
+			href: t3,
+			onOpen: t4
+		};
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	const link = t5;
+	let t6;
+	if ($[19] !== link || $[20] !== messages) {
+		t6 = /* @__PURE__ */ jsx(ThreadMessages, {
+			...messages,
+			continuedIn: link
+		});
+		$[19] = link;
+		$[20] = messages;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+}
+
+//#endregion
+export { ChatSidebar };