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

Refactor chat UI controls and overlays for mobile adjustments (#248)

Browse Source 
* feat(mobile): refine status chip and control layouts

* fix(vscode): open file from apply_patch tool in editor
This commit is contained in:
Bohdan Triapitsyn
2026-01-30 13:23:50 +02:00
committed by GitHub
parent 2ed1a73d3c
commit 344f369093
6 changed files with 123 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+3 -1
View File
@@ -1527,8 +1527,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
<div className="flex items-center flex-shrink-0 gap-x-1"> <div className="flex items-center flex-shrink-0 gap-x-1">
{attachmentsControls} {attachmentsControls}
</div> </div>
<div className="flex flex-1 items-center gap-x-1 min-w-0"> <div className="flex flex-1 items-center justify-center min-w-0">
<StatusChip onClick={handleOpenMobileControls} className="min-w-0" /> <StatusChip onClick={handleOpenMobileControls} className="min-w-0" />
</div>
<div className="flex-shrink-0">
{actionButton} {actionButton}
</div> </div>
</div> </div>
packages/ui/src/components/chat/ModelControls.tsx
+1 -1
View File
@@ -436,7 +436,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
const editToggleIconClass = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4'; const editToggleIconClass = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4';
const controlIconSize = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4'; const controlIconSize = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4';
const controlTextSize = isCompact ? 'typography-micro' : 'typography-meta'; const controlTextSize = isCompact ? 'typography-micro' : 'typography-meta';
const inlineGapClass = sizeVariant === 'mobile' ? 'gap-x-1' : sizeVariant === 'vscode' ? 'gap-x-1' : 'gap-x-3'; const inlineGapClass = sizeVariant === 'mobile' ? 'gap-x-1' : sizeVariant === 'vscode' ? 'gap-x-2' : 'gap-x-3';
const renderEditModeIcon = React.useCallback((mode: EditPermissionMode, iconClass = editToggleIconClass) => { const renderEditModeIcon = React.useCallback((mode: EditPermissionMode, iconClass = editToggleIconClass) => {
const combinedClassName = cn(iconClass, 'flex-shrink-0'); const combinedClassName = cn(iconClass, 'flex-shrink-0');
const modeColors = getEditModeColors(mode); const modeColors = getEditModeColors(mode);
packages/ui/src/components/chat/StatusChip.tsx
+20 -15
View File
@@ -3,7 +3,6 @@ import { cn } from '@/lib/utils';
import { useConfigStore } from '@/stores/useConfigStore'; import { useConfigStore } from '@/stores/useConfigStore';
import { useSessionStore } from '@/stores/useSessionStore'; import { useSessionStore } from '@/stores/useSessionStore';
import { useContextStore } from '@/stores/contextStore'; import { useContextStore } from '@/stores/contextStore';
import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
import { formatEffortLabel, getAgentDisplayName, getModelDisplayName } from './mobileControlsUtils'; import { formatEffortLabel, getAgentDisplayName, getModelDisplayName } from './mobileControlsUtils';
interface StatusChipProps { interface StatusChipProps {
@@ -13,7 +12,6 @@ interface StatusChipProps {
export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) => { export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) => {
const { const {
currentProviderId,
currentModelId, currentModelId,
currentVariant, currentVariant,
currentAgentName, currentAgentName,
@@ -33,28 +31,35 @@ export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) =>
const modelLabel = getModelDisplayName(currentProvider, currentModelId); const modelLabel = getModelDisplayName(currentProvider, currentModelId);
const hasEffort = getCurrentModelVariants().length > 0; const hasEffort = getCurrentModelVariants().length > 0;
const effortLabel = hasEffort ? formatEffortLabel(currentVariant) : null; const effortLabel = hasEffort ? formatEffortLabel(currentVariant) : null;
const segments = [agentLabel, modelLabel, effortLabel].filter((segment): segment is string => Boolean(segment)); const fullLabel = [agentLabel, modelLabel, effortLabel].filter(Boolean).join(' · ');
const label = segments.join(' · ');
const textRef = React.useRef<HTMLSpanElement>(null);
const isTruncated = useIsTextTruncated(textRef, [label, currentProviderId, currentModelId, currentVariant, uiAgentName]);
return ( return (
<button <button
type="button" type="button"
onClick={onClick} onClick={onClick}
className={cn( className={cn(
'group flex h-9 min-w-0 flex-1 items-center rounded-xl border border-border/40 bg-muted/30 px-2.5', 'inline-flex min-w-0 items-center justify-center',
'typography-meta font-medium text-foreground transition-colors hover:bg-muted/50', 'rounded-lg border border-border/50 px-1.5',
'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary', 'typography-meta font-medium text-foreground/80',
'focus:outline-none',
className className
)} )}
aria-label={label} style={{
height: '30px',
maxHeight: '30px',
minHeight: '30px',
}}
title={fullLabel}
> >
<span ref={textRef} className="min-w-0 flex-1 overflow-hidden"> <span className="shrink-0">{agentLabel}</span>
<span className={cn('marquee-text', isTruncated && 'marquee-text--auto')}> <span className="shrink-0 text-muted-foreground mx-1">·</span>
{label} <span className="min-w-0 truncate">{modelLabel}</span>
</span> {effortLabel && (
</span> <>
<span className="shrink-0 text-muted-foreground mx-1">·</span>
<span className="shrink-0">{effortLabel}</span>
</>
)}
</button> </button>
); );
}; };
packages/ui/src/components/chat/UnifiedControlsDrawer.tsx
+93 -109
View File
@@ -1,21 +1,38 @@
import React from 'react'; import React from 'react';
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel'; import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
import { ProviderLogo } from '@/components/ui/ProviderLogo';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useConfigStore } from '@/stores/useConfigStore'; import { useConfigStore } from '@/stores/useConfigStore';
import { useSessionStore } from '@/stores/useSessionStore'; import { useSessionStore } from '@/stores/useSessionStore';
import { useContextStore } from '@/stores/contextStore'; import { useContextStore } from '@/stores/contextStore';
import { useUIStore } from '@/stores/useUIStore'; import { useUIStore } from '@/stores/useUIStore';
import { useModelLists } from '@/hooks/useModelLists'; import { useModelLists } from '@/hooks/useModelLists';
import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
import { import {
formatEffortLabel, formatEffortLabel,
getAgentDisplayName, getAgentDisplayName,
getModelDisplayName,
getQuickEffortOptions, getQuickEffortOptions,
isPrimaryMode, isPrimaryMode,
parseEffortVariant, parseEffortVariant,
} from './mobileControlsUtils'; } from './mobileControlsUtils';
const MAX_QUICK_AGENTS = 3;
const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 1,
});
const formatTokens = (value?: number | null) => {
if (typeof value !== 'number' || Number.isNaN(value)) {
return null;
}
if (value === 0) {
return '0';
}
const formatted = COMPACT_NUMBER_FORMATTER.format(value);
return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
};
interface UnifiedControlsDrawerProps { interface UnifiedControlsDrawerProps {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
@@ -31,36 +48,6 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
onOpenModel, onOpenModel,
onOpenEffort, onOpenEffort,
}) => { }) => {
const AgentRow: React.FC<{
name: string;
isSelected: boolean;
description?: string | null;
onSelect: () => void;
}> = ({ name, isSelected, description, onSelect }) => {
const descriptionRef = React.useRef<HTMLSpanElement>(null);
const shouldScroll = useIsTextTruncated(descriptionRef, [description, name]);
return (
<button
type="button"
onClick={onSelect}
className={cn(
'flex min-h-[44px] w-full items-start justify-between gap-2 rounded-xl border px-2 py-2 text-left',
isSelected ? 'border-primary/30 bg-primary/10' : 'border-border/40 hover:bg-muted/50'
)}
aria-pressed={isSelected}
>
<div className="min-w-0 flex-1">
<div className="typography-meta font-medium text-foreground truncate">{name}</div>
{description ? (
<span ref={descriptionRef} className="block min-w-0 overflow-hidden typography-micro text-muted-foreground">
<span className={cn('marquee-text', shouldScroll && 'marquee-text--auto')}>{description}</span>
</span>
) : null}
</div>
</button>
);
};
const { const {
providers, providers,
currentProviderId, currentProviderId,
@@ -71,9 +58,9 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
setProvider, setProvider,
setModel, setModel,
setCurrentVariant, setCurrentVariant,
getCurrentProvider,
getCurrentModelVariants, getCurrentModelVariants,
getVisibleAgents, getVisibleAgents,
getModelMetadata,
} = useConfigStore(); } = useConfigStore();
const { addRecentModel, addRecentAgent, addRecentEffort, recentAgents, recentEfforts } = useUIStore(); const { addRecentModel, addRecentAgent, addRecentEffort, recentAgents, recentEfforts } = useUIStore();
const { recentModelsList } = useModelLists(); const { recentModelsList } = useModelLists();
@@ -100,14 +87,14 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
const quickAgentNames = React.useMemo(() => { const quickAgentNames = React.useMemo(() => {
const fallback = primaryAgents.length > 0 ? primaryAgents.map((agent) => agent.name) : agents.map((agent) => agent.name); const fallback = primaryAgents.length > 0 ? primaryAgents.map((agent) => agent.name) : agents.map((agent) => agent.name);
const base = fallback.slice(0, 4); const base = fallback.slice(0, MAX_QUICK_AGENTS);
const orderedRecents = recentAgentNames.slice().reverse(); const orderedRecents = recentAgentNames.slice().reverse();
for (const recent of orderedRecents) { for (const recent of orderedRecents) {
if (!recent || base.includes(recent)) { if (!recent || base.includes(recent)) {
continue; continue;
} }
base.unshift(recent); base.unshift(recent);
base.splice(4); base.splice(MAX_QUICK_AGENTS);
} }
if (uiAgentName && !base.includes(uiAgentName)) { if (uiAgentName && !base.includes(uiAgentName)) {
if (base.length > 0) { if (base.length > 0) {
@@ -121,20 +108,25 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
const hasAgentOverflow = agents.some((agent) => !quickAgentNames.includes(agent.name)); const hasAgentOverflow = agents.some((agent) => !quickAgentNames.includes(agent.name));
const currentProvider = getCurrentProvider(); const recentModelsBase = recentModelsList.slice(0, 4);
const currentModelLabel = getModelDisplayName(currentProvider, currentModelId); const hasCurrentInRecents = recentModelsBase.some(
const recentModels = recentModelsList.slice(0, 4);
const hasCurrentInRecents = recentModels.some(
(entry) => entry.providerID === currentProviderId && entry.modelID === currentModelId (entry) => entry.providerID === currentProviderId && entry.modelID === currentModelId
); );
const currentModelRow = currentProviderId && currentModelId // If current model not in recents, prepend it so it's always visible
? { const recentModels = React.useMemo(() => {
providerID: currentProviderId, if (hasCurrentInRecents || !currentProviderId || !currentModelId) {
modelID: currentModelId, return recentModelsBase;
providerName: currentProvider?.name || currentProviderId,
modelName: currentModelLabel,
} }
: null; const currentProvider = providers.find((p) => p.id === currentProviderId);
const currentModel = currentProvider?.models?.find((m) => m.id === currentModelId);
if (!currentModel) {
return recentModelsBase;
}
return [
{ providerID: currentProviderId, modelID: currentModelId, provider: currentProvider, model: currentModel },
...recentModelsBase.slice(0, 3),
];
}, [recentModelsBase, hasCurrentInRecents, currentProviderId, currentModelId, providers]);
const variants = getCurrentModelVariants(); const variants = getCurrentModelVariants();
const hasEffort = variants.length > 0; const hasEffort = variants.length > 0;
@@ -221,100 +213,92 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
<div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground"> <div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground">
Agent Agent
</div> </div>
{agents.length === 0 ? ( <div className="rounded-xl border border-border/40 overflow-hidden">
<div className="rounded-xl border border-dashed border-border/50 px-2 py-2 typography-meta text-muted-foreground"> {agents.length === 0 ? (
No agents configured <div className="px-3 py-2 typography-meta text-muted-foreground">
</div> No agents configured
) : ( </div>
<div className="flex flex-col gap-2"> ) : (
{quickAgentNames.map((agentName) => { quickAgentNames.map((agentName) => {
const agent = agents.find((entry) => entry.name === agentName);
const displayName = getAgentDisplayName(agents, agentName); const displayName = getAgentDisplayName(agents, agentName);
const isSelected = agentName === uiAgentName;
return ( return (
<AgentRow <button
key={agentName} key={agentName}
name={displayName} type="button"
description={agent?.description} onClick={() => handleAgentSelect(agentName)}
isSelected={agentName === uiAgentName} className={cn(
onSelect={() => handleAgentSelect(agentName)} 'flex min-h-[44px] w-full items-center border-b border-border/30 px-3 py-2 text-left last:border-b-0',
/> isSelected ? 'bg-primary/10' : ''
)}
aria-pressed={isSelected}
>
<span className="typography-meta font-medium text-foreground truncate">
{displayName}
</span>
</button>
); );
})} })
{hasAgentOverflow && ( )}
<button {hasAgentOverflow && (
type="button" <button
onClick={onOpenAgent} type="button"
className="flex min-h-[44px] w-full items-center justify-center rounded-xl border border-border/40 px-2 py-2 typography-meta font-medium text-muted-foreground hover:bg-muted/50" onClick={onOpenAgent}
aria-label="More agents" className="flex min-h-[44px] w-full items-center justify-center border-t border-border/30 px-3 py-2 typography-meta font-medium text-muted-foreground"
> aria-label="More agents"
... >
</button> ...
)} </button>
</div> )}
)} </div>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground"> <div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground">
Model Model
</div> </div>
<div className="flex flex-col gap-2"> <div className="rounded-xl border border-border/40 overflow-hidden">
{!hasCurrentInRecents && currentModelRow && ( {recentModels.length === 0 && !hasCurrentInRecents && (
<button <div className="px-3 py-2 typography-meta text-muted-foreground">
type="button" No recent models
onClick={() => handleModelSelect(currentModelRow.providerID, currentModelRow.modelID)} </div>
className={cn(
'flex min-h-[44px] w-full items-center justify-between gap-2 rounded-xl border px-2 py-2 text-left',
currentProviderId === currentModelRow.providerID && currentModelId === currentModelRow.modelID
? 'border-primary/30 bg-primary/10'
: 'border-border/40 hover:bg-muted/50'
)}
>
<div className="min-w-0">
<div className="typography-meta font-medium text-foreground truncate">
{currentModelRow.modelName}
</div>
<div className="typography-micro text-muted-foreground">Current model</div>
</div>
<span className="typography-micro text-muted-foreground">{currentModelRow.providerName}</span>
</button>
)} )}
{recentModels.map(({ providerID, modelID, model }) => {
{recentModels.map(({ providerID, modelID, provider, model }) => {
const isSelected = providerID === currentProviderId && modelID === currentModelId; const isSelected = providerID === currentProviderId && modelID === currentModelId;
const modelName = typeof model?.name === 'string' && model.name.trim().length > 0 const modelName = typeof model?.name === 'string' && model.name.trim().length > 0
? model.name ? model.name
: modelID; : modelID;
const metadata = getModelMetadata(providerID, modelID);
const ctxTokens = formatTokens(metadata?.limit?.context);
const outTokens = formatTokens(metadata?.limit?.output);
return ( return (
<button <button
key={`recent-${providerID}-${modelID}`} key={`recent-${providerID}-${modelID}`}
type="button" type="button"
onClick={() => handleModelSelect(providerID, modelID)} onClick={() => handleModelSelect(providerID, modelID)}
className={cn( className={cn(
'flex min-h-[44px] w-full items-center justify-between gap-2 rounded-xl border px-2 py-2 text-left', 'flex min-h-[44px] w-full items-center gap-2 border-b border-border/30 px-3 py-2 text-left last:border-b-0',
isSelected ? 'border-primary/30 bg-primary/10' : 'border-border/40 hover:bg-muted/50' isSelected ? 'bg-primary/10' : ''
)} )}
> >
<span className="typography-meta font-medium text-foreground truncate min-w-0"> <ProviderLogo providerId={providerID} className="h-4 w-4 flex-shrink-0" />
<span className="typography-meta font-medium text-foreground truncate min-w-0 flex-1">
{modelName} {modelName}
</span> </span>
<span className="typography-micro text-muted-foreground"> {(ctxTokens || outTokens) && (
{provider?.name || providerID} <span className="typography-micro text-muted-foreground whitespace-nowrap flex-shrink-0">
</span> {ctxTokens && `${ctxTokens} ctx`}
{ctxTokens && outTokens && ' • '}
{outTokens && `${outTokens} out`}
</span>
)}
</button> </button>
); );
})} })}
{recentModels.length === 0 && !currentModelRow && (
<div className="rounded-xl border border-dashed border-border/50 px-2 py-2 typography-meta text-muted-foreground">
Not selected
</div>
)}
<button <button
type="button" type="button"
onClick={onOpenModel} onClick={onOpenModel}
className="flex min-h-[44px] w-full items-center justify-center rounded-xl border border-border/40 px-2 py-2 typography-meta font-medium text-muted-foreground hover:bg-muted/50" className="flex min-h-[44px] w-full items-center justify-center border-t border-border/30 px-3 py-2 typography-meta font-medium text-muted-foreground"
aria-label="More models" aria-label="More models"
> >
... ...
packages/ui/src/components/chat/message/parts/ToolPart.tsx
+4
View File
@@ -1066,6 +1066,10 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
let filePath: unknown; let filePath: unknown;
if (part.tool === 'edit' || part.tool === 'multiedit') { if (part.tool === 'edit' || part.tool === 'multiedit') {
filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path; filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path;
} else if (part.tool === 'apply_patch') {
const files = Array.isArray(metadata?.files) ? metadata?.files : [];
const firstFile = files[0] as { relativePath?: string; filePath?: string } | undefined;
filePath = firstFile?.relativePath || firstFile?.filePath;
} else if (['write', 'create', 'file_write', 'read', 'view', 'file_read', 'cat'].includes(part.tool)) { } else if (['write', 'create', 'file_write', 'read', 'view', 'file_read', 'cat'].includes(part.tool)) {
filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path; filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path;
} }
packages/ui/src/components/ui/ScrollableOverlay.tsx
+2 -2
View File
@@ -34,13 +34,13 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
return ( return (
<div <div
className={cn("relative flex flex-col min-h-0 w-full overflow-hidden overscroll-auto", outerClassName)} className={cn("relative flex flex-col min-h-0 w-full overflow-hidden overscroll-none", outerClassName)}
data-keyboard-avoid={keyboardAvoid ? "true" : undefined} data-keyboard-avoid={keyboardAvoid ? "true" : undefined}
> >
<Component <Component
ref={containerRef as React.Ref<HTMLElement>} ref={containerRef as React.Ref<HTMLElement>}
className={cn( className={cn(
"overlay-scrollbar-target overlay-scrollbar-container overscroll-auto", "overlay-scrollbar-target overlay-scrollbar-container overscroll-none",
fillContainer ? "flex-1 min-h-0 w-full" : "flex-none w-full h-auto", fillContainer ? "flex-1 min-h-0 w-full" : "flex-none w-full h-auto",
disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto", disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto",
className className