fix(settings): move Follow-up behavior radio group next to the other choice settings
It was rendered in the middle of the checkbox list, where a labeled radio group reads as out of place. Move it into the radio/choice cluster, right after Diff Layout, and drop it from the checkbox section's visibility gate.
This commit is contained in:
@@ -1429,7 +1429,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
|||||||
{hasBehaviorSettings && (
|
{hasBehaviorSettings && (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
|
|
||||||
{(shouldShow('userMessageRendering') || shouldShow('mermaidRendering') || shouldShow('chatRenderMode') || shouldShow('messageTransport') || (shouldShow('activityRenderMode') && chatRenderMode === 'sorted') || (shouldShow('diffLayout') && !isVSCode)) && (
|
{(shouldShow('userMessageRendering') || shouldShow('mermaidRendering') || shouldShow('chatRenderMode') || shouldShow('messageTransport') || (shouldShow('activityRenderMode') && chatRenderMode === 'sorted') || (shouldShow('diffLayout') && !isVSCode) || shouldShow('followUpBehavior')) && (
|
||||||
<div className="grid grid-cols-1 gap-y-2 md:grid-cols-[minmax(0,16rem)_minmax(0,16rem)] md:justify-start md:gap-x-2">
|
<div className="grid grid-cols-1 gap-y-2 md:grid-cols-[minmax(0,16rem)_minmax(0,16rem)] md:justify-start md:gap-x-2">
|
||||||
{shouldShow('chatRenderMode') && (
|
{shouldShow('chatRenderMode') && (
|
||||||
<section data-settings-item="chat.render-mode" className="p-2 md:col-span-2">
|
<section data-settings-item="chat.render-mode" className="p-2 md:col-span-2">
|
||||||
@@ -1735,10 +1735,46 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
|||||||
</section>
|
</section>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{shouldShow('followUpBehavior') && (
|
||||||
|
<section data-settings-item="chat.follow-up-behavior" className="p-2">
|
||||||
|
<h4 className="typography-ui-header font-medium text-foreground">{t('settings.openchamber.visual.section.followUpBehavior')}</h4>
|
||||||
|
<div role="radiogroup" aria-label={t('settings.openchamber.visual.section.followUpBehaviorAria')} className="mt-0.5 space-y-0">
|
||||||
|
{FOLLOW_UP_BEHAVIOR_OPTIONS.map((option) => {
|
||||||
|
const selected = followUpBehavior === option.id;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={option.id}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-pressed={selected}
|
||||||
|
onClick={() => setFollowUpBehavior(option.id)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === ' ' || event.key === 'Enter') {
|
||||||
|
event.preventDefault();
|
||||||
|
setFollowUpBehavior(option.id);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="flex w-full items-center gap-2 py-0 text-left"
|
||||||
|
>
|
||||||
|
<Radio
|
||||||
|
checked={selected}
|
||||||
|
onChange={() => setFollowUpBehavior(option.id)}
|
||||||
|
ariaLabel={t('settings.openchamber.visual.field.followUpBehaviorAria', { option: tUnsafe(option.labelKey) })}
|
||||||
|
/>
|
||||||
|
<span className={cn('typography-ui-label font-normal', selected ? 'text-foreground' : 'text-foreground/50')}>
|
||||||
|
{tUnsafe(option.labelKey)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(shouldShow('collapsibleUserMessages') || shouldShow('stickyUserHeader') || shouldShow('wideChatLayout') || shouldShow('splitAssistantMessageActions') || shouldShow('dotfiles') || shouldShow('fileViewerPreview') || shouldShow('followUpBehavior') || shouldShow('persistDraft') || shouldShow('showToolFileIcons') || shouldShow('showTurnChangedFiles') || (!isMobile && shouldShow('inputSpellcheck')) || shouldShow('reasoning')) && (
|
{(shouldShow('collapsibleUserMessages') || shouldShow('stickyUserHeader') || shouldShow('wideChatLayout') || shouldShow('splitAssistantMessageActions') || shouldShow('dotfiles') || shouldShow('fileViewerPreview') || shouldShow('persistDraft') || shouldShow('showToolFileIcons') || shouldShow('showTurnChangedFiles') || (!isMobile && shouldShow('inputSpellcheck')) || shouldShow('reasoning')) && (
|
||||||
<section className="p-2 space-y-0.5">
|
<section className="p-2 space-y-0.5">
|
||||||
{shouldShow('reasoning') && (
|
{shouldShow('reasoning') && (
|
||||||
<div
|
<div
|
||||||
@@ -1990,42 +2026,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{shouldShow('followUpBehavior') && (
|
|
||||||
<section data-settings-item="chat.follow-up-behavior" className="p-2">
|
|
||||||
<h4 className="typography-ui-header font-medium text-foreground">{t('settings.openchamber.visual.section.followUpBehavior')}</h4>
|
|
||||||
<div role="radiogroup" aria-label={t('settings.openchamber.visual.section.followUpBehaviorAria')} className="mt-0.5 space-y-0">
|
|
||||||
{FOLLOW_UP_BEHAVIOR_OPTIONS.map((option) => {
|
|
||||||
const selected = followUpBehavior === option.id;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={option.id}
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
aria-pressed={selected}
|
|
||||||
onClick={() => setFollowUpBehavior(option.id)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === ' ' || event.key === 'Enter') {
|
|
||||||
event.preventDefault();
|
|
||||||
setFollowUpBehavior(option.id);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="flex w-full items-center gap-2 py-0 text-left"
|
|
||||||
>
|
|
||||||
<Radio
|
|
||||||
checked={selected}
|
|
||||||
onChange={() => setFollowUpBehavior(option.id)}
|
|
||||||
ariaLabel={t('settings.openchamber.visual.field.followUpBehaviorAria', { option: tUnsafe(option.labelKey) })}
|
|
||||||
/>
|
|
||||||
<span className={cn('typography-ui-label font-normal', selected ? 'text-foreground' : 'text-foreground/50')}>
|
|
||||||
{tUnsafe(option.labelKey)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{shouldShow('persistDraft') && (
|
{shouldShow('persistDraft') && (
|
||||||
<div
|
<div
|
||||||
data-settings-item="chat.persist-drafts"
|
data-settings-item="chat.persist-drafts"
|
||||||
|
|||||||
Reference in New Issue
Block a user