@miiflow/assistant-ui 0.10.0 → 0.15.0
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 +209 -46
- package/dist/{WelcomeScreen-Cbipi2rK.d.ts → WelcomeScreen-CSzlU0Yx.d.ts} +54 -14
- package/dist/{avatar-CD685KQV.d.ts → avatar-B_AvYfE8.d.ts} +4 -1
- package/dist/chunk-7QNDCHY7.js +2 -0
- package/dist/chunk-7QNDCHY7.js.map +1 -0
- package/dist/chunk-BINTGT2Q.js +5 -0
- package/dist/chunk-BINTGT2Q.js.map +1 -0
- package/dist/chunk-HNHLLH6W.js +2 -0
- package/dist/chunk-HNHLLH6W.js.map +1 -0
- package/dist/{chunk-WG77GQR3.js → chunk-ISMTV5BU.js} +2 -2
- package/dist/{chunk-WG77GQR3.js.map → chunk-ISMTV5BU.js.map} +1 -1
- package/dist/chunk-LDTAZ4GT.js +2 -0
- package/dist/chunk-LDTAZ4GT.js.map +1 -0
- package/dist/chunk-OU5ITGKX.js +2 -0
- package/dist/chunk-OU5ITGKX.js.map +1 -0
- package/dist/chunk-W7HQXA2Z.js +146 -0
- package/dist/chunk-W7HQXA2Z.js.map +1 -0
- package/dist/client/index.d.ts +66 -5
- package/dist/client/index.js +6 -6
- package/dist/client/index.js.map +1 -1
- package/dist/composer/index.d.ts +37 -3
- package/dist/composer/index.js +1 -1
- package/dist/context/index.d.ts +10 -3
- package/dist/context/index.js +1 -1
- package/dist/hooks/index.d.ts +11 -141
- package/dist/hooks/index.js +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/{message-D0oMw3tR.d.ts → message-DTNTKSQr.d.ts} +1 -1
- package/dist/primitives/index.d.ts +3 -3
- package/dist/primitives/index.js +1 -1
- package/dist/{streaming-CmQo_OOA.d.ts → streaming-BfLEgW5u.d.ts} +81 -3
- package/dist/styled/index.d.ts +410 -11
- package/dist/styled/index.js +1 -1
- package/dist/styles-no-preflight.css +1 -1
- package/dist/styles.css +3 -1
- package/dist/use-branding-css-vars-CR2tjSV8.d.ts +155 -0
- package/package.json +5 -3
- package/dist/chunk-4WWJTYYA.js +0 -2
- package/dist/chunk-4WWJTYYA.js.map +0 -1
- package/dist/chunk-6RN7SUWT.js +0 -2
- package/dist/chunk-6RN7SUWT.js.map +0 -1
- package/dist/chunk-D2PFIJNZ.js +0 -2
- package/dist/chunk-D2PFIJNZ.js.map +0 -1
- package/dist/chunk-NKLA5PPB.js +0 -2
- package/dist/chunk-NKLA5PPB.js.map +0 -1
- package/dist/chunk-UZ2Z7C43.js +0 -133
- package/dist/chunk-UZ2Z7C43.js.map +0 -1
- package/dist/chunk-ZP4FGAAH.js +0 -2
- package/dist/chunk-ZP4FGAAH.js.map +0 -1
package/dist/styled/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
export { A as AttachmentPreview, j as AttachmentPreviewProps, a as Avatar, k as AvatarProps, C as ChatContainer, l as ChatContainerProps, b as ChatLayout, m as ChatLayoutProps, M as MarkdownContent, n as MarkdownContentProps, c as Message, d as MessageActionBar, o as MessageActionBarProps, e as MessageComposer, p as MessageComposerProps, f as MessageList, q as MessageListProps, r as MessageProps, S as ScrollToBottomButton, s as ScrollToBottomButtonProps, g as StreamingText, t as StreamingTextProps, h as SuggestedActions, u as SuggestedActionsProps, v as ToolStatus, T as ToolStatusIndicator, w as ToolStatusIndicatorProps, i as TypingIndicator, x as TypingIndicatorProps, W as WelcomeScreen, y as WelcomeScreenProps } from '../WelcomeScreen-
|
|
1
|
+
export { A as AttachmentPreview, j as AttachmentPreviewProps, a as Avatar, k as AvatarProps, C as ChatContainer, l as ChatContainerProps, b as ChatLayout, m as ChatLayoutProps, M as MarkdownContent, n as MarkdownContentProps, c as Message, d as MessageActionBar, o as MessageActionBarProps, e as MessageComposer, p as MessageComposerProps, f as MessageList, q as MessageListProps, r as MessageProps, S as ScrollToBottomButton, s as ScrollToBottomButtonProps, g as StreamingText, t as StreamingTextProps, h as SuggestedActions, u as SuggestedActionsProps, v as ToolStatus, T as ToolStatusIndicator, w as ToolStatusIndicatorProps, i as TypingIndicator, x as TypingIndicatorProps, W as WelcomeScreen, y as WelcomeScreenProps } from '../WelcomeScreen-CSzlU0Yx.js';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import react__default, { ReactNode, ComponentType } from 'react';
|
|
4
|
-
import { A as Attachment, S as SourceReference } from '../message-
|
|
5
|
-
export { C as ChatMessage, M as MessageData, a as MessageError, b as Participant, P as ParticipantRole, c as SourceTypeConfig, d as SuggestedAction, e as SuggestedActionType } from '../message-
|
|
6
|
-
import { S as StreamingChunk, P as PlanData, C as ClarificationData, a as ClarificationAnswer, T as ToolApprovalData, V as VisualizationChunkData,
|
|
7
|
-
export {
|
|
4
|
+
import { A as Attachment, S as SourceReference } from '../message-DTNTKSQr.js';
|
|
5
|
+
export { C as ChatMessage, M as MessageData, a as MessageError, b as Participant, P as ParticipantRole, c as SourceTypeConfig, d as SuggestedAction, e as SuggestedActionType } from '../message-DTNTKSQr.js';
|
|
6
|
+
import { S as StreamingChunk, P as PlanData, f as SubagentChunkData, C as ClarificationData, a as ClarificationAnswer, T as ToolApprovalData, V as VisualizationChunkData, g as VisualizationActionEvent, M as MediaChunkData, h as ChartVisualizationData, i as VisualizationConfig, j as TableVisualizationData, k as CardVisualizationData, K as KpiVisualizationData, l as CodePreviewVisualizationData, F as FormVisualizationData, m as AuthPromptVisualizationData, A as ArtifactChunkData, E as Event, n as EventStatus } from '../streaming-BfLEgW5u.js';
|
|
7
|
+
export { o as ArtifactStatus, p as ChunkType, q as EventType, r as FollowupAction, O as ObservationEvent, s as PlanningEvent, t as ProgressData, u as StreamingMessage, v as SubTaskData, w as SubtaskEvent, x as ThinkingEvent, y as ToolEvent, z as VisualizationType } from '../streaming-BfLEgW5u.js';
|
|
8
8
|
import { z, ZodSchema } from 'zod';
|
|
9
9
|
export { ChatContextValue, ChatProvider, ChatProviderProps, useChatContext } from '../context/index.js';
|
|
10
10
|
export { B as BrandingData } from '../branding-NieTEGQf.js';
|
|
11
|
-
export { u as useComposer, g as useMessage } from '../avatar-
|
|
11
|
+
export { u as useComposer, g as useMessage } from '../avatar-B_AvYfE8.js';
|
|
12
12
|
import '../types-Du00UBst.js';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -51,6 +51,39 @@ interface TimeMarkerProps {
|
|
|
51
51
|
*/
|
|
52
52
|
declare function TimeMarker({ label, className }: TimeMarkerProps): react.JSX.Element;
|
|
53
53
|
|
|
54
|
+
/**
|
|
55
|
+
* One frame of the decode: everything left of the wavefront is settled, the
|
|
56
|
+
* rest is noise.
|
|
57
|
+
*
|
|
58
|
+
* Pure, and exported, because it is the only part of this component with logic
|
|
59
|
+
* worth checking and the effect that drives it runs too fast to catch from the
|
|
60
|
+
* outside — a screenshot or a MutationObserver both arrive after it has landed.
|
|
61
|
+
*
|
|
62
|
+
* @param progress 0 → all noise, 1 → the real text.
|
|
63
|
+
* @param frame Increments per roll so the unresolved tail churns instead of
|
|
64
|
+
* freezing on one arrangement between settles.
|
|
65
|
+
*/
|
|
66
|
+
declare function decodeFrame(text: string, progress: number, frame: number): string;
|
|
67
|
+
interface ThinkingIndicatorProps {
|
|
68
|
+
/**
|
|
69
|
+
* Brand mark shown while the agent starts up. Supplied by the host, which
|
|
70
|
+
* owns its own logo and its own image loader; this package renders the
|
|
71
|
+
* motion around whatever it is given. Omit it for the plain form.
|
|
72
|
+
*/
|
|
73
|
+
mark?: ReactNode;
|
|
74
|
+
/** Status line, e.g. "Getting started…". Resolves out of noise. */
|
|
75
|
+
label?: string | null;
|
|
76
|
+
className?: string;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* The waiting state before the first token.
|
|
80
|
+
*
|
|
81
|
+
* A mark with a breathing halo, beside a line of text decoding itself. Both
|
|
82
|
+
* halves are the same idea: something is being worked out, and it is nearly
|
|
83
|
+
* here.
|
|
84
|
+
*/
|
|
85
|
+
declare function ThinkingIndicator({ mark, label, className }: ThinkingIndicatorProps): react.JSX.Element;
|
|
86
|
+
|
|
54
87
|
interface ChatHeaderAction {
|
|
55
88
|
id: string;
|
|
56
89
|
label: string;
|
|
@@ -87,14 +120,30 @@ interface MessageAttachmentsProps {
|
|
|
87
120
|
onDownload?: (attachment: Attachment) => void;
|
|
88
121
|
/** Custom preview handler */
|
|
89
122
|
onPreview?: (attachment: Attachment) => void;
|
|
123
|
+
/** Which edge to align against — "end" for the viewer's own right-aligned
|
|
124
|
+
* messages, so a thumbnail narrower than the bubble doesn't drift left. */
|
|
125
|
+
align?: "start" | "end";
|
|
90
126
|
/** Additional class names */
|
|
91
127
|
className?: string;
|
|
92
128
|
}
|
|
93
129
|
/**
|
|
94
|
-
* Display attachments
|
|
130
|
+
* Display attachments in messages: images render as inline thumbnails that open
|
|
131
|
+
* a lightbox; everything else renders as a compact file chip.
|
|
95
132
|
*/
|
|
96
|
-
declare function MessageAttachments({ attachments, onDownload, onPreview, className, }: MessageAttachmentsProps): react.JSX.Element | null;
|
|
133
|
+
declare function MessageAttachments({ attachments, onDownload, onPreview, align, className, }: MessageAttachmentsProps): react.JSX.Element | null;
|
|
97
134
|
|
|
135
|
+
/**
|
|
136
|
+
* @deprecated Superseded by `ReasoningStream`, which renders the agent's work as
|
|
137
|
+
* steps in the transcript rather than as a timeline nested under a chip. This
|
|
138
|
+
* component is no longer used by `Message`; it stays exported because
|
|
139
|
+
* `@miiflow/assistant-ui` is published and external consumers may mount it
|
|
140
|
+
* directly. Remove in the next major.
|
|
141
|
+
*
|
|
142
|
+
* Known limitations, kept as-is rather than fixed here: thinking rows are always
|
|
143
|
+
* built with `status: "completed"`, so the live-state shimmer never fires on
|
|
144
|
+
* them; and `convertChunkToEvent` never sets `durationSeconds`, so the per-step
|
|
145
|
+
* duration trail never draws.
|
|
146
|
+
*/
|
|
98
147
|
interface ReasoningPanelProps {
|
|
99
148
|
/** Whether currently streaming */
|
|
100
149
|
isStreaming?: boolean;
|
|
@@ -109,6 +158,9 @@ interface ReasoningPanelProps {
|
|
|
109
158
|
userMessageTimestamp?: number;
|
|
110
159
|
/** Total execution time in seconds */
|
|
111
160
|
executionTime?: number;
|
|
161
|
+
/** Epoch ms the in-progress run started. Supply the run's durable start so
|
|
162
|
+
* the live counter survives this panel remounting; omit to time from mount. */
|
|
163
|
+
streamStartedAt?: number;
|
|
112
164
|
/** Whether expanded by default */
|
|
113
165
|
defaultExpanded?: boolean;
|
|
114
166
|
/** Controlled expanded state */
|
|
@@ -118,7 +170,309 @@ interface ReasoningPanelProps {
|
|
|
118
170
|
/** Additional class names */
|
|
119
171
|
className?: string;
|
|
120
172
|
}
|
|
121
|
-
declare function ReasoningPanel({ isStreaming, chunks, plan, executionTimeline, userMessageTimestamp, executionTime, defaultExpanded, expanded: controlledExpanded, onExpandedChange, className, }: ReasoningPanelProps): react.JSX.Element | null;
|
|
173
|
+
declare function ReasoningPanel({ isStreaming, chunks, plan, executionTimeline, userMessageTimestamp, executionTime, streamStartedAt, defaultExpanded, expanded: controlledExpanded, onExpandedChange, className, }: ReasoningPanelProps): react.JSX.Element | null;
|
|
174
|
+
|
|
175
|
+
interface ReasoningStreamProps {
|
|
176
|
+
/** Whether the run is still producing steps. */
|
|
177
|
+
isStreaming?: boolean;
|
|
178
|
+
/** The turn's reasoning chunks, live or replayed from the durable trace. */
|
|
179
|
+
chunks?: StreamingChunk[];
|
|
180
|
+
/** Persisted wall clock for the whole run, in seconds. */
|
|
181
|
+
executionTime?: number;
|
|
182
|
+
/**
|
|
183
|
+
* Epoch ms the in-progress run started. Supply the run's durable start so the
|
|
184
|
+
* live counter survives this component remounting — timing from mount
|
|
185
|
+
* restarts at 0 on a run that is already minutes old.
|
|
186
|
+
*/
|
|
187
|
+
streamStartedAt?: number;
|
|
188
|
+
/**
|
|
189
|
+
* The run finished moments ago, in a DIFFERENT component instance.
|
|
190
|
+
*
|
|
191
|
+
* The streaming message and the completed message are separate elements, so
|
|
192
|
+
* this component cannot observe the streaming→complete edge itself. The host
|
|
193
|
+
* passes it instead, and it is what turns the collapse from a jump cut into
|
|
194
|
+
* a transition.
|
|
195
|
+
*/
|
|
196
|
+
justCompleted?: boolean;
|
|
197
|
+
/** Controlled disclosure of the finished turn's full trace. */
|
|
198
|
+
expanded?: boolean;
|
|
199
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
200
|
+
className?: string;
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* The agent's work, rendered as steps in the transcript.
|
|
204
|
+
*
|
|
205
|
+
* Live, it is a rolling window of the last few steps — the newest at full
|
|
206
|
+
* strength, older ones fading out above. A long run therefore costs a fixed
|
|
207
|
+
* amount of vertical space instead of pushing the composer off the screen.
|
|
208
|
+
*
|
|
209
|
+
* Finished, it collapses to one line: `Thought for 2:14 · 6 steps`, which
|
|
210
|
+
* re-opens to the full trace on click.
|
|
211
|
+
*/
|
|
212
|
+
declare function ReasoningStream({ isStreaming, chunks, executionTime, streamStartedAt, justCompleted, expanded: controlledExpanded, onExpandedChange, className, }: ReasoningStreamProps): react.JSX.Element | null;
|
|
213
|
+
|
|
214
|
+
type RunStepStatus = "pending" | "running" | "completed" | "failed";
|
|
215
|
+
/**
|
|
216
|
+
* What a tool call DID, as declared server-side.
|
|
217
|
+
*
|
|
218
|
+
* Three values, not a richer taxonomy, because three is what the wire actually
|
|
219
|
+
* knows. `undeclared` is a first-class answer: a tool that never said whether
|
|
220
|
+
* it has side effects must not be drawn as a read, since that is the one
|
|
221
|
+
* mistake with consequences for the person watching.
|
|
222
|
+
*/
|
|
223
|
+
type RunStepToolKind = "read" | "write" | "undeclared";
|
|
224
|
+
/**
|
|
225
|
+
* One tool call, rendered as an inline chip inside the thought that justified it.
|
|
226
|
+
*/
|
|
227
|
+
interface RunStepTool {
|
|
228
|
+
/** Provider tool-call id when available; otherwise a positional fallback. */
|
|
229
|
+
id: string;
|
|
230
|
+
/** Raw slug (`get_ad_performance`) — the hover title. */
|
|
231
|
+
name: string;
|
|
232
|
+
/** LLM-written prose, falling back to the slug. */
|
|
233
|
+
label: string;
|
|
234
|
+
/** True when `label` is only the slug, so it can render as an identifier. */
|
|
235
|
+
isSlugOnly: boolean;
|
|
236
|
+
/** Read, write, or undeclared. Drives the mark and the chip's weight. */
|
|
237
|
+
kind: RunStepToolKind;
|
|
238
|
+
status: RunStepStatus;
|
|
239
|
+
/** Epoch ms. `endedAt` is undefined while the call is still open. */
|
|
240
|
+
startedAt?: number;
|
|
241
|
+
endedAt?: number;
|
|
242
|
+
/** Bounded excerpt of a failed result, surfaced when the step is expanded. */
|
|
243
|
+
observationExcerpt?: string;
|
|
244
|
+
}
|
|
245
|
+
/**
|
|
246
|
+
* One unit of the transcript: a thought plus the tool calls it justified.
|
|
247
|
+
*
|
|
248
|
+
* The agent thinks, then acts, so a tool belongs to the thought immediately
|
|
249
|
+
* preceding it. That is the same boundary the server's `RunTraceProjector`
|
|
250
|
+
* already draws (`_finish_open_thinking` closes the open thought the moment a
|
|
251
|
+
* tool arrives), which is why the grouping needs no extra signal on the wire.
|
|
252
|
+
*
|
|
253
|
+
* A `subagent` step is block-level rather than a chip — a dispatched thread is
|
|
254
|
+
* not a chip — and carries no prose of its own.
|
|
255
|
+
*/
|
|
256
|
+
interface RunStep {
|
|
257
|
+
id: string;
|
|
258
|
+
sequence: number;
|
|
259
|
+
kind: "thinking" | "planning" | "subagent";
|
|
260
|
+
status: RunStepStatus;
|
|
261
|
+
/** Markdown prose. Absent when tools ran with no preceding thought. */
|
|
262
|
+
text?: string;
|
|
263
|
+
tools: RunStepTool[];
|
|
264
|
+
/** Epoch ms. `endedAt` is undefined while the step is still open. */
|
|
265
|
+
startedAt?: number;
|
|
266
|
+
endedAt?: number;
|
|
267
|
+
/**
|
|
268
|
+
* The specialists this step dispatched. Always at least one on a `subagent`
|
|
269
|
+
* step, empty otherwise.
|
|
270
|
+
*
|
|
271
|
+
* A LIST rather than a single value because `dispatch_assistant` is
|
|
272
|
+
* parallelizable: one parent step can gather several children, and showing
|
|
273
|
+
* them as separate stacked steps loses the fact that they ran at once. Only
|
|
274
|
+
* dispatches sharing a `dispatchStep` are collected here.
|
|
275
|
+
*/
|
|
276
|
+
subagents: SubagentChunkData[];
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
interface StepBlockProps {
|
|
280
|
+
step: RunStep;
|
|
281
|
+
/** Older step in the live window: quieter, and never the shimmering one. */
|
|
282
|
+
dimmed?: boolean;
|
|
283
|
+
/** Animate an entrance. False for steps already on screen (a replayed
|
|
284
|
+
* trace must not perform, and re-opening one must not re-animate). */
|
|
285
|
+
entering?: boolean;
|
|
286
|
+
/** Delay in ms, for staggering a revealed trace. */
|
|
287
|
+
enterDelayMs?: number;
|
|
288
|
+
}
|
|
289
|
+
/**
|
|
290
|
+
* One step of the transcript: a mark, then prose, with the tool calls it
|
|
291
|
+
* justified flowing inline underneath.
|
|
292
|
+
*
|
|
293
|
+
* Every step type sits in the same two-column shape — mark gutter, content —
|
|
294
|
+
* so a thought and a dispatched specialist read as members of one sequence.
|
|
295
|
+
* The specialist used to wear a 24px initials badge instead, which made it a
|
|
296
|
+
* different kind of object on the page and spelled out "GA" to no one's
|
|
297
|
+
* benefit.
|
|
298
|
+
*
|
|
299
|
+
* There is deliberately no rule connecting the marks. A rail would turn this
|
|
300
|
+
* back into the trace viewer the redesign replaced; the shared x-position is
|
|
301
|
+
* enough to read as a column.
|
|
302
|
+
*/
|
|
303
|
+
declare function StepBlock({ step, dimmed, entering, enterDelayMs, }: StepBlockProps): react.JSX.Element | null;
|
|
304
|
+
|
|
305
|
+
/**
|
|
306
|
+
* One tool call, inline in the flow of the thought that justified it.
|
|
307
|
+
*
|
|
308
|
+
* ## Two states, not three
|
|
309
|
+
*
|
|
310
|
+
* Only a declared WRITE is marked. Reads and undeclared tools share one quiet
|
|
311
|
+
* treatment, because both are honestly described by "nothing notable happened
|
|
312
|
+
* here" — and because a mark per category produced a row of competing glyphs
|
|
313
|
+
* that said nothing. Every run that predates the `writes` declaration reaching
|
|
314
|
+
* the wire has no declaration at all, so a distinct "unknown" mark would have
|
|
315
|
+
* stamped a loud diamond on the entire history for a signal with no content.
|
|
316
|
+
*
|
|
317
|
+
* ## Why there is no border
|
|
318
|
+
*
|
|
319
|
+
* A 1px outline plus an internal divider made these read as broken form
|
|
320
|
+
* controls at 12px. A soft fill with no edge is one shape instead of three,
|
|
321
|
+
* which is what lets a paragraph carry four of them without looking like a
|
|
322
|
+
* toolbar. The duration recedes inside the same shape rather than sitting in a
|
|
323
|
+
* compartment of its own.
|
|
324
|
+
*/
|
|
325
|
+
declare function ToolChip({ tool }: {
|
|
326
|
+
tool: RunStepTool;
|
|
327
|
+
}): react.JSX.Element;
|
|
328
|
+
|
|
329
|
+
/**
|
|
330
|
+
* Turn an LLM-facing handle ("google_ads_specialist") into a human label
|
|
331
|
+
* ("Google Ads Specialist").
|
|
332
|
+
*/
|
|
333
|
+
declare function humanizeHandle(handle: string): string;
|
|
334
|
+
/**
|
|
335
|
+
* Monogram for the avatar: "Google Ads Specialist" → "GA", "Budget
|
|
336
|
+
* Specialist" → "BU".
|
|
337
|
+
*
|
|
338
|
+
* The role noun is dropped because the distinguishing part of a handle is what
|
|
339
|
+
* comes BEFORE it — every specialist would otherwise collapse toward "…S". A
|
|
340
|
+
* handle with only one meaningful word takes two letters of it rather than
|
|
341
|
+
* standing as a lone initial, which reads as a stray character at 24px.
|
|
342
|
+
*/
|
|
343
|
+
declare function initials(handle: string): string;
|
|
344
|
+
/**
|
|
345
|
+
* The nested work one specialist did: its steps, its tool chips, its answer.
|
|
346
|
+
*
|
|
347
|
+
* Body only — the header, the status and the disclosure belong to
|
|
348
|
+
* `SubagentGroup`, which renders them the same way whether the parent step
|
|
349
|
+
* dispatched one specialist or gathered five. Splitting them is what stops the
|
|
350
|
+
* single-dispatch case being a second implementation of the group.
|
|
351
|
+
*/
|
|
352
|
+
declare function SubagentBody({ data }: {
|
|
353
|
+
data: SubagentChunkData;
|
|
354
|
+
}): react.JSX.Element;
|
|
355
|
+
|
|
356
|
+
interface SubagentGroupProps {
|
|
357
|
+
/** One dispatch, or several gathered from the same parent step. */
|
|
358
|
+
members: SubagentChunkData[];
|
|
359
|
+
}
|
|
360
|
+
/**
|
|
361
|
+
* A dispatch: one specialist, or several that ran at once.
|
|
362
|
+
*
|
|
363
|
+
* `dispatch_assistant` is parallelizable, so a parent step can gather three
|
|
364
|
+
* specialists that work simultaneously. Rendered as three stacked rows that
|
|
365
|
+
* reads as three things that happened in sequence, which is the one fact the
|
|
366
|
+
* layout should not get wrong. A pip row says "these ran together" in the space
|
|
367
|
+
* of one line, and the ring around each pip says which are still going.
|
|
368
|
+
*
|
|
369
|
+
* The pips are deliberately identical. Nothing in the data distinguishes one
|
|
370
|
+
* specialist from another at a glance — the handle is a user-editable slug with
|
|
371
|
+
* no platform link, and initials spell out letters nobody reads. So the group
|
|
372
|
+
* carries COUNT and STATUS, and the tab row underneath carries identity.
|
|
373
|
+
*/
|
|
374
|
+
declare function SubagentGroup({ members }: SubagentGroupProps): react.JSX.Element;
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* Marks for the reasoning stream.
|
|
378
|
+
*
|
|
379
|
+
* Two levels, and only two. STEPS carry a mark so the left edge reads as one
|
|
380
|
+
* consistent column; CHIPS carry one only when the tool changed something. An
|
|
381
|
+
* icon on every chip turned a row of three tool calls into a row of three
|
|
382
|
+
* competing glyphs and said nothing, since almost every call is a read.
|
|
383
|
+
*
|
|
384
|
+
* Drawn at 12-13px, where stroke detail disappears, so the solid marks are
|
|
385
|
+
* filled silhouettes rather than line art.
|
|
386
|
+
*/
|
|
387
|
+
interface MarkProps {
|
|
388
|
+
size?: number;
|
|
389
|
+
}
|
|
390
|
+
/**
|
|
391
|
+
* A STEP the agent reasoned through. Three lines of decreasing width — a note,
|
|
392
|
+
* not a bullet. Quiet enough to sit beside prose without competing with it, and
|
|
393
|
+
* specific enough that the gutter reads as a deliberate column rather than an
|
|
394
|
+
* indent.
|
|
395
|
+
*/
|
|
396
|
+
declare function StepMark({ size }: MarkProps): react.JSX.Element;
|
|
397
|
+
/**
|
|
398
|
+
* A WRITE: the agent changed something on a live account.
|
|
399
|
+
*
|
|
400
|
+
* A pencil, because that is the mark Google Ads and Meta Ads Manager both use
|
|
401
|
+
* for editing a campaign — this audience already reads it as "this modified
|
|
402
|
+
* something", with no translation. It is the ONLY mark a chip ever carries, so
|
|
403
|
+
* a single change stands out in a paragraph full of reads.
|
|
404
|
+
*/
|
|
405
|
+
declare function WriteMark({ size }: MarkProps): react.JSX.Element;
|
|
406
|
+
/**
|
|
407
|
+
* An AGENT: one specialist, as it appears in a dispatch's pip row.
|
|
408
|
+
*
|
|
409
|
+
* A robot head, drawn geometrically rather than cartoonishly — square-ish
|
|
410
|
+
* proportions, tight eyes, no mouth. It stands for the colleague doing the
|
|
411
|
+
* work, which is what a pip needs to say; the STEP that dispatched it keeps
|
|
412
|
+
* `DispatchMark`, because a step is a delegation, not a robot.
|
|
413
|
+
*
|
|
414
|
+
* The eyes are knocked out of the head with `fill-rule="evenodd"` rather than
|
|
415
|
+
* painted in a background colour: this package has no surface token, so a
|
|
416
|
+
* filled counter-shape would be wrong on any host that is not white.
|
|
417
|
+
*/
|
|
418
|
+
declare function AgentMark({ size }: MarkProps): react.JSX.Element;
|
|
419
|
+
/**
|
|
420
|
+
* A DISPATCH: the STEP in which the agent handed work to specialists.
|
|
421
|
+
*
|
|
422
|
+
* One node branching into two — the shape of the delegation itself, not of the
|
|
423
|
+
* colleague doing it. This marks a sub-agent step in the same gutter a
|
|
424
|
+
* thought's mark sits in, which is what makes the two read as members of one
|
|
425
|
+
* sequence. Who is doing the work is said by the pips (`AgentMark`), a level
|
|
426
|
+
* down; the two glyphs answer different questions and both are needed.
|
|
427
|
+
*/
|
|
428
|
+
declare function DispatchMark({ size }: MarkProps): react.JSX.Element;
|
|
429
|
+
/** Disclosure chevron. Rotates 90° on open. */
|
|
430
|
+
declare function Chevron({ size }: MarkProps): react.JSX.Element;
|
|
431
|
+
/**
|
|
432
|
+
* Three bars reading as a level meter: "this is working right now".
|
|
433
|
+
*
|
|
434
|
+
* The one live affordance in the panel, shared by the run footer and by a
|
|
435
|
+
* dispatched specialist so both say it the same way.
|
|
436
|
+
*
|
|
437
|
+
* Still, under reduced motion, it holds the stepped shape the animation passes
|
|
438
|
+
* through, so the row keeps its in-progress reading without moving.
|
|
439
|
+
*/
|
|
440
|
+
declare function ActivityMeter({ reducedMotion, size, }: {
|
|
441
|
+
reducedMotion?: boolean;
|
|
442
|
+
size?: number;
|
|
443
|
+
}): react.JSX.Element;
|
|
444
|
+
|
|
445
|
+
/**
|
|
446
|
+
* Tools that are machinery rather than work the user asked for.
|
|
447
|
+
*
|
|
448
|
+
* `dispatch_assistant` is the odd one: the call IS user-relevant, but it
|
|
449
|
+
* arrives a second time as a `subagent` chunk carrying the child's whole
|
|
450
|
+
* thread, and that is the rendering we want — so the bare tool row is dropped
|
|
451
|
+
* to avoid showing one dispatch twice.
|
|
452
|
+
*
|
|
453
|
+
* This is the ONLY copy. `ReasoningPanel`, `EventTimeline` and `PlanTimeline`
|
|
454
|
+
* each kept their own, which is how they drifted apart.
|
|
455
|
+
*/
|
|
456
|
+
declare const INTERNAL_TOOLS: Set<string>;
|
|
457
|
+
declare function isInternalTool(toolName?: string): boolean;
|
|
458
|
+
/**
|
|
459
|
+
* Group a flat chunk stream into the steps the transcript renders.
|
|
460
|
+
*
|
|
461
|
+
* The one grouping rule, applied to every source: a step opens on a thought (or
|
|
462
|
+
* on a tool with no thought before it) and closes when the next thought or
|
|
463
|
+
* sub-agent dispatch arrives. Both producers — the live SSE reducers and
|
|
464
|
+
* `runTraceStepsToChunks` replaying a durable trace — hand over the same chunk
|
|
465
|
+
* shape, so both get the same result and a reloaded thread looks like the run
|
|
466
|
+
* the user watched.
|
|
467
|
+
*
|
|
468
|
+
* `isStreaming` decides only whether the trailing step may render as running:
|
|
469
|
+
* on a finished run nothing is open, however the last chunk happened to look.
|
|
470
|
+
*/
|
|
471
|
+
declare function buildRunSteps(chunks: readonly StreamingChunk[] | undefined, isStreaming?: boolean): RunStep[];
|
|
472
|
+
/** Seconds between two epoch-ms stamps, or undefined when either is missing. */
|
|
473
|
+
declare function durationSeconds(startedAt?: number, endedAt?: number): number | undefined;
|
|
474
|
+
/** Total wall clock the steps span, for the collapsed summary line. */
|
|
475
|
+
declare function stepsWallClockSeconds(steps: readonly RunStep[]): number | undefined;
|
|
122
476
|
|
|
123
477
|
interface ClarificationPanelProps {
|
|
124
478
|
clarification: ClarificationData;
|
|
@@ -212,7 +566,7 @@ interface SourceDetailModalProps {
|
|
|
212
566
|
source: SourceReference | null;
|
|
213
567
|
onClose: () => void;
|
|
214
568
|
}
|
|
215
|
-
declare function SourceDetailModal({ source, onClose, }: SourceDetailModalProps): react.
|
|
569
|
+
declare function SourceDetailModal({ source, onClose, }: SourceDetailModalProps): react.ReactPortal | null;
|
|
216
570
|
/**
|
|
217
571
|
* Inline citation badge - renders a small numbered badge like [1]
|
|
218
572
|
* with optional tooltip on hover and click-to-open URL.
|
|
@@ -380,6 +734,20 @@ declare const formVisualizationSchema: z.ZodObject<{
|
|
|
380
734
|
}, z.core.$strip>>;
|
|
381
735
|
submitAction: z.ZodOptional<z.ZodNullable<z.ZodString>>;
|
|
382
736
|
}, z.core.$strip>;
|
|
737
|
+
declare const authPromptVisualizationSchema: z.ZodObject<{
|
|
738
|
+
providerName: z.ZodString;
|
|
739
|
+
reason: z.ZodOptional<z.ZodNullable<z.ZodString>>;
|
|
740
|
+
provider: z.ZodOptional<z.ZodNullable<z.ZodString>>;
|
|
741
|
+
providerLogo: z.ZodOptional<z.ZodNullable<z.ZodString>>;
|
|
742
|
+
serviceProviderId: z.ZodOptional<z.ZodNullable<z.ZodString>>;
|
|
743
|
+
mcpServerId: z.ZodOptional<z.ZodNullable<z.ZodString>>;
|
|
744
|
+
mcpServerName: z.ZodOptional<z.ZodNullable<z.ZodString>>;
|
|
745
|
+
authMethods: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodObject<{
|
|
746
|
+
id: z.ZodString;
|
|
747
|
+
name: z.ZodString;
|
|
748
|
+
authType: z.ZodString;
|
|
749
|
+
}, z.core.$strip>>>>;
|
|
750
|
+
}, z.core.$strip>;
|
|
383
751
|
|
|
384
752
|
interface VisualizationRendererProps {
|
|
385
753
|
data: VisualizationChunkData;
|
|
@@ -436,6 +804,32 @@ interface FormVisualizationProps {
|
|
|
436
804
|
}
|
|
437
805
|
declare function FormVisualization({ data, config, isStreaming, onAction }: FormVisualizationProps): react.JSX.Element;
|
|
438
806
|
|
|
807
|
+
interface AuthPromptVisualizationProps {
|
|
808
|
+
data: AuthPromptVisualizationData;
|
|
809
|
+
config?: VisualizationConfig;
|
|
810
|
+
isStreaming?: boolean;
|
|
811
|
+
onAction?: (event: VisualizationActionEvent) => void;
|
|
812
|
+
}
|
|
813
|
+
/**
|
|
814
|
+
* "Connect your account" card for an integration the assistant could not use.
|
|
815
|
+
*
|
|
816
|
+
* This is the PACKAGE-level renderer, and it is deliberately presentational:
|
|
817
|
+
* running the OAuth flow needs the host's session, GraphQL client and popup
|
|
818
|
+
* plumbing, none of which belong here (see the styled/ agnosticism rule). A
|
|
819
|
+
* host that can connect passes `onAction`; the app's MUI override in
|
|
820
|
+
* `web/components/assistants/chat/visualizations/` replaces this entirely.
|
|
821
|
+
*
|
|
822
|
+
* It exists because a registered *fallback* is what separates a degraded render
|
|
823
|
+
* from a broken one. Every other visualization type had one; `auth_prompt` was
|
|
824
|
+
* contributed only by the host's registration module, so when a production
|
|
825
|
+
* build elided that module the card rendered as the literal text "Unknown
|
|
826
|
+
* visualization type: auth_prompt" in users' threads (2026-08-02).
|
|
827
|
+
*
|
|
828
|
+
* Without `onAction` there is nothing a button could do, so none is drawn — a
|
|
829
|
+
* dead Connect button reads as a broken feature rather than a missing one.
|
|
830
|
+
*/
|
|
831
|
+
declare function AuthPromptVisualization({ data, onAction, }: AuthPromptVisualizationProps): react.JSX.Element;
|
|
832
|
+
|
|
439
833
|
interface VisualizationEntry {
|
|
440
834
|
component: React.ComponentType<{
|
|
441
835
|
data: any;
|
|
@@ -551,6 +945,11 @@ declare function convertChunkToEvent(chunk: StreamingChunk, index: number): Even
|
|
|
551
945
|
* Computes pairwise `durationSeconds` from `item.timestamp` so completed
|
|
552
946
|
* timelines can show per-step trace bars. Falls back to undefined when
|
|
553
947
|
* timestamps are missing (e.g. tail events without a successor).
|
|
948
|
+
*
|
|
949
|
+
* @deprecated Never called. It was the only producer of `durationSeconds`, and
|
|
950
|
+
* `ReasoningPanel` built its events with `convertChunkToEvent` instead — which
|
|
951
|
+
* is why that panel's duration trail never drew. Per-step timing now travels on
|
|
952
|
+
* `StreamingChunk.startedAt` / `endedAt`; see `reasoning/build-steps.ts`.
|
|
554
953
|
*/
|
|
555
954
|
declare function convertTimelineToEvents(timeline: Array<Record<string, unknown>>): Event[];
|
|
556
955
|
interface EventTimelineProps {
|
|
@@ -676,4 +1075,4 @@ interface TimelineRowProps {
|
|
|
676
1075
|
*/
|
|
677
1076
|
declare function TimelineRow({ label, description, durationSeconds, isFailed, defaultExpanded, nestedEvents, hideChevron, }: TimelineRowProps): react.JSX.Element;
|
|
678
1077
|
|
|
679
|
-
export { type ApprovalButtonSlotProps, type ApprovalChatInputSlotProps, ArtifactChunkData, type ArtifactEntry, ArtifactInlineCard, type ArtifactInlineCardProps, ArtifactList, type ArtifactListProps, Attachment, CardVisualization, type CardVisualizationProps, ChartVisualization, type ChartVisualizationProps, ChatHeader, type ChatHeaderAction, type ChatHeaderProps, CitationSources, type CitationSourcesProps, ClarificationData, ClarificationPanel, type ClarificationPanelProps, CodePreviewVisualization, type CodePreviewVisualizationProps, ComposerToolbar, Event, EventContent, EventStatus, EventTimeline, type EventTimelineProps, FormVisualization, type FormVisualizationProps, InlineCitation, type InlineCitationProps, KpiVisualization, type KpiVisualizationProps, LoadingDots, type LoadingDotsProps, MediaChunkData, MessageAttachments, type MessageAttachmentsProps, PlanData, PlanTimeline, type PlanTimelineProps, ReasoningPanel, type ReasoningPanelProps, SourceDetailModal, type SourceDetailModalProps, SourceReference, StatusBadge, StreamingChunk, SubagentPanel, type SubagentPanelProps, TableVisualization, type TableVisualizationProps, TimeMarker, type TimeMarkerProps, Timeline, TimelineItem, type TimelineItemData, type TimelineItemProps, type TimelineProps, TimelineRow, type TimelineRowProps, ToolApprovalPanel, type ToolApprovalPanelProps, type ToolApprovalSlots, VisualizationActionEvent, VisualizationChunkData, VisualizationConfig, type VisualizationEntry, VisualizationRenderer, type VisualizationRendererProps, cardVisualizationSchema, chartVisualizationSchema, codePreviewVisualizationSchema, convertChunkToEvent, convertTimelineToEvents, formVisualizationSchema, getArtifact, getRegisteredArtifactTypes, getRegisteredTypes, getVisualization, kpiVisualizationSchema, registerArtifact, registerVisualization, tableVisualizationSchema };
|
|
1078
|
+
export { ActivityMeter, AgentMark, type ApprovalButtonSlotProps, type ApprovalChatInputSlotProps, ArtifactChunkData, type ArtifactEntry, ArtifactInlineCard, type ArtifactInlineCardProps, ArtifactList, type ArtifactListProps, Attachment, AuthPromptVisualization, type AuthPromptVisualizationProps, CardVisualization, type CardVisualizationProps, ChartVisualization, type ChartVisualizationProps, ChatHeader, type ChatHeaderAction, type ChatHeaderProps, Chevron, CitationSources, type CitationSourcesProps, ClarificationData, ClarificationPanel, type ClarificationPanelProps, CodePreviewVisualization, type CodePreviewVisualizationProps, ComposerToolbar, DispatchMark, Event, EventContent, EventStatus, EventTimeline, type EventTimelineProps, FormVisualization, type FormVisualizationProps, INTERNAL_TOOLS, InlineCitation, type InlineCitationProps, KpiVisualization, type KpiVisualizationProps, LoadingDots, type LoadingDotsProps, MediaChunkData, MessageAttachments, type MessageAttachmentsProps, PlanData, PlanTimeline, type PlanTimelineProps, ReasoningPanel, type ReasoningPanelProps, ReasoningStream, type ReasoningStreamProps, type RunStep, type RunStepStatus, type RunStepTool, type RunStepToolKind, SourceDetailModal, type SourceDetailModalProps, SourceReference, StatusBadge, StepBlock, type StepBlockProps, StepMark, StreamingChunk, SubagentBody, SubagentChunkData, SubagentGroup, type SubagentGroupProps, SubagentPanel, type SubagentPanelProps, TableVisualization, type TableVisualizationProps, ThinkingIndicator, type ThinkingIndicatorProps, TimeMarker, type TimeMarkerProps, Timeline, TimelineItem, type TimelineItemData, type TimelineItemProps, type TimelineProps, TimelineRow, type TimelineRowProps, ToolApprovalPanel, type ToolApprovalPanelProps, type ToolApprovalSlots, ToolChip, VisualizationActionEvent, VisualizationChunkData, VisualizationConfig, type VisualizationEntry, VisualizationRenderer, type VisualizationRendererProps, WriteMark, authPromptVisualizationSchema, buildRunSteps, cardVisualizationSchema, chartVisualizationSchema, codePreviewVisualizationSchema, convertChunkToEvent, convertTimelineToEvents, decodeFrame, durationSeconds, formVisualizationSchema, getArtifact, getRegisteredArtifactTypes, getRegisteredTypes, getVisualization, humanizeHandle, initials, isInternalTool, kpiVisualizationSchema, registerArtifact, registerVisualization, stepsWallClockSeconds, tableVisualizationSchema };
|
package/dist/styled/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{
|
|
1
|
+
export{z as ActivityMeter,w as AgentMark,$ as ArtifactInlineCard,da as ArtifactList,a as AttachmentPreview,P as AuthPromptVisualization,b as Avatar,L as CardVisualization,J as ChartVisualization,c as ChatContainer,la as ChatHeader,xa as ChatLayout,y as Chevron,g as CitationSources,j as ClarificationPanel,N as CodePreviewVisualization,d as ComposerToolbar,x as DispatchMark,pa as EventContent,sa as EventTimeline,O as FormVisualization,p as INTERNAL_TOOLS,i as InlineCitation,M as KpiVisualization,e as LoadingDots,f as MarkdownContent,fa as Message,n as MessageActionBar,o as MessageAttachments,ga as MessageComposer,ia as MessageList,ua as PlanTimeline,va as ReasoningPanel,G as ReasoningStream,ha as ScrollToBottomButton,h as SourceDetailModal,ma as StatusBadge,F as StepBlock,u as StepMark,H as StreamingText,D as SubagentBody,E as SubagentGroup,za as SubagentPanel,I as SuggestedActions,K as TableVisualization,m as ThinkingIndicator,ja as TimeMarker,na as Timeline,oa as TimelineItem,ta as TimelineRow,k as ToolApprovalPanel,A as ToolChip,wa as ToolStatusIndicator,ka as TypingIndicator,_ as VisualizationRenderer,ya as WelcomeScreen,v as WriteMark,Z as authPromptVisualizationSchema,r as buildRunSteps,V as cardVisualizationSchema,T as chartVisualizationSchema,X as codePreviewVisualizationSchema,qa as convertChunkToEvent,ra as convertTimelineToEvents,l as decodeFrame,s as durationSeconds,Y as formVisualizationSchema,ba as getArtifact,ca as getRegisteredArtifactTypes,S as getRegisteredTypes,R as getVisualization,B as humanizeHandle,C as initials,q as isInternalTool,W as kpiVisualizationSchema,aa as registerArtifact,Q as registerVisualization,t as stepsWallClockSeconds,U as tableVisualizationSchema}from'../chunk-W7HQXA2Z.js';export{h as useComposer,b as useMessage}from'../chunk-7QNDCHY7.js';import'../chunk-OU5ITGKX.js';import'../chunk-LDTAZ4GT.js';export{b as ChatProvider,c as useChatContext}from'../chunk-HNHLLH6W.js';import'../chunk-NG4HKXYB.js';import'../chunk-BINTGT2Q.js';//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|