@joai/core 4.5.0 → 4.7.0

package/dist/react/index.mjs

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+'use client';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/guest.ts
 function safeGet(key) {
@@ -288,4 +289,436 @@ function useEmbedChat({ agentUuid, http, cortexBaseUrl, guestId, roomStorageKey,
 	};
 }
 //#endregion
-export { EmbedChatInput, EmbedChatList, clearRoom, getOrCreateGuestId, loadRoom, openEventSourceStream, saveRoom, useEmbedChat };
+//#region src/react/content/context.ts
+const ContentContext = createContext(null);
+function useContent() {
+	const context = useContext(ContentContext);
+	if (!context) throw new Error("useContent must be used within a ContentProvider.");
+	return context;
+}
+//#endregion
+//#region src/react/content/content-cache.ts
+const contentCache = /* @__PURE__ */ new Map();
+const pendingLoads = /* @__PURE__ */ new Map();
+function cacheContent(content) {
+	contentCache.set(`id:${content.id}`, content);
+	contentCache.set(`slug:${content.slug}`, content);
+}
+async function loadContent(client, contentId, publicSlug) {
+	const target = contentId ?? publicSlug;
+	if (!target) return null;
+	const key = contentId ? `id:${contentId}` : `slug:${publicSlug}`;
+	const cached = contentCache.get(key);
+	if (cached) return cached;
+	const pending = pendingLoads.get(key);
+	if (pending) return pending;
+	const request = (contentId ? client.content.get(target) : client.content.getPublic(target)).then((result) => result.ok && result.data ? result.data : null).then((content) => {
+		if (content) cacheContent(content);
+		return content;
+	}).finally(() => pendingLoads.delete(key));
+	pendingLoads.set(key, request);
+	return request;
+}
+//#endregion
+//#region src/react/content/state.ts
+function contentValues(content) {
+	return Object.fromEntries(content?.version?.entries.map((entry) => [entry.key, entry.value]) ?? []);
+}
+function contentPatches(content, values) {
+	const original = contentValues(content);
+	return Object.entries(values).filter(([key, value]) => JSON.stringify(value) !== JSON.stringify(original[key])).map(([key, value]) => ({
+		key,
+		value
+	}));
+}
+//#endregion
+//#region src/react/content/provider.tsx
+function ContentProvider({ children, client, contentId, publicSlug, initialContent, canEdit = false, canPublish = false, teamSlug }) {
+	const [content, setContent] = useState(initialContent ?? null);
+	const [values, setValues] = useState(() => contentValues(initialContent ?? null));
+	const [isLoading, setIsLoading] = useState(!initialContent && Boolean(contentId || publicSlug));
+	const [isSaving, setIsSaving] = useState(false);
+	const [isEditing, setEditing] = useState(false);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		if (initialContent && !contentId) {
+			cacheContent(initialContent);
+			setContent(initialContent);
+			setValues(contentValues(initialContent));
+			setIsLoading(false);
+			return;
+		}
+		const load = async () => {
+			if (!contentId && !publicSlug) return;
+			setIsLoading(true);
+			setError(null);
+			const nextContent = await loadContent(client, contentId, publicSlug);
+			if (!nextContent) setError("Content could not be loaded.");
+			else {
+				setContent(nextContent);
+				setValues(contentValues(nextContent));
+			}
+			setIsLoading(false);
+		};
+		load();
+	}, [
+		client,
+		contentId,
+		initialContent,
+		publicSlug
+	]);
+	const setValue = useCallback((key, value) => {
+		setValues((current) => ({
+			...current,
+			[key]: value
+		}));
+	}, []);
+	const isDirty = contentPatches(content, values).length > 0;
+	const save = useCallback(async () => {
+		if (!content?.version || !contentId || !canEdit) return false;
+		const patches = contentPatches(content, values);
+		if (patches.length === 0) return true;
+		setIsSaving(true);
+		setError(null);
+		const result = await client.content.patch(contentId, {
+			expectedVersion: content.version.number,
+			patches,
+			origin: "inlineEditor"
+		});
+		setIsSaving(false);
+		if (!result.ok || !result.data) {
+			setError("Changes could not be saved. Refresh and try again.");
+			return false;
+		}
+		const nextContent = {
+			...content,
+			version: result.data,
+			updatedAt: result.data.updatedAt
+		};
+		cacheContent(nextContent);
+		setContent(nextContent);
+		setValues(contentValues(nextContent));
+		return true;
+	}, [
+		canEdit,
+		client,
+		content,
+		contentId,
+		values
+	]);
+	const publish = useCallback(async () => {
+		if (!content?.version || !contentId || !canPublish) return false;
+		if (!await save()) return false;
+		const expectedVersion = content.version.number + (contentPatches(content, values).length > 0 ? 1 : 0);
+		setIsSaving(true);
+		const result = await client.content.publish(contentId, expectedVersion);
+		setIsSaving(false);
+		if (!result.ok || !result.data) {
+			setError("Changes could not be published. Refresh and try again.");
+			return false;
+		}
+		const nextContent = {
+			...content,
+			version: result.data,
+			updatedAt: result.data.updatedAt
+		};
+		cacheContent(nextContent);
+		setContent(nextContent);
+		setValues(contentValues(nextContent));
+		setEditing(false);
+		return true;
+	}, [
+		canPublish,
+		client,
+		content,
+		contentId,
+		save,
+		values
+	]);
+	const context = useMemo(() => ({
+		content,
+		values,
+		isLoading,
+		isSaving,
+		isEditing,
+		isDirty,
+		canEdit,
+		canPublish,
+		teamSlug,
+		media: client.media,
+		error,
+		setEditing,
+		setValue,
+		save,
+		publish
+	}), [
+		canEdit,
+		canPublish,
+		client.media,
+		content,
+		error,
+		isDirty,
+		isEditing,
+		isLoading,
+		isSaving,
+		publish,
+		save,
+		setValue,
+		teamSlug,
+		values
+	]);
+	return /* @__PURE__ */ jsx(ContentContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+//#region src/react/content/editable-content.tsx
+function EditableContent({ field, as: Tag = "span", className, placeholder = "Add text", multiline = false }) {
+	const { values, isEditing, canEdit, setValue } = useContent();
+	const value = values[field];
+	const text = typeof value === "string" || typeof value === "number" ? String(value) : "";
+	if (!canEdit || !isEditing) return /* @__PURE__ */ jsx(Tag, {
+		className,
+		children: text
+	});
+	if (multiline) return /* @__PURE__ */ jsx("textarea", {
+		"aria-label": field,
+		className,
+		placeholder,
+		value: text,
+		onChange: (event) => setValue(field, event.target.value)
+	});
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": field,
+		className,
+		placeholder,
+		value: text,
+		onChange: (event) => setValue(field, event.target.value)
+	});
+}
+function useContentValue(key) {
+	return useContent().values[key];
+}
+//#endregion
+//#region src/react/content/editable-image.tsx
+function EditableImage({ field, alt = "", className, inputClassName, placeholder = "Image URL", onSelect }) {
+	const { values, isEditing, canEdit, media, setValue, teamSlug } = useContent();
+	const source = typeof values[field] === "string" ? values[field] : "";
+	const [isPickerOpen, setPickerOpen] = useState(false);
+	const [images, setImages] = useState([]);
+	const [isUploading, setUploading] = useState(false);
+	useEffect(() => {
+		if (!isPickerOpen || !media || !teamSlug) return;
+		media.list(teamSlug, { mime: "image/" }).then((result) => setImages(result.ok ? result.data ?? [] : []));
+	}, [
+		isPickerOpen,
+		media,
+		teamSlug
+	]);
+	const upload = async (file) => {
+		if (!media || !teamSlug || !file.type.startsWith("image/")) return;
+		setUploading(true);
+		const result = await media.upload({
+			team: teamSlug,
+			file,
+			type: "output",
+			label: file.name
+		});
+		setUploading(false);
+		if (!result.ok || !result.data) return;
+		setImages((current) => [result.data, ...current]);
+		setValue(field, result.data.url);
+		setPickerOpen(false);
+	};
+	if (!canEdit || !isEditing) return source ? /* @__PURE__ */ jsx("img", {
+		src: source,
+		alt,
+		className
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			source && /* @__PURE__ */ jsx("img", {
+				src: source,
+				alt
+			}),
+			onSelect && /* @__PURE__ */ jsx("button", {
+				className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500",
+				type: "button",
+				onClick: onSelect,
+				children: "Choose image"
+			}),
+			!onSelect && media && teamSlug && /* @__PURE__ */ jsx("button", {
+				className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500",
+				type: "button",
+				onClick: () => setPickerOpen(true),
+				children: "Choose image"
+			}),
+			/* @__PURE__ */ jsx(ImagePicker, {
+				open: isPickerOpen,
+				onClose: () => setPickerOpen(false),
+				images,
+				isUploading,
+				onUpload: upload,
+				onSelect: (url) => {
+					setValue(field, url);
+					setPickerOpen(false);
+				}
+			}),
+			/* @__PURE__ */ jsx("input", {
+				"aria-label": field,
+				className: inputClassName,
+				type: "url",
+				placeholder,
+				value: source,
+				onChange: (event) => setValue(field, event.target.value)
+			})
+		]
+	});
+}
+function ImagePicker({ open, onClose, images, isUploading, onUpload, onSelect }) {
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-[1100] grid place-items-center bg-slate-950/45 p-4",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": "Image library",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-h-[min(44rem,calc(100vh-2rem))] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-5 shadow-2xl",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-lg font-semibold text-slate-950",
+						children: "Image library"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-sm text-slate-500",
+						children: "Choose an existing image or upload a new one."
+					})] }), /* @__PURE__ */ jsx("button", {
+						className: "rounded-lg px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100",
+						type: "button",
+						onClick: onClose,
+						children: "Close"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "mt-5 flex cursor-pointer items-center justify-center rounded-lg border border-dashed border-slate-300 px-4 py-6 text-sm font-medium text-slate-600 transition hover:border-blue-400 hover:text-blue-600",
+					children: [/* @__PURE__ */ jsx("input", {
+						className: "sr-only",
+						type: "file",
+						accept: "image/*",
+						onChange: (event) => {
+							const file = event.target.files?.[0];
+							if (file) onUpload(file);
+						}
+					}), "Upload image"]
+				}),
+				isUploading && /* @__PURE__ */ jsx("span", {
+					className: "mt-3 block text-sm text-slate-500",
+					children: "Uploading…"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3",
+					role: "list",
+					children: images.map((image) => /* @__PURE__ */ jsxs("button", {
+						className: "overflow-hidden rounded-lg border border-slate-200 text-left transition-opacity hover:opacity-75",
+						type: "button",
+						onClick: () => onSelect(image.url),
+						children: [/* @__PURE__ */ jsx("img", {
+							className: "aspect-square w-full object-cover",
+							src: image.url,
+							alt: image.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "block truncate p-2 text-xs text-slate-700",
+							children: image.name
+						})]
+					}, image.id))
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/react/content/toolbar.tsx
+function ContentToolbar({ className, labels = {}, confirmPublish }) {
+	const { canEdit, canPublish, isDirty, isEditing, isSaving, error, setEditing, save, publish } = useContent();
+	if (!canEdit) return null;
+	const edit = labels.edit ?? "Edit";
+	const saveLabel = labels.save ?? "Save draft";
+	const publishLabel = labels.publish ?? "Publish";
+	const cancel = labels.cancel ?? "Cancel";
+	const handlePublish = async () => {
+		if (confirmPublish && !await confirmPublish()) return;
+		await publish();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-wrap items-center gap-2 ${className ?? ""}`,
+		role: "toolbar",
+		"aria-label": "Content editor",
+		children: [
+			!isEditing ? /* @__PURE__ */ jsx("button", {
+				className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500",
+				type: "button",
+				onClick: () => setEditing(true),
+				children: edit
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("button", {
+					className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500 disabled:opacity-60",
+					type: "button",
+					disabled: isSaving,
+					onClick: () => void save(),
+					children: isSaving ? "Saving…" : saveLabel
+				}),
+				canPublish && /* @__PURE__ */ jsx("button", {
+					className: "rounded-lg bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-emerald-500 disabled:opacity-60",
+					type: "button",
+					disabled: isSaving,
+					onClick: () => void handlePublish(),
+					children: publishLabel
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: "rounded-lg px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:opacity-60",
+					type: "button",
+					disabled: isSaving,
+					onClick: () => setEditing(false),
+					children: cancel
+				})
+			] }),
+			error && /* @__PURE__ */ jsx("span", {
+				className: "w-full text-sm text-red-600 dark:text-red-400",
+				role: "alert",
+				children: error
+			}),
+			isEditing && isDirty && /* @__PURE__ */ jsx("span", {
+				className: "w-full text-xs text-slate-500",
+				"aria-live": "polite",
+				children: "Unsaved changes"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/content/content-editor.tsx
+function ContentEditor({ children, title = "JoAi Content", ...provider }) {
+	return /* @__PURE__ */ jsx(ContentProvider, {
+		...provider,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-joai-content-editor": "true",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "fixed right-4 bottom-4 z-[1000] w-[min(24rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-3 text-slate-950 shadow-xl",
+				children: [/* @__PURE__ */ jsx("strong", {
+					className: "mb-2 block text-sm font-semibold",
+					children: title
+				}), /* @__PURE__ */ jsx(ContentToolbar, { labels: {
+					edit: "Edit",
+					save: "Save draft",
+					publish: "Publish",
+					cancel: "Cancel"
+				} })]
+			}), children]
+		})
+	});
+}
+//#endregion
+export { ContentEditor, ContentProvider, ContentToolbar, EditableContent, EditableImage, EmbedChatInput, EmbedChatList, clearRoom, getOrCreateGuestId, loadRoom, openEventSourceStream, saveRoom, useContentValue, useEmbedChat };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joai/core",
-  "version": "4.5.0",
+  "version": "4.7.0",
   "description": "JoAi shared types, HTTP service, and config",
   "license": "MIT",
   "type": "module",

package/dist/types-CWSaEVa7.d.mts

@@ -1,32 +0,0 @@
-//#region src/http/types.d.ts
-interface IHttpService {
-  readonly baseUrl: string;
-  readonly authToken: string | null;
-  onNetworkError: (error: Error) => void;
-  onUnauthorized: (response: IAppResponse<any>) => void;
-  onSuccessfulResponse: (response: IAppResponse<any>) => void;
-  onMaintenanceMode: (response: IAppResponse<any>) => void;
-  get: <T>(url: string, options?: IRequestOptions) => Promise<IAppResponse<T>>;
-  post: <T>(url: string, data?: any, options?: IRequestOptions) => Promise<IAppResponse<T>>;
-  put: <T>(url: string, data?: any, options?: IRequestOptions) => Promise<IAppResponse<T>>;
-  patch: <T>(url: string, data?: any, options?: IRequestOptions) => Promise<IAppResponse<T>>;
-  delete: <T>(url: string, options?: IRequestOptions) => Promise<IAppResponse<T>>;
-}
-interface IAppResponse<T> {
-  data: T;
-  meta?: any;
-  body: any;
-  errors: any;
-  ok: boolean;
-  paymentRequired: boolean;
-  noContent: boolean;
-  original: Response;
-}
-interface IRequestOptions {
-  isJson?: boolean;
-  headers?: {
-    [name: string]: string;
-  };
-}
-//#endregion
-export { IHttpService as n, IRequestOptions as r, IAppResponse as t };