@parallelworks/ui 0.18.0 → 0.19.1

package/dist/ai/components/ModelSelector.js

@@ -0,0 +1,343 @@
+import { CheckIcon, ChevronDownIcon, CloudIcon, CogIcon, RetryIcon, RobotIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import cx from "classnames";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/ai/components/ModelSelector.tsx
+/** The search field plus the list's max-h-80, so the flip decision matches
+*  what renders. */
+var MAX_PANEL_HEIGHT_PX = 380;
+function CspIcon({ cspKind, className }) {
+	const { slots } = useChatConfig();
+	const custom = slots.providerIcon?.(cspKind, className);
+	if (custom) return /* @__PURE__ */ jsx(Fragment$1, { children: custom });
+	return /* @__PURE__ */ jsx(CloudIcon, { className: cx("text-purple-500", className) });
+}
+function getProviderKeyFromModelId(modelId) {
+	const idx = modelId.indexOf("/");
+	return idx > 0 ? modelId.substring(0, idx) : modelId;
+}
+function getModelNameFromId(modelId) {
+	const idx = modelId.indexOf("/");
+	return idx > 0 ? modelId.substring(idx + 1) : modelId;
+}
+function getModelLabel(model) {
+	const idName = getModelNameFromId(model.id);
+	const name = model.name?.trim();
+	if (!name || name === `${model.provider} (${idName})`) return idName;
+	return name;
+}
+function groupModelsByProvider(models) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const model of models) {
+		const key = model.id.includes("/") ? getProviderKeyFromModelId(model.id) : model.provider ?? model.owned_by;
+		if (!groups.has(key)) groups.set(key, []);
+		groups.get(key).push(model);
+	}
+	return groups;
+}
+function ModelSelector({ targetSession, variant = "default" }) {
+	const bare = variant === "bare";
+	const { providers, models, unreachableSessions, selectedProvider, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
+	const { extraLinks, LinkComponent } = useChatConfig();
+	const [isOpen, setIsOpen] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [dropdownPosition, setDropdownPosition] = useState({
+		top: 0,
+		bottom: 0,
+		left: 0,
+		width: 0,
+		flipped: false
+	});
+	const containerRef = useRef(null);
+	const dropdownRef = useRef(null);
+	const buttonRef = useRef(null);
+	const inputRef = useRef(null);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	const updateDropdownPosition = useCallback(() => {
+		if (!buttonRef.current) return;
+		const rect = buttonRef.current.getBoundingClientRect();
+		const below = window.innerHeight - rect.bottom;
+		setDropdownPosition({
+			top: rect.bottom + 4,
+			bottom: window.innerHeight - rect.top + 4,
+			left: rect.left,
+			width: Math.max(rect.width, 320),
+			flipped: below < MAX_PANEL_HEIGHT_PX && rect.top > below
+		});
+	}, []);
+	useEffect(() => {
+		if (!isOpen) return;
+		function handleClickOutside(event) {
+			const target = event.target;
+			const clickedInsideButton = containerRef.current?.contains(target);
+			const clickedInsideDropdown = dropdownRef.current?.contains(target);
+			if (!clickedInsideButton && !clickedInsideDropdown) setIsOpen(false);
+		}
+		const timeoutId = setTimeout(() => {
+			document.addEventListener("mousedown", handleClickOutside);
+		}, 0);
+		return () => {
+			clearTimeout(timeoutId);
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		updateDropdownPosition();
+		window.addEventListener("scroll", updateDropdownPosition, true);
+		window.addEventListener("resize", updateDropdownPosition);
+		return () => {
+			window.removeEventListener("scroll", updateDropdownPosition, true);
+			window.removeEventListener("resize", updateDropdownPosition);
+		};
+	}, [isOpen, updateDropdownPosition]);
+	useEffect(() => {
+		if (isOpen && inputRef.current) inputRef.current.focus();
+	}, [isOpen]);
+	const filteredModels = useMemo(() => {
+		if (!searchQuery.trim()) return models;
+		const query = searchQuery.toLowerCase();
+		return models.filter((model) => getModelNameFromId(model.id).toLowerCase().includes(query) || (model.provider || "").toLowerCase().includes(query) || (model.name || "").toLowerCase().includes(query));
+	}, [models, searchQuery]);
+	const groupedModels = useMemo(() => groupModelsByProvider(filteredModels), [filteredModels]);
+	const selectedModelInfo = models.find((m) => m.id === selectedProvider);
+	const selectedModelName = selectedModelInfo ? getModelLabel(selectedModelInfo) : null;
+	const selectedProviderName = selectedModelInfo?.provider || null;
+	const handleSelect = (modelId) => {
+		setSelectedProvider(modelId);
+		setIsOpen(false);
+		setSearchQuery("");
+	};
+	const targetSessionDisplayName = targetSession?.split(":").pop();
+	const targetSessionFound = targetSession && models.length > 0 ? models.some((m) => m.id.startsWith(`session:${targetSession}/`)) : false;
+	const targetSessionStatus = targetSession ? isLoadingModels ? "connecting" : hasLoadedModels && !targetSessionFound ? "offline" : null : null;
+	const boxClass = bare ? "flex items-center gap-1 rounded-md px-1.5 py-0.5 max-w-[280px]" : "flex items-center gap-2 px-3 h-8 rounded-lg min-w-[180px] max-w-[280px]";
+	const textClass = bare ? "text-[11px]" : "text-sm";
+	if (isLoadingModels && models.length === 0 && !targetSession) return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "relative",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: boxClass,
+			children: [!bare && /* @__PURE__ */ jsx(RobotIcon, { className: "h-4 w-4 text-purple-500 flex-shrink-0 animate-pulse" }), /* @__PURE__ */ jsx("span", {
+				className: cx(textClass, "theme-muted-text"),
+				children: "Loading models..."
+			})]
+		})
+	});
+	if (modelsError && models.length === 0) return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "relative",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: boxClass,
+			children: [
+				!bare && /* @__PURE__ */ jsx(RobotIcon, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: cx(textClass, "text-red-600"),
+					children: "Failed to load models"
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => refreshModels(),
+					className: cx("flex items-center gap-1 text-blue-600 hover:underline ml-1", bare ? "text-[11px]" : "text-xs"),
+					children: [/* @__PURE__ */ jsx(RetryIcon, { className: "h-2.5 w-2.5" }), "Retry"]
+				})
+			]
+		})
+	});
+	if (hasLoadedModels && models.length === 0 && !targetSessionStatus && unreachableSessions.length === 0) return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "relative",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: boxClass,
+			children: [!bare && /* @__PURE__ */ jsx(RobotIcon, { className: "h-4 w-4 theme-muted-text flex-shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: cx(textClass, "theme-muted-text"),
+				children: "No models available"
+			})]
+		})
+	});
+	const triggerText = selectedModelName ? null : targetSessionStatus === "connecting" ? "Connecting..." : models.length === 0 && isLoadingModels ? "Loading models..." : "Select a model";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: buttonRef,
+			type: "button",
+			onClick: () => setIsOpen(!isOpen),
+			disabled: models.length === 0 && !targetSessionStatus && unreachableSessions.length === 0,
+			className: cx(boxClass, "transition-all cursor-pointer bg-transparent", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed", bare ? "hover:theme-muted-panel" : "border theme-border hover:theme-hover"),
+			children: [
+				!bare && /* @__PURE__ */ jsx(RobotIcon, { className: cx("h-4 w-4 flex-shrink-0", targetSessionStatus === "connecting" ? "text-amber-500 animate-pulse" : "text-purple-500") }),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-w-0 text-left",
+					children: selectedModelName ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline gap-1.5 min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							title: selectedModelName,
+							className: cx("truncate", bare ? "text-[11px] theme-muted-text" : "text-sm font-medium text-(--theme-panel)"),
+							children: selectedModelName
+						}), selectedProviderName && /* @__PURE__ */ jsx("span", {
+							title: selectedProviderName,
+							className: cx("theme-muted-text truncate flex-shrink-0 max-w-[45%]", bare ? "text-[10px]" : "text-xs"),
+							children: selectedProviderName
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: cx(bare ? "text-[11px]" : "text-sm", targetSessionStatus === "connecting" ? "text-amber-600" : "theme-muted-text"),
+						children: triggerText
+					})
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: cx("h-3 w-3 theme-muted-text transition-transform flex-shrink-0", !bare && "ml-auto", isOpen && "rotate-180") })
+			]
+		}), isOpen && mounted && createPortal(/* @__PURE__ */ jsxs("div", {
+			ref: dropdownRef,
+			role: "none",
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				if (e.key === "Escape") {
+					e.preventDefault();
+					setIsOpen(false);
+					buttonRef.current?.focus();
+				}
+			},
+			style: {
+				position: "fixed",
+				...dropdownPosition.flipped ? { bottom: dropdownPosition.bottom } : { top: dropdownPosition.top },
+				left: dropdownPosition.left,
+				width: dropdownPosition.width,
+				zIndex: 9999
+			},
+			className: cx("theme-panel rounded-lg shadow-lg", "border theme-border", "overflow-hidden"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "p-2 border-b theme-border",
+				children: /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "text",
+					value: searchQuery,
+					onChange: (e) => setSearchQuery(e.target.value),
+					placeholder: "Search models...",
+					className: cx("w-full px-3 py-2 text-sm rounded-md", "theme-muted-panel", "border theme-border", "focus:outline-none focus:ring-2 focus:ring-blue-500", "placeholder:theme-muted-text")
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "max-h-80 overflow-y-auto",
+				children: [
+					targetSessionStatus && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "px-3 py-1.5 bg-amber-500/5 sticky top-0",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx(CloudIcon, { className: "h-3 w-3 text-amber-500" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-xs font-semibold text-amber-600 uppercase tracking-wide flex-1",
+									children: targetSessionDisplayName
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: cx("text-[10px] px-1.5 py-0.5 rounded-full", targetSessionStatus === "connecting" ? "text-amber-600 bg-amber-500/10 animate-pulse" : "text-amber-500 bg-amber-500/10"),
+									children: targetSessionStatus === "connecting" ? "Connecting..." : "Not responding"
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-2 flex items-center gap-2",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "text-sm theme-muted-text italic",
+							children: targetSessionStatus === "connecting" ? "Loading session models..." : "Service not responding — ensure it is running on the remote host"
+						})
+					})] }),
+					unreachableSessions.filter((s) => !targetSession || `${s.owner}:${s.name}` !== targetSession).map((s) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "px-3 py-1.5 bg-amber-500/5 sticky top-0",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx(CloudIcon, { className: "h-3 w-3 text-amber-500" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-xs font-semibold text-amber-600 uppercase tracking-wide flex-1",
+									children: s.name
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-amber-500 bg-amber-500/10 px-1.5 py-0.5 rounded-full",
+									children: "Not responding"
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-2 flex items-center gap-2",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "text-sm theme-muted-text italic",
+							children: "Service not responding — ensure it is running on the remote host"
+						})
+					})] }, `${s.owner}:${s.name}`)),
+					groupedModels.size === 0 && !targetSessionStatus && unreachableSessions.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "p-4 text-center theme-muted-text text-sm",
+						children: "No models found"
+					}) : Array.from(groupedModels.entries()).map(([providerKey, providerModels]) => {
+						const providerInfo = providers.find((p) => `${p.user}:${p.name}` === providerKey);
+						const providerName = providerModels[0]?.provider || providerInfo?.name || "Unknown Provider";
+						const platform = providerInfo?.platformLabel;
+						const platformSuffix = providerInfo && platform && platform.toLowerCase() !== providerName.toLowerCase() ? platform : null;
+						const isOwner = providerInfo?.user === currentUser.username;
+						const settingsHref = providerInfo && extraLinks.providerSettings ? extraLinks.providerSettings(providerInfo.user, providerInfo.name) : null;
+						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+							className: "px-3 py-1.5 theme-muted-panel sticky top-0",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CspIcon, {
+										cspKind: providerInfo?.cspKind ?? "other",
+										className: "h-3 w-3"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-xs font-semibold theme-muted-text uppercase tracking-wide",
+										children: providerName
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate text-xs theme-muted-text",
+										children: platformSuffix ? `· ${platformSuffix}` : ""
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "text-xs theme-muted-text",
+										children: [
+											"(",
+											providerModels.length,
+											")"
+										]
+									}),
+									isOwner && settingsHref && /* @__PURE__ */ jsx(LinkComponent, {
+										target: {
+											kind: "external",
+											href: settingsHref
+										},
+										onClick: (e) => e.stopPropagation(),
+										className: "p-0.5 rounded hover:theme-hover theme-muted-text hover:text-blue-600 transition-colors",
+										title: "Manage provider",
+										children: /* @__PURE__ */ jsx(CogIcon, { className: "h-3 w-3" })
+									})
+								]
+							})
+						}), providerModels.map((model) => {
+							const modelName = getModelLabel(model);
+							const isSelected = model.id === selectedProvider;
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => handleSelect(model.id),
+								className: cx("w-full flex items-center gap-3 px-4 py-2 text-left cursor-pointer", "hover:bg-blue-500/5 transition-colors", isSelected && "bg-blue-500/10"),
+								children: [/* @__PURE__ */ jsx("span", {
+									title: modelName,
+									className: cx("flex-1 min-w-0 text-sm truncate", isSelected ? "text-blue-600 font-medium" : ""),
+									style: !isSelected ? { color: "var(--theme-panel, #1f2937)" } : void 0,
+									children: modelName
+								}), isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 text-blue-600 flex-shrink-0" })]
+							}, model.id);
+						})] }, providerKey);
+					})
+				]
+			})]
+		}), document.body)]
+	});
+}
+//#endregion
+export { ModelSelector as default, getProviderKeyFromModelId };

package/dist/ai/components/ShareDialog.d.ts

@@ -0,0 +1,11 @@
+interface ShareDialogProps {
+    conversationId: string;
+    isOpen: boolean;
+    onClose: () => void;
+}
+export default function ShareDialog({ conversationId, isOpen, onClose }: ShareDialogProps): import("react").JSX.Element | null;
+export declare function ShareButton({ conversationId, disabled, }: {
+    conversationId: string;
+    disabled?: boolean;
+}): import("react").JSX.Element | null;
+export {};

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.d.ts

@@ -0,0 +1,28 @@
+import { type KeyboardEvent } from 'react';
+export interface SlashCommandOption {
+    name: string;
+    description?: string | undefined;
+    usage?: string | undefined;
+}
+export interface SlashMenuConfig {
+    commands: SlashCommandOption[];
+    /** Names the listbox for assistive tech. */
+    label: string;
+    /** Called when the input first reads as a command, so a host can load the list lazily. */
+    onOpen?: (() => void) | undefined;
+}
+export declare function slashMatches(input: string, commands: SlashCommandOption[]): SlashCommandOption[];
+/** The palette's open state and keys; the caller owns the input. */
+export declare function useSlashMenu(input: string, config: SlashMenuConfig | undefined, setInput: (value: string) => void): {
+    open: boolean;
+    matches: SlashCommandOption[];
+    active: number;
+    choose: (name: string) => void;
+    handleKey: (e: KeyboardEvent<HTMLTextAreaElement>) => boolean;
+};
+export declare function SlashMenu({ label, matches, active, onChoose, }: {
+    label: string;
+    matches: SlashCommandOption[];
+    active: number;
+    onChoose: (name: string) => void;
+}): import("react").JSX.Element;