diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx index f56997ff2a6a1..62594d9d59447 100644 --- a/apps/web/src/components/chat/ComposerModelEffort.tsx +++ b/apps/web/src/components/chat/ComposerModelEffort.tsx @@ -8,7 +8,7 @@ import type { ProviderOptionDescriptor, RuntimeMode } from "@t3tools/contracts"; import type { EffortDisplay } from "@t3tools/contracts/settings"; import { getProviderOptionCurrentLabel } from "@t3tools/shared/model"; import { CheckIcon, ChevronRightIcon, ChevronUpIcon, WorkflowIcon } from "lucide-react"; -import { type KeyboardEvent, type ReactNode, use, useRef, useState } from "react"; +import { type KeyboardEvent, type ReactNode, useRef, useState } from "react"; import { cn } from "~/lib/utils"; import { @@ -25,7 +25,6 @@ import type { ComposerControlSize } from "./ComposerControl"; import { ComposerPermissionsSection, type RuntimeModeOption } from "./ComposerFooterControls"; import { composerFloatingLayerProps, focusCheckedPermission } from "./composerEventScope"; import { EffortGlyph, FastBolt, resolveEffortGlyph } from "./EffortGlyph"; -import { DockedPickerContext } from "./ProviderModelPicker"; import { getTraitsSectionVisibility, type TraitsSelectionInput, @@ -491,7 +490,6 @@ function NoEffortRow() { /** The model picker's effort column: the selected model's levels and its other options. */ export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | null }) { - const picker = use(DockedPickerContext); const visibility = props.traits ? getTraitsSectionVisibility(props.traits) : null; const controls = props.traits && visibility @@ -505,9 +503,6 @@ export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | nul {controls?.effort?.descriptor.label ?? (controls?.others.length ? "Options" : "Effort")} - - {picker.modelLabel} - {/* pt-2.5 puts the first level on the same line as the first model. */} diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx index dc24671c301ba..fc878b778d2d6 100644 --- a/apps/web/src/components/chat/ProviderModelPicker.tsx +++ b/apps/web/src/components/chat/ProviderModelPicker.tsx @@ -7,7 +7,6 @@ import { } from "@t3tools/contracts"; import { RegistryContext } from "@effect/atom-react"; import { - createContext, memo, type ReactNode, useContext, @@ -83,9 +82,6 @@ function lockBackgroundScroll(popup: HTMLElement | null) { }; } -/** What a docked effort column needs from its picker: the model it serves. */ -export const DockedPickerContext = createContext<{ modelLabel: string }>({ modelLabel: "" }); - export const ProviderModelPicker = memo(function ProviderModelPicker(props: { environmentId: EnvironmentId | null; workspaceCwd?: string | null; @@ -457,29 +453,27 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: { touchBackdrop > {props.effortColumn ? ( - -
- {/* One fixed height, so a model with more options never resizes the popup. Short +
+ {/* One fixed height, so a model with more options never resizes the popup. Short windows shrink it and keep the footer. */} -
- {picker} -
{ - if (event.key !== "ArrowLeft" || event.altKey || event.ctrlKey || event.metaKey) - return; - event.preventDefault(); - event.stopPropagation(); - searchInputRef.current?.focus(); - }} - > - {props.effortColumn} -
+
+ {picker} +
{ + if (event.key !== "ArrowLeft" || event.altKey || event.ctrlKey || event.metaKey) + return; + event.preventDefault(); + event.stopPropagation(); + searchInputRef.current?.focus(); + }} + > + {props.effortColumn}
- {props.footer}
- + {props.footer} +
) : ( picker )}