diff --git a/packages/app/src/composer/agent-controls/model-sheet-flow.test.ts b/packages/app/src/composer/agent-controls/model-sheet-flow.test.ts index a3f41b791..1bf71521a 100644 --- a/packages/app/src/composer/agent-controls/model-sheet-flow.test.ts +++ b/packages/app/src/composer/agent-controls/model-sheet-flow.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it } from "vitest"; import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection"; -import { resolveModelSheetOpening } from "./model-sheet-flow"; +import { resolveModelBrowserScrolling, resolveModelSheetOpening } from "./model-sheet-flow"; function provider(id: string, label: string): ProviderSelectorProvider { return { id, label, modelSelection: { kind: "models", rows: [] } }; @@ -40,3 +40,13 @@ describe("model sheet opening", () => { ).toEqual({ kind: "provider", providerId: "codex", providerLabel: "Codex" }); }); }); + +describe("model sheet gesture ownership", () => { + it("uses the sheet-aware model browser inside compact bottom sheets", () => { + expect(resolveModelBrowserScrolling(true)).toBe("sheet"); + }); + + it("keeps independent scrolling in the desktop split viewport", () => { + expect(resolveModelBrowserScrolling(false)).toBe("independent"); + }); +}); diff --git a/packages/app/src/composer/agent-controls/model-sheet-flow.ts b/packages/app/src/composer/agent-controls/model-sheet-flow.ts index 192689e78..4158f9075 100644 --- a/packages/app/src/composer/agent-controls/model-sheet-flow.ts +++ b/packages/app/src/composer/agent-controls/model-sheet-flow.ts @@ -1,6 +1,10 @@ import type { ModelBrowserView } from "@/components/model-browser-view"; import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection"; +export function resolveModelBrowserScrolling(usesBottomSheet: boolean): "sheet" | "independent" { + return usesBottomSheet ? "sheet" : "independent"; +} + export function resolveModelSheetOpening({ canSwitchProvider, providers, diff --git a/packages/app/src/composer/agent-controls/model-sheet.tsx b/packages/app/src/composer/agent-controls/model-sheet.tsx index 1959e4171..36564db4b 100644 --- a/packages/app/src/composer/agent-controls/model-sheet.tsx +++ b/packages/app/src/composer/agent-controls/model-sheet.tsx @@ -11,7 +11,10 @@ import { getProviderIcon } from "@/components/provider-icons"; import { ModelBrowser, useModelBrowser } from "@/components/model-browser"; import { AgentControlTrigger } from "@/composer/agent-controls/control"; import { ComposerToolbarGlyph } from "@/composer/agent-controls/glyph"; -import { resolveModelSheetOpening } from "@/composer/agent-controls/model-sheet-flow"; +import { + resolveModelBrowserScrolling, + resolveModelSheetOpening, +} from "@/composer/agent-controls/model-sheet-flow"; import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection"; import { useIsCompactFormFactor } from "@/constants/layout"; import { isWeb } from "@/constants/platform"; @@ -71,6 +74,7 @@ export function CompactModelSheet({ }: CompactModelSheetProps) { const { t } = useTranslation(); const usesBottomSheet = useIsCompactFormFactor(); + const modelBrowserScrolling = resolveModelBrowserScrolling(usesBottomSheet); const [isOpen, setIsOpen] = useState(false); const [isModelBrowserOpen, setIsModelBrowserOpen] = useState(false); const availableProviders = useMemo(() => { @@ -282,7 +286,7 @@ export function CompactModelSheet({ onEditProfiles={onEditProfiles ? handleEditProfiles : undefined} onRetryProvider={onRetryProvider} isRetryingProvider={isRetryingProvider} - scrolling="independent" + scrolling={modelBrowserScrolling} searchAllOnFocus={usesBottomSheet} rootBrowseContent={usesBottomSheet ? mobileRootContent : undefined} /> @@ -324,7 +328,7 @@ export function CompactModelSheet({ onSelect={handleBrowserSelect} onRetryProvider={onRetryProvider} isRetryingProvider={isRetryingProvider} - scrolling="independent" + scrolling={modelBrowserScrolling} searchAllOnFocus />