Fix Assets library chat toggle and sidebar image model chat controls

.changeset/assets-sidebar-image-model-menu.md

@@ -0,0 +1,5 @@
+---
+"@agent-native/core": patch
+---
+
+Expose the optional image model menu through AgentSidebar so app sidebars can show secondary generation model controls.

packages/core/src/client/AgentPanel.tsx

@@ -2340,6 +2340,8 @@ export interface AgentSidebarProps {
   dynamicSuggestions?: AssistantChatProps["dynamicSuggestions"];
   /** Optional controls rendered in the chat composer toolbar. */
   composerToolbarSlot?: AssistantChatProps["composerToolbarSlot"];
+  /** Optional secondary model menu shown inside the chat composer model picker. */
+  imageModelMenu?: AssistantChatProps["imageModelMenu"];
   /** Optional content rendered at the bottom of the chat thread. */
   threadFooterSlot?: AssistantChatProps["threadFooterSlot"];
   /** Initial sidebar width in pixels. Mount-only; user resize and a saved
@@ -2389,6 +2391,7 @@ export function AgentSidebar({
   suggestions,
   dynamicSuggestions,
   composerToolbarSlot,
+  imageModelMenu,
   threadFooterSlot,
   defaultSidebarWidth,
   sidebarWidth,
@@ -2924,6 +2927,7 @@ export function AgentSidebar({
             suggestions={suggestions}
             dynamicSuggestions={dynamicSuggestions}
             composerToolbarSlot={composerToolbarSlot}
+            imageModelMenu={imageModelMenu}
             threadFooterSlot={threadFooterSlot}
             missingApiKeySetupLayout="sidebar"
             onCollapse={() => setOpenPersisted(false)}

templates/assets/app/components/layout/Layout.tsx

@@ -9,11 +9,16 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { InvitationBanner } from "@agent-native/core/client/org";
+import {
+  EMBED_MODE_QUERY_PARAM,
+  EMBED_TOKEN_QUERY_PARAM,
+} from "@agent-native/core/shared";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router";
 
 import { GenerationResults } from "@/components/generation/GenerationResults";
+import { useImageModelMenu } from "@/hooks/use-image-model-menu";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
 import { cn } from "@/lib/utils";
@@ -35,11 +40,22 @@ function isEmbeddedWindow() {
   }
 }
 
+function searchParamsEnableEmbeddedMode(search: string): boolean {
+  const params = new URLSearchParams(search);
+  const embedMode = params.get(EMBED_MODE_QUERY_PARAM);
+  return (
+    params.has(EMBED_TOKEN_QUERY_PARAM) ||
+    embedMode === "1" ||
+    embedMode === "true"
+  );
+}
+
 export function Layout({ children }: LayoutProps) {
   useNavigationState();
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
+  const imageModelMenu = useImageModelMenu();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const isCreateRoute =
     location.pathname === "/" || location.pathname.startsWith("/chat/");
@@ -64,7 +80,10 @@ export function Layout({ children }: LayoutProps) {
     location.pathname === "/extensions" ||
     location.pathname.startsWith("/extensions/");
   const chromeless =
-    (isPicker && (isEmbeddedWindow() || isEmbedAuthActive())) ||
+    (isPicker &&
+      (searchParamsEnableEmbeddedMode(location.search) ||
+        isEmbeddedWindow() ||
+        isEmbedAuthActive())) ||
     location.pathname.endsWith("/embed");
 
   if (chromeless) {
@@ -143,6 +162,7 @@ export function Layout({ children }: LayoutProps) {
         threadFooterSlot={({ threadId }) => (
           <GenerationResults threadId={threadId} />
         )}
+        imageModelMenu={imageModelMenu}
       >
         {appFrame}
       </AgentSidebar>

templates/assets/app/hooks/use-image-model-menu.ts

@@ -0,0 +1,74 @@
+import {
+  readClientAppState,
+  useT,
+  writeClientAppState,
+} from "@agent-native/core/client";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+// The composer's model picker shows the chat LLM (Claude/OpenAI/Gemini). The
+// Assets app also drives a separate image model, so expose it as a secondary
+// menu wherever Assets chat is mounted.
+const IMAGE_MODEL_STATE_KEY = "imageGenerationModel";
+const DEFAULT_IMAGE_MODEL = "gemini-3.1-flash-image";
+const IMAGE_MODEL_OPTIONS = [
+  {
+    value: "gemini-3-pro-image",
+    modelName: "Gemini 3 Pro",
+    descriptorKey: "create.modelBestQuality",
+  },
+  {
+    value: "gemini-3.1-flash-image",
+    modelName: "Gemini 3.1 Flash",
+    descriptorKey: "create.modelFast",
+  },
+  { value: "gemini-2.5-flash-image", modelName: "Gemini 2.5 Flash" },
+] as const;
+
+export function useImageModelMenu() {
+  const t = useT();
+  const [imageModel, setImageModel] = useState<string>(DEFAULT_IMAGE_MODEL);
+
+  // Hydrate the saved image-model default so the picker reflects the user's
+  // last choice across sessions.
+  useEffect(() => {
+    let cancelled = false;
+    void readClientAppState<{ model?: string }>(IMAGE_MODEL_STATE_KEY)
+      .then((state) => {
+        const stored = state?.model;
+        if (
+          !cancelled &&
+          stored &&
+          IMAGE_MODEL_OPTIONS.some((option) => option.value === stored)
+        ) {
+          setImageModel(stored);
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleImageModelChange = useCallback((value: string) => {
+    setImageModel(value);
+    void writeClientAppState(IMAGE_MODEL_STATE_KEY, { model: value }).catch(
+      () => {},
+    );
+  }, []);
+
+  return useMemo(
+    () => ({
+      value: imageModel,
+      options: IMAGE_MODEL_OPTIONS.map((option) => ({
+        value: option.value,
+        label:
+          "descriptorKey" in option && option.descriptorKey
+            ? `${option.modelName} · ${t(option.descriptorKey)}`
+            : option.modelName,
+      })),
+      onChange: handleImageModelChange,
+      label: t("create.imageModel"),
+    }),
+    [handleImageModelChange, imageModel, t],
+  );
+}

templates/assets/app/routes/_index.tsx

@@ -2,40 +2,17 @@ import {
   AgentChatSurface,
   getBrowserTabId,
   markAgentChatHomeHandoff,
-  readClientAppState,
   sendToAgentChat,
   useT,
-  writeClientAppState,
 } from "@agent-native/core/client";
 import { IconPhoto, IconSparkles, IconVideo } from "@tabler/icons-react";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router";
 
 import { GenerationResults } from "@/components/generation/GenerationResults";
+import { useImageModelMenu } from "@/hooks/use-image-model-menu";
 import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
 
-// The composer's model picker shows the chat LLM (Claude/OpenAI/Gemini). The
-// Assets app also drives a separate *image* model, so we surface it in the same
-// menu — otherwise "Claude" reads as the image generator, which it isn't. The
-// choice persists in per-user application state so the generate-image action
-// (server-side) can read it as the default model. Values must be valid
-// IMAGE_MODELS ids from shared/api.
-const IMAGE_MODEL_STATE_KEY = "imageGenerationModel";
-const DEFAULT_IMAGE_MODEL = "gemini-3.1-flash-image";
-const IMAGE_MODEL_OPTIONS = [
-  {
-    value: "gemini-3-pro-image",
-    modelName: "Gemini 3 Pro",
-    descriptorKey: "create.modelBestQuality",
-  },
-  {
-    value: "gemini-3.1-flash-image",
-    modelName: "Gemini 3.1 Flash",
-    descriptorKey: "create.modelFast",
-  },
-  { value: "gemini-2.5-flash-image", modelName: "Gemini 2.5 Flash" },
-] as const;
-
 // Empty-state starters. Clicking one prefills the composer (without sending) so
 // the user can finish the thought instead of staring at a chip that does
 // nothing. `submit: false` = prefill only; `openSidebar: false` keeps focus on
@@ -81,7 +58,7 @@ export default function CreatePage() {
   const { threadId } = useParams();
   const navigate = useNavigate();
   const t = useT();
-  const [imageModel, setImageModel] = useState<string>(DEFAULT_IMAGE_MODEL);
+  const imageModelMenu = useImageModelMenu();
 
   useEffect(() => {
     function handleChatRunning(event: Event) {
@@ -96,34 +73,6 @@ export default function CreatePage() {
       window.removeEventListener("agentNative.chatRunning", handleChatRunning);
   }, []);
 
-  // Hydrate the saved image-model default so the picker reflects the user's
-  // last choice across sessions.
-  useEffect(() => {
-    let cancelled = false;
-    void readClientAppState<{ model?: string }>(IMAGE_MODEL_STATE_KEY)
-      .then((state) => {
-        const stored = state?.model;
-        if (
-          !cancelled &&
-          stored &&
-          IMAGE_MODEL_OPTIONS.some((option) => option.value === stored)
-        ) {
-          setImageModel(stored);
-        }
-      })
-      .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const handleImageModelChange = useCallback((value: string) => {
-    setImageModel(value);
-    void writeClientAppState(IMAGE_MODEL_STATE_KEY, { model: value }).catch(
-      () => {},
-    );
-  }, []);
-
   return (
     <div className="flex h-full min-h-0 flex-col bg-background">
       <AgentChatSurface
@@ -141,18 +90,7 @@ export default function CreatePage() {
         threadFooterSlot={({ threadId }) => (
           <GenerationResults threadId={threadId} />
         )}
-        imageModelMenu={{
-          value: imageModel,
-          options: IMAGE_MODEL_OPTIONS.map((option) => ({
-            value: option.value,
-            label:
-              "descriptorKey" in option && option.descriptorKey
-                ? `${option.modelName} · ${t(option.descriptorKey)}`
-                : option.modelName,
-          })),
-          onChange: handleImageModelChange,
-          label: t("create.imageModel"),
-        }}
+        imageModelMenu={imageModelMenu}
         showHeader={false}
         showTabBar={false}
         dynamicSuggestions={false}