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
@@ -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;