Skip to content

Close mode/model/effort dropdowns on selection #2303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rafaeelaudibert merged 2 commits into from
May 22, 2026
+56 −7
Merged

Close mode/model/effort dropdowns on selection #2303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b21f4e
fix(message-editor): Close mode/model/effort dropdowns on selection
rafaeelaudibert May 22, 2026
5d82ae2
fix(message-editor): Avoid radio-fill flash during dropdown close
adboio May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions apps/code/src/renderer/features/message-editor/components/ModeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
MenuLabel,
} from "@posthog/quill";
import { flattenSelectOptions } from "@renderer/features/sessions/stores/sessionStore";
import { useRef, useState } from "react";

interface ModeStyle {
icon: React.ReactNode;
Expand Down Expand Up @@ -78,6 +79,9 @@ export function ModeSelector({
allowBypassPermissions,
disabled,
}: ModeSelectorProps) {
const [open, setOpen] = useState(false);
const pendingValueRef = useRef<string | null>(null);

if (!modeOption || modeOption.type !== "select") return null;

const allOptions = flattenSelectOptions(modeOption.options);
Expand All @@ -95,7 +99,16 @@ export function ModeSelector({
allOptions.find((opt) => opt.value === currentValue)?.name ?? currentValue;

return (
<DropdownMenu>
<DropdownMenu
open={open}
onOpenChange={setOpen}
onOpenChangeComplete={(isOpen) => {
if (!isOpen && pendingValueRef.current !== null) {
onChange(pendingValueRef.current);
pendingValueRef.current = null;
}
}}
>
<DropdownMenuTrigger
render={
<Button
Expand All @@ -122,7 +135,13 @@ export function ModeSelector({
className={allowBypassPermissions ? "min-w-[220px]" : "min-w-[200px]"}
>
<MenuLabel>Mode</MenuLabel>
<DropdownMenuRadioGroup value={currentValue} onValueChange={onChange}>
<DropdownMenuRadioGroup
value={currentValue}
onValueChange={(value) => {
pendingValueRef.current = value;
setOpen(false);
}}
>
{options.map((option) => {
const style = getStyle(option.value);
return (
Expand Down
20 changes: 18 additions & 2 deletions apps/code/src/renderer/features/sessions/components/ReasoningLevelSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
DropdownMenuTrigger,
MenuLabel,
} from "@posthog/quill";
import { useRef, useState } from "react";
import { flattenSelectOptions } from "../stores/sessionStore";

interface ReasoningLevelSelectorProps {
Expand All @@ -24,6 +25,9 @@ export function ReasoningLevelSelector({
onChange,
disabled,
}: ReasoningLevelSelectorProps) {
const [open, setOpen] = useState(false);
const pendingValueRef = useRef<string | null>(null);

if (!thoughtOption || thoughtOption.type !== "select") {
return null;
}
Expand All @@ -36,7 +40,16 @@ export function ReasoningLevelSelector({
const prefix = adapter === "codex" ? "Reasoning" : "Effort";

return (
<DropdownMenu>
<DropdownMenu
open={open}
onOpenChange={setOpen}
onOpenChangeComplete={(isOpen) => {
if (!isOpen && pendingValueRef.current !== null) {
onChange?.(pendingValueRef.current);
pendingValueRef.current = null;
}
}}
>
<DropdownMenuTrigger
render={
<Button
Expand Down Expand Up @@ -65,7 +78,10 @@ export function ReasoningLevelSelector({
<MenuLabel>{adapter === "codex" ? "Reasoning" : "Effort"}</MenuLabel>
<DropdownMenuRadioGroup
value={activeLevel}
onValueChange={(value) => onChange?.(value)}
onValueChange={(value) => {
pendingValueRef.current = value;
setOpen(false);
}}
>
{options.map((level) => (
<DropdownMenuRadioItem key={level.value} value={level.value}>
Expand Down
20 changes: 17 additions & 3 deletions apps/code/src/renderer/features/sessions/components/UnifiedModelSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
DropdownMenuTrigger,
MenuLabel,
} from "@posthog/quill";
import { Fragment, useMemo } from "react";
import { Fragment, useMemo, useRef, useState } from "react";
import { flattenSelectOptions } from "../stores/sessionStore";

const ADAPTER_ICONS: Record<AgentAdapter, React.ReactNode> = {
Expand Down Expand Up @@ -55,6 +55,8 @@ export function UnifiedModelSelector({
disabled,
isConnecting,
}: UnifiedModelSelectorProps) {
const [open, setOpen] = useState(false);
const pendingValueRef = useRef<string | null>(null);
const selectOption = modelOption?.type === "select" ? modelOption : undefined;
const options = selectOption
? flattenSelectOptions(selectOption.options)
Expand Down Expand Up @@ -83,7 +85,16 @@ export function UnifiedModelSelector({
}

return (
<DropdownMenu>
<DropdownMenu
open={open}
onOpenChange={setOpen}
onOpenChangeComplete={(isOpen) => {
if (!isOpen && pendingValueRef.current !== null) {
onModelChange?.(pendingValueRef.current);
pendingValueRef.current = null;
}
}}
>
<DropdownMenuTrigger
render={
<Button
Expand Down Expand Up @@ -114,7 +125,10 @@ export function UnifiedModelSelector({
<MenuLabel>{ADAPTER_LABELS[adapter]}</MenuLabel>
<DropdownMenuRadioGroup
value={currentValue ?? ""}
onValueChange={(value) => onModelChange?.(value)}
onValueChange={(value) => {
pendingValueRef.current = value;
setOpen(false);
}}
>
{groupedOptions.length > 0
? groupedOptions.map((group, index) => (
Expand Down
Loading