@runtypelabs/persona 4.7.0 → 4.8.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/dist/animations/glyph-cycle.cjs +2 -2
- package/dist/animations/glyph-cycle.d.cts +1 -1
- package/dist/animations/glyph-cycle.d.ts +1 -1
- package/dist/animations/glyph-cycle.js +2 -2
- package/dist/animations/{types-CSmiKRVa.d.cts → types-BsZtXPKK.d.cts} +43 -3
- package/dist/animations/{types-CSmiKRVa.d.ts → types-BsZtXPKK.d.ts} +43 -3
- package/dist/animations/wipe.cjs +2 -2
- package/dist/animations/wipe.d.cts +1 -1
- package/dist/animations/wipe.d.ts +1 -1
- package/dist/chunk-5EIIHQLQ.js +1 -0
- package/dist/codegen.cjs +12 -12
- package/dist/codegen.js +14 -14
- package/dist/index.cjs +91 -68
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +877 -172
- package/dist/index.d.ts +877 -172
- package/dist/index.global.js +81 -57
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +91 -68
- package/dist/index.js.map +1 -1
- package/dist/install.global.js +1 -1
- package/dist/install.global.js.map +1 -1
- package/dist/launcher.global.js +3 -2
- package/dist/launcher.global.js.map +1 -1
- package/dist/markdown-parsers.js +24 -24
- package/dist/plugin-kit.cjs +1 -1
- package/dist/plugin-kit.js +1 -1
- package/dist/runtype-tts-entry-UJAEF7NZ.js +1 -0
- package/dist/runtype-tts.js +1 -1
- package/dist/session-reconnect-JKIJBHS5.js +1 -0
- package/dist/smart-dom-reader.cjs +17 -17
- package/dist/smart-dom-reader.d.cts +753 -15
- package/dist/smart-dom-reader.d.ts +753 -15
- package/dist/smart-dom-reader.js +17 -17
- package/dist/testing.cjs +3 -3
- package/dist/testing.js +3 -3
- package/dist/theme-editor-preview.cjs +81 -58
- package/dist/theme-editor-preview.d.cts +761 -15
- package/dist/theme-editor-preview.d.ts +761 -15
- package/dist/theme-editor-preview.js +81 -58
- package/dist/theme-editor.cjs +6 -6
- package/dist/theme-editor.d.cts +753 -15
- package/dist/theme-editor.d.ts +753 -15
- package/dist/theme-editor.js +10 -10
- package/dist/theme-reference.cjs +1 -1
- package/dist/theme-reference.d.cts +74 -0
- package/dist/theme-reference.d.ts +74 -0
- package/dist/theme-reference.js +1 -1
- package/dist/voice-worklet-player.cjs +2 -2
- package/dist/voice-worklet-player.js +2 -2
- package/dist/webmcp-polyfill.js +2 -2
- package/dist/widget.css +1 -1
- package/package.json +2 -3
- package/src/artifacts-session.test.ts +178 -0
- package/src/client.test.ts +186 -1
- package/src/client.ts +92 -9
- package/src/components/artifact-card.test.ts +333 -0
- package/src/components/artifact-card.ts +75 -28
- package/src/components/artifact-inline.test.ts +1328 -0
- package/src/components/artifact-inline.ts +920 -0
- package/src/components/artifact-pane.test.ts +1042 -0
- package/src/components/artifact-pane.ts +440 -131
- package/src/components/artifact-preview.test.ts +1155 -0
- package/src/components/artifact-preview.ts +994 -0
- package/src/components/pill-composer-builder.test.ts +6 -2
- package/src/components/pill-composer-builder.ts +6 -6
- package/src/components/reasoning-bubble.ts +1 -13
- package/src/components/registry.ts +38 -3
- package/src/components/tool-bubble.ts +1 -13
- package/src/defaults.ts +1 -0
- package/src/generated/runtype-openapi-contract.ts +55 -3
- package/src/index-core.ts +20 -1
- package/src/index.ts +8 -0
- package/src/markdown-parsers-loader.test.ts +158 -0
- package/src/markdown-parsers-loader.ts +74 -9
- package/src/runtime/host-layout.test.ts +163 -0
- package/src/runtime/host-layout.ts +110 -7
- package/src/runtime/init.ts +18 -61
- package/src/session.ts +76 -22
- package/src/styles/widget.css +773 -26
- package/src/theme-editor/preview.ts +2 -0
- package/src/theme-editor/sections.test.ts +26 -1
- package/src/theme-editor/sections.ts +10 -2
- package/src/theme-reference.ts +2 -2
- package/src/tool-call-display-defaults.test.ts +1 -0
- package/src/types/theme.ts +77 -0
- package/src/types.ts +516 -17
- package/src/ui.artifact-pane-gating.test.ts +636 -0
- package/src/ui.component-directive.test.ts +104 -0
- package/src/ui.composer-bar.test.ts +60 -2
- package/src/ui.detached-panel.test.ts +1049 -0
- package/src/ui.tool-display.test.ts +51 -0
- package/src/ui.ts +698 -109
- package/src/utils/artifact-custom-actions.ts +128 -0
- package/src/utils/artifact-display.test.ts +42 -0
- package/src/utils/artifact-display.ts +84 -0
- package/src/utils/artifact-file.test.ts +116 -0
- package/src/utils/artifact-file.ts +117 -0
- package/src/utils/artifact-gate.test.ts +112 -5
- package/src/utils/artifact-gate.ts +39 -14
- package/src/utils/artifact-loading-status.ts +55 -0
- package/src/utils/artifact-status-label.ts +190 -0
- package/src/utils/buttons.ts +7 -1
- package/src/utils/code-highlight.test.ts +186 -0
- package/src/utils/code-highlight.ts +400 -0
- package/src/utils/icons.ts +2 -0
- package/src/utils/roving-tablist.test.ts +152 -0
- package/src/utils/roving-tablist.ts +111 -0
- package/src/utils/spinner.ts +45 -0
- package/src/utils/theme.test.ts +48 -0
- package/src/utils/theme.ts +7 -0
- package/src/utils/tokens.ts +91 -0
- package/src/utils/tool-loading-animation.test.ts +32 -0
- package/src/utils/tool-loading-animation.ts +24 -0
- package/dist/chunk-DFBSCFYN.js +0 -1
- package/dist/runtype-tts-entry-HFUV2UF7.js +0 -1
- package/dist/session-reconnect-U77QFUR7.js +0 -1
package/dist/theme-editor.d.cts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { IconNode } from 'lucide';
|
|
2
|
+
|
|
1
3
|
type TokenType = 'color' | 'spacing' | 'typography' | 'shadow' | 'border' | 'radius';
|
|
2
4
|
type TokenReference<_T extends TokenType = TokenType> = string;
|
|
3
5
|
interface ColorShade {
|
|
@@ -177,6 +179,10 @@ interface PanelTokens extends ComponentTokenSet {
|
|
|
177
179
|
maxWidth: string;
|
|
178
180
|
height: string;
|
|
179
181
|
maxHeight: string;
|
|
182
|
+
/** Gap between the detached panel and its region edges. Only used when detached. */
|
|
183
|
+
inset?: string;
|
|
184
|
+
/** Background of the region revealed behind a detached panel. */
|
|
185
|
+
canvasBackground?: string;
|
|
180
186
|
}
|
|
181
187
|
interface HeaderTokens extends ComponentTokenSet {
|
|
182
188
|
background: TokenReference<'color'>;
|
|
@@ -341,6 +347,14 @@ interface ArtifactToolbarTokens {
|
|
|
341
347
|
iconBorder?: string;
|
|
342
348
|
toggleGroupGap?: string;
|
|
343
349
|
toggleBorderRadius?: string;
|
|
350
|
+
/** Inner padding of the segmented view/source toggle pill. */
|
|
351
|
+
toggleGroupPadding?: string;
|
|
352
|
+
/** Border of the segmented view/source toggle pill (e.g., `none`). */
|
|
353
|
+
toggleGroupBorder?: string;
|
|
354
|
+
/** Corner radius of the segmented view/source toggle pill. */
|
|
355
|
+
toggleGroupBorderRadius?: string;
|
|
356
|
+
/** Background of the segmented view/source toggle pill. */
|
|
357
|
+
toggleGroupBackground?: string;
|
|
344
358
|
copyBackground?: string;
|
|
345
359
|
copyBorder?: string;
|
|
346
360
|
copyColor?: string;
|
|
@@ -372,6 +386,16 @@ interface ArtifactTabTokens {
|
|
|
372
386
|
/** Tab list container padding (CSS shorthand). */
|
|
373
387
|
listPadding?: string;
|
|
374
388
|
}
|
|
389
|
+
/** Artifact reference card (chat thread) chrome. */
|
|
390
|
+
interface ArtifactCardTokens {
|
|
391
|
+
background?: string;
|
|
392
|
+
/** Full border shorthand (e.g. `1px solid #e5e7eb`). */
|
|
393
|
+
border?: string;
|
|
394
|
+
borderRadius?: string;
|
|
395
|
+
hoverBackground?: string;
|
|
396
|
+
/** Border color on hover. */
|
|
397
|
+
hoverBorderColor?: string;
|
|
398
|
+
}
|
|
375
399
|
/** Artifact pane chrome. */
|
|
376
400
|
interface ArtifactPaneTokens {
|
|
377
401
|
/**
|
|
@@ -382,6 +406,54 @@ interface ArtifactPaneTokens {
|
|
|
382
406
|
background?: string;
|
|
383
407
|
toolbarBackground?: string;
|
|
384
408
|
}
|
|
409
|
+
/** Inline artifact block chrome (`display: "inline"` file preview). */
|
|
410
|
+
interface ArtifactInlineTokens {
|
|
411
|
+
/** Background of the inline preview frame. */
|
|
412
|
+
background?: string;
|
|
413
|
+
/** Full border shorthand for the frame (e.g. `1px solid #e5e7eb`). */
|
|
414
|
+
border?: string;
|
|
415
|
+
/** Border radius of the inline preview frame. */
|
|
416
|
+
borderRadius?: string;
|
|
417
|
+
/** Background of the title/toolbar chrome bar. */
|
|
418
|
+
chromeBackground?: string;
|
|
419
|
+
/** Bottom border of the title bar. */
|
|
420
|
+
chromeBorder?: string;
|
|
421
|
+
/** Title text color in the chrome bar (artifact basename). */
|
|
422
|
+
titleColor?: string;
|
|
423
|
+
/** Muted text color for the type label / streaming status. */
|
|
424
|
+
mutedColor?: string;
|
|
425
|
+
/** Preview iframe height inside the inline body. */
|
|
426
|
+
frameHeight?: string;
|
|
427
|
+
}
|
|
428
|
+
/**
|
|
429
|
+
* Syntax-highlighted artifact source view (pane + inline), rendered by
|
|
430
|
+
* `utils/code-highlight.ts`. One Light defaults ship in `widget.css`, with a
|
|
431
|
+
* One Dark override keyed off the widget's resolved color scheme (the
|
|
432
|
+
* `data-persona-color-scheme` root attribute, not the OS preference); set any
|
|
433
|
+
* of these to retheme the tokenizer palette and the line-number gutter.
|
|
434
|
+
*/
|
|
435
|
+
interface CodeTokens {
|
|
436
|
+
/** Keywords, booleans, null (e.g. `const`, `true`). */
|
|
437
|
+
keywordColor?: string;
|
|
438
|
+
/** String and template literals; HTML attribute values. */
|
|
439
|
+
stringColor?: string;
|
|
440
|
+
/** Line and block comments. */
|
|
441
|
+
commentColor?: string;
|
|
442
|
+
/** Numeric literals; CSS hex colors / units. */
|
|
443
|
+
numberColor?: string;
|
|
444
|
+
/** HTML tag brackets + names; doctype. */
|
|
445
|
+
tagColor?: string;
|
|
446
|
+
/** HTML attribute names. */
|
|
447
|
+
attrColor?: string;
|
|
448
|
+
/** CSS property names; JSON object keys. */
|
|
449
|
+
propertyColor?: string;
|
|
450
|
+
/** Line-number gutter digits. */
|
|
451
|
+
lineNumberColor?: string;
|
|
452
|
+
/** Right border of the line-number gutter. */
|
|
453
|
+
gutterBorderColor?: string;
|
|
454
|
+
/** Background of the source-view code sheet (defaults to One Light/Dark editor background). */
|
|
455
|
+
background?: string;
|
|
456
|
+
}
|
|
385
457
|
/** Icon button chrome (used by createIconButton). */
|
|
386
458
|
interface IconButtonTokens {
|
|
387
459
|
background?: string;
|
|
@@ -451,9 +523,13 @@ interface ComponentTokens {
|
|
|
451
523
|
toolbar?: ArtifactToolbarTokens;
|
|
452
524
|
tab?: ArtifactTabTokens;
|
|
453
525
|
pane?: ArtifactPaneTokens;
|
|
526
|
+
card?: ArtifactCardTokens;
|
|
527
|
+
inline?: ArtifactInlineTokens;
|
|
454
528
|
};
|
|
455
529
|
/** Collapsible widget chrome (tool/reasoning/approval bubbles). */
|
|
456
530
|
collapsibleWidget?: CollapsibleWidgetTokens;
|
|
531
|
+
/** Syntax-highlighted artifact source view (tokenizer palette + gutter). */
|
|
532
|
+
code?: CodeTokens;
|
|
457
533
|
}
|
|
458
534
|
interface PaletteExtras {
|
|
459
535
|
transitions?: Record<string, string>;
|
|
@@ -764,6 +840,7 @@ type RuntypeExecutionStreamEvent = ({
|
|
|
764
840
|
totalSteps?: number;
|
|
765
841
|
type: "execution_start";
|
|
766
842
|
}) | ({
|
|
843
|
+
claudeManagedAgentId?: string;
|
|
767
844
|
completedAt?: string;
|
|
768
845
|
durationMs?: number;
|
|
769
846
|
executionId: string;
|
|
@@ -808,6 +885,15 @@ type RuntypeExecutionStreamEvent = ({
|
|
|
808
885
|
completedAt?: string;
|
|
809
886
|
content?: string;
|
|
810
887
|
cost?: number;
|
|
888
|
+
estimatedContextBreakdown?: {
|
|
889
|
+
categories: Record<string, {
|
|
890
|
+
chars: number;
|
|
891
|
+
estimatedTokens: number;
|
|
892
|
+
}>;
|
|
893
|
+
contextWindowSize?: number;
|
|
894
|
+
estimatedTotalTokens: number;
|
|
895
|
+
estimatedUtilizationPercent?: number;
|
|
896
|
+
};
|
|
811
897
|
executionId: string;
|
|
812
898
|
fallback?: {
|
|
813
899
|
attempts: Array<{
|
|
@@ -845,6 +931,7 @@ type RuntypeExecutionStreamEvent = ({
|
|
|
845
931
|
type: "step_start";
|
|
846
932
|
} | ({
|
|
847
933
|
completedAt?: string;
|
|
934
|
+
cost?: number;
|
|
848
935
|
durationMs?: number;
|
|
849
936
|
error?: string;
|
|
850
937
|
executionId: string;
|
|
@@ -950,6 +1037,11 @@ type RuntypeExecutionStreamEvent = ({
|
|
|
950
1037
|
artifactType: "markdown" | "component";
|
|
951
1038
|
component?: string;
|
|
952
1039
|
executionId?: string;
|
|
1040
|
+
file?: {
|
|
1041
|
+
language?: string;
|
|
1042
|
+
mimeType: string;
|
|
1043
|
+
path: string;
|
|
1044
|
+
};
|
|
953
1045
|
id: string;
|
|
954
1046
|
seq?: number;
|
|
955
1047
|
title?: string;
|
|
@@ -1058,6 +1150,14 @@ type RuntypeExecutionStreamEvent = ({
|
|
|
1058
1150
|
awaitReason?: string;
|
|
1059
1151
|
awaitedAt?: string;
|
|
1060
1152
|
crawlId?: string;
|
|
1153
|
+
elicitation?: {
|
|
1154
|
+
message: string;
|
|
1155
|
+
mode: "form" | "url";
|
|
1156
|
+
pauseCount?: number;
|
|
1157
|
+
requestedSchema?: Record<string, unknown>;
|
|
1158
|
+
serverName?: string;
|
|
1159
|
+
url?: string;
|
|
1160
|
+
};
|
|
1061
1161
|
executionId: string;
|
|
1062
1162
|
origin?: "webmcp" | "sdk";
|
|
1063
1163
|
pageOrigin?: string;
|
|
@@ -1157,6 +1257,14 @@ type RuntypeFlowSSEEvent = {
|
|
|
1157
1257
|
awaitReason?: string;
|
|
1158
1258
|
awaitedAt: string;
|
|
1159
1259
|
crawlId?: string;
|
|
1260
|
+
elicitation?: {
|
|
1261
|
+
message: string;
|
|
1262
|
+
mode: "form" | "url";
|
|
1263
|
+
pauseCount?: number;
|
|
1264
|
+
requestedSchema?: Record<string, unknown>;
|
|
1265
|
+
serverName?: string;
|
|
1266
|
+
url?: string;
|
|
1267
|
+
};
|
|
1160
1268
|
executionId?: string;
|
|
1161
1269
|
flowId: string;
|
|
1162
1270
|
origin?: "webmcp" | "sdk";
|
|
@@ -1207,7 +1315,7 @@ type RuntypeFlowSSEEvent = {
|
|
|
1207
1315
|
completedAt?: string;
|
|
1208
1316
|
duration?: number;
|
|
1209
1317
|
durationMs?: number;
|
|
1210
|
-
error?: string;
|
|
1318
|
+
error?: string | null;
|
|
1211
1319
|
executionId?: string;
|
|
1212
1320
|
executionTime?: number;
|
|
1213
1321
|
id?: string;
|
|
@@ -1251,13 +1359,21 @@ type RuntypeFlowSSEEvent = {
|
|
|
1251
1359
|
totalSteps: number;
|
|
1252
1360
|
type: "step_skip";
|
|
1253
1361
|
when: string;
|
|
1254
|
-
} | {
|
|
1362
|
+
} | ({
|
|
1363
|
+
elicitation?: {
|
|
1364
|
+
message: string;
|
|
1365
|
+
mode: "form" | "url";
|
|
1366
|
+
pauseCount?: number;
|
|
1367
|
+
requestedSchema?: Record<string, unknown>;
|
|
1368
|
+
serverName?: string;
|
|
1369
|
+
url?: string;
|
|
1370
|
+
};
|
|
1255
1371
|
executionId?: string;
|
|
1256
1372
|
reason?: string;
|
|
1257
1373
|
seq?: number;
|
|
1258
1374
|
type: "step_await";
|
|
1259
1375
|
[key: string]: unknown;
|
|
1260
|
-
} | ({
|
|
1376
|
+
}) | ({
|
|
1261
1377
|
agentContext?: {
|
|
1262
1378
|
executionId: string;
|
|
1263
1379
|
iteration: number;
|
|
@@ -1422,6 +1538,149 @@ type TargetResolver = (id: string) => {
|
|
|
1422
1538
|
payload: Record<string, unknown>;
|
|
1423
1539
|
};
|
|
1424
1540
|
|
|
1541
|
+
/**
|
|
1542
|
+
* Curated registry of lucide icons available to `renderLucideIcon`.
|
|
1543
|
+
*
|
|
1544
|
+
* The widget used to do `import * as icons from "lucide"` and look up
|
|
1545
|
+
* icons dynamically by string. That defeated tree-shaking, so the IIFE
|
|
1546
|
+
* (CDN/script-tag) bundle shipped all 1640 lucide icons (~400KB of icon
|
|
1547
|
+
* data) regardless of which we actually used. This explicit registry
|
|
1548
|
+
* lets the bundler drop any icon not listed here.
|
|
1549
|
+
*
|
|
1550
|
+
* Trade-off: `renderLucideIcon(name)` is now a *closed set*. Names not
|
|
1551
|
+
* in this map return `null` and log a warning, exactly as a typo did
|
|
1552
|
+
* before. The registry is intentionally generous (~110 icons) so that
|
|
1553
|
+
* custom `ComponentRenderer` authors rarely hit a missing-icon dead end.
|
|
1554
|
+
*
|
|
1555
|
+
* To add icons: add a named import above and a row in `LUCIDE_ICONS`,
|
|
1556
|
+
* keyed by the lucide kebab-case name (matches their filename and
|
|
1557
|
+
* https://lucide.dev/icons).
|
|
1558
|
+
*
|
|
1559
|
+
* See `packages/widget/docs/icon-registry-shortlist.md` for the full
|
|
1560
|
+
* curation rationale and which icons were considered but excluded.
|
|
1561
|
+
*/
|
|
1562
|
+
declare const LUCIDE_ICONS: {
|
|
1563
|
+
readonly activity: IconNode;
|
|
1564
|
+
readonly "arrow-down": IconNode;
|
|
1565
|
+
readonly "arrow-up": IconNode;
|
|
1566
|
+
readonly "arrow-up-right": IconNode;
|
|
1567
|
+
readonly bot: IconNode;
|
|
1568
|
+
readonly "chevron-down": IconNode;
|
|
1569
|
+
readonly "chevron-up": IconNode;
|
|
1570
|
+
readonly "chevron-right": IconNode;
|
|
1571
|
+
readonly "chevron-left": IconNode;
|
|
1572
|
+
readonly check: IconNode;
|
|
1573
|
+
readonly clipboard: IconNode;
|
|
1574
|
+
readonly "clipboard-copy": IconNode;
|
|
1575
|
+
readonly "code-xml": IconNode;
|
|
1576
|
+
readonly copy: IconNode;
|
|
1577
|
+
readonly file: IconNode;
|
|
1578
|
+
readonly "file-code": IconNode;
|
|
1579
|
+
readonly "file-spreadsheet": IconNode;
|
|
1580
|
+
readonly "file-text": IconNode;
|
|
1581
|
+
readonly "image-plus": IconNode;
|
|
1582
|
+
readonly loader: IconNode;
|
|
1583
|
+
readonly "loader-circle": IconNode;
|
|
1584
|
+
readonly mic: IconNode;
|
|
1585
|
+
readonly paperclip: IconNode;
|
|
1586
|
+
readonly "refresh-cw": IconNode;
|
|
1587
|
+
readonly search: IconNode;
|
|
1588
|
+
readonly send: IconNode;
|
|
1589
|
+
readonly "shield-alert": IconNode;
|
|
1590
|
+
readonly "shield-check": IconNode;
|
|
1591
|
+
readonly "shield-x": IconNode;
|
|
1592
|
+
readonly square: IconNode;
|
|
1593
|
+
readonly "thumbs-down": IconNode;
|
|
1594
|
+
readonly "thumbs-up": IconNode;
|
|
1595
|
+
readonly upload: IconNode;
|
|
1596
|
+
readonly "volume-2": IconNode;
|
|
1597
|
+
readonly x: IconNode;
|
|
1598
|
+
readonly user: IconNode;
|
|
1599
|
+
readonly mail: IconNode;
|
|
1600
|
+
readonly phone: IconNode;
|
|
1601
|
+
readonly calendar: IconNode;
|
|
1602
|
+
readonly clock: IconNode;
|
|
1603
|
+
readonly building: IconNode;
|
|
1604
|
+
readonly "map-pin": IconNode;
|
|
1605
|
+
readonly lock: IconNode;
|
|
1606
|
+
readonly key: IconNode;
|
|
1607
|
+
readonly "credit-card": IconNode;
|
|
1608
|
+
readonly "at-sign": IconNode;
|
|
1609
|
+
readonly hash: IconNode;
|
|
1610
|
+
readonly globe: IconNode;
|
|
1611
|
+
readonly link: IconNode;
|
|
1612
|
+
readonly "circle-check": IconNode;
|
|
1613
|
+
readonly "circle-x": IconNode;
|
|
1614
|
+
readonly "triangle-alert": IconNode;
|
|
1615
|
+
readonly info: IconNode;
|
|
1616
|
+
readonly ban: IconNode;
|
|
1617
|
+
readonly shield: IconNode;
|
|
1618
|
+
readonly "arrow-left": IconNode;
|
|
1619
|
+
readonly "arrow-right": IconNode;
|
|
1620
|
+
readonly "external-link": IconNode;
|
|
1621
|
+
readonly ellipsis: IconNode;
|
|
1622
|
+
readonly "ellipsis-vertical": IconNode;
|
|
1623
|
+
readonly menu: IconNode;
|
|
1624
|
+
readonly house: IconNode;
|
|
1625
|
+
readonly plus: IconNode;
|
|
1626
|
+
readonly minus: IconNode;
|
|
1627
|
+
readonly pencil: IconNode;
|
|
1628
|
+
readonly trash: IconNode;
|
|
1629
|
+
readonly "trash-2": IconNode;
|
|
1630
|
+
readonly save: IconNode;
|
|
1631
|
+
readonly download: IconNode;
|
|
1632
|
+
readonly share: IconNode;
|
|
1633
|
+
readonly funnel: IconNode;
|
|
1634
|
+
readonly settings: IconNode;
|
|
1635
|
+
readonly "rotate-cw": IconNode;
|
|
1636
|
+
readonly maximize: IconNode;
|
|
1637
|
+
readonly minimize: IconNode;
|
|
1638
|
+
readonly "shopping-cart": IconNode;
|
|
1639
|
+
readonly "shopping-bag": IconNode;
|
|
1640
|
+
readonly package: IconNode;
|
|
1641
|
+
readonly truck: IconNode;
|
|
1642
|
+
readonly tag: IconNode;
|
|
1643
|
+
readonly gift: IconNode;
|
|
1644
|
+
readonly receipt: IconNode;
|
|
1645
|
+
readonly wallet: IconNode;
|
|
1646
|
+
readonly store: IconNode;
|
|
1647
|
+
readonly "dollar-sign": IconNode;
|
|
1648
|
+
readonly percent: IconNode;
|
|
1649
|
+
readonly play: IconNode;
|
|
1650
|
+
readonly pause: IconNode;
|
|
1651
|
+
readonly "volume-x": IconNode;
|
|
1652
|
+
readonly camera: IconNode;
|
|
1653
|
+
readonly image: IconNode;
|
|
1654
|
+
readonly film: IconNode;
|
|
1655
|
+
readonly headphones: IconNode;
|
|
1656
|
+
readonly "message-circle": IconNode;
|
|
1657
|
+
readonly "message-square": IconNode;
|
|
1658
|
+
readonly bell: IconNode;
|
|
1659
|
+
readonly heart: IconNode;
|
|
1660
|
+
readonly star: IconNode;
|
|
1661
|
+
readonly eye: IconNode;
|
|
1662
|
+
readonly "eye-off": IconNode;
|
|
1663
|
+
readonly bookmark: IconNode;
|
|
1664
|
+
readonly "calendar-days": IconNode;
|
|
1665
|
+
readonly history: IconNode;
|
|
1666
|
+
readonly timer: IconNode;
|
|
1667
|
+
readonly folder: IconNode;
|
|
1668
|
+
readonly "folder-open": IconNode;
|
|
1669
|
+
readonly files: IconNode;
|
|
1670
|
+
readonly sparkles: IconNode;
|
|
1671
|
+
readonly zap: IconNode;
|
|
1672
|
+
readonly sun: IconNode;
|
|
1673
|
+
readonly moon: IconNode;
|
|
1674
|
+
readonly flag: IconNode;
|
|
1675
|
+
readonly monitor: IconNode;
|
|
1676
|
+
readonly smartphone: IconNode;
|
|
1677
|
+
};
|
|
1678
|
+
/**
|
|
1679
|
+
* Names of lucide icons that ship with the widget. Names not in this
|
|
1680
|
+
* union return `null` from `renderLucideIcon` (with a console warning).
|
|
1681
|
+
*/
|
|
1682
|
+
type IconName = keyof typeof LUCIDE_ICONS;
|
|
1683
|
+
|
|
1425
1684
|
/**
|
|
1426
1685
|
* Text content part for multi-modal messages
|
|
1427
1686
|
*/
|
|
@@ -1942,7 +2201,13 @@ type AgentWidgetMessageActionsConfig = {
|
|
|
1942
2201
|
* new artifact content arrives or the host calls `showArtifacts()` on the widget handle.
|
|
1943
2202
|
*/
|
|
1944
2203
|
type AgentWidgetArtifactsLayoutConfig = {
|
|
1945
|
-
/**
|
|
2204
|
+
/**
|
|
2205
|
+
* Flex gap between chat column and artifact pane.
|
|
2206
|
+
* @default 0 (welded); detached uses the panel inset
|
|
2207
|
+
* @remarks In welded appearances (`panel` / `seamless`) a nonzero gap opens a
|
|
2208
|
+
* visible seam in the single card. It is honored geometrically (resize clamps
|
|
2209
|
+
* and the seam handle account for it) but is usually undesired.
|
|
2210
|
+
*/
|
|
1946
2211
|
splitGap?: string;
|
|
1947
2212
|
/** Artifact column width in split mode. @default 40% */
|
|
1948
2213
|
paneWidth?: string;
|
|
@@ -1973,16 +2238,39 @@ type AgentWidgetArtifactsLayoutConfig = {
|
|
|
1973
2238
|
/** Optional max artifact width cap while resizing (`px` only). Layout still bounds by chat min width. */
|
|
1974
2239
|
resizableMaxWidth?: string;
|
|
1975
2240
|
/**
|
|
1976
|
-
* Visual treatment for the artifact column in split
|
|
1977
|
-
* - `'panel'`:
|
|
1978
|
-
*
|
|
2241
|
+
* Visual treatment for the artifact column in a desktop split.
|
|
2242
|
+
* - `'panel'`: one welded card (border + radius wrap chat + pane) with a hairline
|
|
2243
|
+
* divider on the pane's chat-facing edge, zero gap (default).
|
|
2244
|
+
* - `'seamless'`: the same welded card with no internal divider or chrome, zero gap.
|
|
2245
|
+
* - `'detached'`: two separate elevated cards: gap from `--persona-panel-inset`,
|
|
2246
|
+
* all-side border and radius on each, and canvas background behind the split.
|
|
2247
|
+
* In an inline embed this also insets the split from the container edges on all
|
|
2248
|
+
* sides (the page canvas shows through), so the all-side margin no longer requires
|
|
2249
|
+
* `launcher.detachedPanel`.
|
|
2250
|
+
*
|
|
2251
|
+
* Default is `'panel'` unless `launcher.detachedPanel` is true, in which case an unset
|
|
2252
|
+
* `paneAppearance` resolves to `'detached'`. An explicit value always wins.
|
|
1979
2253
|
* @default 'panel'
|
|
1980
2254
|
*/
|
|
1981
|
-
paneAppearance?: "panel" | "seamless";
|
|
2255
|
+
paneAppearance?: "panel" | "seamless" | "detached";
|
|
1982
2256
|
/** Border radius on the artifact pane (CSS length). Works with any `paneAppearance`. */
|
|
1983
2257
|
paneBorderRadius?: string;
|
|
1984
2258
|
/** CSS `box-shadow` on the artifact pane. Set `"none"` to suppress the default shadow. */
|
|
1985
2259
|
paneShadow?: string;
|
|
2260
|
+
/**
|
|
2261
|
+
* CSS `box-shadow` for the chat column card in a detached split. Defaults to the same
|
|
2262
|
+
* elevation as the artifact pane; set to `"none"` to keep the chat flat while the pane stays raised.
|
|
2263
|
+
*/
|
|
2264
|
+
chatShadow?: string;
|
|
2265
|
+
/**
|
|
2266
|
+
* Chat column surface in a detached split. `"card"` (default) renders the chat as an inset card
|
|
2267
|
+
* matching the artifact pane; `"flush"` renders the chat flush with the container (no border, radius,
|
|
2268
|
+
* or shadow) and insets only the artifact pane, so the chat is flat background and the pane floats.
|
|
2269
|
+
* Only affects an inline-embedded detached split (the container-filling case); in floating, docked,
|
|
2270
|
+
* or sidebar modes it falls back to the card look.
|
|
2271
|
+
* @default 'card'
|
|
2272
|
+
*/
|
|
2273
|
+
chatSurface?: "card" | "flush";
|
|
1986
2274
|
/**
|
|
1987
2275
|
* Full `border` shorthand for the artifact `<aside>` (all sides). Overrides default pane borders.
|
|
1988
2276
|
* Example: `"1px solid #cccccc"`.
|
|
@@ -1994,14 +2282,12 @@ type AgentWidgetArtifactsLayoutConfig = {
|
|
|
1994
2282
|
*/
|
|
1995
2283
|
paneBorderLeft?: string;
|
|
1996
2284
|
/**
|
|
1997
|
-
*
|
|
1998
|
-
* top-right and bottom-right radii, and round the **artifact pane’s** top-right and bottom-right
|
|
1999
|
-
* to match `persona-rounded-2xl` (`--persona-radius-lg`) so the two columns read as one shell.
|
|
2285
|
+
* @deprecated No-op. Panel and seamless splits now weld into one card by default.
|
|
2000
2286
|
*/
|
|
2001
2287
|
unifiedSplitChrome?: boolean;
|
|
2002
2288
|
/**
|
|
2003
|
-
*
|
|
2004
|
-
* @default matches
|
|
2289
|
+
* Desktop welded split only: override the artifact pane's outer-right corner radius (CSS length).
|
|
2290
|
+
* @default matches the panel radius (`--persona-panel-radius`)
|
|
2005
2291
|
*/
|
|
2006
2292
|
unifiedSplitOuterRadius?: string;
|
|
2007
2293
|
/**
|
|
@@ -2021,6 +2307,10 @@ type AgentWidgetArtifactsLayoutConfig = {
|
|
|
2021
2307
|
* @default 'default'
|
|
2022
2308
|
*/
|
|
2023
2309
|
toolbarPreset?: "default" | "document";
|
|
2310
|
+
/** Visible title in the artifact toolbar. @default "Artifacts" */
|
|
2311
|
+
toolbarTitle?: string;
|
|
2312
|
+
/** Label for the artifact dismiss control. @default "Close" */
|
|
2313
|
+
closeButtonLabel?: string;
|
|
2024
2314
|
/**
|
|
2025
2315
|
* When `toolbarPreset` is `document`, show a visible "Copy" label next to the copy icon.
|
|
2026
2316
|
*/
|
|
@@ -2035,6 +2325,17 @@ type AgentWidgetArtifactsLayoutConfig = {
|
|
|
2035
2325
|
documentToolbarToggleActiveBackground?: string;
|
|
2036
2326
|
/** Active view/source toggle border color. Sets `--persona-artifact-doc-toggle-active-border`. */
|
|
2037
2327
|
documentToolbarToggleActiveBorderColor?: string;
|
|
2328
|
+
/** Show an expand/collapse toggle in the artifact toolbar (both presets). Expanded fills the widget with the pane and hides the chat column. Default: false. */
|
|
2329
|
+
showExpandToggle?: boolean;
|
|
2330
|
+
/** Show the copy control in the `default` toolbar preset (the `document` preset always shows it). Default: false. */
|
|
2331
|
+
showCopyButton?: boolean;
|
|
2332
|
+
/** Edge fade on the scrollable tab strip. true = both ends (dynamic). @default true */
|
|
2333
|
+
tabFade?: boolean | {
|
|
2334
|
+
start?: boolean;
|
|
2335
|
+
end?: boolean;
|
|
2336
|
+
};
|
|
2337
|
+
/** Tab fade width (CSS length). @default 24px */
|
|
2338
|
+
tabFadeSize?: string;
|
|
2038
2339
|
/**
|
|
2039
2340
|
* Invoked when the document toolbar Refresh control is used (before the pane re-renders).
|
|
2040
2341
|
* Use to replay `connectStream`, refetch, etc.
|
|
@@ -2058,20 +2359,349 @@ type AgentWidgetArtifactsLayoutConfig = {
|
|
|
2058
2359
|
jsonPayload: string;
|
|
2059
2360
|
}) => void | Promise<void>;
|
|
2060
2361
|
};
|
|
2362
|
+
type PersonaArtifactDisplayMode = "card" | "panel" | "inline";
|
|
2363
|
+
/** Context handed to custom artifact actions. Content fields are best-effort: resolved from live session state or, after a refresh, from the persisted reference-card payload. */
|
|
2364
|
+
type PersonaArtifactActionContext = {
|
|
2365
|
+
artifactId: string | null;
|
|
2366
|
+
title: string;
|
|
2367
|
+
artifactType: string;
|
|
2368
|
+
markdown?: string;
|
|
2369
|
+
file?: PersonaArtifactFileMeta;
|
|
2370
|
+
/** Component artifacts: pretty-printed { component, props } JSON. */
|
|
2371
|
+
jsonPayload?: string;
|
|
2372
|
+
};
|
|
2373
|
+
/**
|
|
2374
|
+
* Context passed to a `features.artifacts.statusLabel` function on every
|
|
2375
|
+
* artifact streaming update, once per visible surface. Treat it as read-only:
|
|
2376
|
+
* the function should be pure and fast (it runs per streaming delta, per
|
|
2377
|
+
* surface).
|
|
2378
|
+
*/
|
|
2379
|
+
type PersonaArtifactStatusLabelContext = {
|
|
2380
|
+
artifactId: string;
|
|
2381
|
+
artifactType: "markdown" | "component";
|
|
2382
|
+
title?: string;
|
|
2383
|
+
/** The default subject, e.g. "document", "component", or a file type label like "HTML file". */
|
|
2384
|
+
typeLabel: string;
|
|
2385
|
+
file?: PersonaArtifactFileMeta;
|
|
2386
|
+
/** Accumulated streamed content length so far (0 for component artifacts). */
|
|
2387
|
+
chars: number;
|
|
2388
|
+
/** Accumulated line count so far (0 for component artifacts). */
|
|
2389
|
+
lines: number;
|
|
2390
|
+
/** Milliseconds since this artifact's first streaming update was seen. */
|
|
2391
|
+
elapsedMs: number;
|
|
2392
|
+
/** Lazy accessor for the accumulated markdown source (empty string for component artifacts). Call only if needed; parsing cost is opt-in. */
|
|
2393
|
+
content: () => string;
|
|
2394
|
+
/** Which surface is asking, so hosts can shorten for cramped spots. */
|
|
2395
|
+
surface: "card" | "inline-chrome" | "status-body";
|
|
2396
|
+
};
|
|
2397
|
+
/** A custom action button rendered in an artifact toolbar/card slot. */
|
|
2398
|
+
type PersonaArtifactCustomAction = {
|
|
2399
|
+
/** Stable id, used for DOM wiring and keyed re-renders. */
|
|
2400
|
+
id: string;
|
|
2401
|
+
/** Accessible label; also the visible text when showLabel is true. */
|
|
2402
|
+
label: string;
|
|
2403
|
+
/** Registry icon name, or a factory returning your own element (e.g. a brand SVG). The factory result is author-owned code, not sanitized wire data. */
|
|
2404
|
+
icon?: IconName | (() => HTMLElement | SVGElement);
|
|
2405
|
+
/** Render icon + text instead of icon-only. Default: false. */
|
|
2406
|
+
showLabel?: boolean;
|
|
2407
|
+
/** Per-artifact gate, evaluated on each render. Omitted = always visible. */
|
|
2408
|
+
visible?: (ctx: PersonaArtifactActionContext) => boolean;
|
|
2409
|
+
/** May be async; rejections are swallowed like built-in action errors. */
|
|
2410
|
+
onClick: (ctx: PersonaArtifactActionContext) => void | Promise<void>;
|
|
2411
|
+
};
|
|
2061
2412
|
type AgentWidgetArtifactsFeature = {
|
|
2062
2413
|
/** When true, Persona shows the artifact pane and handles artifact_* SSE events */
|
|
2063
2414
|
enabled?: boolean;
|
|
2064
2415
|
/** If set, artifact events for other types are ignored */
|
|
2065
2416
|
allowedTypes?: PersonaArtifactKind[];
|
|
2417
|
+
/**
|
|
2418
|
+
* Where artifact bodies render. A single mode applies to all artifacts;
|
|
2419
|
+
* the object form sets a default plus per-type overrides.
|
|
2420
|
+
* Defaults to "panel" (current behavior).
|
|
2421
|
+
*/
|
|
2422
|
+
display?: PersonaArtifactDisplayMode | {
|
|
2423
|
+
default?: PersonaArtifactDisplayMode;
|
|
2424
|
+
byType?: Partial<Record<PersonaArtifactKind, PersonaArtifactDisplayMode>>;
|
|
2425
|
+
};
|
|
2066
2426
|
/** Split / drawer dimensions and launcher widen behavior */
|
|
2067
2427
|
layout?: AgentWidgetArtifactsLayoutConfig;
|
|
2068
2428
|
/**
|
|
2069
|
-
*
|
|
2070
|
-
*
|
|
2429
|
+
* Controls inline preview of previewable file artifacts (HTML/SVG written by
|
|
2430
|
+
* a Claude Managed agent). When a markdown artifact carries `file` metadata,
|
|
2431
|
+
* the pane can render an isolated `<iframe srcdoc>` sandbox instead of a code
|
|
2432
|
+
* block.
|
|
2433
|
+
*/
|
|
2434
|
+
filePreview?: {
|
|
2435
|
+
/** Enable rendered preview for html/svg files. Defaults to enabled. Set false to force source view. */
|
|
2436
|
+
enabled?: boolean;
|
|
2437
|
+
/**
|
|
2438
|
+
* `sandbox` attribute for the preview iframe. Defaults to `"allow-scripts"`.
|
|
2439
|
+
* `allow-same-origin` is stripped (with a console warning) unless
|
|
2440
|
+
* `dangerouslyAllowSameOrigin` is set: the opaque origin is what isolates
|
|
2441
|
+
* the preview from the host page. Embedder-trusted config.
|
|
2442
|
+
*/
|
|
2443
|
+
iframeSandbox?: string;
|
|
2444
|
+
/**
|
|
2445
|
+
* Allows `allow-same-origin` to pass through `iframeSandbox`. Off by
|
|
2446
|
+
* default because it lets agent-written file content run with the host
|
|
2447
|
+
* page's origin (DOM, storage, credentialed requests). Only set this when
|
|
2448
|
+
* every previewed file source is fully trusted.
|
|
2449
|
+
*/
|
|
2450
|
+
dangerouslyAllowSameOrigin?: boolean;
|
|
2451
|
+
/**
|
|
2452
|
+
* Loading treatment for the preview iframe. Default on.
|
|
2453
|
+
*
|
|
2454
|
+
* A sandboxed `iframe srcdoc` (opaque origin, `allow-scripts` only) paints
|
|
2455
|
+
* blank until its content renders — seconds for artifacts that pull CDN
|
|
2456
|
+
* scripts (React/Babel). The default shows a themed "Loading preview…"
|
|
2457
|
+
* overlay over the iframe, dismissed the instant the content signals it has
|
|
2458
|
+
* painted (an injected `postMessage` reporter) or a hard timeout elapses.
|
|
2459
|
+
*
|
|
2460
|
+
* `false` disables the overlay and the injected ready signal entirely (the
|
|
2461
|
+
* srcdoc becomes the raw file source, the prior behavior). An object tunes
|
|
2462
|
+
* the timing; omitted / `true` uses all defaults.
|
|
2463
|
+
*/
|
|
2464
|
+
loading?: boolean | {
|
|
2465
|
+
/** Show the overlay only if the preview is not ready after this many ms. Default 200. */
|
|
2466
|
+
delayMs?: number;
|
|
2467
|
+
/** Once shown, keep the overlay visible at least this long (anti-flicker). Default 300. */
|
|
2468
|
+
minVisibleMs?: number;
|
|
2469
|
+
/** Give up waiting and reveal the iframe regardless after this many ms. Default 8000. */
|
|
2470
|
+
timeoutMs?: number;
|
|
2471
|
+
/**
|
|
2472
|
+
* Append the `postMessage` ready reporter to the srcdoc so the overlay
|
|
2473
|
+
* dismisses on first paint rather than the iframe `load` event (which
|
|
2474
|
+
* fires before post-DOMContentLoaded rendering like Babel compilation).
|
|
2475
|
+
* Default true. When false, the overlay dismisses on `load` + a double
|
|
2476
|
+
* `requestAnimationFrame`, or the timeout.
|
|
2477
|
+
*/
|
|
2478
|
+
injectReadySignal?: boolean;
|
|
2479
|
+
/**
|
|
2480
|
+
* Escalation text shown beside the spinner after `labelDelayMs`.
|
|
2481
|
+
* Default `"Starting preview..."`. `false` renders an icon-only
|
|
2482
|
+
* indicator forever (no text ever). A short work-naming label is
|
|
2483
|
+
* added only after a delay by design — icon-first, with text reserved
|
|
2484
|
+
* for genuinely slow loads (per Geist/Sandpack guidance; HIG warns
|
|
2485
|
+
* against the vague word "loading").
|
|
2486
|
+
*/
|
|
2487
|
+
label?: string | false;
|
|
2488
|
+
/**
|
|
2489
|
+
* Delay before the escalation label fades in, measured from when the
|
|
2490
|
+
* overlay actually becomes visible (i.e. after `delayMs`), not from
|
|
2491
|
+
* iframe creation. Default 2000.
|
|
2492
|
+
*/
|
|
2493
|
+
labelDelayMs?: number;
|
|
2494
|
+
/**
|
|
2495
|
+
* Full replacement for the default indicator (spinner + escalation
|
|
2496
|
+
* label). Called once when the overlay is built; return any element
|
|
2497
|
+
* (a brand mark, skeleton, custom animation) to own the indicator
|
|
2498
|
+
* content entirely (the escalation-label logic is then skipped), or
|
|
2499
|
+
* return `null` to fall back to the default. A thrown error also falls
|
|
2500
|
+
* back. Mirrors `renderInline` / `renderCard`'s null-falls-back
|
|
2501
|
+
* contract. The overlay backdrop, timing, and dismissal stay
|
|
2502
|
+
* widget-owned either way.
|
|
2503
|
+
*/
|
|
2504
|
+
renderIndicator?: (ctx: {
|
|
2505
|
+
artifactId: string;
|
|
2506
|
+
config: AgentWidgetConfig;
|
|
2507
|
+
}) => HTMLElement | null;
|
|
2508
|
+
};
|
|
2509
|
+
};
|
|
2510
|
+
/**
|
|
2511
|
+
* Custom action buttons for the artifact pane toolbar, rendered between the
|
|
2512
|
+
* refresh and expand/close controls in both toolbar presets. Re-read on live
|
|
2513
|
+
* config updates.
|
|
2514
|
+
*/
|
|
2515
|
+
toolbarActions?: PersonaArtifactCustomAction[];
|
|
2516
|
+
/**
|
|
2517
|
+
* Custom action buttons for the artifact reference card, rendered before the
|
|
2518
|
+
* Download button on complete artifacts. Clicks are delegated, so they
|
|
2519
|
+
* survive re-renders and page refresh.
|
|
2520
|
+
*/
|
|
2521
|
+
cardActions?: PersonaArtifactCustomAction[];
|
|
2522
|
+
/**
|
|
2523
|
+
* File chrome (title bar + toolbar) around inline preview blocks
|
|
2524
|
+
* (`display: "inline"`). Default when undefined: chrome on, with the built-in
|
|
2525
|
+
* Copy and Expand controls. Pass `false` to render the bare preview body
|
|
2526
|
+
* (frame → padded body, no chrome bar), or an object to toggle the built-in
|
|
2527
|
+
* controls individually.
|
|
2528
|
+
*
|
|
2529
|
+
* Note: default-on chrome adds a title bar and buttons to every existing
|
|
2530
|
+
* inline host on upgrade; set `inlineChrome: false` to opt out.
|
|
2531
|
+
*/
|
|
2532
|
+
inlineChrome?: boolean | {
|
|
2533
|
+
/** Show the built-in Copy button (complete artifacts only). Default true. */
|
|
2534
|
+
showCopy?: boolean;
|
|
2535
|
+
/** Show the built-in Expand button (opens the pane for this artifact). Default true. */
|
|
2536
|
+
showExpand?: boolean;
|
|
2537
|
+
/**
|
|
2538
|
+
* Show the built-in rendered/source view toggle (complete artifacts
|
|
2539
|
+
* only). Default true. The toggle is availability-gated: it appears only
|
|
2540
|
+
* for file-backed markdown artifacts that have a rendered alternative to
|
|
2541
|
+
* their source (previewable HTML/SVG, or markdown-kind files), and never
|
|
2542
|
+
* when `inlineBody.viewMode: "source"` forces a source-only body. Plain
|
|
2543
|
+
* markdown and component artifacts don't get it (the pane toggle covers
|
|
2544
|
+
* those).
|
|
2545
|
+
*/
|
|
2546
|
+
showViewToggle?: boolean;
|
|
2547
|
+
};
|
|
2548
|
+
/**
|
|
2549
|
+
* Custom action buttons for the inline chrome toolbar, rendered before the
|
|
2550
|
+
* built-in Copy/Expand controls on complete artifacts. Same shape as
|
|
2551
|
+
* `cardActions`; each action's `visible` gate is respected and clicks are
|
|
2552
|
+
* delegated, so they survive re-renders and page refresh.
|
|
2553
|
+
*/
|
|
2554
|
+
inlineActions?: PersonaArtifactCustomAction[];
|
|
2555
|
+
/**
|
|
2556
|
+
* Replace the artifact tab strip entirely (Seam A). Return an element mounted in
|
|
2557
|
+
* place of the built-in `.persona-artifact-list`; the pane still owns the toolbar,
|
|
2558
|
+
* preview body, iframe reuse, and lazy-render gate. Re-invoked when the records or
|
|
2559
|
+
* selection change. Custom bars own their own accessibility; use `createRovingTablist`
|
|
2560
|
+
* to keep keyboard/tablist behavior. When set, the built-in strip (scroll, fade,
|
|
2561
|
+
* tablist) is not rendered.
|
|
2562
|
+
*
|
|
2563
|
+
* Return either a fresh element per call, or the SAME element updated in place.
|
|
2564
|
+
* Returning a stable element preserves internal state across selection changes:
|
|
2565
|
+
* the pane skips remounting an unchanged node, so a roving tablist keeps keyboard
|
|
2566
|
+
* focus on the selected tab (a fresh element per call drops focus and breaks
|
|
2567
|
+
* Arrow-key nav). See the reference bars in `apps/web/src/artifact-demo.ts`.
|
|
2568
|
+
*/
|
|
2569
|
+
renderTabBar?: (ctx: {
|
|
2570
|
+
records: PersonaArtifactRecord[];
|
|
2571
|
+
selectedId: string | null;
|
|
2572
|
+
onSelect: (id: string) => void;
|
|
2573
|
+
}) => HTMLElement;
|
|
2574
|
+
/**
|
|
2575
|
+
* Body layout for inline artifact blocks (`display: "inline"`). Controls how
|
|
2576
|
+
* the block reserves height and behaves while a file/document artifact
|
|
2577
|
+
* streams, so the streaming source no longer grows an unbounded `<pre>` and
|
|
2578
|
+
* then snaps to the completed preview. Affects only the inline block; the
|
|
2579
|
+
* artifact pane is unchanged.
|
|
2580
|
+
*
|
|
2581
|
+
* Defaults (a behavior change from prior versions, which grew with content
|
|
2582
|
+
* during streaming): a fixed 320px streaming source window with tail-follow,
|
|
2583
|
+
* a top edge fade, and an animated streaming→complete swap. Pass
|
|
2584
|
+
* `height: "auto"` to restore the old grow-with-content streaming behavior.
|
|
2585
|
+
*/
|
|
2586
|
+
inlineBody?: {
|
|
2587
|
+
/** What the body shows while streaming. Default `"source"`. */
|
|
2588
|
+
streamingView?: "source" | "status";
|
|
2589
|
+
/**
|
|
2590
|
+
* How the completed body renders. `"rendered"` (default) keeps the current
|
|
2591
|
+
* behavior: file previews in a sandboxed iframe, markdown through the
|
|
2592
|
+
* markdown pipeline. `"source"` always shows the raw syntax-highlighted
|
|
2593
|
+
* source instead — for hosts where the artifact is input to the host system
|
|
2594
|
+
* (a code editor, a query runner) rather than something to preview. Unlike
|
|
2595
|
+
* `filePreview.enabled: false`, this also covers markdown-kind files and
|
|
2596
|
+
* plain markdown artifacts. Component artifacts always render through the
|
|
2597
|
+
* registry.
|
|
2598
|
+
*/
|
|
2599
|
+
viewMode?: "rendered" | "source";
|
|
2600
|
+
/**
|
|
2601
|
+
* Body height per state. A number reserves that many px for the whole body
|
|
2602
|
+
* region (border-box, padding included) with internal scroll — the
|
|
2603
|
+
* zero-layout-shift path; `"auto"` means content-sized. A
|
|
2604
|
+
* scalar applies to both the streaming and complete states; the object form
|
|
2605
|
+
* sets them independently. Default `320` for both states.
|
|
2606
|
+
*
|
|
2607
|
+
* Note: with `"auto"` on the complete state, non-iframe bodies (rendered
|
|
2608
|
+
* markdown, source view, component) are content-sized, but a file-preview
|
|
2609
|
+
* iframe cannot be content-sized without postMessage plumbing, so it falls
|
|
2610
|
+
* back to the CSS-var default (`--persona-artifact-inline-frame-height`,
|
|
2611
|
+
* 320px).
|
|
2612
|
+
*
|
|
2613
|
+
* Numeric heights are applied via the CSS var
|
|
2614
|
+
* `--persona-artifact-inline-body-height` on the block root. The older
|
|
2615
|
+
* `--persona-artifact-inline-frame-height` var still overrides the iframe
|
|
2616
|
+
* height when this one is unset, so themes pinned to it keep working.
|
|
2617
|
+
*/
|
|
2618
|
+
height?: number | "auto" | {
|
|
2619
|
+
streaming?: number | "auto";
|
|
2620
|
+
complete?: number | "auto";
|
|
2621
|
+
};
|
|
2622
|
+
/**
|
|
2623
|
+
* Tail-follow the newest streamed lines in a fixed-height source window: if
|
|
2624
|
+
* the viewport is already at the bottom, keep it pinned as content arrives;
|
|
2625
|
+
* if the reader scrolled up, don't fight them. Only meaningful for a numeric
|
|
2626
|
+
* streaming height. Default `true`.
|
|
2627
|
+
*
|
|
2628
|
+
* Precedence: ignored when `overflow: "clip"` (a clipped window shows the
|
|
2629
|
+
* top of the document and never scrolls, so there is no tail to follow).
|
|
2630
|
+
*/
|
|
2631
|
+
followOutput?: boolean;
|
|
2632
|
+
/**
|
|
2633
|
+
* How a fixed-height source window handles content taller than the window.
|
|
2634
|
+
*
|
|
2635
|
+
* - `"scroll"` (default) — the current behavior: an internally scrollable
|
|
2636
|
+
* window that tail-follows the newest streamed lines (see `followOutput`),
|
|
2637
|
+
* so the reader sees the growing tail of the document.
|
|
2638
|
+
* - `"clip"` — a fixed-height window that shows the TOP of the document,
|
|
2639
|
+
* `overflow: hidden` with no internal scroll and no tail-follow
|
|
2640
|
+
* (`followOutput` is ignored in this mode). When content overflows the
|
|
2641
|
+
* window a bottom edge fade signals there is more below (the top is always
|
|
2642
|
+
* visible, so a top fade never applies); an explicit `fadeMask` still wins
|
|
2643
|
+
* over this clip-mode default. When the inline chrome's Expand control is
|
|
2644
|
+
* enabled the whole body doubles as an expand hitbox (click / Enter / Space
|
|
2645
|
+
* opens the artifact in the pane), matching the industry inline-card
|
|
2646
|
+
* pattern; otherwise the clip is purely visual.
|
|
2647
|
+
*
|
|
2648
|
+
* Only meaningful for a numeric streaming/complete height. Default
|
|
2649
|
+
* `"scroll"`.
|
|
2650
|
+
*/
|
|
2651
|
+
overflow?: "scroll" | "clip";
|
|
2652
|
+
/**
|
|
2653
|
+
* Edge fade masks on the fixed-height streaming window (a top fade signals
|
|
2654
|
+
* clipped content above, a bottom fade signals clipped content below). Each
|
|
2655
|
+
* fade renders only when content is actually clipped on that edge, so with
|
|
2656
|
+
* tail-follow pinned at the bottom the bottom fade stays inert until the
|
|
2657
|
+
* reader scrolls up mid-stream. `true` = `{ top: true, bottom: true }`,
|
|
2658
|
+
* `false` = none. Default `{ top: true, bottom: true }`.
|
|
2659
|
+
*/
|
|
2660
|
+
fadeMask?: boolean | {
|
|
2661
|
+
top?: boolean;
|
|
2662
|
+
bottom?: boolean;
|
|
2663
|
+
};
|
|
2664
|
+
/**
|
|
2665
|
+
* Animate the streaming→complete body swap. `"auto"` uses the View
|
|
2666
|
+
* Transitions API when supported and `prefers-reduced-motion` is off;
|
|
2667
|
+
* `"none"` swaps instantly. Default `"auto"`.
|
|
2668
|
+
*/
|
|
2669
|
+
transition?: "auto" | "none";
|
|
2670
|
+
/**
|
|
2671
|
+
* What the block becomes once the artifact completes.
|
|
2672
|
+
*
|
|
2673
|
+
* - `"inline"` (default) — the streamed body stays inline forever, as
|
|
2674
|
+
* configured by the other `inlineBody` options.
|
|
2675
|
+
* - `"card"` — the block streams inline as configured, then collapses to the
|
|
2676
|
+
* compact artifact reference card once the artifact completes (the Copilot
|
|
2677
|
+
* "chiclet" / Claude side-panel handoff pattern), keeping the thread
|
|
2678
|
+
* scannable. The collapse plays as a short CSS height transition (skipped
|
|
2679
|
+
* under `prefers-reduced-motion`); it does not use the View Transitions
|
|
2680
|
+
* API, so `transition` does not affect it. After the collapse the card's
|
|
2681
|
+
* normal actions apply (click opens the artifact pane). `viewMode`, the
|
|
2682
|
+
* inline rendered/source view toggle, `inlineActions`, and inline copy are
|
|
2683
|
+
* streaming-phase-only in this mode and inert once the block is a card
|
|
2684
|
+
* (there is nothing to toggle or copy on a collapsed card). Blocks that are
|
|
2685
|
+
* already complete when they first render (page-refresh hydration) render
|
|
2686
|
+
* the card directly, with no flash of the inline body and no animation.
|
|
2687
|
+
*
|
|
2688
|
+
* Default `"inline"`.
|
|
2689
|
+
*/
|
|
2690
|
+
completeDisplay?: "inline" | "card";
|
|
2691
|
+
};
|
|
2692
|
+
/**
|
|
2693
|
+
* Called when an artifact action is triggered (open, download, expand).
|
|
2694
|
+
* Return `true` to intercept: the widget then does not change state.
|
|
2695
|
+
* For `expand`, `expanded` is the state the toggle is about to enter and
|
|
2696
|
+
* `artifactId` is the currently selected artifact (or `null` when none).
|
|
2071
2697
|
*/
|
|
2072
2698
|
onArtifactAction?: (action: {
|
|
2073
2699
|
type: 'open' | 'download';
|
|
2074
2700
|
artifactId: string;
|
|
2701
|
+
} | {
|
|
2702
|
+
type: 'expand';
|
|
2703
|
+
artifactId: string | null;
|
|
2704
|
+
expanded: boolean;
|
|
2075
2705
|
}) => boolean | void;
|
|
2076
2706
|
/**
|
|
2077
2707
|
* Custom renderer for artifact reference cards shown in the message thread.
|
|
@@ -2087,6 +2717,72 @@ type AgentWidgetArtifactsFeature = {
|
|
|
2087
2717
|
config: AgentWidgetConfig;
|
|
2088
2718
|
defaultRenderer: () => HTMLElement;
|
|
2089
2719
|
}) => HTMLElement | null;
|
|
2720
|
+
/**
|
|
2721
|
+
* Custom renderer for inline artifact blocks (display: "inline"), mirroring
|
|
2722
|
+
* `renderCard`. Return an element to replace the default inline preview,
|
|
2723
|
+
* or null to use the default.
|
|
2724
|
+
*/
|
|
2725
|
+
renderInline?: (context: {
|
|
2726
|
+
artifact: {
|
|
2727
|
+
artifactId: string;
|
|
2728
|
+
title: string;
|
|
2729
|
+
artifactType: string;
|
|
2730
|
+
status: string;
|
|
2731
|
+
};
|
|
2732
|
+
config: AgentWidgetConfig;
|
|
2733
|
+
defaultRenderer: () => HTMLElement;
|
|
2734
|
+
}) => HTMLElement | null;
|
|
2735
|
+
/**
|
|
2736
|
+
* Text shown while an artifact streams, in place of the default
|
|
2737
|
+
* `Generating <type>...` status. Applies to every streaming surface: the
|
|
2738
|
+
* reference card status line, the inline chrome meta label, and the inline
|
|
2739
|
+
* streaming status body (`inlineBody.streamingView: "status"`).
|
|
2740
|
+
*
|
|
2741
|
+
* - A plain string replaces the default label everywhere (localization or
|
|
2742
|
+
* brand voice).
|
|
2743
|
+
* - A function is called on every artifact update for each visible surface;
|
|
2744
|
+
* it must be pure and fast. Returning a string sets the animated label
|
|
2745
|
+
* only. Returning `{ label, detail }` splits the status into an animated
|
|
2746
|
+
* label (re-applied only when its text changes, so the loading animation
|
|
2747
|
+
* stays stable) and a plain un-animated detail span that may update freely
|
|
2748
|
+
* per delta (live counters).
|
|
2749
|
+
*
|
|
2750
|
+
* Default when unset: the current behavior, `Generating <type>...` with no
|
|
2751
|
+
* detail. If the function throws, the default label is used for that update
|
|
2752
|
+
* (a bad host callback must never break rendering). There is deliberately no
|
|
2753
|
+
* percent progress: streams do not announce total length, so counts and
|
|
2754
|
+
* elapsed time are the only truthful signals.
|
|
2755
|
+
*/
|
|
2756
|
+
statusLabel?: string | ((ctx: PersonaArtifactStatusLabelContext) => string | {
|
|
2757
|
+
label: string;
|
|
2758
|
+
detail?: string;
|
|
2759
|
+
});
|
|
2760
|
+
/**
|
|
2761
|
+
* Animation applied to the artifact card's "Generating …" status text while
|
|
2762
|
+
* the artifact streams. Character-by-character modes (`shimmer`,
|
|
2763
|
+
* `shimmer-color`, `rainbow`) wrap each character in a span with a staggered
|
|
2764
|
+
* `animation-delay`; `pulse` fades the whole status text; `none` disables the
|
|
2765
|
+
* animation. Honors `prefers-reduced-motion`.
|
|
2766
|
+
* @default "shimmer"
|
|
2767
|
+
*/
|
|
2768
|
+
loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
|
|
2769
|
+
/**
|
|
2770
|
+
* Duration of one full animation cycle in milliseconds.
|
|
2771
|
+
* Applies to pulse, shimmer, shimmer-color, and rainbow modes.
|
|
2772
|
+
* @default 2000
|
|
2773
|
+
*/
|
|
2774
|
+
loadingAnimationDuration?: number;
|
|
2775
|
+
/**
|
|
2776
|
+
* Primary color for shimmer-color animation mode.
|
|
2777
|
+
* Defaults to the current text color.
|
|
2778
|
+
*/
|
|
2779
|
+
loadingAnimationColor?: string;
|
|
2780
|
+
/**
|
|
2781
|
+
* Secondary/end color for shimmer-color animation mode.
|
|
2782
|
+
* Creates a gradient sweep between `loadingAnimationColor` and this color.
|
|
2783
|
+
* @default "#3b82f6"
|
|
2784
|
+
*/
|
|
2785
|
+
loadingAnimationSecondaryColor?: string;
|
|
2090
2786
|
};
|
|
2091
2787
|
/**
|
|
2092
2788
|
* How the transcript scrolls while an assistant response streams in.
|
|
@@ -2214,6 +2910,13 @@ type AgentWidgetToolCallDisplayFeature = {
|
|
|
2214
2910
|
* @default false
|
|
2215
2911
|
*/
|
|
2216
2912
|
grouped?: boolean;
|
|
2913
|
+
/**
|
|
2914
|
+
* Controls how a grouped tool sequence is rendered.
|
|
2915
|
+
* - `"stack"`: show the group summary and each child tool row.
|
|
2916
|
+
* - `"summary"`: show one consolidated summary row only.
|
|
2917
|
+
* @default "stack"
|
|
2918
|
+
*/
|
|
2919
|
+
groupedMode?: "stack" | "summary";
|
|
2217
2920
|
/**
|
|
2218
2921
|
* When false, tool call bubbles show only the collapsed summary with no
|
|
2219
2922
|
* expand/collapse toggle. Users see tool awareness without full details.
|
|
@@ -2903,6 +3606,24 @@ type AgentWidgetLauncherConfig = {
|
|
|
2903
3606
|
* @default false
|
|
2904
3607
|
*/
|
|
2905
3608
|
sidebarMode?: boolean;
|
|
3609
|
+
/**
|
|
3610
|
+
* When true, the widget panel renders as a detached card inset within its region,
|
|
3611
|
+
* with rounded corners on all sides and elevation (shadow plus hairline border),
|
|
3612
|
+
* instead of sitting flush against the region edges.
|
|
3613
|
+
*
|
|
3614
|
+
* The gap around the card is themed via `theme.components.panel.inset`. The
|
|
3615
|
+
* background revealed behind it is themed via `theme.components.panel.canvasBackground`
|
|
3616
|
+
* in docked and inline embed modes. In sidebar mode the gap stays click-through, so the
|
|
3617
|
+
* host page shows through it the same way it does in floating mode, and canvasBackground
|
|
3618
|
+
* is a no-op there.
|
|
3619
|
+
*
|
|
3620
|
+
* Applies to sidebar, docked, and inline embed modes. Ignored in mobile fullscreen,
|
|
3621
|
+
* where chrome is already suppressed. Floating mode is unchanged, since it already
|
|
3622
|
+
* renders as a detached card.
|
|
3623
|
+
*
|
|
3624
|
+
* @default false
|
|
3625
|
+
*/
|
|
3626
|
+
detachedPanel?: boolean;
|
|
2906
3627
|
/**
|
|
2907
3628
|
* Width of the sidebar panel when sidebarMode is true.
|
|
2908
3629
|
* @default "420px"
|
|
@@ -5549,6 +6270,21 @@ type AgentWidgetMessage = {
|
|
|
5549
6270
|
*/
|
|
5550
6271
|
stopReason?: StopReasonKind;
|
|
5551
6272
|
};
|
|
6273
|
+
/**
|
|
6274
|
+
* Optional file metadata attached to a markdown artifact that represents a
|
|
6275
|
+
* concrete file written by a Claude Managed agent (e.g. `/mnt/session/outputs/cat.html`).
|
|
6276
|
+
* Additive: the artifact content stays a fenced code block on the wire for
|
|
6277
|
+
* backward compatibility; new widgets use this to recover the raw source and
|
|
6278
|
+
* offer a preview. Mirrors the `file` field on the core `artifact_start` event.
|
|
6279
|
+
*/
|
|
6280
|
+
type PersonaArtifactFileMeta = {
|
|
6281
|
+
/** Full path of the written file (also used as the artifact title). */
|
|
6282
|
+
path: string;
|
|
6283
|
+
/** MIME type of the file (used for download and preview decisions). */
|
|
6284
|
+
mimeType: string;
|
|
6285
|
+
/** Fence language the content was encoded with (html/xml/md/text). */
|
|
6286
|
+
language?: string;
|
|
6287
|
+
};
|
|
5552
6288
|
type PersonaArtifactRecord = {
|
|
5553
6289
|
id: string;
|
|
5554
6290
|
artifactType: PersonaArtifactKind;
|
|
@@ -5557,6 +6293,8 @@ type PersonaArtifactRecord = {
|
|
|
5557
6293
|
markdown?: string;
|
|
5558
6294
|
component?: string;
|
|
5559
6295
|
props?: Record<string, unknown>;
|
|
6296
|
+
/** Present when this markdown artifact is a previewable file (see PersonaArtifactFileMeta). */
|
|
6297
|
+
file?: PersonaArtifactFileMeta;
|
|
5560
6298
|
};
|
|
5561
6299
|
|
|
5562
6300
|
/** Field definition types for the declarative configurator system (headless: no DOM) */
|