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

refactor: simplify mobile agent button interaction (#416)

Browse Source
This commit is contained in:
gsxdsm
2026-02-13 19:20:13 +02:00
committed by GitHub
parent 081be1b7d0
commit 569cc411c3
3 changed files with 38 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+1 -1
View File
@@ -2082,7 +2082,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
<div className="flex items-center min-w-0 gap-x-1 justify-end">
<div className="flex items-center gap-x-1 min-w-0 max-w-[60vw] flex-shrink">
<MobileModelButton onOpenModel={handleOpenMobileControls} className="min-w-0 flex-shrink" />
<MobileAgentButton onCycleAgent={handleCycleAgent} onOpenAgentPanel={() => setMobileControlsPanel('agent')} className="min-w-0 flex-shrink" />
<MobileAgentButton onOpenAgentPanel={() => setMobileControlsPanel('agent')} className="min-w-0 flex-shrink" />
</div>
<div className="flex items-center gap-x-1 flex-shrink-0">
<BrowserVoiceButton />
packages/ui/src/components/chat/MobileAgentButton.tsx
+3 -44
View File
@@ -6,12 +6,11 @@ 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 }) => {
export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onOpenAgentPanel, className }) => {
const { currentAgentName, getVisibleAgents } = useConfigStore();
const currentSessionId = useSessionStore((state) => state.currentSessionId);
const sessionAgentName = useSessionStore((state) =>
@@ -23,56 +22,16 @@ export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAge
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()}
onClick={onOpenAgentPanel}
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-pan-x',
'touch-manipulation active:scale-95 transition-transform',
className
)}
style={{
packages/ui/src/components/chat/ModelControls.tsx
+46 -38
View File
@@ -1762,47 +1762,15 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
open={activeMobilePanel === 'agent'}
onClose={closeMobilePanel}
title="Select agent"
>
<div className="flex flex-col gap-1.5">
{primaryAgents.map((agent) => {
const isSelected = agent.name === uiAgentName;
const agentColor = getAgentColor(agent.name);
return (
<button
key={agent.name}
type="button"
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'
)}
onClick={() => handleAgentChange(agent.name)}
>
<div className="flex items-center gap-1.5">
<div className={cn('h-2 w-2 rounded-full', agentColor.class)} />
contentMaxHeightClassName="max-h-[min(52dvh,360px)]"
footer={(
<div className="flex items-center justify-between">
<span
className="typography-meta font-medium text-foreground"
style={isSelected ? { color: `var(${agentColor.var})` } : undefined}
>
{capitalizeAgentName(agent.name)}
</span>
</div>
{agent.description && (
<span className="typography-micro text-muted-foreground">
{agent.description}
</span>
)}
</button>
);
})}
<div className="rounded-xl bg-transparent">
<div className="flex items-center justify-between px-2 py-2">
<span className={cn(
className={cn(
'typography-meta font-medium',
approveEditsDisabled ? 'text-muted-foreground' : 'text-foreground'
)}>
)}
>
Auto-approve edits
</span>
<Switch
@@ -1811,7 +1779,47 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
onCheckedChange={handleApproveEditsToggle}
/>
</div>
)}
>
<div className="flex flex-col gap-2">
{selectableDesktopAgents.map((agent) => {
const isSelected = agent.name === uiAgentName;
const agentColor = getAgentColor(agent.name);
return (
<button
key={agent.name}
type="button"
className={cn(
'flex w-full flex-col gap-1.5 rounded-xl border px-3 py-2.5 text-left',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary',
'touch-manipulation cursor-pointer transition-colors',
'active:bg-interactive-hover',
isSelected
? 'border-primary/50 bg-interactive-selection/20'
: 'border-border/40 hover:bg-interactive-hover/50'
)}
onClick={() => handleAgentChange(agent.name)}
>
<div className="flex items-center gap-2">
<div className={cn('h-2.5 w-2.5 rounded-full flex-shrink-0', agentColor.class)} />
<span
className="typography-ui-label font-semibold"
style={isSelected ? { color: `var(${agentColor.var})` } : undefined}
>
{capitalizeAgentName(agent.name)}
</span>
{isSelected && (
<RiCheckLine className="h-4 w-4 text-primary ml-auto flex-shrink-0" />
)}
</div>
{agent.description && (
<span className="typography-meta text-muted-foreground pl-4.5">
{agent.description}
</span>
)}
</button>
);
})}
</div>
</MobileOverlayPanel>
);