@optilogic/chat 1.0.0-beta.1 → 1.0.0-beta.11
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/README.md +235 -0
- package/dist/index.cjs +1292 -43
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +524 -6
- package/dist/index.d.ts +524 -6
- package/dist/index.js +1267 -33
- package/dist/index.js.map +1 -1
- package/package.json +15 -9
- package/src/components/agent-response/AgentResponse.tsx +99 -10
- package/src/components/agent-response/components/ActivityIndicators.tsx +36 -4
- package/src/components/agent-response/components/HITLSection.tsx +95 -0
- package/src/components/agent-response/components/MetadataRow.tsx +21 -6
- package/src/components/agent-response/components/ThinkingSection.tsx +102 -10
- package/src/components/agent-response/components/TruncatedMessage.tsx +52 -0
- package/src/components/agent-response/components/index.ts +6 -0
- package/src/components/agent-response/hooks/useAgentResponseAccumulator.ts +79 -4
- package/src/components/agent-response/index.ts +23 -0
- package/src/components/agent-response/types.ts +96 -1
- package/src/components/agent-timeline/AgentTimeline.tsx +256 -0
- package/src/components/agent-timeline/TimelineAgentBlock.tsx +84 -0
- package/src/components/agent-timeline/TimelineItem.tsx +97 -0
- package/src/components/agent-timeline/index.ts +14 -0
- package/src/components/agent-timeline/types.ts +49 -0
- package/src/components/agent-timeline/utils.ts +167 -0
- package/src/components/hitl-interactions/HITLInteractionRecord.tsx +139 -0
- package/src/components/hitl-interactions/HITLQuestionPanel.tsx +270 -0
- package/src/components/hitl-interactions/index.ts +18 -0
- package/src/components/inline-actions/ActionMarkdownRenderer.tsx +60 -0
- package/src/components/inline-actions/index.ts +18 -0
- package/src/components/inline-actions/parseResponseSegments.ts +66 -0
- package/src/components/inline-actions/prompts.ts +41 -0
- package/src/components/inline-actions/types.ts +57 -0
- package/src/components/user-prompt/UserPrompt.tsx +60 -0
- package/src/components/user-prompt/index.ts +1 -0
- package/src/components/user-prompt-input/UserPromptInput.tsx +326 -0
- package/src/components/user-prompt-input/index.ts +2 -0
- package/src/components/user-prompt-input/types.ts +52 -0
- package/src/index.ts +54 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,10 +1,53 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { ReactNode, ComponentType } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
/** All possible timeline entry types */
|
|
6
|
+
type TimelineEntryType = "thinking" | "tool_call" | "knowledge" | "memory" | "status_update" | "ai_response" | "error";
|
|
7
|
+
/** A single event in the agent execution timeline */
|
|
8
|
+
interface TimelineEntry {
|
|
9
|
+
/** Unique ID for React keys */
|
|
10
|
+
id: string;
|
|
11
|
+
/** Discriminated type for icon and rendering */
|
|
12
|
+
type: TimelineEntryType;
|
|
13
|
+
/** The agent that produced this entry */
|
|
14
|
+
agentName: string | null;
|
|
15
|
+
/** The parent agent (null for root agent) */
|
|
16
|
+
parentAgent: string | null;
|
|
17
|
+
/** Nesting depth (0 = root) */
|
|
18
|
+
depth: number;
|
|
19
|
+
/** Display content (may be long) */
|
|
20
|
+
content: string;
|
|
21
|
+
/** Original title from the WebSocket message */
|
|
22
|
+
title: string | null;
|
|
23
|
+
/** Millisecond timestamp for ordering */
|
|
24
|
+
timestamp: number;
|
|
25
|
+
}
|
|
26
|
+
/** A consecutive run of messages from the same agent */
|
|
27
|
+
interface AgentRun {
|
|
28
|
+
/** Agent name (display label) */
|
|
29
|
+
agentName: string;
|
|
30
|
+
/** Parent agent name (null for root) */
|
|
31
|
+
parentAgent: string | null;
|
|
32
|
+
/** Depth in agent hierarchy */
|
|
33
|
+
depth: number;
|
|
34
|
+
/** The entries belonging to this run, in order, after dedup */
|
|
35
|
+
entries: DisplayEntry[];
|
|
36
|
+
}
|
|
37
|
+
/** After dedup — count > 1 means consecutive identical messages collapsed */
|
|
38
|
+
interface DisplayEntry {
|
|
39
|
+
/** The underlying timeline entry (first of the group if deduped) */
|
|
40
|
+
entry: TimelineEntry;
|
|
41
|
+
/** How many consecutive identical messages were collapsed into this one */
|
|
42
|
+
count: number;
|
|
43
|
+
}
|
|
2
44
|
|
|
3
45
|
/**
|
|
4
46
|
* Agent Response Component Types
|
|
5
47
|
*
|
|
6
48
|
* Type definitions for the library-ready agent response component
|
|
7
49
|
*/
|
|
50
|
+
|
|
8
51
|
/**
|
|
9
52
|
* Status of the agent response cycle
|
|
10
53
|
*/
|
|
@@ -21,6 +64,12 @@ interface ToolCall {
|
|
|
21
64
|
name: string;
|
|
22
65
|
arguments?: Record<string, unknown>;
|
|
23
66
|
timestamp: number;
|
|
67
|
+
/** Agent that made this call (multi-agent scenarios) */
|
|
68
|
+
agentName?: string | null;
|
|
69
|
+
/** Parent agent name */
|
|
70
|
+
parentAgent?: string | null;
|
|
71
|
+
/** Nesting depth in agent hierarchy */
|
|
72
|
+
depth?: number;
|
|
24
73
|
}
|
|
25
74
|
/**
|
|
26
75
|
* Knowledge retrieval information
|
|
@@ -30,6 +79,12 @@ interface KnowledgeItem {
|
|
|
30
79
|
source: string;
|
|
31
80
|
content: string;
|
|
32
81
|
timestamp: number;
|
|
82
|
+
/** Agent that retrieved this (multi-agent scenarios) */
|
|
83
|
+
agentName?: string | null;
|
|
84
|
+
/** Parent agent name */
|
|
85
|
+
parentAgent?: string | null;
|
|
86
|
+
/** Nesting depth in agent hierarchy */
|
|
87
|
+
depth?: number;
|
|
33
88
|
}
|
|
34
89
|
/**
|
|
35
90
|
* Memory access information
|
|
@@ -39,7 +94,56 @@ interface MemoryItem {
|
|
|
39
94
|
type: string;
|
|
40
95
|
content: string;
|
|
41
96
|
timestamp: number;
|
|
97
|
+
/** Agent that accessed this (multi-agent scenarios) */
|
|
98
|
+
agentName?: string | null;
|
|
99
|
+
/** Parent agent name */
|
|
100
|
+
parentAgent?: string | null;
|
|
101
|
+
/** Nesting depth in agent hierarchy */
|
|
102
|
+
depth?: number;
|
|
42
103
|
}
|
|
104
|
+
/**
|
|
105
|
+
* Status update information from the agent
|
|
106
|
+
*/
|
|
107
|
+
interface StatusItem {
|
|
108
|
+
id: string;
|
|
109
|
+
message: string;
|
|
110
|
+
timestamp: number;
|
|
111
|
+
/** Optional agent name if in multi-agent scenario */
|
|
112
|
+
agent?: string;
|
|
113
|
+
/** Agent that produced this (multi-agent scenarios) */
|
|
114
|
+
agentName?: string | null;
|
|
115
|
+
/** Parent agent name */
|
|
116
|
+
parentAgent?: string | null;
|
|
117
|
+
/** Nesting depth in agent hierarchy */
|
|
118
|
+
depth?: number;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* A single step in structured thinking content
|
|
122
|
+
*/
|
|
123
|
+
interface ThinkingStep {
|
|
124
|
+
/** Unique identifier for the step */
|
|
125
|
+
id: string;
|
|
126
|
+
/** Label/title shown in the collapsible header */
|
|
127
|
+
label: string;
|
|
128
|
+
/** Content of the thinking step */
|
|
129
|
+
content: string;
|
|
130
|
+
/** Nesting depth (0 = root level, 1 = first indent, etc.) */
|
|
131
|
+
depth: number;
|
|
132
|
+
/** Whether this step should start collapsed (default: false) */
|
|
133
|
+
isCollapsed?: boolean;
|
|
134
|
+
/** Timestamp for timeline ordering */
|
|
135
|
+
timestamp?: number;
|
|
136
|
+
/** Agent that produced this (multi-agent scenarios) */
|
|
137
|
+
agentName?: string | null;
|
|
138
|
+
/** Parent agent name */
|
|
139
|
+
parentAgent?: string | null;
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Union type for thinking content
|
|
143
|
+
* - string: plain text (backward compatible)
|
|
144
|
+
* - ThinkingStep[]: structured with collapsible sub-sections
|
|
145
|
+
*/
|
|
146
|
+
type ThinkingContent = string | ThinkingStep[];
|
|
43
147
|
/**
|
|
44
148
|
* State shape for the agent response component
|
|
45
149
|
*/
|
|
@@ -48,14 +152,20 @@ interface AgentResponseState {
|
|
|
48
152
|
status: AgentResponseStatus;
|
|
49
153
|
/** Accumulated thinking/reasoning text */
|
|
50
154
|
thinking: string;
|
|
155
|
+
/** Structured thinking steps (if provided, takes precedence over thinking string) */
|
|
156
|
+
thinkingSteps?: ThinkingStep[];
|
|
51
157
|
/** Tool calls made during processing */
|
|
52
158
|
toolCalls: ToolCall[];
|
|
53
159
|
/** Knowledge items retrieved */
|
|
54
160
|
knowledge: KnowledgeItem[];
|
|
55
161
|
/** Memory items accessed */
|
|
56
162
|
memory: MemoryItem[];
|
|
163
|
+
/** Status updates from the agent */
|
|
164
|
+
statusUpdates: StatusItem[];
|
|
57
165
|
/** Final response text */
|
|
58
166
|
response: string;
|
|
167
|
+
/** Timeline entries derived from all accumulator arrays (for AgentTimeline) */
|
|
168
|
+
timelineEntries?: TimelineEntry[];
|
|
59
169
|
/** Timestamp when first thinking message was received (for timer) */
|
|
60
170
|
thinkingStartTime: number | null;
|
|
61
171
|
/** Timestamp when response was completed (for final timer display) */
|
|
@@ -67,13 +177,21 @@ interface AgentResponseState {
|
|
|
67
177
|
* WebSocket message payload for agent responses
|
|
68
178
|
*/
|
|
69
179
|
interface AgentMessage {
|
|
70
|
-
type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response";
|
|
180
|
+
type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response" | "status_update";
|
|
71
181
|
/** Message content - for simple string payloads */
|
|
72
182
|
message?: string;
|
|
73
183
|
/** Alternative content field */
|
|
74
184
|
content?: string;
|
|
75
185
|
/** For status messages */
|
|
76
186
|
status?: string;
|
|
187
|
+
/** Agent name (multi-agent scenarios) */
|
|
188
|
+
agentName?: string | null;
|
|
189
|
+
/** Parent agent name (multi-agent scenarios) */
|
|
190
|
+
parentAgent?: string | null;
|
|
191
|
+
/** Agent nesting depth (0 = root) */
|
|
192
|
+
depth?: number;
|
|
193
|
+
/** Title/label for timeline display */
|
|
194
|
+
title?: string | null;
|
|
77
195
|
/** For tool_call messages */
|
|
78
196
|
tool?: {
|
|
79
197
|
id: string;
|
|
@@ -92,6 +210,20 @@ interface AgentMessage {
|
|
|
92
210
|
type: string;
|
|
93
211
|
content: string;
|
|
94
212
|
};
|
|
213
|
+
/** For status_update messages */
|
|
214
|
+
statusUpdate?: {
|
|
215
|
+
id: string;
|
|
216
|
+
message: string;
|
|
217
|
+
agent?: string;
|
|
218
|
+
};
|
|
219
|
+
/** For structured thinking step messages */
|
|
220
|
+
thinkingStep?: {
|
|
221
|
+
id?: string;
|
|
222
|
+
label: string;
|
|
223
|
+
content: string;
|
|
224
|
+
depth?: number;
|
|
225
|
+
isCollapsed?: boolean;
|
|
226
|
+
};
|
|
95
227
|
}
|
|
96
228
|
/**
|
|
97
229
|
* Generic websocket message wrapper type
|
|
@@ -106,6 +238,64 @@ interface GenericWebSocketMessage {
|
|
|
106
238
|
*/
|
|
107
239
|
declare const initialAgentResponseState: AgentResponseState;
|
|
108
240
|
|
|
241
|
+
/**
|
|
242
|
+
* HITLQuestionPanel — Human-in-the-Loop clarifying question panel.
|
|
243
|
+
*
|
|
244
|
+
* Renders in the input area (replacing UserPromptInput) when the agent asks a
|
|
245
|
+
* clarifying question via the HumanInTheLoop tool. Shows the question details
|
|
246
|
+
* and lets the user respond via option buttons or free-form text.
|
|
247
|
+
*
|
|
248
|
+
* Option clicks select/toggle rather than immediately submitting. The "Send
|
|
249
|
+
* response" button enables once all questions have a selected option OR the
|
|
250
|
+
* textarea has text. On submit, selected options and free-form text are
|
|
251
|
+
* combined into a single formatted string for the backend.
|
|
252
|
+
*/
|
|
253
|
+
|
|
254
|
+
interface HITLQuestion {
|
|
255
|
+
reason: string;
|
|
256
|
+
questions: string[];
|
|
257
|
+
options: Record<string, string[]> | null;
|
|
258
|
+
context: string | null;
|
|
259
|
+
/** Timeout in seconds. When omitted, no countdown is shown and the panel never times out. */
|
|
260
|
+
timeoutSeconds?: number;
|
|
261
|
+
receivedAt: number;
|
|
262
|
+
}
|
|
263
|
+
interface HITLResponseData {
|
|
264
|
+
/** Raw selected option text per question, keyed by question text */
|
|
265
|
+
selectedOptions: Record<string, string>;
|
|
266
|
+
/** Freeform text entered by the user (untrimmed) */
|
|
267
|
+
freeformText: string;
|
|
268
|
+
}
|
|
269
|
+
interface HITLQuestionPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
|
|
270
|
+
question: HITLQuestion;
|
|
271
|
+
onSubmit: (response: string, data: HITLResponseData) => void;
|
|
272
|
+
onStop: () => void;
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* Build a single response string from selected options and optional free-form text.
|
|
276
|
+
* Format is designed to be easily parsed by the LLM consuming the response.
|
|
277
|
+
*/
|
|
278
|
+
declare function buildResponseString(questions: string[], selectedOptions: Record<string, string>, freeformText: string): string;
|
|
279
|
+
declare const HITLQuestionPanel: React.ForwardRefExoticComponent<HITLQuestionPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* HITLInteractionRecord — Displays a completed HITL Q&A interaction
|
|
283
|
+
* in the chat message history.
|
|
284
|
+
*
|
|
285
|
+
* Rendered below AgentResponse in the agent message block. Shows the full detail
|
|
286
|
+
* of each clarifying question the agent asked and the user's response.
|
|
287
|
+
*/
|
|
288
|
+
|
|
289
|
+
interface HITLInteraction {
|
|
290
|
+
question: HITLQuestion;
|
|
291
|
+
response: string;
|
|
292
|
+
respondedAt: number;
|
|
293
|
+
}
|
|
294
|
+
interface HITLInteractionRecordProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
295
|
+
interaction: HITLInteraction;
|
|
296
|
+
}
|
|
297
|
+
declare const HITLInteractionRecord: React.ForwardRefExoticComponent<HITLInteractionRecordProps & React.RefAttributes<HTMLDivElement>>;
|
|
298
|
+
|
|
109
299
|
/**
|
|
110
300
|
* AgentResponse Component
|
|
111
301
|
*
|
|
@@ -131,6 +321,32 @@ interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
131
321
|
onThinkingExpandedChange?: (expanded: boolean) => void;
|
|
132
322
|
/** Action bar visibility mode */
|
|
133
323
|
actionsVisible?: boolean | "hover";
|
|
324
|
+
/**
|
|
325
|
+
* Optional HITL (Human-in-the-Loop) interactions to display as a
|
|
326
|
+
* collapsible section within the response. When provided, a "Clarifying
|
|
327
|
+
* Questions" section appears between the thinking/metadata area and
|
|
328
|
+
* the response content.
|
|
329
|
+
*/
|
|
330
|
+
hitlInteractions?: HITLInteraction[];
|
|
331
|
+
/** Whether the HITL section starts expanded (default: false) */
|
|
332
|
+
defaultHITLExpanded?: boolean;
|
|
333
|
+
/**
|
|
334
|
+
* Optional content to display in the MetadataRow's middle area,
|
|
335
|
+
* between the thinking toggle (left) and activity indicators (right).
|
|
336
|
+
* Typically used for ephemeral status messages during processing.
|
|
337
|
+
* The parent is responsible for setting and clearing this content.
|
|
338
|
+
*
|
|
339
|
+
* @example
|
|
340
|
+
* <AgentResponse
|
|
341
|
+
* state={state}
|
|
342
|
+
* statusContent={
|
|
343
|
+
* state.status !== 'complete'
|
|
344
|
+
* ? <TruncatedMessage message="Analyzing data..." />
|
|
345
|
+
* : undefined
|
|
346
|
+
* }
|
|
347
|
+
* />
|
|
348
|
+
*/
|
|
349
|
+
statusContent?: React.ReactNode;
|
|
134
350
|
/**
|
|
135
351
|
* Custom markdown renderer for the response content.
|
|
136
352
|
* If not provided, the response will be rendered as plain text.
|
|
@@ -142,6 +358,17 @@ interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
142
358
|
* />
|
|
143
359
|
*/
|
|
144
360
|
renderMarkdown?: (content: string) => React.ReactNode;
|
|
361
|
+
/**
|
|
362
|
+
* Custom markdown renderer for the thinking content.
|
|
363
|
+
* If not provided, the thinking will be rendered as plain preformatted text.
|
|
364
|
+
*
|
|
365
|
+
* @example
|
|
366
|
+
* <AgentResponse
|
|
367
|
+
* state={state}
|
|
368
|
+
* renderThinkingMarkdown={(content) => <MyMarkdownRenderer content={content} />}
|
|
369
|
+
* />
|
|
370
|
+
*/
|
|
371
|
+
renderThinkingMarkdown?: (content: string) => React.ReactNode;
|
|
145
372
|
}
|
|
146
373
|
/**
|
|
147
374
|
* AgentResponse Component
|
|
@@ -190,6 +417,8 @@ interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
190
417
|
knowledge: KnowledgeItem[];
|
|
191
418
|
/** Memory items to display */
|
|
192
419
|
memory: MemoryItem[];
|
|
420
|
+
/** Status updates to display */
|
|
421
|
+
statusUpdates?: StatusItem[];
|
|
193
422
|
}
|
|
194
423
|
/**
|
|
195
424
|
* ActivityIndicators Component
|
|
@@ -225,6 +454,10 @@ interface MetadataRowProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
225
454
|
knowledge: KnowledgeItem[];
|
|
226
455
|
/** Memory items to display */
|
|
227
456
|
memory: MemoryItem[];
|
|
457
|
+
/** Status updates to display */
|
|
458
|
+
statusUpdates?: StatusItem[];
|
|
459
|
+
/** Optional content to display in the middle area between left content and activity indicators */
|
|
460
|
+
statusContent?: React.ReactNode;
|
|
228
461
|
/** Current response status */
|
|
229
462
|
status: AgentResponseStatus;
|
|
230
463
|
/** Elapsed time in seconds */
|
|
@@ -253,22 +486,40 @@ declare const MetadataRow: React.ForwardRefExoticComponent<MetadataRowProps & Re
|
|
|
253
486
|
/**
|
|
254
487
|
* Thinking Section Component
|
|
255
488
|
*
|
|
256
|
-
* Collapsible section for displaying agent thinking/reasoning content
|
|
489
|
+
* Collapsible section for displaying agent thinking/reasoning content.
|
|
490
|
+
* Supports both plain text and structured collapsible sub-sections.
|
|
257
491
|
*/
|
|
258
492
|
|
|
259
|
-
interface ThinkingSectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
260
|
-
/** The thinking content to display */
|
|
261
|
-
content: string;
|
|
493
|
+
interface ThinkingSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
|
|
494
|
+
/** The thinking content to display (string or structured steps) */
|
|
495
|
+
content: string | ThinkingStep[];
|
|
262
496
|
/** Whether the section is expanded */
|
|
263
497
|
isExpanded: boolean;
|
|
498
|
+
/**
|
|
499
|
+
* Custom markdown renderer for the thinking content.
|
|
500
|
+
* If not provided, the content will be rendered as plain preformatted text.
|
|
501
|
+
*/
|
|
502
|
+
renderMarkdown?: (content: string) => React.ReactNode;
|
|
264
503
|
}
|
|
265
504
|
/**
|
|
266
505
|
* ThinkingSection Component
|
|
267
506
|
*
|
|
268
507
|
* Displays the agent's thinking/reasoning content in a collapsible panel.
|
|
508
|
+
* Supports both plain text content and structured collapsible sub-sections.
|
|
269
509
|
*
|
|
270
510
|
* @example
|
|
511
|
+
* // Plain text content
|
|
271
512
|
* <ThinkingSection content={state.thinking} isExpanded={isExpanded} />
|
|
513
|
+
*
|
|
514
|
+
* @example
|
|
515
|
+
* // Structured content with sub-sections
|
|
516
|
+
* <ThinkingSection
|
|
517
|
+
* content={[
|
|
518
|
+
* { id: "1", label: "Analysis", content: "...", depth: 0 },
|
|
519
|
+
* { id: "2", label: "Sub-analysis", content: "...", depth: 1 },
|
|
520
|
+
* ]}
|
|
521
|
+
* isExpanded={isExpanded}
|
|
522
|
+
* />
|
|
272
523
|
*/
|
|
273
524
|
declare const ThinkingSection: React.ForwardRefExoticComponent<ThinkingSectionProps & React.RefAttributes<HTMLDivElement>>;
|
|
274
525
|
|
|
@@ -310,6 +561,56 @@ interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
310
561
|
*/
|
|
311
562
|
declare const ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
312
563
|
|
|
564
|
+
/**
|
|
565
|
+
* HITL Section Component
|
|
566
|
+
*
|
|
567
|
+
* Collapsible section for displaying completed HITL (Human-in-the-Loop)
|
|
568
|
+
* interactions within an AgentResponse. Follows the same pattern as
|
|
569
|
+
* ThinkingSection for consistent UX.
|
|
570
|
+
*/
|
|
571
|
+
|
|
572
|
+
interface HITLSectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
573
|
+
/** The HITL interactions to display */
|
|
574
|
+
interactions: HITLInteraction[];
|
|
575
|
+
/** Whether the section starts expanded (uncontrolled) */
|
|
576
|
+
defaultExpanded?: boolean;
|
|
577
|
+
/** Whether the section is expanded (controlled) */
|
|
578
|
+
isExpanded?: boolean;
|
|
579
|
+
/** Callback when expansion state changes (controlled) */
|
|
580
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
581
|
+
}
|
|
582
|
+
declare const HITLSection: React.ForwardRefExoticComponent<HITLSectionProps & React.RefAttributes<HTMLDivElement>>;
|
|
583
|
+
|
|
584
|
+
/**
|
|
585
|
+
* Truncated Message Component
|
|
586
|
+
*
|
|
587
|
+
* Renders a single-line text message with CSS-based truncation (text-overflow: ellipsis).
|
|
588
|
+
* Designed as a standalone utility that can be used anywhere, including as
|
|
589
|
+
* the statusContent slot in MetadataRow.
|
|
590
|
+
*/
|
|
591
|
+
|
|
592
|
+
interface TruncatedMessageProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
593
|
+
/** The message string to display (truncated with ellipsis if it overflows) */
|
|
594
|
+
message: string;
|
|
595
|
+
}
|
|
596
|
+
/**
|
|
597
|
+
* TruncatedMessage Component
|
|
598
|
+
*
|
|
599
|
+
* Displays a single-line text message that truncates with an ellipsis when
|
|
600
|
+
* it overflows its container. Uses CSS text-overflow for zero-JS truncation.
|
|
601
|
+
*
|
|
602
|
+
* @example
|
|
603
|
+
* <TruncatedMessage message="Searching the knowledge base for relevant documents..." />
|
|
604
|
+
*
|
|
605
|
+
* @example
|
|
606
|
+
* // Inside MetadataRow's statusContent slot
|
|
607
|
+
* <AgentResponse
|
|
608
|
+
* state={state}
|
|
609
|
+
* statusContent={<TruncatedMessage message="Running analysis..." />}
|
|
610
|
+
* />
|
|
611
|
+
*/
|
|
612
|
+
declare const TruncatedMessage: React.ForwardRefExoticComponent<TruncatedMessageProps & React.RefAttributes<HTMLDivElement>>;
|
|
613
|
+
|
|
313
614
|
/**
|
|
314
615
|
* useThinkingTimer Hook
|
|
315
616
|
*
|
|
@@ -375,4 +676,221 @@ declare function formatTime(seconds: number, isComplete: boolean): string;
|
|
|
375
676
|
*/
|
|
376
677
|
declare function formatTotalTime(seconds: number): string;
|
|
377
678
|
|
|
378
|
-
|
|
679
|
+
/** Externalized UI state that survives component remounts */
|
|
680
|
+
interface TimelineUIState {
|
|
681
|
+
expandedItems: Set<string>;
|
|
682
|
+
collapsedRuns: Set<string>;
|
|
683
|
+
activeFilters: Set<TimelineEntryType>;
|
|
684
|
+
}
|
|
685
|
+
declare function createTimelineUIState(): TimelineUIState;
|
|
686
|
+
interface AgentTimelineProps {
|
|
687
|
+
entries: TimelineEntry[];
|
|
688
|
+
renderMarkdown?: (content: string) => ReactNode;
|
|
689
|
+
/**
|
|
690
|
+
* External UI state store. When provided, expand/collapse/filter state
|
|
691
|
+
* is read from and written to this object (which should be ref-backed
|
|
692
|
+
* in the parent) so it survives component remounts during streaming.
|
|
693
|
+
*/
|
|
694
|
+
uiState?: TimelineUIState;
|
|
695
|
+
/**
|
|
696
|
+
* Maximum height of the scrollable timeline container.
|
|
697
|
+
* Defaults to "300px". Set to "none" to disable.
|
|
698
|
+
*/
|
|
699
|
+
maxHeight?: string;
|
|
700
|
+
}
|
|
701
|
+
declare function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
|
|
702
|
+
|
|
703
|
+
/**
|
|
704
|
+
* Build a flat, chronologically sorted array of TimelineEntry from the
|
|
705
|
+
* accumulator state. Maps each typed array (toolCalls, knowledge, etc.)
|
|
706
|
+
* to unified TimelineEntry objects with per-source stable IDs.
|
|
707
|
+
*/
|
|
708
|
+
declare function buildTimelineEntries(state: AgentResponseState): TimelineEntry[];
|
|
709
|
+
/**
|
|
710
|
+
* Group a sorted array of timeline entries into consecutive "agent runs".
|
|
711
|
+
* A new run starts whenever the agentName changes.
|
|
712
|
+
* Each run's entries are deduplicated.
|
|
713
|
+
*/
|
|
714
|
+
declare function groupIntoAgentRuns(entries: TimelineEntry[]): AgentRun[];
|
|
715
|
+
/**
|
|
716
|
+
* Collapse consecutive entries with identical type AND content into
|
|
717
|
+
* a single DisplayEntry with count > 1.
|
|
718
|
+
* Handles patterns like "Loading documents" appearing 8 times.
|
|
719
|
+
*/
|
|
720
|
+
declare function deduplicateEntries(entries: DisplayEntry[]): DisplayEntry[];
|
|
721
|
+
|
|
722
|
+
interface UserPromptProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
723
|
+
/** The text content of the user's message */
|
|
724
|
+
content: string;
|
|
725
|
+
/** Optional timestamp to display below the message */
|
|
726
|
+
timestamp?: Date;
|
|
727
|
+
}
|
|
728
|
+
/**
|
|
729
|
+
* UserPrompt component
|
|
730
|
+
*
|
|
731
|
+
* Displays a user's chat message in a styled bubble.
|
|
732
|
+
* Used alongside AgentResponse to create chat interfaces.
|
|
733
|
+
*
|
|
734
|
+
* @example
|
|
735
|
+
* ```tsx
|
|
736
|
+
* <UserPrompt
|
|
737
|
+
* content="What is the weather today?"
|
|
738
|
+
* timestamp={new Date()}
|
|
739
|
+
* />
|
|
740
|
+
* ```
|
|
741
|
+
*
|
|
742
|
+
* @example
|
|
743
|
+
* ```tsx
|
|
744
|
+
* // Custom styling
|
|
745
|
+
* <UserPrompt
|
|
746
|
+
* content="Hello world"
|
|
747
|
+
* className="max-w-full"
|
|
748
|
+
* />
|
|
749
|
+
* ```
|
|
750
|
+
*/
|
|
751
|
+
declare const UserPrompt: React.ForwardRefExoticComponent<UserPromptProps & React.RefAttributes<HTMLDivElement>>;
|
|
752
|
+
|
|
753
|
+
interface UserPromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit"> {
|
|
754
|
+
/** Current text value */
|
|
755
|
+
value?: string;
|
|
756
|
+
/** Callback when text changes */
|
|
757
|
+
onChange?: (value: string) => void;
|
|
758
|
+
/** Callback when user submits (Enter key or send button) */
|
|
759
|
+
onSubmit?: (text: string) => void;
|
|
760
|
+
/** Clear input after submit (default: true) */
|
|
761
|
+
clearOnSubmit?: boolean;
|
|
762
|
+
/** Placeholder text */
|
|
763
|
+
placeholder?: string;
|
|
764
|
+
/** Whether the input is disabled */
|
|
765
|
+
disabled?: boolean;
|
|
766
|
+
/** Whether a submission is in progress (shows loading state) */
|
|
767
|
+
isSubmitting?: boolean;
|
|
768
|
+
/** Called when user clicks Stop during submission */
|
|
769
|
+
onStop?: () => void;
|
|
770
|
+
/** Whether to disable input while submitting (default: true) */
|
|
771
|
+
disableWhileSubmitting?: boolean;
|
|
772
|
+
/** Auto-focus the editor when mounted (handles Slate initialization timing) */
|
|
773
|
+
autoFocus?: boolean;
|
|
774
|
+
/** Refocus the input after submission completes (default: false) */
|
|
775
|
+
refocusAfterSubmit?: boolean;
|
|
776
|
+
/** Called when the editor is fully initialized and ready for interaction */
|
|
777
|
+
onReady?: () => void;
|
|
778
|
+
/** Minimum number of rows for the editor */
|
|
779
|
+
minRows?: number;
|
|
780
|
+
/** Maximum number of rows before scrolling */
|
|
781
|
+
maxRows?: number;
|
|
782
|
+
/** Render function for additional action buttons (left side) */
|
|
783
|
+
renderActions?: () => React.ReactNode;
|
|
784
|
+
/** Enable tag detection with # character */
|
|
785
|
+
enableTags?: boolean;
|
|
786
|
+
/** Callback when a tag is created */
|
|
787
|
+
onTagCreate?: (tag: string) => void;
|
|
788
|
+
/** Callback when a tag is deleted */
|
|
789
|
+
onTagDelete?: (tag: string) => void;
|
|
790
|
+
}
|
|
791
|
+
interface UserPromptInputRef {
|
|
792
|
+
/** Focus the editor */
|
|
793
|
+
focus: () => void;
|
|
794
|
+
/** Clear the editor content */
|
|
795
|
+
clear: () => void;
|
|
796
|
+
/** Get the current text content */
|
|
797
|
+
getText: () => string;
|
|
798
|
+
/** Insert text at cursor position */
|
|
799
|
+
insertText: (text: string) => void;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
/**
|
|
803
|
+
* UserPromptInput Component
|
|
804
|
+
*
|
|
805
|
+
* A rich text input for user messages that wraps SlateEditor.
|
|
806
|
+
* Features:
|
|
807
|
+
* - Code block styling with triple backticks
|
|
808
|
+
* - Send button with loading state
|
|
809
|
+
* - Action slot for additional buttons
|
|
810
|
+
* - Tag support (optional)
|
|
811
|
+
*
|
|
812
|
+
* @example
|
|
813
|
+
* <UserPromptInput
|
|
814
|
+
* placeholder="Type your message..."
|
|
815
|
+
* onSubmit={(text) => sendMessage(text)}
|
|
816
|
+
* renderActions={() => (
|
|
817
|
+
* <IconButton icon={<Paperclip />} aria-label="Attach file" />
|
|
818
|
+
* )}
|
|
819
|
+
* />
|
|
820
|
+
*/
|
|
821
|
+
declare const UserPromptInput: React.ForwardRefExoticComponent<UserPromptInputProps & React.RefAttributes<UserPromptInputRef>>;
|
|
822
|
+
|
|
823
|
+
interface MarkdownSegment {
|
|
824
|
+
kind: "markdown";
|
|
825
|
+
content: string;
|
|
826
|
+
}
|
|
827
|
+
interface ActionSegment {
|
|
828
|
+
kind: "action";
|
|
829
|
+
actionType: string;
|
|
830
|
+
payload: Record<string, unknown>;
|
|
831
|
+
}
|
|
832
|
+
type ResponseSegment = MarkdownSegment | ActionSegment;
|
|
833
|
+
/**
|
|
834
|
+
* Props passed to every inline action component.
|
|
835
|
+
* T is the shape of the payload for this specific action type.
|
|
836
|
+
*/
|
|
837
|
+
interface InlineActionProps<T = Record<string, unknown>> {
|
|
838
|
+
/** The parsed payload from the json:action block */
|
|
839
|
+
payload: T;
|
|
840
|
+
/** Callback to send results back to the page (e.g., map data) */
|
|
841
|
+
onAction?: (actionType: string, result: unknown) => void;
|
|
842
|
+
/** True for the most recent agent message; affects button labels */
|
|
843
|
+
isLatest?: boolean;
|
|
844
|
+
}
|
|
845
|
+
/**
|
|
846
|
+
* Maps action type strings to React components that render them.
|
|
847
|
+
* The consuming page owns this registry.
|
|
848
|
+
*/
|
|
849
|
+
type ActionComponentRegistry = Record<string, ComponentType<InlineActionProps<any>>>;
|
|
850
|
+
interface ActionMarkdownRendererProps {
|
|
851
|
+
/** The raw response text (may contain json:action blocks) */
|
|
852
|
+
content: string;
|
|
853
|
+
/** Registry of action type -> component */
|
|
854
|
+
registry: ActionComponentRegistry;
|
|
855
|
+
/** The existing renderMarkdown function for plain markdown segments */
|
|
856
|
+
renderMarkdown: (content: string) => ReactNode;
|
|
857
|
+
/** Callback forwarded to action components */
|
|
858
|
+
onAction?: (actionType: string, result: unknown) => void;
|
|
859
|
+
/** Whether this is the latest (most recent) agent message */
|
|
860
|
+
isLatest?: boolean;
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
/**
|
|
864
|
+
* Renders agent response text with inline action components.
|
|
865
|
+
*
|
|
866
|
+
* Parses the response for ```json:action blocks, renders markdown
|
|
867
|
+
* segments via the provided renderMarkdown function, and renders
|
|
868
|
+
* action segments via the component registry.
|
|
869
|
+
*
|
|
870
|
+
* Unknown action types fall back to a raw JSON code block display.
|
|
871
|
+
*/
|
|
872
|
+
declare function ActionMarkdownRenderer({ content, registry, renderMarkdown, onAction, isLatest, }: ActionMarkdownRendererProps): react_jsx_runtime.JSX.Element;
|
|
873
|
+
|
|
874
|
+
/**
|
|
875
|
+
* Parse response text into interleaved markdown and action segments.
|
|
876
|
+
*
|
|
877
|
+
* Finds ```json:action ... ``` fenced code blocks, extracts them as
|
|
878
|
+
* action segments, and returns the surrounding text as markdown segments.
|
|
879
|
+
*
|
|
880
|
+
* Malformed JSON or blocks missing a "type" field are left as markdown
|
|
881
|
+
* (rendered as raw code blocks) for graceful degradation.
|
|
882
|
+
*/
|
|
883
|
+
declare function parseResponseSegments(text: string): ResponseSegment[];
|
|
884
|
+
|
|
885
|
+
/**
|
|
886
|
+
* System prompt instructions for agents that emit inline action blocks.
|
|
887
|
+
*
|
|
888
|
+
* Import and append to your agent's system prompt so it knows the
|
|
889
|
+
* json:action format. The XML tags ensure clear boundaries for the LLM.
|
|
890
|
+
*
|
|
891
|
+
* When adding a new action type, add an entry under "Available action types"
|
|
892
|
+
* and create the corresponding React component + registry entry.
|
|
893
|
+
*/
|
|
894
|
+
declare const INLINE_ACTION_PROMPT = "\n<inline_actions>\nWhen your response should include interactive components (like query viewers,\ndata tables, or executable actions), embed them as fenced code blocks using\nthe `json:action` language tag:\n\n```json:action\n{\n \"type\": \"action-type-here\",\n ...action-specific fields\n}\n```\n\nRules:\n- Each block must contain valid JSON with a \"type\" field.\n- The \"type\" must match a registered action component on the frontend.\n- Multiple action blocks per response are allowed.\n- Surround action blocks with normal markdown text for user context.\n- The action block is rendered as an interactive component in the chat UI.\n- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\\").\n\nAvailable action types:\n\n- \"optimap-query\": Displays SQL queries with a button to execute them and\n update the 3D globe map.\n Required fields:\n - type: \"optimap-query\"\n - locations_sql: string (the validated locations SQL query)\n - routes_sql: string (the validated routes SQL query)\n - database_name: string (the target database name)\n</inline_actions>\n";
|
|
895
|
+
|
|
896
|
+
export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, useAgentResponseAccumulator, useThinkingTimer };
|