@parallelworks/ui 0.19.0 → 0.20.0

package/dist/ai/components/ChatThread.js

@@ -0,0 +1,198 @@
+import { CloseIcon, ThinkingIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import Markdown from "../ui/Markdown.js";
+import BlockedGroupBanner from "./BlockedGroupBanner.js";
+import useDragDrop from "../core/useDragDrop.js";
+import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
+import DragOverlay from "./DragOverlay.js";
+import ChatInput from "./ChatInput.js";
+import { ShareButton } from "./ShareDialog.js";
+import ChatMessageList from "./ChatMessageList.js";
+import cx from "classnames";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ChatThread.tsx
+function ChatThread({ conversationId }) {
+	const chatInputRef = useRef(null);
+	const [editingState, setEditingState] = useState(null);
+	const [reasoningDrawerOpen, setReasoningDrawerOpen] = useState(false);
+	const [selectedReasoning, setSelectedReasoning] = useState(null);
+	const handleOpenReasoning = useCallback((reasoning, duration) => {
+		if (reasoningDrawerOpen && selectedReasoning?.content === reasoning) setReasoningDrawerOpen(false);
+		else {
+			setSelectedReasoning({
+				content: reasoning,
+				duration
+			});
+			setReasoningDrawerOpen(true);
+		}
+	}, [reasoningDrawerOpen, selectedReasoning?.content]);
+	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, isLoadingConversation, isStreaming, streamingContent, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
+	const { slots, strings } = useChatConfig();
+	const requestedConversationIdRef = useRef(null);
+	useEffect(() => {
+		loadProviders();
+		if (requestedConversationIdRef.current !== conversationId) {
+			requestedConversationIdRef.current = conversationId;
+			loadConversation(conversationId);
+		}
+	}, [
+		conversationId,
+		loadConversation,
+		loadProviders
+	]);
+	const handleSendMessage = useCallback((content, attachmentIds, attachmentMeta) => {
+		sendMessage(content, attachmentIds, void 0, attachmentMeta);
+	}, [sendMessage]);
+	const handleEditMessage = useCallback((messageId) => {
+		const message = (currentConversation?.messages || []).find((m) => m.id === messageId);
+		if (message && message.role === "user") setEditingState({
+			messageId: message.id,
+			parentId: message.parentId || null
+		});
+	}, [currentConversation?.messages]);
+	const handleSaveEdit = useCallback((_messageId, content) => {
+		if (!editingState) return;
+		sendMessage(content, void 0, editingState.parentId || void 0);
+		setEditingState(null);
+	}, [sendMessage, editingState]);
+	const handleCancelEdit = useCallback(() => {
+		setEditingState(null);
+	}, []);
+	const handleEditLastMessage = useCallback(() => {
+		const conversationMessages = currentConversation?.messages || [];
+		for (let i = conversationMessages.length - 1; i >= 0; i--) if (conversationMessages[i].role === "user") {
+			handleEditMessage(conversationMessages[i].id);
+			break;
+		}
+	}, [currentConversation?.messages, handleEditMessage]);
+	const handleNavigateBranch = useCallback((messageId) => {
+		navigateToBranch?.(messageId);
+	}, [navigateToBranch]);
+	const handleRegenerateMessage = useCallback((messageId) => {
+		const conversationMessages = currentConversation?.messages || [];
+		const assistantMessage = conversationMessages.find((m) => m.id === messageId);
+		if (!assistantMessage || assistantMessage.role !== "assistant") return;
+		const userMessage = conversationMessages.find((m) => m.id === assistantMessage.parentId);
+		if (!userMessage || userMessage.role !== "user") return;
+		sendMessage(userMessage.content || "", userMessage.attachments?.map((a) => a.id), userMessage.parentId || void 0);
+	}, [currentConversation?.messages, sendMessage]);
+	const handleRetryMessage = useCallback((messageId) => {
+		retryMessage(messageId);
+	}, [retryMessage]);
+	const handleFilesDropped = useCallback((files) => {
+		chatInputRef.current?.addFiles(files);
+	}, []);
+	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
+	const attachmentsAvailable = !!adapter.attachments;
+	const streamingMessage = useMemo(() => isStreaming && streamingContent ? {
+		id: "streaming",
+		conversationId,
+		role: "assistant",
+		content: streamingContent,
+		timestamp: ""
+	} : null, [
+		isStreaming,
+		streamingContent,
+		conversationId
+	]);
+	const messages = currentConversation?.messages || [];
+	const showAuthor = useMemo(() => {
+		return new Set(messages.filter((m) => m.author).map((m) => m.author.username)).size > 1 || currentConversation?.isOwner === false;
+	}, [messages, currentConversation?.isOwner]);
+	if (isLoadingConversation && !currentConversation) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full bg-(--theme-panel-bg)",
+		children: [/* @__PURE__ */ jsx("div", { className: "flex-1" }), /* @__PURE__ */ jsx(ChatInput, {
+			ref: chatInputRef,
+			onSend: handleSendMessage,
+			disabled: true,
+			conversationId,
+			settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
+			settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, {})] })
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full relative bg-(--theme-panel-bg)",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 flex flex-col min-w-0",
+			...attachmentsAvailable ? dragHandlers : {},
+			children: [
+				isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-lg" }),
+				/* @__PURE__ */ jsx(BlockedGroupBanner, {}),
+				/* @__PURE__ */ jsx(ChatMessageList, {
+					messages,
+					allMessages: messages,
+					streamingMessage,
+					queuedMessages,
+					onRemoveQueued: removeQueuedMessage,
+					editingMessageId: editingState?.messageId,
+					showAuthor,
+					currentUsername: currentUser.username,
+					onNavigateBranch: handleNavigateBranch,
+					onEditMessage: currentConversation?.canCollaborate !== false ? handleEditMessage : void 0,
+					onRegenerateMessage: currentConversation?.canCollaborate !== false ? handleRegenerateMessage : void 0,
+					onRetryMessage: currentConversation?.canCollaborate !== false ? handleRetryMessage : void 0,
+					onSaveEdit: handleSaveEdit,
+					onCancelEdit: handleCancelEdit,
+					onOpenReasoning: handleOpenReasoning,
+					inputElement: /* @__PURE__ */ jsx(ChatInput, {
+						ref: chatInputRef,
+						onSend: handleSendMessage,
+						disabled: isLoadingConversation || currentConversation?.canCollaborate === false,
+						placeholder: currentConversation?.canCollaborate === false ? strings.thread.viewOnly : void 0,
+						conversationId,
+						onEditLastMessage: handleEditLastMessage,
+						settingsLeft: /* @__PURE__ */ jsxs(Fragment$1, { children: [currentConversation?.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
+						settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, {})] })
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("flex-shrink-0 border-l theme-border flex flex-col h-full transition-[width] duration-300 ease-in-out overflow-hidden bg-(--theme-panel-bg)", reasoningDrawerOpen ? "w-[400px]" : "w-0 border-l-0"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "w-[400px] h-full flex flex-col",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between p-3 border-b theme-border",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(ThinkingIcon, { className: "w-5 h-5 theme-muted-text" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: strings.thinking.activity
+							}),
+							selectedReasoning?.duration && /* @__PURE__ */ jsxs("span", {
+								className: "text-sm theme-muted-text",
+								children: [
+									"· ",
+									Math.round(selectedReasoning.duration / 1e3),
+									"s"
+								]
+							})
+						]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setReasoningDrawerOpen(false),
+						className: "p-1 rounded hover:theme-hover transition-colors",
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-5 h-5 theme-muted-text" })
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto p-4",
+					children: selectedReasoning?.content && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 text-sm font-medium theme-text",
+							children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-blue-500" }), /* @__PURE__ */ jsx("span", { children: strings.thinking.label })]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-sm theme-muted-text leading-relaxed pl-4 border-l-2 theme-border",
+							children: /* @__PURE__ */ jsx(Markdown, { children: selectedReasoning.content })
+						})]
+					})
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { ChatThread as default };

package/dist/ai/components/ComposerChrome.js

@@ -0,0 +1,50 @@
+import { ConnectIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import AllocationSelector from "./AllocationSelector.js";
+import ModelSelector from "./ModelSelector.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ComposerChrome.tsx
+/** Where the turn runs, sitting above the composer the way the terminal shows
+*  it: the machine, the workspace, and whatever else names the place. */
+function ComposerContext({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mb-1.5 flex flex-wrap items-center gap-1.5",
+		children
+	});
+}
+/** What the turn runs as, sitting under the composer: the surface's own
+*  controls on the left, the model on the right, both reading as plain text. */
+function ComposerSettings({ left, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-1.5 flex flex-wrap items-center justify-between gap-x-3 gap-y-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: left
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children
+		})]
+	});
+}
+/** The two selectors every surface carries, bare so they read as text beside
+*  whatever the surface puts next to them. */
+function ComposerControls({ targetSession }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelector, {
+		variant: "bare",
+		targetSession
+	}), /* @__PURE__ */ jsx(AllocationSelector, { variant: "bare" })] });
+}
+function ConnectToolsLink() {
+	const { extraLinks, LinkComponent, strings } = useChatConfig();
+	if (!extraLinks.connectTools) return null;
+	return /* @__PURE__ */ jsxs(LinkComponent, {
+		target: {
+			kind: "external",
+			href: extraLinks.connectTools
+		},
+		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",
+		children: [/* @__PURE__ */ jsx(ConnectIcon, { className: "h-3 w-3" }), strings.sidebar.connectTools]
+	});
+}
+//#endregion
+export { ComposerContext, ComposerControls, ComposerSettings, ConnectToolsLink };

package/dist/ai/components/ComposerFrame.js

@@ -0,0 +1,33 @@
+import { ComposerContext, ComposerControls, ComposerSettings } from "./ComposerChrome.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ComposerFrame.tsx
+/** The column a composer sits in: notices above it, what the agent is doing
+*  right now, a row of chips saying where the message goes, the box itself,
+*  and a row of settings under it with the model and allocation on the right. */
+function ComposerFrame({ notices, activity, above, belowLeft, belowRight, hint, className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("shrink-0 px-6 pb-6 pt-2", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto w-full max-w-[50rem] space-y-2",
+			children: [notices, /* @__PURE__ */ jsxs("div", { children: [
+				activity && /* @__PURE__ */ jsx("div", {
+					className: "mb-2",
+					children: activity
+				}),
+				above && /* @__PURE__ */ jsx(ComposerContext, { children: above }),
+				children,
+				/* @__PURE__ */ jsx(ComposerSettings, {
+					left: belowLeft,
+					children: belowRight ?? /* @__PURE__ */ jsx(ComposerControls, {})
+				}),
+				hint && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-center text-[11px] theme-muted-text",
+					children: hint
+				})
+			] })]
+		})
+	});
+}
+//#endregion
+export { ComposerFrame as default };

package/dist/ai/components/DragOverlay.js

@@ -0,0 +1,20 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/DragOverlay.tsx
+function DragOverlay({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("absolute inset-0 z-50 flex items-center justify-center bg-blue-500/10 border-2 border-dashed border-blue-500 backdrop-blur-sm pointer-events-none", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-lg font-medium text-blue-600",
+				children: "Drop files here"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-blue-500/80",
+				children: "Release to upload"
+			})]
+		})
+	});
+}
+//#endregion
+export { DragOverlay as default };

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 };