feat(mobile): split controls into separate Agent and Model buttons (#293)

* feat(mobile): split controls into separate Agent and Model buttons - Add MobileAgentButton with tap-to-cycle and long-press-to-open behavior - Add MobileModelButton for direct model panel access - Remove agent selection from UnifiedControlsDrawer for cleaner mobile UX - Agent cycling accessible via Tab key shortcut * fix(mobile): optimize controls layout and touch handling --------- Co-authored-by: Jovines <jovines@qq.com>
2026-02-04 18:07:24 +02:00
parent def6257985
commit b733f26aed
5 changed files with 156 additions and 116 deletions
@@ -22,10 +22,11 @@ import { SkillAutocomplete, type SkillAutocompleteHandle } from './SkillAutocomp
 import { cn } from '@/lib/utils';
 import { ServerFilePicker } from './ServerFilePicker';
 import { ModelControls } from './ModelControls';
-import { StatusChip } from './StatusChip';
 import { UnifiedControlsDrawer } from './UnifiedControlsDrawer';
 import { parseAgentMentions } from '@/lib/messages/agentMentions';
 import { StatusRow } from './StatusRow';
+import { MobileAgentButton } from './MobileAgentButton';
+import { MobileModelButton } from './MobileModelButton';
 import { useAssistantStatus } from '@/hooks/useAssistantStatus';
 import { useCurrentSessionActivity } from '@/hooks/useSessionActivity';
 import { toast } from '@/components/ui';
@@ -530,7 +531,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo

        if (e.key === 'Tab' && !showCommandAutocomplete && !showAgentAutocomplete && !showFileMention) {
            e.preventDefault();
-            cycleAgent();
+            handleCycleAgent();
            return;
        }

@@ -587,9 +588,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
        void abortCurrentOperation();
    }, [abortCurrentOperation, clearAbortPrompt, startAbortIndicator]);

-    const cycleAgent = () => {
+    const handleCycleAgent = React.useCallback(() => {
        const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
-
        if (primaryAgents.length <= 1) return;

        const currentIndex = primaryAgents.findIndex(agent => agent.name === currentAgentName);
@@ -599,10 +599,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
        setAgent(nextAgent.name);

        if (currentSessionId) {
-
            saveSessionAgentSelection(currentSessionId, nextAgent.name);
        }
-    };
+    }, [agents, currentAgentName, currentSessionId, setAgent, saveSessionAgentSelection]);

    const adjustTextareaHeight = React.useCallback(() => {
        const textarea = textareaRef.current;
@@ -1364,7 +1363,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                    <DropdownMenuTrigger asChild>
                        <button
                            type="button"
-                            className={iconButtonBaseClass}
+                            className={cn(iconButtonBaseClass, isMobile && 'h-7 w-7')}
                            title="Add attachment"
                            aria-label="Add attachment"
                        >
@@ -1400,7 +1399,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
        <button
            type='button'
            onClick={onOpenSettings}
-            className={iconButtonBaseClass}
+            className={cn(iconButtonBaseClass, isMobile && 'h-7 w-7')}
            title='Model and agent settings'
            aria-label='Model and agent settings'
        >
@@ -1409,15 +1408,21 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
    ) : null;

    const attachmentsControls = (
-        <>
+        <div className="flex items-center gap-x-1">
            {isMobile ? (
                <button
                    type="button"
                    className={cn(
                        iconButtonBaseClass,
-                        'h-7 w-7 rounded-md border border-transparent typography-ui-label font-semibold text-muted-foreground',
+                        'h-7 w-7 rounded-md text-muted-foreground',
                        'hover:bg-interactive-hover/40 hover:text-foreground'
                    )}
+                    onPointerDownCapture={(event) => {
+                        if (event.pointerType === 'touch') {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }
+                    }}
                    onClick={handleOpenCommandMenu}
                    title="Commands"
                    aria-label="Commands"
@@ -1427,7 +1432,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
            ) : null}
            {attachmentMenu}
            {settingsButton}
-        </>
+        </div>
    );

    const workingStatusText = working.statusText;
@@ -1621,14 +1626,13 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                    >
                        {isMobile ? (
                            <>
-                                <div className="flex w-full items-center gap-x-1">
-                                    <div className="flex items-center flex-shrink-0">
+                                <div className="flex w-full items-center justify-between gap-x-1.5">
+                                    <div className="flex items-center gap-x-1">
                                        {attachmentsControls}
                                    </div>
-                                    <div className="flex flex-1 items-center min-w-0">
-                                        <StatusChip onClick={handleOpenMobileControls} className="min-w-0 max-w-full" />
-                                    </div>
-                                    <div className="flex items-center flex-shrink-0 gap-x-0.5">
+                                    <div className="flex items-center flex-shrink-0 gap-x-1">
+                                        <MobileModelButton onOpenModel={handleOpenMobileControls} />
+                                        <MobileAgentButton onCycleAgent={handleCycleAgent} onOpenAgentPanel={() => setMobileControlsPanel('agent')} />
                                        {actionButtons}
                                    </div>
                                </div>
@@ -1637,11 +1641,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                    mobilePanel={mobileControlsPanel}
                                    onMobilePanelChange={setMobileControlsPanel}
                                    onMobilePanelSelection={handleReturnToUnifiedControls}
+                                    onAgentPanelSelection={() => setMobileControlsPanel(null)}
                                />
                                <UnifiedControlsDrawer
                                    open={mobileControlsOpen}
                                    onClose={handleCloseMobileControls}
-                                    onOpenAgent={() => handleOpenMobilePanel('agent')}
                                    onOpenModel={() => handleOpenMobilePanel('model')}
                                    onOpenEffort={() => handleOpenMobilePanel('variant')}
                                />
@@ -0,0 +1,91 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { getAgentDisplayName } from './mobileControlsUtils';
+import { getAgentColor } from '@/lib/agentColors';
+
+interface MobileAgentButtonProps {
+    onCycleAgent: () => void;
+    onOpenAgentPanel: () => void;
+    className?: string;
+}
+
+export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAgent, onOpenAgentPanel, className }) => {
+    const { currentAgentName, getVisibleAgents } = useConfigStore();
+    const currentSessionId = useSessionStore((state) => state.currentSessionId);
+    const sessionAgentName = useSessionStore((state) =>
+        currentSessionId ? state.getSessionAgentSelection(currentSessionId) : null
+    );
+
+    const agents = getVisibleAgents();
+    const uiAgentName = currentSessionId ? (sessionAgentName || currentAgentName) : currentAgentName;
+    const agentLabel = getAgentDisplayName(agents, uiAgentName);
+    const agentColor = getAgentColor(uiAgentName);
+
+    const longPressTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const isLongPressRef = React.useRef(false);
+
+    const handlePointerDown = (event: React.PointerEvent) => {
+        event.preventDefault();
+        isLongPressRef.current = false;
+        longPressTimerRef.current = setTimeout(() => {
+            isLongPressRef.current = true;
+            onOpenAgentPanel();
+        }, 500);
+    };
+
+    const handlePointerUp = () => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        if (!isLongPressRef.current) {
+            onCycleAgent();
+        }
+    };
+
+    const handlePointerLeave = () => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+    };
+
+    React.useEffect(() => {
+        return () => {
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+            }
+        };
+    }, []);
+
+    return (
+        <button
+            type="button"
+            onPointerDown={handlePointerDown}
+            onPointerUp={handlePointerUp}
+            onPointerLeave={handlePointerLeave}
+            onContextMenu={(e) => e.preventDefault()}
+            className={cn(
+                'inline-flex min-w-0 items-center select-none',
+                'rounded-lg border border-border/50 px-1.5',
+                'typography-micro font-medium',
+                'focus:outline-none hover:bg-[var(--interactive-hover)]',
+                'touch-none',
+                className
+            )}
+            style={{
+                height: '26px',
+                maxHeight: '26px',
+                minHeight: '26px',
+                color: `var(${agentColor.var})`,
+            }}
+            title={agentLabel}
+        >
+            <span className="truncate">{agentLabel}</span>
+        </button>
+    );
+};
+
+export default MobileAgentButton;
@@ -0,0 +1,35 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { getModelDisplayName } from './mobileControlsUtils';
+
+interface MobileModelButtonProps {
+    onOpenModel: () => void;
+    className?: string;
+}
+
+export const MobileModelButton: React.FC<MobileModelButtonProps> = ({ onOpenModel, className }) => {
+    const { currentModelId, getCurrentProvider } = useConfigStore();
+    const currentProvider = getCurrentProvider();
+    const modelLabel = getModelDisplayName(currentProvider, currentModelId);
+
+    return (
+        <button
+            type="button"
+            onClick={onOpenModel}
+            className={cn(
+                'inline-flex min-w-0 items-center justify-center',
+                'rounded-lg border border-border/50 px-1.5',
+                'typography-micro font-medium text-foreground/80',
+                'focus:outline-none hover:bg-[var(--interactive-hover)]',
+                className
+            )}
+            style={{ height: '26px', maxHeight: '26px', minHeight: '26px' }}
+            title={modelLabel}
+        >
+            <span className="min-w-0 truncate">{modelLabel}</span>
+        </button>
+    );
+};
+
+export default MobileModelButton;
@@ -256,6 +256,7 @@ interface ModelControlsProps {
    mobilePanel?: MobileControlsPanel;
    onMobilePanelChange?: (panel: MobileControlsPanel) => void;
    onMobilePanelSelection?: () => void;
+    onAgentPanelSelection?: () => void;
 }

 export const ModelControls: React.FC<ModelControlsProps> = ({
@@ -263,6 +264,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
    mobilePanel,
    onMobilePanelChange,
    onMobilePanelSelection,
+    onAgentPanelSelection,
 }) => {
    const {
        providers,
@@ -1032,9 +1034,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
            }
            if (isCompact) {
                closeMobilePanel();
-                if (onMobilePanelSelection) {
+                const callback = onAgentPanelSelection || onMobilePanelSelection;
+                if (callback) {
                    requestAnimationFrame(() => {
-                        onMobilePanelSelection();
+                        callback();
                    });
                }
            }
@@ -1739,6 +1742,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                className={cn(
                                    'flex w-full flex-col gap-1 rounded-xl border px-2 py-1.5 text-left',
                                    'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary agent-list-item',
+                                    'touch-manipulation cursor-pointer',
                                    agentColor.class,
                                    isSelected ? 'active' : 'border-border/40'
                                )}
@@ -9,14 +9,10 @@ import { useUIStore } from '@/stores/useUIStore';
 import { useModelLists } from '@/hooks/useModelLists';
 import {
    formatEffortLabel,
-    getAgentDisplayName,
    getQuickEffortOptions,
-    isPrimaryMode,
    parseEffortVariant,
 } from './mobileControlsUtils';

-const MAX_QUICK_AGENTS = 3;
-
 const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
    notation: 'compact',
    maximumFractionDigits: 1,
@@ -36,7 +32,6 @@ const formatTokens = (value?: number | null) => {
 interface UnifiedControlsDrawerProps {
    open: boolean;
    onClose: () => void;
-    onOpenAgent: () => void;
    onOpenModel: () => void;
    onOpenEffort: () => void;
 }
@@ -44,7 +39,6 @@ interface UnifiedControlsDrawerProps {
 export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
    open,
    onClose,
-    onOpenAgent,
    onOpenModel,
    onOpenEffort,
 }) => {
@@ -53,20 +47,16 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
        currentProviderId,
        currentModelId,
        currentVariant,
-        currentAgentName,
-        setAgent,
        setProvider,
        setModel,
        setCurrentVariant,
        getCurrentModelVariants,
-        getVisibleAgents,
        getModelMetadata,
    } = useConfigStore();
-    const { addRecentModel, addRecentAgent, addRecentEffort, recentAgents, recentEfforts } = useUIStore();
+    const { addRecentModel, addRecentEffort, recentEfforts } = useUIStore();
    const { recentModelsList } = useModelLists();
    const {
        currentSessionId,
-        saveSessionAgentSelection,
        saveAgentModelForSession,
        saveAgentModelVariantForSession,
    } = useSessionStore();
@@ -74,39 +64,7 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
        currentSessionId ? state.getSessionAgentSelection(currentSessionId) : null
    );

-    const agents = getVisibleAgents();
-    const uiAgentName = currentSessionId ? (sessionAgentName || currentAgentName) : currentAgentName;
-    const primaryAgents = agents.filter((agent) => isPrimaryMode(agent.mode));
-    const recentAgentNames = React.useMemo(() => {
-        if (recentAgents.length === 0) {
-            return [];
-        }
-        const visibleAgents = new Set(agents.map((agent) => agent.name));
-        return recentAgents.filter((name) => visibleAgents.has(name));
-    }, [recentAgents, agents]);
-
-    const quickAgentNames = React.useMemo(() => {
-        const fallback = primaryAgents.length > 0 ? primaryAgents.map((agent) => agent.name) : agents.map((agent) => agent.name);
-        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(MAX_QUICK_AGENTS);
-        }
-        if (uiAgentName && !base.includes(uiAgentName)) {
-            if (base.length > 0) {
-                base[0] = uiAgentName;
-            } else {
-                base.push(uiAgentName);
-            }
-        }
-        return base;
-    }, [agents, primaryAgents, recentAgentNames, uiAgentName]);
-
-    const hasAgentOverflow = agents.some((agent) => !quickAgentNames.includes(agent.name));
+    const uiAgentName = currentSessionId ? (sessionAgentName || null) : null;

    const recentModelsBase = recentModelsList.slice(0, 4);
    const hasCurrentInRecents = recentModelsBase.some(
@@ -162,14 +120,6 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
    }, [baseEfforts, currentVariant, recentEffortOptions]);
    const effortHasMore = variants.length + 1 > quickEfforts.length;

-    const handleAgentSelect = (agentName: string) => {
-        setAgent(agentName);
-        addRecentAgent(agentName);
-        if (currentSessionId) {
-            saveSessionAgentSelection(currentSessionId, agentName);
-        }
-    };
-
    const handleModelSelect = (providerId: string, modelId: string) => {
        const provider = providers.find((entry) => entry.id === providerId);
        if (!provider) {
@@ -209,50 +159,6 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
    return (
        <MobileOverlayPanel open={open} onClose={onClose} title="Controls">
            <div className="flex flex-col gap-3">
-                <div className="flex flex-col gap-2">
-                    <div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground">
-                        Agent
-                    </div>
-                    <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 (
-                                    <button
-                                        key={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 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