@parallelworks/ui 0.19.0 → 0.19.1

package/dist/ai/components/ShareDialog.js

@@ -0,0 +1,260 @@
+import { ShareIcon, TrashIcon } from "../../icons.js";
+import { ConfirmModal } from "../../components/ConfirmModal.js";
+import Loader from "../../components/Loader.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import Dropdown from "../ui/Dropdown.js";
+import { useCallback, useEffect, useState, useTransition } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ShareDialog.tsx
+function ShareDialog({ conversationId, isOpen, onClose }) {
+	const { strings } = useChatConfig();
+	const t = strings.shareConversation;
+	const { adapter, notify } = useChat();
+	const sharing = adapter.sharing;
+	const [permissions, setPermissions] = useState([]);
+	const [teams, setTeams] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [saving, startSaveTransition] = useTransition();
+	const [orgViewAccess, setOrgViewAccess] = useState(false);
+	const [orgCollaborateAccess, setOrgCollaborateAccess] = useState(false);
+	const [originalPermissions, setOriginalPermissions] = useState([]);
+	const [originalOrgCollaborateAccess, setOriginalOrgCollaborateAccess] = useState(false);
+	useEffect(() => {
+		if (!isOpen || !sharing) return;
+		const loadData = async () => {
+			setLoading(true);
+			try {
+				const perms = await sharing.listPermissions(conversationId);
+				setPermissions(perms);
+				setOriginalPermissions([...perms]);
+				const orgPerm = perms.find((p) => p.entireOrganization);
+				if (orgPerm) {
+					setOrgViewAccess(true);
+					setOrgCollaborateAccess(orgPerm.permission === "collaborate");
+					setOriginalOrgCollaborateAccess(orgPerm.permission === "collaborate");
+				} else {
+					setOrgViewAccess(false);
+					setOrgCollaborateAccess(false);
+					setOriginalOrgCollaborateAccess(false);
+				}
+				setTeams(await sharing.listGroups());
+			} catch (error) {
+				console.error("Failed to load sharing data:", error);
+				notify.error(t.loadError);
+			} finally {
+				setLoading(false);
+			}
+		};
+		loadData();
+	}, [
+		isOpen,
+		conversationId,
+		sharing,
+		notify,
+		t.loadError
+	]);
+	const handleSave = useCallback(() => {
+		if (!sharing) return;
+		startSaveTransition(async () => {
+			try {
+				const hadOrgPerm = originalPermissions.find((p) => p.entireOrganization);
+				const wantOrgPerm = orgViewAccess;
+				if (wantOrgPerm && !hadOrgPerm) await sharing.addPermission(conversationId, {
+					permission: orgCollaborateAccess ? "collaborate" : "view",
+					entireOrganization: true
+				});
+				else if (!wantOrgPerm && hadOrgPerm?.id) await sharing.removePermission(conversationId, hadOrgPerm.id);
+				else if (wantOrgPerm && hadOrgPerm?.id && (originalOrgCollaborateAccess !== orgCollaborateAccess || hadOrgPerm.permission === "collaborate" !== orgCollaborateAccess)) await sharing.updatePermission(conversationId, hadOrgPerm.id, orgCollaborateAccess ? "collaborate" : "view");
+				const originalTeamPerms = originalPermissions.filter((p) => p.team && !p.entireOrganization);
+				const currentTeamPerms = permissions.filter((p) => p.team && !p.entireOrganization);
+				for (const perm of currentTeamPerms) {
+					const original = originalTeamPerms.find((p) => p.team === perm.team);
+					if (!original) await sharing.addPermission(conversationId, {
+						permission: perm.permission,
+						team: perm.team,
+						entireOrganization: false
+					});
+					else if (original.permission !== perm.permission && original.id) await sharing.updatePermission(conversationId, original.id, perm.permission);
+				}
+				for (const original of originalTeamPerms) if (!currentTeamPerms.find((p) => p.team === original.team) && original.id) await sharing.removePermission(conversationId, original.id);
+			} catch (error) {
+				notify.error(error instanceof Error ? error.message : String(error));
+				return;
+			}
+			notify.success(t.saveSuccess);
+			onClose();
+		});
+	}, [
+		sharing,
+		conversationId,
+		permissions,
+		originalPermissions,
+		orgViewAccess,
+		orgCollaborateAccess,
+		originalOrgCollaborateAccess,
+		onClose,
+		notify,
+		t.saveSuccess
+	]);
+	const handleAddTeam = useCallback((teamId) => {
+		if (permissions.some((p) => p.team === teamId)) return;
+		const team = teams.find((candidate) => candidate.id === teamId);
+		if (team) setPermissions((prev) => [...prev, {
+			team: teamId,
+			teamName: team.name,
+			permission: "view",
+			entireOrganization: false
+		}]);
+	}, [teams, permissions]);
+	const handleRemoveTeam = useCallback((teamId) => {
+		setPermissions((prev) => prev.filter((p) => p.team !== teamId));
+	}, []);
+	const handleTeamPermissionChange = useCallback((teamId, permission) => {
+		setPermissions((prev) => prev.map((p) => p.team === teamId ? {
+			...p,
+			permission
+		} : p));
+	}, []);
+	if (!sharing) return null;
+	const teamPermissions = permissions.filter((p) => p.team && !p.entireOrganization);
+	const availableTeams = teams.filter((team) => !permissions.some((p) => p.team === team.id));
+	return /* @__PURE__ */ jsx(ConfirmModal, {
+		open: isOpen,
+		onClose,
+		align: "center",
+		title: t.title,
+		confirmLabel: strings.modal.save,
+		cancelLabel: strings.modal.cancel,
+		onConfirm: handleSave,
+		confirmDisabled: saving,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children: loading ? /* @__PURE__ */ jsx("div", {
+				className: "py-4",
+				children: /* @__PURE__ */ jsx(Loader, {
+					size: 24,
+					text: strings.modal.loading
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "border theme-border rounded-lg p-3",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-medium text-sm mb-2",
+						children: t.orgAccess
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: orgViewAccess,
+								onChange: (e) => {
+									setOrgViewAccess(e.target.checked);
+									if (!e.target.checked) setOrgCollaborateAccess(false);
+								},
+								className: "rounded"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-sm",
+								children: t.orgCanView
+							})]
+						}), /* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2 ml-4",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: orgCollaborateAccess,
+								onChange: (e) => setOrgCollaborateAccess(e.target.checked),
+								disabled: !orgViewAccess,
+								className: "rounded"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-sm",
+								children: t.allowCollaboration
+							})]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "border theme-border rounded-lg p-3",
+					children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "font-medium text-sm mb-2",
+							children: t.groupAccess
+						}),
+						teamPermissions.length > 0 ? /* @__PURE__ */ jsx("ul", {
+							className: "space-y-2 mb-3 max-h-[200px] overflow-y-auto",
+							children: teamPermissions.map((perm) => /* @__PURE__ */ jsxs("li", {
+								className: "flex items-center justify-between theme-muted-panel rounded px-2 py-1.5",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-sm theme-text",
+									children: perm.teamName || perm.team
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx(Dropdown, {
+										options: [{
+											label: t.viewOnly,
+											value: "view"
+										}, {
+											label: t.canCollaborate,
+											value: "collaborate"
+										}],
+										value: perm.permission,
+										onChange: (val) => handleTeamPermissionChange(perm.team, val),
+										wrapperClassName: "w-40",
+										textBoxClassName: "text-xs border theme-border rounded px-2 py-1"
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => handleRemoveTeam(perm.team),
+										className: "p-1 rounded hover:bg-red-500/10",
+										title: t.remove,
+										children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
+									})]
+								})]
+							}, perm.team))
+						}) : /* @__PURE__ */ jsx("p", {
+							className: "text-sm theme-muted-text mb-3",
+							children: t.noGroups
+						}),
+						availableTeams.length > 0 && /* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-2",
+							children: /* @__PURE__ */ jsx(Dropdown, {
+								options: availableTeams.map((team) => ({
+									label: team.name,
+									value: team.id
+								})),
+								value: "",
+								onChange: (val) => handleAddTeam(val),
+								placeholder: t.addGroups,
+								wrapperClassName: "flex-1",
+								textBoxClassName: "text-sm border theme-border rounded px-2 py-1.5 w-full"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-xs theme-muted-text",
+					children: t.info
+				})
+			] })
+		})
+	});
+}
+function ShareButton({ conversationId, disabled = false }) {
+	const { strings } = useChatConfig();
+	const { adapter } = useChat();
+	const [isOpen, setIsOpen] = useState(false);
+	if (!adapter.sharing) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => setIsOpen(true),
+		disabled,
+		className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text disabled:opacity-50",
+		title: strings.shareConversation.shareButton,
+		children: [/* @__PURE__ */ jsx(ShareIcon, { className: "h-3 w-3" }), strings.shareConversation.shareButton]
+	}), /* @__PURE__ */ jsx(ShareDialog, {
+		conversationId,
+		isOpen,
+		onClose: () => setIsOpen(false)
+	})] });
+}
+//#endregion
+export { ShareButton, ShareDialog as default };

package/dist/ai/components/SlashMenu.js

@@ -0,0 +1,91 @@
+import cx from "classnames";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/SlashMenu.tsx
+var MAX_SHOWN = 8;
+var TYPING_NAME = /^\/([\w:-]*)$/;
+function slashMatches(input, commands) {
+	const typed = TYPING_NAME.exec(input);
+	if (!typed) return [];
+	const query = (typed[1] ?? "").toLowerCase();
+	return commands.filter((c) => c.name.toLowerCase().startsWith(query)).slice(0, MAX_SHOWN);
+}
+/** The palette's open state and keys; the caller owns the input. */
+function useSlashMenu(input, config, setInput) {
+	const [active, setActive] = useState(0);
+	const [dismissed, setDismissed] = useState(false);
+	const matches = config ? slashMatches(input, config.commands) : [];
+	const exact = matches.length === 1 && `/${matches[0]?.name}` === input;
+	const open = matches.length > 0 && !dismissed && !exact;
+	const startsCommand = input.startsWith("/");
+	const onOpen = config?.onOpen;
+	useEffect(() => {
+		if (startsCommand) onOpen?.();
+	}, [startsCommand, onOpen]);
+	const query = TYPING_NAME.exec(input)?.[1] ?? null;
+	const [shownQuery, setShownQuery] = useState(query);
+	if (query !== shownQuery) {
+		setShownQuery(query);
+		setActive(0);
+		setDismissed(false);
+	}
+	const choose = (name) => setInput(`/${name} `);
+	/** True when the key belonged to the menu. */
+	const handleKey = (e) => {
+		if (!open) return false;
+		switch (e.key) {
+			case "ArrowDown":
+				setActive((i) => (i + 1) % matches.length);
+				break;
+			case "ArrowUp":
+				setActive((i) => (i - 1 + matches.length) % matches.length);
+				break;
+			case "Tab":
+			case "Enter": {
+				if (e.shiftKey) return false;
+				const pick = matches[Math.min(active, matches.length - 1)];
+				if (!pick) return false;
+				choose(pick.name);
+				break;
+			}
+			case "Escape":
+				setDismissed(true);
+				break;
+			default: return false;
+		}
+		e.preventDefault();
+		return true;
+	};
+	return {
+		open,
+		matches,
+		active,
+		choose,
+		handleKey
+	};
+}
+function SlashMenu({ label, matches, active, onChoose }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "listbox",
+		"aria-label": label,
+		"data-testid": "slash-menu",
+		className: "absolute bottom-full left-0 right-0 mb-2 z-20 overflow-hidden rounded-xl border theme-border bg-(--theme-panel-bg) shadow-lg",
+		children: matches.map((c, i) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "option",
+			"aria-selected": i === active,
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: () => onChoose(c.name),
+			className: cx("flex w-full items-baseline gap-3 px-3 py-1.5 text-left text-sm", i === active ? "theme-hover" : "hover:theme-hover"),
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "font-mono theme-text",
+				children: ["/", c.name]
+			}), c.description && /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs theme-muted-text",
+				children: c.description
+			})]
+		}, c.name))
+	});
+}
+//#endregion
+export { SlashMenu, slashMatches, useSlashMenu };

package/dist/ai/components/agent/ActivityLine.js

@@ -0,0 +1,151 @@
+import { LoaderIcon, StopSolidIcon } from "../../../icons.js";
+import { useChatConfig } from "../../core/config.js";
+import cx from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+//#region src/ai/components/agent/ActivityLine.tsx
+/** The agent status words: one is picked per turn and held until it ends. */
+var activityWords = [
+	"Thinking",
+	"Cogitating",
+	"Pondering",
+	"Percolating",
+	"Ruminating",
+	"Noodling",
+	"Conjuring",
+	"Simmering",
+	"Marinating",
+	"Tinkering",
+	"Scheming",
+	"Brewing",
+	"Wrangling",
+	"Finagling",
+	"Spelunking",
+	"Puttering",
+	"Composing",
+	"Synthesizing",
+	"Deliberating",
+	"Mulling",
+	"Contemplating",
+	"Vibing",
+	"Whittling",
+	"Concocting",
+	"Formulating",
+	"Hatching",
+	"Herding",
+	"Ideating",
+	"Manifesting",
+	"Moseying",
+	"Musing",
+	"Percussing",
+	"Reticulating",
+	"Schlepping",
+	"Stewing",
+	"Transmuting",
+	"Wibbling",
+	"Crunching",
+	"Forging",
+	"Cooking"
+];
+function randomActivityWord() {
+	return activityWords[Math.floor(Math.random() * activityWords.length)];
+}
+/** Elapsed run time the way an agent status line prints it: 45s, 2m13s,
+*  1h2m3s. */
+function formatElapsed(seconds) {
+	const total = Math.max(0, Math.floor(seconds));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const rest = total % 60;
+	if (hours > 0) return `${hours}h${minutes}m${rest}s`;
+	if (minutes > 0) return `${minutes}m${rest}s`;
+	return `${rest}s`;
+}
+/** Token counts the way an agent status line prints them: 512, 1.2k, 3.4M. */
+function compactCount(n) {
+	if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+	if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+	return String(Math.floor(n));
+}
+function secondsSince(iso) {
+	return Math.max(0, DateTime.now().diff(DateTime.fromISO(iso)).as("seconds"));
+}
+/** Seconds since `startedAt`, re-read every second; null when there is no
+*  start to count from. */
+function useElapsedSeconds(startedAt) {
+	const [elapsed, setElapsed] = useState(() => startedAt ? secondsSince(startedAt) : null);
+	useEffect(() => {
+		if (!startedAt) {
+			setElapsed(null);
+			return;
+		}
+		setElapsed(secondsSince(startedAt));
+		const id = setInterval(() => setElapsed(secondsSince(startedAt)), 1e3);
+		return () => clearInterval(id);
+	}, [startedAt]);
+	return elapsed;
+}
+/** A status word held for the whole turn and re-rolled when a new one starts. */
+function useTurnWord(startedAt) {
+	const [word, setWord] = useState(randomActivityWord);
+	const turn = useRef(startedAt);
+	useEffect(() => {
+		if (turn.current !== startedAt) {
+			turn.current = startedAt;
+			setWord(randomActivityWord());
+		}
+	}, [startedAt]);
+	return word;
+}
+/** The terminal's "it's working" line for a running turn: spinner, status
+*  word, how long the turn has run, its token counts so far, and a way to
+*  stop it. */
+function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping = false, word, testId }) {
+	const { strings } = useChatConfig();
+	const elapsed = useElapsedSeconds(startedAt);
+	const turnWord = useTurnWord(startedAt);
+	const meta = [];
+	if (elapsed !== null) meta.push(formatElapsed(elapsed));
+	if (inputTokens || outputTokens) meta.push(strings.activity.tokens(compactCount(inputTokens ?? 0), compactCount(outputTokens ?? 0)));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: "flex min-h-8 items-center gap-2 px-1 text-sm",
+		children: [
+			/* @__PURE__ */ jsx(LoaderIcon, {
+				className: "h-3.5 w-3.5 shrink-0 animate-spin text-(--theme-element) motion-reduce:hidden",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "hidden shrink-0 leading-none text-(--theme-element) motion-reduce:inline",
+				"aria-hidden": "true",
+				children: "●"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-testid": testId ? `${testId}-word` : void 0,
+				className: "min-w-0 truncate text-(--theme-element)",
+				children: [word ?? turnWord, "…"]
+			}),
+			meta.length > 0 && /* @__PURE__ */ jsxs("span", {
+				"data-testid": testId ? `${testId}-meta` : void 0,
+				className: "shrink-0 text-xs tabular-nums theme-muted-text",
+				children: [
+					"(",
+					meta.join(" · "),
+					")"
+				]
+			}),
+			onStop && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onStop,
+				disabled: stopping,
+				"aria-label": strings.input.stopGenerating,
+				title: strings.input.stopGenerating,
+				className: cx("ml-auto inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs theme-muted-text transition-colors", "hover:theme-hover hover:theme-text disabled:cursor-not-allowed disabled:opacity-50"),
+				children: [/* @__PURE__ */ jsx(StopSolidIcon, { className: "h-3 w-3" }), strings.activity.stop]
+			})
+		]
+	});
+}
+//#endregion
+export { activityWords, compactCount, ActivityLine as default, formatElapsed, randomActivityWord };