@agent-native/core 0.12.5 → 0.12.7

package/dist/client/MultiTabAssistantChat.js

@@ -9,6 +9,60 @@ import { useChatThreads } from "./use-chat-threads.js";
 import { agentNativePath } from "./api-path.js";
 import { DEFAULT_MODEL } from "../agent/default-model.js";
 import { getReasoningEffortOptionsForModel, isReasoningEffort, } from "../shared/reasoning-effort.js";
+const MODEL_SELECTION_STORAGE_KEY = "agent-native:chat-models:selection";
+function readStoredModelSelection(key) {
+    if (typeof window === "undefined")
+        return undefined;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return undefined;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed.model !== "string" || !parsed.model.trim()) {
+            return undefined;
+        }
+        const selection = {
+            model: parsed.model,
+            effort: isReasoningEffort(parsed.effort) ? parsed.effort : "auto",
+        };
+        if (typeof parsed.engine === "string")
+            selection.engine = parsed.engine;
+        return selection;
+    }
+    catch {
+        return undefined;
+    }
+}
+function writeStoredModelSelection(key, selection) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(key, JSON.stringify(selection));
+    }
+    catch { }
+}
+function resolveModelSelection(selection, groups) {
+    if (!selection?.model)
+        return undefined;
+    const preferredGroup = groups.find((group) => group.engine === selection.engine &&
+        group.models.includes(selection.model));
+    const fallbackGroup = groups.find((group) => group.models.includes(selection.model));
+    if (groups.length > 0 && !preferredGroup && !fallbackGroup) {
+        return undefined;
+    }
+    const engine = preferredGroup?.engine ?? fallbackGroup?.engine ?? selection.engine;
+    if (!engine && groups.length > 0)
+        return undefined;
+    const requestedEffort = selection.effort ?? "auto";
+    const effortOptions = getReasoningEffortOptionsForModel(selection.model);
+    const effort = requestedEffort === "auto" || effortOptions.includes(requestedEffort)
+        ? requestedEffort
+        : "auto";
+    const resolved = { model: selection.model, effort };
+    if (engine)
+        resolved.engine = engine;
+    return resolved;
+}
 // ─── Skeleton Loader ─────────────────────────────────────────────────────────
 function ChatSkeleton({ header, headerOnly = false, }) {
     return (_jsxs("div", { className: cn("flex flex-col min-h-0", headerOnly ? "shrink-0" : "flex-1 h-full"), children: [header ?? (_jsxs("div", { className: "flex items-center px-1 py-1 border-b border-border shrink-0 gap-0.5", children: [_jsx("div", { className: "h-[22px] w-20 rounded-md bg-muted animate-pulse" }), _jsxs("div", { className: "ml-auto flex gap-0.5", children: [_jsx("div", { className: "h-[22px] w-[22px] rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "h-[22px] w-[22px] rounded-md bg-muted animate-pulse" })] })] })), !headerOnly && (_jsxs("div", { className: "flex-1 flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-center py-8", children: _jsx("div", { className: "h-10 w-10 rounded-full bg-muted animate-pulse" }) }), _jsx("div", { className: "h-3 w-32 rounded bg-muted animate-pulse mx-auto" })] }))] }));
@@ -114,6 +168,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
     const { threads, activeThreadId, isLoading, createThread, switchThread, deleteThread, forkThread, saveThreadData, generateTitle, searchThreads, refreshThreads, } = useChatThreads(apiUrl, storageKey);
     // Namespace all localStorage keys by storageKey when provided (for per-app isolation in frame)
     const keyPrefix = storageKey ? `:${storageKey}` : "";
+    const modelSelectionKey = `${MODEL_SELECTION_STORAGE_KEY}${keyPrefix}`;
     // Track which tabs have been focused at least once (lazy mount for sub-agent tabs)
     const mountedTabsRef = useRef(new Set());
     const activeThreadIdRef = useRef(activeThreadId);
@@ -130,9 +185,19 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
     const [availableModels, setAvailableModels] = useState([]);
     const [defaultModel, setDefaultModel] = useState(DEFAULT_MODEL);
     const threadModelRef = useRef(new Map());
-    const [selectedModelForActiveThread, setSelectedModelForActiveThread] = useState(undefined);
-    const [selectedEffortForActiveThread, setSelectedEffortForActiveThread] = useState("auto");
-    const activeThreadModel = selectedModelForActiveThread ?? defaultModel;
+    const [persistedModelSelection, setPersistedModelSelection] = useState(() => readStoredModelSelection(modelSelectionKey));
+    const [modelSelectionVersion, setModelSelectionVersion] = useState(0);
+    useEffect(() => {
+        setPersistedModelSelection(readStoredModelSelection(modelSelectionKey));
+    }, [modelSelectionKey]);
+    const bumpModelSelectionVersion = useCallback(() => {
+        setModelSelectionVersion((version) => version + 1);
+    }, []);
+    const resolveThreadModelSelection = useCallback((threadId) => resolveModelSelection(threadModelRef.current.get(threadId) ?? persistedModelSelection, availableModels), [availableModels, persistedModelSelection, modelSelectionVersion]);
+    const persistModelSelection = useCallback((selection) => {
+        setPersistedModelSelection(selection);
+        writeStoredModelSelection(modelSelectionKey, selection);
+    }, [modelSelectionKey]);
     const handleModelChange = useCallback((model, engine) => {
         const threadId = activeThreadIdRef.current;
         if (!threadId)
@@ -143,22 +208,33 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         const effort = existingEffort === "auto" || effortOptions.includes(existingEffort)
             ? existingEffort
             : "auto";
-        threadModelRef.current.set(threadId, { model, engine, effort });
-        setSelectedModelForActiveThread(model);
-        setSelectedEffortForActiveThread(effort);
-    }, []);
+        const selection = { model, engine, effort };
+        threadModelRef.current.set(threadId, selection);
+        persistModelSelection(selection);
+        bumpModelSelectionVersion();
+    }, [bumpModelSelectionVersion, persistModelSelection]);
     const handleEffortChange = useCallback((effort) => {
         const threadId = activeThreadIdRef.current;
         if (!threadId)
             return;
-        const existing = threadModelRef.current.get(threadId);
-        threadModelRef.current.set(threadId, {
-            model: existing?.model ?? defaultModel,
-            engine: existing?.engine ?? availableModels[0]?.engine ?? "",
-            effort,
-        });
-        setSelectedEffortForActiveThread(effort);
-    }, [availableModels, defaultModel]);
+        const existing = resolveThreadModelSelection(threadId);
+        const model = existing?.model ?? defaultModel;
+        const engine = existing?.engine ??
+            availableModels.find((group) => group.models.includes(model))?.engine ??
+            availableModels[0]?.engine;
+        const selection = { model, effort };
+        if (engine)
+            selection.engine = engine;
+        threadModelRef.current.set(threadId, selection);
+        persistModelSelection(selection);
+        bumpModelSelectionVersion();
+    }, [
+        availableModels,
+        bumpModelSelectionVersion,
+        defaultModel,
+        persistModelSelection,
+        resolveThreadModelSelection,
+    ]);
     const refreshEngines = useCallback(() => {
         Promise.all([
             fetch(agentNativePath("/_agent-native/actions/manage-agent-engine"), {
@@ -401,13 +477,10 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
             });
         }
     }, [isLoading, openTabIds, createThread]);
-    // Focus the composer and sync model state when switching tabs
+    // Focus the composer when switching tabs
     useEffect(() => {
         if (!activeThreadId)
             return;
-        // Sync model picker to this thread's override (or clear to default)
-        setSelectedModelForActiveThread(threadModelRef.current.get(activeThreadId)?.model ?? undefined);
-        setSelectedEffortForActiveThread(threadModelRef.current.get(activeThreadId)?.effort ?? "auto");
         // Small delay to ensure the tab is visible before focusing
         const t = setTimeout(() => {
             chatRefs.current.get(activeThreadId)?.focusComposer();
@@ -467,6 +540,8 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
             const model = event.data.data?.model;
             const effort = event.data.data?.effort;
             const newTab = event.data.data?.newTab;
+            const tabId = event.data.data?.tabId;
+            const requestedTabId = typeof tabId === "string" ? tabId : undefined;
             const background = event.data.data?.background;
             // Make sure the sidebar is visible to show the response, unless the
             // caller explicitly opted out or it's a background send.
@@ -494,8 +569,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
                             engine: matchedGroup.engine,
                             effort: selectedEffort,
                         });
-                        setSelectedModelForActiveThread(model);
-                        setSelectedEffortForActiveThread(selectedEffort);
+                        bumpModelSelectionVersion();
                     }
                 }
                 const ref = chatRefs.current.get(threadId);
@@ -508,7 +582,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
             };
             if (newTab) {
                 const previousTabId = activeThreadIdRef.current;
-                createThread().then((newId) => {
+                createThread(requestedTabId).then((newId) => {
                     if (newId) {
                         newThreadIds.current.add(newId);
                         sendToTab(newId);
@@ -527,7 +601,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         };
         window.addEventListener("message", handler);
         return () => window.removeEventListener("message", handler);
-    }, [availableModels, createThread, switchThread]);
+    }, [availableModels, bumpModelSelectionVersion, createThread, switchThread]);
     // Process pending sends when refs mount
     useEffect(() => {
         for (const [tabId, message] of pendingSends.current) {
@@ -916,15 +990,20 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
                     })()
                     : null, _jsxs("div", { className: "relative flex-1 flex flex-col min-h-0", children: [renderOverlay ? renderOverlay(headerProps) : null, showHistory && (_jsx(HistoryPopover, { threads: threads, openTabIds: new Set(openTabIds), onSelect: openFromHistory, onClose: () => setShowHistory(false), onSearch: searchThreads })), helpVisible && _jsx(HelpPopover, { onClose: () => setHelpVisible(false) }), [...new Set(openTabIds)]
                         .filter((tabId) => tabId === activeThreadId || mountedTabsRef.current.has(tabId))
-                        .map((tabId) => (_jsx("div", { className: "flex-1 min-h-0", style: {
-                            display: contentHidden || tabId !== activeThreadId ? "none" : "flex",
-                        }, children: _jsx(AssistantChat, { ...props, ref: (handle) => {
-                                if (handle) {
-                                    chatRefs.current.set(tabId, handle);
-                                }
-                                else {
-                                    chatRefs.current.delete(tabId);
-                                }
-                            }, threadId: tabId, tabId: tabId, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId), onMessageCountChange: (count) => setMessageCounts((prev) => prev[tabId] === count ? prev : { ...prev, [tabId]: count }), onSaveThread: handleSaveThread, onGenerateTitle: handleGenerateTitle, onSlashCommand: handleSlashCommand, selectedModel: threadModelRef.current.get(tabId)?.model, selectedEngine: threadModelRef.current.get(tabId)?.engine, selectedEffort: threadModelRef.current.get(tabId)?.effort ?? "auto", defaultModel: defaultModel, availableModels: availableModels, onModelChange: handleModelChange, onEffortChange: handleEffortChange, onForkChat: () => handleForkChat(tabId) }) }, tabId)))] })] }));
+                        .map((tabId) => {
+                        const modelSelection = resolveThreadModelSelection(tabId);
+                        return (_jsx("div", { className: "flex-1 min-h-0", style: {
+                                display: contentHidden || tabId !== activeThreadId ? "none" : "flex",
+                            }, children: _jsx(AssistantChat, { ...props, ref: (handle) => {
+                                    if (handle) {
+                                        chatRefs.current.set(tabId, handle);
+                                    }
+                                    else {
+                                        chatRefs.current.delete(tabId);
+                                    }
+                                }, threadId: tabId, tabId: tabId, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId), onMessageCountChange: (count) => setMessageCounts((prev) => prev[tabId] === count
+                                    ? prev
+                                    : { ...prev, [tabId]: count }), onSaveThread: handleSaveThread, onGenerateTitle: handleGenerateTitle, onSlashCommand: handleSlashCommand, selectedModel: modelSelection?.model, selectedEngine: modelSelection?.engine, selectedEffort: modelSelection?.effort ?? "auto", defaultModel: defaultModel, availableModels: availableModels, onModelChange: handleModelChange, onEffortChange: handleEffortChange, onForkChat: () => handleForkChat(tabId) }) }, tabId));
+                    })] })] }));
 }
 //# sourceMappingURL=MultiTabAssistantChat.js.map