BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): polish composer model/agent controls and selection overlay

Browse Source 
Redesign the mobile composer model and agent buttons as borderless, full-bleed
labels that hug their content, truncate with an ellipsis when space is tight,
and show the provider logo inline before the model name. Tighten the footer
action buttons (sessions / attach / auto-accept) so they sit close together,
with a small left inset on the group. In the mobile model selection overlay,
make the thinking-variant control text-only with a chevron, vertically center
the variant and favorite controls in each row, and place the provider logo
inline with the model name.
This commit is contained in:
Bohdan Triapitsyn
2026-06-28 13:33:55 +03:00
parent 1178c4e4f5
commit bf1d0d3a75
5 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ModelControls.tsx
+8 -8
View File
@@ -1671,7 +1671,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
isSelected && 'bg-interactive-selection/15 text-interactive-selection-foreground'
)}
>
<div className="flex items-start gap-2 px-2 py-1.5">
<div className="flex items-center gap-2 px-2 py-1.5">
<button
type="button"
onClick={() => handleMobileModelApply(providerId, modelId, resolvedVariant)}
@@ -1680,15 +1680,15 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary rounded-lg'
)}
>
{showProviderLogo ? (
<ProviderLogo providerId={providerId} className="mt-0.5 size-3.5 flex-shrink-0" />
) : null}
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<div className="flex min-w-0 items-start gap-2">
<div className="flex min-w-0 items-center gap-1.5">
{showProviderLogo ? (
<ProviderLogo providerId={providerId} className="size-3.5 flex-shrink-0" />
) : null}
<span className="typography-meta font-medium text-foreground truncate">
{getModelDisplayName(model)}
</span>
{isSelected ? <Icon name="check" className="mt-0.5 size-4 flex-shrink-0 text-primary" /> : null}
{isSelected ? <Icon name="check" className="size-4 flex-shrink-0 text-primary" /> : null}
</div>
{contextText || indicatorIcons.length > 0 ? (
<div className="flex min-w-0 items-center gap-1.5 overflow-hidden typography-micro text-muted-foreground">
@@ -1722,7 +1722,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
<button
type="button"
onClick={() => setExpandedMobileModelKey((prev) => prev === rowKey ? null : rowKey)}
className="flex items-center gap-1 rounded-lg border border-border/40 px-2 py-1 typography-micro font-medium text-muted-foreground hover:bg-interactive-hover/50 flex-shrink-0"
className="flex items-center gap-0.5 typography-micro font-medium text-muted-foreground hover:text-foreground flex-shrink-0"
aria-expanded={isExpanded}
aria-label={isExpanded ? t('chat.modelControls.hideThinkingModes') : t('chat.modelControls.showThinkingModes')}
>
@@ -1730,7 +1730,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
{isExpanded ? <Icon name="arrow-down-s" className="size-3.5" /> : <Icon name="arrow-right-s" className="size-3.5" />}
</button>
) : null}
<div className="flex flex-shrink-0 items-start gap-1.5">
<div className="flex flex-shrink-0 items-center gap-1.5">
<button
type="button"
onClick={(event) => {