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 = ({