diff --git a/frontend/src/components/ui/Chat/ChatInput.tsx b/frontend/src/components/ui/Chat/ChatInput.tsx index 8dbfb96f..bc3b8e1c 100644 --- a/frontend/src/components/ui/Chat/ChatInput.tsx +++ b/frontend/src/components/ui/Chat/ChatInput.tsx @@ -1747,6 +1747,14 @@ export const ChatInput = ({ const hasTopLeftAccessoryOverride = componentRegistry.ChatTopLeftAccessory !== null; + // Whether the model selector should render at all. When the controls are + // collapsed into the unified "+" menu (mobile / add-in), the selector is + // rendered in the left control group so it left-aligns next to the "+"; + // otherwise it stays in the right group, right-aligned next to Send. + const showModelSelector = + !hasTopLeftAccessoryOverride && + !(isAudioMode && !showModelSelectorInAudioMode); + const shellWrapperStyle = { maxWidth: "var(--theme-layout-chat-input-max-width)", } as const; @@ -2064,6 +2072,16 @@ export const ChatInput = ({ )} ))} + {useUnifiedMobileMenu && showModelSelector && ( + + )}
@@ -2091,15 +2109,14 @@ export const ChatInput = ({ {t`Exit audio mode`} )} - {!hasTopLeftAccessoryOverride && - !(isAudioMode && !showModelSelectorInAudioMode) && ( - - )} + {!useUnifiedMobileMenu && showModelSelector && ( + + )} {isAudioMode && isPendingResponse && isConversationalAudioActive && diff --git a/frontend/src/components/ui/Chat/ModelSelector.tsx b/frontend/src/components/ui/Chat/ModelSelector.tsx index 4d0abff2..2a6e2a13 100644 --- a/frontend/src/components/ui/Chat/ModelSelector.tsx +++ b/frontend/src/components/ui/Chat/ModelSelector.tsx @@ -28,6 +28,13 @@ interface ModelSelectorProps { disabled?: boolean; /** Additional CSS classes */ className?: string; + /** + * Which edge the dropdown menu aligns to. Defaults to "right" (the selector + * normally sits at the right edge of the input toolbar). Set to "left" when + * the selector is rendered on the left (e.g. the collapsed mobile/add-in + * layout) so the menu opens flush-left instead of clipping. + */ + align?: "left" | "right"; } function resolveModelDescription(model: ChatModel): string | null { @@ -98,6 +105,7 @@ export const ModelSelector = ({ onClearSelection, disabled = false, className = "", + align = "right", }: ModelSelectorProps) => { // Keep this marker so Lingui extracts the dynamic model description keys. const _modelDescriptionMarker = t`chat_models..description`; @@ -175,7 +183,7 @@ export const ModelSelector = ({