Refactor chat UI controls and overlays for mobile adjustments (#248)
* 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
committed by
GitHub
GitHub
parent
2ed1a73d3c
commit
344f369093
@@ -1527,8 +1527,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
<div className="flex items-center flex-shrink-0 gap-x-1">
|
||||
{attachmentsControls}
|
||||
</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" />
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
{actionButton}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 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 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 combinedClassName = cn(iconClass, 'flex-shrink-0');
|
||||
const modeColors = getEditModeColors(mode);
|
||||
|
||||
@@ -3,7 +3,6 @@ import { cn } from '@/lib/utils';
|
||||
import { useConfigStore } from '@/stores/useConfigStore';
|
||||
import { useSessionStore } from '@/stores/useSessionStore';
|
||||
import { useContextStore } from '@/stores/contextStore';
|
||||
import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
|
||||
import { formatEffortLabel, getAgentDisplayName, getModelDisplayName } from './mobileControlsUtils';
|
||||
|
||||
interface StatusChipProps {
|
||||
@@ -13,7 +12,6 @@ interface StatusChipProps {
|
||||
|
||||
export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) => {
|
||||
const {
|
||||
currentProviderId,
|
||||
currentModelId,
|
||||
currentVariant,
|
||||
currentAgentName,
|
||||
@@ -33,28 +31,35 @@ export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) =>
|
||||
const modelLabel = getModelDisplayName(currentProvider, currentModelId);
|
||||
const hasEffort = getCurrentModelVariants().length > 0;
|
||||
const effortLabel = hasEffort ? formatEffortLabel(currentVariant) : null;
|
||||
const segments = [agentLabel, modelLabel, effortLabel].filter((segment): segment is string => Boolean(segment));
|
||||
const label = segments.join(' · ');
|
||||
const textRef = React.useRef<HTMLSpanElement>(null);
|
||||
const isTruncated = useIsTextTruncated(textRef, [label, currentProviderId, currentModelId, currentVariant, uiAgentName]);
|
||||
const fullLabel = [agentLabel, modelLabel, effortLabel].filter(Boolean).join(' · ');
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
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',
|
||||
'typography-meta font-medium text-foreground transition-colors hover:bg-muted/50',
|
||||
'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
|
||||
'inline-flex min-w-0 items-center justify-center',
|
||||
'rounded-lg border border-border/50 px-1.5',
|
||||
'typography-meta font-medium text-foreground/80',
|
||||
'focus:outline-none',
|
||||
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={cn('marquee-text', isTruncated && 'marquee-text--auto')}>
|
||||
{label}
|
||||
</span>
|
||||
</span>
|
||||
<span className="shrink-0">{agentLabel}</span>
|
||||
<span className="shrink-0 text-muted-foreground mx-1">·</span>
|
||||
<span className="min-w-0 truncate">{modelLabel}</span>
|
||||
{effortLabel && (
|
||||
<>
|
||||
<span className="shrink-0 text-muted-foreground mx-1">·</span>
|
||||
<span className="shrink-0">{effortLabel}</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,21 +1,38 @@
|
||||
import React from 'react';
|
||||
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useConfigStore } from '@/stores/useConfigStore';
|
||||
import { useSessionStore } from '@/stores/useSessionStore';
|
||||
import { useContextStore } from '@/stores/contextStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useModelLists } from '@/hooks/useModelLists';
|
||||
import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
|
||||
import {
|
||||
formatEffortLabel,
|
||||
getAgentDisplayName,
|
||||
getModelDisplayName,
|
||||
getQuickEffortOptions,
|
||||
isPrimaryMode,
|
||||
parseEffortVariant,
|
||||
} 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 {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
@@ -31,36 +48,6 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
|
||||
onOpenModel,
|
||||
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 {
|
||||
providers,
|
||||
currentProviderId,
|
||||
@@ -71,9 +58,9 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
|
||||
setProvider,
|
||||
setModel,
|
||||
setCurrentVariant,
|
||||
getCurrentProvider,
|
||||
getCurrentModelVariants,
|
||||
getVisibleAgents,
|
||||
getModelMetadata,
|
||||
} = useConfigStore();
|
||||
const { addRecentModel, addRecentAgent, addRecentEffort, recentAgents, recentEfforts } = useUIStore();
|
||||
const { recentModelsList } = useModelLists();
|
||||
@@ -100,14 +87,14 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
|
||||
|
||||
const quickAgentNames = React.useMemo(() => {
|
||||
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();
|
||||
for (const recent of orderedRecents) {
|
||||
if (!recent || base.includes(recent)) {
|
||||
continue;
|
||||
}
|
||||
base.unshift(recent);
|
||||
base.splice(4);
|
||||
base.splice(MAX_QUICK_AGENTS);
|
||||
}
|
||||
if (uiAgentName && !base.includes(uiAgentName)) {
|
||||
if (base.length > 0) {
|
||||
@@ -121,20 +108,25 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
|
||||
|
||||
const hasAgentOverflow = agents.some((agent) => !quickAgentNames.includes(agent.name));
|
||||
|
||||
const currentProvider = getCurrentProvider();
|
||||
const currentModelLabel = getModelDisplayName(currentProvider, currentModelId);
|
||||
const recentModels = recentModelsList.slice(0, 4);
|
||||
const hasCurrentInRecents = recentModels.some(
|
||||
const recentModelsBase = recentModelsList.slice(0, 4);
|
||||
const hasCurrentInRecents = recentModelsBase.some(
|
||||
(entry) => entry.providerID === currentProviderId && entry.modelID === currentModelId
|
||||
);
|
||||
const currentModelRow = currentProviderId && currentModelId
|
||||
? {
|
||||
providerID: currentProviderId,
|
||||
modelID: currentModelId,
|
||||
providerName: currentProvider?.name || currentProviderId,
|
||||
modelName: currentModelLabel,
|
||||
// If current model not in recents, prepend it so it's always visible
|
||||
const recentModels = React.useMemo(() => {
|
||||
if (hasCurrentInRecents || !currentProviderId || !currentModelId) {
|
||||
return recentModelsBase;
|
||||
}
|
||||
: 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 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">
|
||||
Agent
|
||||
</div>
|
||||
{agents.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed border-border/50 px-2 py-2 typography-meta text-muted-foreground">
|
||||
No agents configured
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{quickAgentNames.map((agentName) => {
|
||||
const agent = agents.find((entry) => entry.name === agentName);
|
||||
<div className="rounded-xl border border-border/40 overflow-hidden">
|
||||
{agents.length === 0 ? (
|
||||
<div className="px-3 py-2 typography-meta text-muted-foreground">
|
||||
No agents configured
|
||||
</div>
|
||||
) : (
|
||||
quickAgentNames.map((agentName) => {
|
||||
const displayName = getAgentDisplayName(agents, agentName);
|
||||
const isSelected = agentName === uiAgentName;
|
||||
return (
|
||||
<AgentRow
|
||||
<button
|
||||
key={agentName}
|
||||
name={displayName}
|
||||
description={agent?.description}
|
||||
isSelected={agentName === uiAgentName}
|
||||
onSelect={() => handleAgentSelect(agentName)}
|
||||
/>
|
||||
type="button"
|
||||
onClick={() => handleAgentSelect(agentName)}
|
||||
className={cn(
|
||||
'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
|
||||
type="button"
|
||||
onClick={onOpenAgent}
|
||||
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"
|
||||
aria-label="More agents"
|
||||
>
|
||||
...
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
})
|
||||
)}
|
||||
{hasAgentOverflow && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenAgent}
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Model
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{!hasCurrentInRecents && currentModelRow && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleModelSelect(currentModelRow.providerID, currentModelRow.modelID)}
|
||||
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>
|
||||
<div className="rounded-xl border border-border/40 overflow-hidden">
|
||||
{recentModels.length === 0 && !hasCurrentInRecents && (
|
||||
<div className="px-3 py-2 typography-meta text-muted-foreground">
|
||||
No recent models
|
||||
</div>
|
||||
)}
|
||||
|
||||
{recentModels.map(({ providerID, modelID, provider, model }) => {
|
||||
{recentModels.map(({ providerID, modelID, model }) => {
|
||||
const isSelected = providerID === currentProviderId && modelID === currentModelId;
|
||||
const modelName = typeof model?.name === 'string' && model.name.trim().length > 0
|
||||
? model.name
|
||||
: modelID;
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
const ctxTokens = formatTokens(metadata?.limit?.context);
|
||||
const outTokens = formatTokens(metadata?.limit?.output);
|
||||
return (
|
||||
<button
|
||||
key={`recent-${providerID}-${modelID}`}
|
||||
type="button"
|
||||
onClick={() => handleModelSelect(providerID, modelID)}
|
||||
className={cn(
|
||||
'flex min-h-[44px] w-full items-center 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'
|
||||
'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 ? '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}
|
||||
</span>
|
||||
<span className="typography-micro text-muted-foreground">
|
||||
{provider?.name || providerID}
|
||||
</span>
|
||||
{(ctxTokens || outTokens) && (
|
||||
<span className="typography-micro text-muted-foreground whitespace-nowrap flex-shrink-0">
|
||||
{ctxTokens && `${ctxTokens} ctx`}
|
||||
{ctxTokens && outTokens && ' • '}
|
||||
{outTokens && `${outTokens} out`}
|
||||
</span>
|
||||
)}
|
||||
</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
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
...
|
||||
|
||||
@@ -1066,6 +1066,10 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
|
||||
let filePath: unknown;
|
||||
if (part.tool === 'edit' || part.tool === 'multiedit') {
|
||||
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)) {
|
||||
filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path;
|
||||
}
|
||||
|
||||
@@ -34,13 +34,13 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
|
||||
|
||||
return (
|
||||
<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}
|
||||
>
|
||||
<Component
|
||||
ref={containerRef as React.Ref<HTMLElement>}
|
||||
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",
|
||||
disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto",
|
||||
className
|
||||
|
||||
Reference in New Issue
Block a user