@townco/ui 0.1.70 → 0.1.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/schemas/tool-call.d.ts +8 -8
- package/dist/gui/components/Button.d.ts +1 -1
- package/dist/sdk/schemas/message.d.ts +2 -2
- package/dist/sdk/schemas/session.d.ts +6 -6
- package/package.json +3 -3
- package/dist/gui/components/HookNotification.d.ts +0 -9
- package/dist/gui/components/HookNotification.js +0 -50
- package/dist/gui/components/InvokingGroup.d.ts +0 -9
- package/dist/gui/components/InvokingGroup.js +0 -16
- package/dist/gui/components/SubagentStream.d.ts +0 -23
- package/dist/gui/components/SubagentStream.js +0 -98
- package/dist/gui/components/ToolCall.d.ts +0 -8
- package/dist/gui/components/ToolCall.js +0 -234
- package/dist/gui/components/ToolCallGroup.d.ts +0 -8
- package/dist/gui/components/ToolCallGroup.js +0 -29
|
@@ -13,16 +13,16 @@ export type ToolCallStatus = z.infer<typeof ToolCallStatusSchema>;
|
|
|
13
13
|
* Tool call categories for UI presentation
|
|
14
14
|
*/
|
|
15
15
|
export declare const ToolCallKindSchema: z.ZodEnum<{
|
|
16
|
-
search: "search";
|
|
17
|
-
execute: "execute";
|
|
18
|
-
move: "move";
|
|
19
|
-
other: "other";
|
|
20
16
|
read: "read";
|
|
21
17
|
edit: "edit";
|
|
22
18
|
delete: "delete";
|
|
19
|
+
move: "move";
|
|
20
|
+
search: "search";
|
|
21
|
+
execute: "execute";
|
|
23
22
|
think: "think";
|
|
24
23
|
fetch: "fetch";
|
|
25
24
|
switch_mode: "switch_mode";
|
|
25
|
+
other: "other";
|
|
26
26
|
}>;
|
|
27
27
|
export type ToolCallKind = z.infer<typeof ToolCallKindSchema>;
|
|
28
28
|
/**
|
|
@@ -280,16 +280,16 @@ export declare const ToolCallSchema: z.ZodObject<{
|
|
|
280
280
|
}, z.core.$strip>>;
|
|
281
281
|
subline: z.ZodOptional<z.ZodString>;
|
|
282
282
|
kind: z.ZodEnum<{
|
|
283
|
-
search: "search";
|
|
284
|
-
execute: "execute";
|
|
285
|
-
move: "move";
|
|
286
|
-
other: "other";
|
|
287
283
|
read: "read";
|
|
288
284
|
edit: "edit";
|
|
289
285
|
delete: "delete";
|
|
286
|
+
move: "move";
|
|
287
|
+
search: "search";
|
|
288
|
+
execute: "execute";
|
|
290
289
|
think: "think";
|
|
291
290
|
fetch: "fetch";
|
|
292
291
|
switch_mode: "switch_mode";
|
|
292
|
+
other: "other";
|
|
293
293
|
}>;
|
|
294
294
|
status: z.ZodEnum<{
|
|
295
295
|
pending: "pending";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type VariantProps } from "class-variance-authority";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
5
5
|
size?: "default" | "icon" | "sm" | "lg" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -13,9 +13,9 @@ export type MessageRole = z.infer<typeof MessageRole>;
|
|
|
13
13
|
* Content type for messages
|
|
14
14
|
*/
|
|
15
15
|
export declare const ContentType: z.ZodEnum<{
|
|
16
|
+
file: "file";
|
|
16
17
|
text: "text";
|
|
17
18
|
image: "image";
|
|
18
|
-
file: "file";
|
|
19
19
|
tool_call: "tool_call";
|
|
20
20
|
tool_result: "tool_result";
|
|
21
21
|
}>;
|
|
@@ -25,9 +25,9 @@ export type ContentType = z.infer<typeof ContentType>;
|
|
|
25
25
|
*/
|
|
26
26
|
export declare const BaseContent: z.ZodObject<{
|
|
27
27
|
type: z.ZodEnum<{
|
|
28
|
+
file: "file";
|
|
28
29
|
text: "text";
|
|
29
30
|
image: "image";
|
|
30
|
-
file: "file";
|
|
31
31
|
tool_call: "tool_call";
|
|
32
32
|
tool_result: "tool_result";
|
|
33
33
|
}>;
|
|
@@ -4,10 +4,10 @@ import { z } from "zod";
|
|
|
4
4
|
*/
|
|
5
5
|
export declare const SessionStatus: z.ZodEnum<{
|
|
6
6
|
error: "error";
|
|
7
|
+
active: "active";
|
|
7
8
|
idle: "idle";
|
|
8
9
|
connecting: "connecting";
|
|
9
10
|
connected: "connected";
|
|
10
|
-
active: "active";
|
|
11
11
|
streaming: "streaming";
|
|
12
12
|
disconnected: "disconnected";
|
|
13
13
|
}>;
|
|
@@ -41,10 +41,10 @@ export declare const Session: z.ZodObject<{
|
|
|
41
41
|
id: z.ZodString;
|
|
42
42
|
status: z.ZodEnum<{
|
|
43
43
|
error: "error";
|
|
44
|
+
active: "active";
|
|
44
45
|
idle: "idle";
|
|
45
46
|
connecting: "connecting";
|
|
46
47
|
connected: "connected";
|
|
47
|
-
active: "active";
|
|
48
48
|
streaming: "streaming";
|
|
49
49
|
disconnected: "disconnected";
|
|
50
50
|
}>;
|
|
@@ -117,10 +117,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
|
|
|
117
117
|
sessionId: z.ZodString;
|
|
118
118
|
status: z.ZodOptional<z.ZodEnum<{
|
|
119
119
|
error: "error";
|
|
120
|
+
active: "active";
|
|
120
121
|
idle: "idle";
|
|
121
122
|
connecting: "connecting";
|
|
122
123
|
connected: "connected";
|
|
123
|
-
active: "active";
|
|
124
124
|
streaming: "streaming";
|
|
125
125
|
disconnected: "disconnected";
|
|
126
126
|
}>>;
|
|
@@ -354,10 +354,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
|
|
|
354
354
|
sessionId: z.ZodString;
|
|
355
355
|
status: z.ZodOptional<z.ZodEnum<{
|
|
356
356
|
error: "error";
|
|
357
|
+
active: "active";
|
|
357
358
|
idle: "idle";
|
|
358
359
|
connecting: "connecting";
|
|
359
360
|
connected: "connected";
|
|
360
|
-
active: "active";
|
|
361
361
|
streaming: "streaming";
|
|
362
362
|
disconnected: "disconnected";
|
|
363
363
|
}>>;
|
|
@@ -561,10 +561,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
|
|
|
561
561
|
sessionId: z.ZodString;
|
|
562
562
|
status: z.ZodOptional<z.ZodEnum<{
|
|
563
563
|
error: "error";
|
|
564
|
+
active: "active";
|
|
564
565
|
idle: "idle";
|
|
565
566
|
connecting: "connecting";
|
|
566
567
|
connected: "connected";
|
|
567
|
-
active: "active";
|
|
568
568
|
streaming: "streaming";
|
|
569
569
|
disconnected: "disconnected";
|
|
570
570
|
}>>;
|
|
@@ -626,10 +626,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
|
|
|
626
626
|
sessionId: z.ZodString;
|
|
627
627
|
status: z.ZodOptional<z.ZodEnum<{
|
|
628
628
|
error: "error";
|
|
629
|
+
active: "active";
|
|
629
630
|
idle: "idle";
|
|
630
631
|
connecting: "connecting";
|
|
631
632
|
connected: "connected";
|
|
632
|
-
active: "active";
|
|
633
633
|
streaming: "streaming";
|
|
634
634
|
disconnected: "disconnected";
|
|
635
635
|
}>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@townco/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.71",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@radix-ui/react-slot": "^1.2.4",
|
|
50
50
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
51
51
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
52
|
-
"@townco/core": "0.0.
|
|
52
|
+
"@townco/core": "0.0.49",
|
|
53
53
|
"@uiw/react-json-view": "^2.0.0-alpha.39",
|
|
54
54
|
"bun": "^1.3.1",
|
|
55
55
|
"class-variance-authority": "^0.7.1",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@tailwindcss/postcss": "^4.1.17",
|
|
70
|
-
"@townco/tsconfig": "0.1.
|
|
70
|
+
"@townco/tsconfig": "0.1.68",
|
|
71
71
|
"@types/node": "^24.10.0",
|
|
72
72
|
"@types/react": "^19.2.2",
|
|
73
73
|
"ink": "^6.4.0",
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { HookNotificationDisplay } from "../../core/schemas/chat.js";
|
|
2
|
-
export interface HookNotificationProps {
|
|
3
|
-
notification: HookNotificationDisplay;
|
|
4
|
-
}
|
|
5
|
-
/**
|
|
6
|
-
* HookNotification component - displays a hook notification inline with messages
|
|
7
|
-
* Only shows completed or error states (not intermediate "triggered" state)
|
|
8
|
-
*/
|
|
9
|
-
export declare function HookNotification({ notification }: HookNotificationProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { AlertCircle, Archive, CheckCircle2, ChevronDown, Scissors, } from "lucide-react";
|
|
3
|
-
import React, { useState } from "react";
|
|
4
|
-
/**
|
|
5
|
-
* Get display information for a hook type
|
|
6
|
-
*/
|
|
7
|
-
function getHookDisplayInfo(hookType, _callback) {
|
|
8
|
-
if (hookType === "context_size") {
|
|
9
|
-
return {
|
|
10
|
-
icon: Archive,
|
|
11
|
-
title: "Context Compacted",
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
if (hookType === "tool_response") {
|
|
15
|
-
return {
|
|
16
|
-
icon: Scissors,
|
|
17
|
-
title: "Tool Response Compacted",
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
// Fallback for unknown hook types
|
|
21
|
-
return {
|
|
22
|
-
icon: Archive,
|
|
23
|
-
title: `Hook Executed`,
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Format a number with thousand separators
|
|
28
|
-
*/
|
|
29
|
-
function formatNumber(num) {
|
|
30
|
-
return num.toLocaleString();
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* HookNotification component - displays a hook notification inline with messages
|
|
34
|
-
* Only shows completed or error states (not intermediate "triggered" state)
|
|
35
|
-
*/
|
|
36
|
-
export function HookNotification({ notification }) {
|
|
37
|
-
const [isExpanded, setIsExpanded] = useState(false);
|
|
38
|
-
const { icon: IconComponent, title } = getHookDisplayInfo(notification.hookType, notification.callback);
|
|
39
|
-
const isCompleted = notification.status === "completed";
|
|
40
|
-
const isError = notification.status === "error";
|
|
41
|
-
// Build subtitle showing key info
|
|
42
|
-
let subtitle = "";
|
|
43
|
-
if (isCompleted && notification.metadata?.tokensSaved !== undefined) {
|
|
44
|
-
subtitle = `${formatNumber(notification.metadata.tokensSaved)} tokens saved`;
|
|
45
|
-
}
|
|
46
|
-
else if (isError && notification.error) {
|
|
47
|
-
subtitle = notification.error;
|
|
48
|
-
}
|
|
49
|
-
return (_jsxs("div", { className: "flex flex-col my-3", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: isError ? "text-destructive" : "text-muted-foreground", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: title }), isCompleted && _jsx(CheckCircle2, { className: "h-3 w-3 text-green-500" }), isError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), subtitle && (_jsx("span", { className: `text-paragraph-sm pl-4.5 ${isError ? "text-destructive/70" : "text-muted-foreground/70"}`, children: subtitle }))] }), isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Hook Details" }), _jsxs("div", { className: "space-y-1 text-[11px]", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Type:" }), _jsx("span", { className: "text-foreground font-mono", children: notification.hookType })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Callback:" }), _jsx("span", { className: "text-foreground font-mono", children: notification.callback })] })] })] }), notification.metadata && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Result" }), _jsxs("div", { className: "space-y-1 text-[11px]", children: [notification.metadata.action && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Action:" }), _jsx("span", { className: "text-foreground", children: notification.metadata.action })] })), notification.metadata.messagesRemoved !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Messages Removed:" }), _jsx("span", { className: "text-foreground", children: formatNumber(notification.metadata.messagesRemoved) })] })), notification.metadata.tokensSaved !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Tokens Saved:" }), _jsx("span", { className: "text-green-500 font-medium", children: formatNumber(notification.metadata.tokensSaved) })] }))] })] })), notification.error && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-destructive uppercase tracking-wider mb-1.5 font-sans", children: "Error" }), _jsx("div", { className: "text-[11px] text-destructive font-mono", children: notification.error })] })), notification.completedAt && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border text-[10px] text-muted-foreground font-sans", children: ["Executed:", " ", new Date(notification.completedAt).toLocaleTimeString()] }))] }))] }));
|
|
50
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
|
|
2
|
-
export interface InvokingGroupProps {
|
|
3
|
-
toolCalls: ToolCallType[];
|
|
4
|
-
}
|
|
5
|
-
/**
|
|
6
|
-
* InvokingGroup component - displays a group of preliminary (invoking) tool calls
|
|
7
|
-
* Shows as "Invoking parallel operation (N)" with a summary of unique tool names
|
|
8
|
-
*/
|
|
9
|
-
export declare function InvokingGroup({ toolCalls }: InvokingGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ListVideo } from "lucide-react";
|
|
3
|
-
import React from "react";
|
|
4
|
-
/**
|
|
5
|
-
* InvokingGroup component - displays a group of preliminary (invoking) tool calls
|
|
6
|
-
* Shows as "Invoking parallel operation (N)" with a summary of unique tool names
|
|
7
|
-
*/
|
|
8
|
-
export function InvokingGroup({ toolCalls }) {
|
|
9
|
-
// Get unique display names for the summary
|
|
10
|
-
const displayNames = toolCalls.map((tc) => tc.prettyName || tc.title);
|
|
11
|
-
const uniqueNames = [...new Set(displayNames)];
|
|
12
|
-
const summary = uniqueNames.length <= 2
|
|
13
|
-
? uniqueNames.join(", ")
|
|
14
|
-
: `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
|
|
15
|
-
return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-paragraph-sm text-muted-foreground/50", children: [_jsx(ListVideo, { className: "h-3 w-3" }), _jsx("span", { children: "Invoking parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/50", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground/50 pl-4.5", children: summary })] }));
|
|
16
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export interface SubagentStreamProps {
|
|
2
|
-
/** Sub-agent HTTP port */
|
|
3
|
-
port: number;
|
|
4
|
-
/** Sub-agent session ID */
|
|
5
|
-
sessionId: string;
|
|
6
|
-
/** Optional host (defaults to localhost) */
|
|
7
|
-
host?: string;
|
|
8
|
-
/** Parent tool call status - use this to determine if sub-agent is running */
|
|
9
|
-
parentStatus?: "pending" | "in_progress" | "completed" | "failed";
|
|
10
|
-
/** Sub-agent name (for display) */
|
|
11
|
-
agentName?: string | undefined;
|
|
12
|
-
/** Query sent to the sub-agent */
|
|
13
|
-
query?: string | undefined;
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* SubagentStream component - displays streaming content from a sub-agent.
|
|
17
|
-
*
|
|
18
|
-
* This component:
|
|
19
|
-
* - Connects directly to the sub-agent's SSE endpoint
|
|
20
|
-
* - Displays streaming text and tool calls
|
|
21
|
-
* - Renders in a collapsible section (collapsed by default)
|
|
22
|
-
*/
|
|
23
|
-
export declare function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }: SubagentStreamProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronDown, CircleDot, Loader2 } from "lucide-react";
|
|
3
|
-
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
4
|
-
import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
|
|
5
|
-
const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
|
|
6
|
-
/**
|
|
7
|
-
* SubagentStream component - displays streaming content from a sub-agent.
|
|
8
|
-
*
|
|
9
|
-
* This component:
|
|
10
|
-
* - Connects directly to the sub-agent's SSE endpoint
|
|
11
|
-
* - Displays streaming text and tool calls
|
|
12
|
-
* - Renders in a collapsible section (collapsed by default)
|
|
13
|
-
*/
|
|
14
|
-
export function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }) {
|
|
15
|
-
const [isExpanded, setIsExpanded] = useState(false); // Start collapsed for parallel ops
|
|
16
|
-
const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
|
|
17
|
-
const [isNearBottom, setIsNearBottom] = useState(true);
|
|
18
|
-
const thinkingContainerRef = useRef(null);
|
|
19
|
-
const { messages, isStreaming: hookIsStreaming, error } = useSubagentStream({
|
|
20
|
-
port,
|
|
21
|
-
sessionId,
|
|
22
|
-
...(host !== undefined ? { host } : {}),
|
|
23
|
-
});
|
|
24
|
-
// Use parent status as primary indicator, fall back to hook's streaming state
|
|
25
|
-
// Parent is "in_progress" means sub-agent is definitely still running
|
|
26
|
-
const isRunning = parentStatus === "in_progress" || parentStatus === "pending" || hookIsStreaming;
|
|
27
|
-
// Get the current/latest message
|
|
28
|
-
const currentMessage = messages[messages.length - 1];
|
|
29
|
-
const hasContent = currentMessage &&
|
|
30
|
-
(currentMessage.content ||
|
|
31
|
-
(currentMessage.toolCalls && currentMessage.toolCalls.length > 0));
|
|
32
|
-
// Auto-collapse Thinking when completed (so Output is the primary view)
|
|
33
|
-
const prevIsRunningRef = useRef(isRunning);
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
if (prevIsRunningRef.current && !isRunning) {
|
|
36
|
-
// Just completed - collapse thinking to show output
|
|
37
|
-
setIsThinkingExpanded(false);
|
|
38
|
-
}
|
|
39
|
-
prevIsRunningRef.current = isRunning;
|
|
40
|
-
}, [isRunning]);
|
|
41
|
-
// Check if user is near bottom of scroll area
|
|
42
|
-
const checkScrollPosition = useCallback(() => {
|
|
43
|
-
const container = thinkingContainerRef.current;
|
|
44
|
-
if (!container)
|
|
45
|
-
return;
|
|
46
|
-
const { scrollTop, scrollHeight, clientHeight } = container;
|
|
47
|
-
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
|
|
48
|
-
setIsNearBottom(distanceFromBottom < SCROLL_THRESHOLD);
|
|
49
|
-
}, []);
|
|
50
|
-
// Scroll to bottom
|
|
51
|
-
const scrollToBottom = useCallback(() => {
|
|
52
|
-
const container = thinkingContainerRef.current;
|
|
53
|
-
if (!container)
|
|
54
|
-
return;
|
|
55
|
-
container.scrollTop = container.scrollHeight;
|
|
56
|
-
}, []);
|
|
57
|
-
// Auto-scroll when content changes and user is near bottom
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (isNearBottom && (isRunning || hasContent)) {
|
|
60
|
-
scrollToBottom();
|
|
61
|
-
}
|
|
62
|
-
}, [currentMessage?.content, currentMessage?.toolCalls, isNearBottom, isRunning, hasContent, scrollToBottom]);
|
|
63
|
-
// Set up scroll listener
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
const container = thinkingContainerRef.current;
|
|
66
|
-
if (!container)
|
|
67
|
-
return;
|
|
68
|
-
const handleScroll = () => checkScrollPosition();
|
|
69
|
-
container.addEventListener("scroll", handleScroll, { passive: true });
|
|
70
|
-
checkScrollPosition(); // Check initial position
|
|
71
|
-
return () => container.removeEventListener("scroll", handleScroll);
|
|
72
|
-
}, [checkScrollPosition, isThinkingExpanded, isExpanded]);
|
|
73
|
-
// Get last line of streaming content for preview
|
|
74
|
-
const lastLine = currentMessage?.content
|
|
75
|
-
? currentMessage.content.split("\n").filter(Boolean).pop() || ""
|
|
76
|
-
: "";
|
|
77
|
-
const previewText = lastLine.length > 100 ? `${lastLine.slice(0, 100)}...` : lastLine;
|
|
78
|
-
return (_jsxs("div", { children: [!isExpanded && (_jsx("button", { type: "button", onClick: () => setIsExpanded(true), className: "w-full max-w-md text-left cursor-pointer bg-transparent border-none p-0", children: previewText ? (_jsx("p", { className: `text-paragraph-sm text-muted-foreground truncate ${isRunning ? "animate-pulse" : ""}`, children: previewText })) : isRunning ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 italic animate-pulse", children: "Waiting for response..." })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Thinking" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.toolCalls &&
|
|
79
|
-
currentMessage.toolCalls.length > 0 && (_jsx("div", { className: "space-y-1", children: currentMessage.toolCalls.map((tc) => (_jsx(SubagentToolCallItem, { toolCall: tc }, tc.id))) })), currentMessage.content && (_jsxs("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono", children: [currentMessage.content, currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2", children: currentMessage.content })] }))] }))] }));
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* Simple tool call display for sub-agent tool calls
|
|
83
|
-
*/
|
|
84
|
-
function SubagentToolCallItem({ toolCall }) {
|
|
85
|
-
const statusIcon = {
|
|
86
|
-
pending: "...",
|
|
87
|
-
in_progress: "",
|
|
88
|
-
completed: "",
|
|
89
|
-
failed: "",
|
|
90
|
-
}[toolCall.status];
|
|
91
|
-
const statusColor = {
|
|
92
|
-
pending: "text-muted-foreground",
|
|
93
|
-
in_progress: "text-blue-500",
|
|
94
|
-
completed: "text-green-500",
|
|
95
|
-
failed: "text-destructive",
|
|
96
|
-
}[toolCall.status];
|
|
97
|
-
return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [_jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
|
|
98
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
|
|
2
|
-
export interface ToolCallProps {
|
|
3
|
-
toolCall: ToolCallType;
|
|
4
|
-
}
|
|
5
|
-
/**
|
|
6
|
-
* ToolCall component - displays a single tool call with collapsible details
|
|
7
|
-
*/
|
|
8
|
-
export declare function ToolCall({ toolCall }: ToolCallProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import JsonView from "@uiw/react-json-view";
|
|
3
|
-
import { AlertCircle, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, Globe, Image, Link, Search, Wrench, } from "lucide-react";
|
|
4
|
-
import React, { useState } from "react";
|
|
5
|
-
import { ChatLayout } from "./index.js";
|
|
6
|
-
import { SubAgentDetails } from "./SubAgentDetails.js";
|
|
7
|
-
import { useTheme } from "./ThemeProvider.js";
|
|
8
|
-
/**
|
|
9
|
-
* Map of icon names to Lucide components
|
|
10
|
-
*/
|
|
11
|
-
const ICON_MAP = {
|
|
12
|
-
Globe: Globe,
|
|
13
|
-
Image: Image,
|
|
14
|
-
Link: Link,
|
|
15
|
-
Cloud: Cloud,
|
|
16
|
-
CheckSquare: CheckSquare,
|
|
17
|
-
Search: Search,
|
|
18
|
-
FileText: FileText,
|
|
19
|
-
Edit: Edit,
|
|
20
|
-
Wrench: Wrench,
|
|
21
|
-
CircleDot: CircleDot,
|
|
22
|
-
};
|
|
23
|
-
/**
|
|
24
|
-
* Tool call kind icons (using emoji for simplicity)
|
|
25
|
-
*/
|
|
26
|
-
const _kindIcons = {
|
|
27
|
-
read: "\u{1F4C4}",
|
|
28
|
-
edit: "\u{270F}\u{FE0F}",
|
|
29
|
-
delete: "\u{1F5D1}\u{FE0F}",
|
|
30
|
-
move: "\u{1F4E6}",
|
|
31
|
-
search: "\u{1F50D}",
|
|
32
|
-
execute: "\u{2699}\u{FE0F}",
|
|
33
|
-
think: "\u{1F4AD}",
|
|
34
|
-
fetch: "\u{1F310}",
|
|
35
|
-
switch_mode: "\u{1F501}",
|
|
36
|
-
other: "\u{1F527}",
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* ToolCall component - displays a single tool call with collapsible details
|
|
40
|
-
*/
|
|
41
|
-
export function ToolCall({ toolCall }) {
|
|
42
|
-
const [isExpanded, setIsExpanded] = useState(false);
|
|
43
|
-
const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
|
|
44
|
-
const { resolvedTheme } = useTheme();
|
|
45
|
-
// Detect TodoWrite tool and subagent
|
|
46
|
-
const isTodoWrite = toolCall.title === "todo_write";
|
|
47
|
-
// A subagent call can be detected by:
|
|
48
|
-
// - Live: has port and sessionId (but no stored messages yet)
|
|
49
|
-
// - Replay: has stored subagentMessages
|
|
50
|
-
const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
|
|
51
|
-
const hasStoredSubagent = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
|
|
52
|
-
const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
|
|
53
|
-
// Use replay mode if we have stored messages - they should take precedence
|
|
54
|
-
// over trying to connect to SSE (which won't work for replayed sessions)
|
|
55
|
-
const isReplaySubagent = hasStoredSubagent;
|
|
56
|
-
// Safely access ChatLayout context - will be undefined if not within ChatLayout
|
|
57
|
-
const layoutContext = React.useContext(ChatLayout.Context);
|
|
58
|
-
// Click handler: toggle sidepanel for TodoWrite, subagent details for subagents, expand for others
|
|
59
|
-
const handleHeaderClick = React.useCallback(() => {
|
|
60
|
-
if (isTodoWrite && layoutContext) {
|
|
61
|
-
// Toggle sidepanel - close if already open on todo tab, otherwise open
|
|
62
|
-
if (layoutContext.panelSize !== "hidden" &&
|
|
63
|
-
layoutContext.activeTab === "todo") {
|
|
64
|
-
layoutContext.setPanelSize("hidden");
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
layoutContext.setPanelSize("small");
|
|
68
|
-
layoutContext.setActiveTab("todo");
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
else if (isSubagentCall) {
|
|
72
|
-
// Toggle subagent details
|
|
73
|
-
setIsSubagentExpanded(!isSubagentExpanded);
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
// Normal expand/collapse
|
|
77
|
-
setIsExpanded(!isExpanded);
|
|
78
|
-
}
|
|
79
|
-
}, [
|
|
80
|
-
isTodoWrite,
|
|
81
|
-
layoutContext,
|
|
82
|
-
isExpanded,
|
|
83
|
-
isSubagentCall,
|
|
84
|
-
isSubagentExpanded,
|
|
85
|
-
]);
|
|
86
|
-
// Determine which icon to show
|
|
87
|
-
const IconComponent = toolCall.icon && ICON_MAP[toolCall.icon]
|
|
88
|
-
? ICON_MAP[toolCall.icon]
|
|
89
|
-
: CircleDot;
|
|
90
|
-
// Determine display name
|
|
91
|
-
const displayName = toolCall.prettyName || toolCall.title;
|
|
92
|
-
// Determine icon color based on status (especially for subagents)
|
|
93
|
-
const isSubagentRunning = isSubagentCall &&
|
|
94
|
-
(toolCall.status === "in_progress" || toolCall.status === "pending");
|
|
95
|
-
const isSubagentFailed = isSubagentCall && toolCall.status === "failed";
|
|
96
|
-
const iconColorClass = isSubagentCall
|
|
97
|
-
? isSubagentFailed
|
|
98
|
-
? "text-destructive"
|
|
99
|
-
: isSubagentRunning
|
|
100
|
-
? "text-foreground animate-pulse"
|
|
101
|
-
: "text-green-500"
|
|
102
|
-
: "text-muted-foreground";
|
|
103
|
-
const statusTooltip = isSubagentCall
|
|
104
|
-
? isSubagentFailed
|
|
105
|
-
? "Sub-agent failed"
|
|
106
|
-
: isSubagentRunning
|
|
107
|
-
? "Sub-agent running"
|
|
108
|
-
: "Sub-agent completed"
|
|
109
|
-
: undefined;
|
|
110
|
-
// Check if there's an error
|
|
111
|
-
const hasError = toolCall.status === "failed" || !!toolCall.error;
|
|
112
|
-
// Check if this is a preliminary (pending) tool call without full details yet
|
|
113
|
-
const isPreliminary = toolCall.status === "pending" &&
|
|
114
|
-
(!toolCall.rawInput || Object.keys(toolCall.rawInput).length === 0);
|
|
115
|
-
// JSON View style based on theme
|
|
116
|
-
const jsonStyle = {
|
|
117
|
-
fontSize: "11px",
|
|
118
|
-
backgroundColor: "transparent",
|
|
119
|
-
fontFamily: "inherit",
|
|
120
|
-
"--w-rjv-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
|
|
121
|
-
"--w-rjv-key-string": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
|
|
122
|
-
"--w-rjv-background-color": "transparent",
|
|
123
|
-
"--w-rjv-line-color": resolvedTheme === "dark" ? "#27272a" : "#e4e4e7",
|
|
124
|
-
"--w-rjv-arrow-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
125
|
-
"--w-rjv-edit-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
|
|
126
|
-
"--w-rjv-info-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
127
|
-
"--w-rjv-update-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
|
|
128
|
-
"--w-rjv-copied-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
|
|
129
|
-
"--w-rjv-copied-success-color": resolvedTheme === "dark" ? "#22c55e" : "#16a34a",
|
|
130
|
-
"--w-rjv-curlybraces-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
131
|
-
"--w-rjv-colon-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
132
|
-
"--w-rjv-brackets-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
133
|
-
"--w-rjv-quotes-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
134
|
-
"--w-rjv-quotes-string-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
|
|
135
|
-
"--w-rjv-type-string-color": resolvedTheme === "dark" ? "#22c55e" : "#16a34a",
|
|
136
|
-
"--w-rjv-type-int-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
|
|
137
|
-
"--w-rjv-type-float-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
|
|
138
|
-
"--w-rjv-type-bigint-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
|
|
139
|
-
"--w-rjv-type-boolean-color": resolvedTheme === "dark" ? "#3b82f6" : "#2563eb",
|
|
140
|
-
"--w-rjv-type-date-color": resolvedTheme === "dark" ? "#ec4899" : "#db2777",
|
|
141
|
-
"--w-rjv-type-url-color": resolvedTheme === "dark" ? "#3b82f6" : "#2563eb",
|
|
142
|
-
"--w-rjv-type-null-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
|
|
143
|
-
"--w-rjv-type-nan-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
|
|
144
|
-
"--w-rjv-type-undefined-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
|
|
145
|
-
};
|
|
146
|
-
// Preliminary tool calls show as simple light gray text without expansion
|
|
147
|
-
if (isPreliminary) {
|
|
148
|
-
return (_jsx("div", { className: "flex flex-col my-4", children: _jsxs("span", { className: "text-paragraph-sm text-muted-foreground/50", children: ["Invoking ", displayName] }) }));
|
|
149
|
-
}
|
|
150
|
-
return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: toolCall.subagentMessages, isReplay: isReplaySubagent }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
|
|
151
|
-
Object.keys(toolCall.rawInput).length > 0 &&
|
|
152
|
-
!toolCall.subagentPort && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
|
|
153
|
-
loc.line !== undefined &&
|
|
154
|
-
`:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), (toolCall.content && toolCall.content.length > 0) ||
|
|
155
|
-
toolCall.error ? (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsxs("div", { className: "space-y-2 text-[11px] text-foreground", children: [toolCall.content?.map((block, idx) => {
|
|
156
|
-
// Generate a stable key based on content
|
|
157
|
-
const getBlockKey = () => {
|
|
158
|
-
if (block.type === "diff" && "path" in block) {
|
|
159
|
-
return `diff-${block.path}-${idx}`;
|
|
160
|
-
}
|
|
161
|
-
if (block.type === "terminal" && "terminalId" in block) {
|
|
162
|
-
return `terminal-${block.terminalId}`;
|
|
163
|
-
}
|
|
164
|
-
if (block.type === "text" && "text" in block) {
|
|
165
|
-
return `text-${block.text.substring(0, 20)}-${idx}`;
|
|
166
|
-
}
|
|
167
|
-
if (block.type === "content" && "content" in block) {
|
|
168
|
-
const innerContent = block.content;
|
|
169
|
-
return `content-${innerContent.text?.substring(0, 20)}-${idx}`;
|
|
170
|
-
}
|
|
171
|
-
return `block-${idx}`;
|
|
172
|
-
};
|
|
173
|
-
// Helper to render text content (with JSON parsing if applicable)
|
|
174
|
-
const renderTextContent = (text, key) => {
|
|
175
|
-
// Try to parse as JSON
|
|
176
|
-
try {
|
|
177
|
-
const parsed = JSON.parse(text);
|
|
178
|
-
// If it's an object or array, render with JsonView
|
|
179
|
-
if (typeof parsed === "object" && parsed !== null) {
|
|
180
|
-
return (_jsx("div", { className: "text-[11px]", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) }, key));
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
catch {
|
|
184
|
-
// Not valid JSON, render as plain text
|
|
185
|
-
}
|
|
186
|
-
// Render as plain text
|
|
187
|
-
return (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-foreground overflow-x-auto", children: text }, key));
|
|
188
|
-
};
|
|
189
|
-
// Handle nested content blocks (ACP format)
|
|
190
|
-
if (block.type === "content" && "content" in block) {
|
|
191
|
-
const innerContent = block.content;
|
|
192
|
-
if (innerContent.type === "text" && innerContent.text) {
|
|
193
|
-
return renderTextContent(innerContent.text, getBlockKey());
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
// Handle direct text blocks
|
|
197
|
-
if (block.type === "text" && "text" in block) {
|
|
198
|
-
return renderTextContent(block.text, getBlockKey());
|
|
199
|
-
}
|
|
200
|
-
// Handle image blocks
|
|
201
|
-
if (block.type === "image") {
|
|
202
|
-
const alt = block.alt || "Generated image";
|
|
203
|
-
let imageSrc;
|
|
204
|
-
if ("data" in block) {
|
|
205
|
-
// Base64 encoded image
|
|
206
|
-
const mimeType = block.mimeType || "image/png";
|
|
207
|
-
imageSrc = `data:${mimeType};base64,${block.data}`;
|
|
208
|
-
}
|
|
209
|
-
else if ("url" in block) {
|
|
210
|
-
// URL or file path
|
|
211
|
-
imageSrc = block.url;
|
|
212
|
-
}
|
|
213
|
-
else {
|
|
214
|
-
return null;
|
|
215
|
-
}
|
|
216
|
-
return (_jsx("div", { className: "my-2", children: _jsx("img", { src: imageSrc, alt: alt, className: "max-w-full h-auto rounded-md border border-border" }) }, getBlockKey()));
|
|
217
|
-
}
|
|
218
|
-
// Handle diff blocks
|
|
219
|
-
if (block.type === "diff" &&
|
|
220
|
-
"path" in block &&
|
|
221
|
-
"oldText" in block &&
|
|
222
|
-
"newText" in block) {
|
|
223
|
-
return (_jsxs("div", { className: "border border-border rounded bg-card", children: [_jsxs("div", { className: "bg-muted px-2 py-1 text-[10px] font-mono text-muted-foreground border-b border-border", children: [block.path, "line" in block &&
|
|
224
|
-
block.line !== null &&
|
|
225
|
-
block.line !== undefined &&
|
|
226
|
-
`:${block.line}`] }), _jsxs("div", { className: "p-2 font-mono text-[11px]", children: [_jsxs("div", { className: "text-red-500 dark:text-red-400", children: ["- ", block.oldText] }), _jsxs("div", { className: "text-green-500 dark:text-green-400", children: ["+ ", block.newText] })] })] }, getBlockKey()));
|
|
227
|
-
}
|
|
228
|
-
// Handle terminal blocks
|
|
229
|
-
if (block.type === "terminal" && "terminalId" in block) {
|
|
230
|
-
return (_jsxs("div", { className: "bg-neutral-900 text-neutral-100 p-2 rounded text-[11px] font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
|
|
231
|
-
}
|
|
232
|
-
return null;
|
|
233
|
-
}), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })) : null, toolCall._meta?.truncationWarning && (_jsxs("div", { className: "mx-3 mt-3 mb-0 flex items-center gap-2 rounded-md bg-yellow-50 dark:bg-yellow-950/20 px-3 py-2 text-[11px] text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-900", children: [_jsx("span", { className: "text-yellow-600 dark:text-yellow-500", children: "\u26A0\uFE0F" }), _jsx("span", { children: toolCall._meta.truncationWarning })] })), (toolCall.tokenUsage || toolCall.startedAt) && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border flex flex-wrap gap-4 text-[10px] text-muted-foreground font-sans", children: [toolCall.tokenUsage && (_jsxs("div", { className: "flex gap-3", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Input:" }), toolCall.tokenUsage.inputTokens.toLocaleString()] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Output:" }), toolCall.tokenUsage.outputTokens.toLocaleString()] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Total:" }), toolCall.tokenUsage.totalTokens.toLocaleString()] }))] })), toolCall.startedAt && (_jsxs("div", { className: "flex gap-3 ml-auto", children: [_jsxs("span", { children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString()] }), toolCall.completedAt && (_jsxs("span", { children: ["Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }))] }));
|
|
234
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
|
|
2
|
-
export interface ToolCallGroupProps {
|
|
3
|
-
toolCalls: ToolCallType[];
|
|
4
|
-
}
|
|
5
|
-
/**
|
|
6
|
-
* ToolCallGroup component - displays a group of parallel tool calls with collapsible details
|
|
7
|
-
*/
|
|
8
|
-
export declare function ToolCallGroup({ toolCalls }: ToolCallGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronDown, ListVideo } from "lucide-react";
|
|
3
|
-
import React, { useState } from "react";
|
|
4
|
-
import { ToolCall } from "./ToolCall.js";
|
|
5
|
-
/**
|
|
6
|
-
* ToolCallGroup component - displays a group of parallel tool calls with collapsible details
|
|
7
|
-
*/
|
|
8
|
-
export function ToolCallGroup({ toolCalls }) {
|
|
9
|
-
const [isExpanded, setIsExpanded] = useState(false);
|
|
10
|
-
// Calculate group status based on individual tool call statuses
|
|
11
|
-
const getGroupStatus = () => {
|
|
12
|
-
const statuses = toolCalls.map((tc) => tc.status);
|
|
13
|
-
if (statuses.some((s) => s === "failed"))
|
|
14
|
-
return "failed";
|
|
15
|
-
if (statuses.some((s) => s === "in_progress"))
|
|
16
|
-
return "in_progress";
|
|
17
|
-
if (statuses.every((s) => s === "completed"))
|
|
18
|
-
return "completed";
|
|
19
|
-
return "pending";
|
|
20
|
-
};
|
|
21
|
-
const groupStatus = getGroupStatus();
|
|
22
|
-
// Generate summary of tool names
|
|
23
|
-
const toolNames = toolCalls.map((tc) => tc.prettyName || tc.title);
|
|
24
|
-
const uniqueNames = [...new Set(toolNames)];
|
|
25
|
-
const summary = uniqueNames.length <= 2
|
|
26
|
-
? uniqueNames.join(", ")
|
|
27
|
-
: `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
|
|
28
|
-
return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: "text-muted-foreground", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: "Parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/70", children: toolCalls.length }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), !isExpanded && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: summary }))] }), isExpanded && (_jsx("div", { className: "mt-1", children: toolCalls.map((toolCall) => (_jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "w-2.5 h-4 border-l-2 border-b-2 border-border rounded-bl-[6px] mt-1 mr-0.5 shrink-0" }), _jsx("div", { className: "flex-1 -mt-2", children: _jsx(ToolCall, { toolCall: toolCall }) })] }, toolCall.id))) }))] }));
|
|
29
|
-
}
|