mirror of https://github.com/kortix-ai/suna.git
fix: remove redundancy in tool step control
This commit is contained in:
Vukasin
parent
35ef852ec4
commit
32a740d0fe
|
|
@ -299,6 +299,52 @@ export function ToolCallSidePanel({
|
|||
internalNavigate(totalCalls - 1, 'user_explicit');
|
||||
}, [totalCalls, internalNavigate]);
|
||||
|
||||
const renderStatusButton = React.useCallback(() => {
|
||||
const baseClasses = "flex items-center justify-center gap-1.5 px-2 py-0.5 rounded-full w-[116px]";
|
||||
const dotClasses = "w-1.5 h-1.5 rounded-full";
|
||||
const textClasses = "text-xs font-medium";
|
||||
|
||||
if (isLiveMode) {
|
||||
if (agentStatus === 'running') {
|
||||
return (
|
||||
<div className={`${baseClasses} bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800`}>
|
||||
<div className={`${dotClasses} bg-green-500 animate-pulse`} />
|
||||
<span className={`${textClasses} text-green-700 dark:text-green-400`}>Live Updates</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={`${baseClasses} bg-neutral-50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800`}>
|
||||
<div className={`${dotClasses} bg-neutral-500`} />
|
||||
<span className={`${textClasses} text-neutral-700 dark:text-neutral-400`}>Latest Tool</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (agentStatus === 'running') {
|
||||
return (
|
||||
<div
|
||||
className={`${baseClasses} bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors cursor-pointer`}
|
||||
onClick={jumpToLive}
|
||||
>
|
||||
<div className={`${dotClasses} bg-green-500 animate-pulse`} />
|
||||
<span className={`${textClasses} text-green-700 dark:text-green-400`}>Jump to Live</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
className={`${baseClasses} bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors cursor-pointer`}
|
||||
onClick={jumpToLatest}
|
||||
>
|
||||
<div className={`${dotClasses} bg-blue-500`} />
|
||||
<span className={`${textClasses} text-blue-700 dark:text-blue-400`}>Jump to Latest</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [isLiveMode, agentStatus, jumpToLive, jumpToLatest]);
|
||||
|
||||
const handleSliderChange = React.useCallback(([newValue]: [number]) => {
|
||||
const targetSnapshot = completedToolCalls[newValue];
|
||||
if (targetSnapshot) {
|
||||
|
|
@ -637,43 +683,9 @@ export function ToolCallSidePanel({
|
|||
<div
|
||||
className={cn(
|
||||
'border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900',
|
||||
isMobile ? 'p-3' : 'p-4 space-y-2',
|
||||
isMobile ? 'p-2' : 'px-4 py-2.5',
|
||||
)}
|
||||
>
|
||||
{!isMobile && (
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className="h-5 w-5 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
|
||||
<CurrentToolIcon className="h-3 w-3 text-zinc-800 dark:text-zinc-300" />
|
||||
</div>
|
||||
<span
|
||||
className="text-xs font-medium text-zinc-700 dark:text-zinc-300 truncate"
|
||||
title={currentToolName}
|
||||
>
|
||||
{getUserFriendlyToolName(currentToolName)} {isStreaming && `(Running${dots})`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isLiveMode && agentStatus === 'running' && (
|
||||
<div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
|
||||
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-xs font-medium text-green-700 dark:text-green-400">Live</span>
|
||||
</div>
|
||||
)}
|
||||
{!isLiveMode && agentStatus !== 'running' && (
|
||||
<div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-neutral-50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800">
|
||||
<div className="w-1.5 h-1.5 bg-neutral-500 rounded-full"></div>
|
||||
<span className="text-xs font-medium text-neutral-700 dark:text-neutral-400">Live</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-xs text-zinc-500 dark:text-zinc-400 flex-shrink-0">
|
||||
Step {displayIndex + 1} of {displayTotalCalls}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isMobile ? (
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
|
|
@ -681,31 +693,17 @@ export function ToolCallSidePanel({
|
|||
size="sm"
|
||||
onClick={navigateToPrevious}
|
||||
disabled={displayIndex <= 0}
|
||||
className="h-9 px-3"
|
||||
className="h-8 px-2.5 text-xs"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 mr-1" />
|
||||
<span>Previous</span>
|
||||
<ChevronLeft className="h-3.5 w-3.5 mr-1" />
|
||||
<span>Prev</span>
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isLiveMode && agentStatus === 'running' ? (
|
||||
<div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
|
||||
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-xs font-medium text-green-700 dark:text-green-400">Live</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-neutral-50 dark:bg-neutral-900/20 border border-neutral-200 dark:border-neutral-800">
|
||||
<div className="w-1.5 h-1.5 bg-neutral-500 rounded-full"></div>
|
||||
<span className="text-xs font-medium text-neutral-700 dark:text-neutral-400">Live</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{displayIndex + 1} / {displayTotalCalls}
|
||||
{isCurrentToolStreaming && totalCompletedCalls > 0 && (
|
||||
<span className="text-blue-600 dark:text-blue-400"> • Running</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs text-zinc-600 dark:text-zinc-400 font-medium tabular-nums min-w-[44px]">
|
||||
{displayIndex + 1}/{displayTotalCalls}
|
||||
</span>
|
||||
{renderStatusButton()}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
|
|
@ -713,60 +711,52 @@ export function ToolCallSidePanel({
|
|||
size="sm"
|
||||
onClick={navigateToNext}
|
||||
disabled={displayIndex >= displayTotalCalls - 1}
|
||||
className="h-9 px-3"
|
||||
className="h-8 px-2.5 text-xs"
|
||||
>
|
||||
<span>Next</span>
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
<ChevronRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative flex items-center gap-1.5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={navigateToPrevious}
|
||||
disabled={displayIndex <= 0}
|
||||
className="h-6 w-6 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
|
||||
className="h-7 w-7 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
|
||||
>
|
||||
<ChevronLeft className="h-3.5 w-3.5" />
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-xs text-zinc-600 dark:text-zinc-400 font-medium tabular-nums px-1 min-w-[44px] text-center">
|
||||
{displayIndex + 1}/{displayTotalCalls}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={navigateToNext}
|
||||
disabled={displayIndex >= displayTotalCalls - 1}
|
||||
className="h-6 w-6 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
|
||||
className="h-7 w-7 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
|
||||
>
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full">
|
||||
{(showJumpToLive || showJumpToLatest) && (
|
||||
<div className="absolute -top-12 left-1/2 transform -translate-x-1/2 z-10">
|
||||
{showJumpToLive && (
|
||||
<Button className='rounded-full bg-red-500 hover:bg-red-400 text-white' onClick={jumpToLive}>
|
||||
Jump to Live
|
||||
</Button>
|
||||
)}
|
||||
{showJumpToLatest && (
|
||||
<Button className='rounded-full' onClick={jumpToLive}>
|
||||
Jump to Latest
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 relative">
|
||||
<Slider
|
||||
min={0}
|
||||
max={displayTotalCalls - 1}
|
||||
step={1}
|
||||
value={[displayIndex]}
|
||||
onValueChange={handleSliderChange}
|
||||
className="w-full [&>span:first-child]:h-1 [&>span:first-child]:bg-zinc-200 dark:[&>span:first-child]:bg-zinc-800 [&>span:first-child>span]:bg-zinc-500 dark:[&>span:first-child>span]:bg-zinc-400 [&>span:first-child>span]:h-1"
|
||||
className="w-full [&>span:first-child]:h-1.5 [&>span:first-child]:bg-zinc-200 dark:[&>span:first-child]:bg-zinc-800 [&>span:first-child>span]:bg-zinc-500 dark:[&>span:first-child>span]:bg-zinc-400 [&>span:first-child>span]:h-1.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
{renderStatusButton()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue