| 55 | }).join(', '); |
| 56 | } |
| 57 | export function renderToolUseProgressMessage(progressMessagesForMessage: ProgressMessage<MCPProgress>[]): React.ReactNode { |
| 58 | const lastProgress = progressMessagesForMessage.at(-1); |
| 59 | if (!lastProgress?.data) { |
| 60 | return <MessageResponse height={1}> |
| 61 | <Text dimColor>Running…</Text> |
| 62 | </MessageResponse>; |
| 63 | } |
| 64 | const { |
| 65 | progress, |
| 66 | total, |
| 67 | progressMessage |
| 68 | } = lastProgress.data; |
| 69 | if (progress === undefined) { |
| 70 | return <MessageResponse height={1}> |
| 71 | <Text dimColor>Running…</Text> |
| 72 | </MessageResponse>; |
| 73 | } |
| 74 | if (total !== undefined && total > 0) { |
| 75 | const ratio = Math.min(1, Math.max(0, progress / total)); |
| 76 | const percentage = Math.round(ratio * 100); |
| 77 | return <MessageResponse> |
| 78 | <Box flexDirection="column"> |
| 79 | {progressMessage && <Text dimColor>{progressMessage}</Text>} |
| 80 | <Box flexDirection="row" gap={1}> |
| 81 | <ProgressBar ratio={ratio} width={20} /> |
| 82 | <Text dimColor>{percentage}%</Text> |
| 83 | </Box> |
| 84 | </Box> |
| 85 | </MessageResponse>; |
| 86 | } |
| 87 | return <MessageResponse height={1}> |
| 88 | <Text dimColor>{progressMessage ?? `Processing… ${progress}`}</Text> |
| 89 | </MessageResponse>; |
| 90 | } |
| 91 | export function renderToolResultMessage(output: string | MCPToolResult, _progressMessagesForMessage: ProgressMessage<ToolProgressData>[], { |
| 92 | verbose, |
| 93 | input |