@runtypelabs/persona 1.48.0 → 2.0.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.
Files changed (69) hide show
  1. package/README.md +140 -8
  2. package/dist/index.cjs +90 -39
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +1055 -24
  5. package/dist/index.d.ts +1055 -24
  6. package/dist/index.global.js +111 -60
  7. package/dist/index.global.js.map +1 -1
  8. package/dist/index.js +90 -39
  9. package/dist/index.js.map +1 -1
  10. package/dist/install.global.js +1 -1
  11. package/dist/install.global.js.map +1 -1
  12. package/dist/widget.css +836 -513
  13. package/package.json +1 -1
  14. package/src/artifacts-session.test.ts +80 -0
  15. package/src/client.test.ts +20 -21
  16. package/src/client.ts +153 -4
  17. package/src/components/approval-bubble.ts +45 -42
  18. package/src/components/artifact-card.ts +91 -0
  19. package/src/components/artifact-pane.ts +501 -0
  20. package/src/components/composer-builder.ts +32 -27
  21. package/src/components/event-stream-view.ts +40 -40
  22. package/src/components/feedback.ts +36 -36
  23. package/src/components/forms.ts +11 -11
  24. package/src/components/header-builder.test.ts +32 -0
  25. package/src/components/header-builder.ts +55 -36
  26. package/src/components/header-layouts.ts +58 -125
  27. package/src/components/launcher.ts +36 -21
  28. package/src/components/message-bubble.ts +92 -65
  29. package/src/components/messages.ts +2 -2
  30. package/src/components/panel.ts +42 -11
  31. package/src/components/reasoning-bubble.ts +23 -23
  32. package/src/components/registry.ts +4 -0
  33. package/src/components/suggestions.ts +1 -1
  34. package/src/components/tool-bubble.ts +32 -32
  35. package/src/defaults.ts +30 -4
  36. package/src/index.ts +80 -2
  37. package/src/install.ts +22 -0
  38. package/src/plugins/types.ts +23 -0
  39. package/src/postprocessors.ts +2 -2
  40. package/src/runtime/host-layout.ts +174 -0
  41. package/src/runtime/init.test.ts +236 -0
  42. package/src/runtime/init.ts +114 -55
  43. package/src/session.ts +135 -2
  44. package/src/styles/tailwind.css +1 -1
  45. package/src/styles/widget.css +836 -513
  46. package/src/types/theme.ts +354 -0
  47. package/src/types.ts +314 -15
  48. package/src/ui.docked.test.ts +104 -0
  49. package/src/ui.ts +940 -227
  50. package/src/utils/artifact-gate.test.ts +255 -0
  51. package/src/utils/artifact-gate.ts +142 -0
  52. package/src/utils/artifact-resize.test.ts +64 -0
  53. package/src/utils/artifact-resize.ts +67 -0
  54. package/src/utils/attachment-manager.ts +10 -10
  55. package/src/utils/code-generators.test.ts +52 -0
  56. package/src/utils/code-generators.ts +40 -36
  57. package/src/utils/dock.ts +17 -0
  58. package/src/utils/dom-context.test.ts +504 -0
  59. package/src/utils/dom-context.ts +896 -0
  60. package/src/utils/dom.ts +12 -1
  61. package/src/utils/message-fingerprint.test.ts +187 -0
  62. package/src/utils/message-fingerprint.ts +105 -0
  63. package/src/utils/migration.ts +179 -0
  64. package/src/utils/morph.ts +1 -1
  65. package/src/utils/plugins.ts +175 -0
  66. package/src/utils/positioning.ts +4 -4
  67. package/src/utils/theme.test.ts +125 -0
  68. package/src/utils/theme.ts +216 -60
  69. package/src/utils/tokens.ts +682 -0
package/dist/index.d.ts CHANGED
@@ -45,7 +45,33 @@ interface AgentWidgetPlugin {
45
45
  config: AgentWidgetConfig;
46
46
  defaultRenderer: () => HTMLElement;
47
47
  onSubmit: (text: string) => void;
48
+ /**
49
+ * When true, the assistant stream is active — same moment `session.isStreaming()` becomes true.
50
+ * Prefer wiring controls to `data-persona-composer-disable-when-streaming` plus `setComposerDisabled`
51
+ * in the host, or react to `footer.dataset.personaComposerStreaming === "true"`.
52
+ */
53
+ streaming: boolean;
54
+ /**
55
+ * Legacy alias: host disables the primary submit control while `streaming` is true.
56
+ * @deprecated Use `streaming` for new plugins.
57
+ */
48
58
  disabled: boolean;
59
+ /** Opens the hidden file input when `config.attachments.enabled` is true (no-op otherwise). */
60
+ openAttachmentPicker: () => void;
61
+ /** From `config.composer.models` */
62
+ models?: Array<{
63
+ id: string;
64
+ label: string;
65
+ }>;
66
+ /** From `config.composer.selectedModelId` */
67
+ selectedModelId?: string;
68
+ /** Updates `config.composer.selectedModelId` for the running widget instance. */
69
+ onModelChange?: (modelId: string) => void;
70
+ /**
71
+ * Same behavior as the built-in mic when voice is enabled.
72
+ * Omitted when `config.voiceRecognition.enabled` is not true.
73
+ */
74
+ onVoiceToggle?: () => void;
49
75
  }) => HTMLElement | null;
50
76
  /**
51
77
  * Custom renderer for reasoning bubbles
@@ -189,34 +215,68 @@ type AgentWidgetRequestPayload = {
189
215
  flowId?: string;
190
216
  context?: Record<string, unknown>;
191
217
  metadata?: Record<string, unknown>;
218
+ /** Per-turn template variables for /v1/client/chat (merged as root-level {{var}} in Runtype). */
219
+ inputs?: Record<string, unknown>;
192
220
  };
193
221
  /**
194
222
  * Configuration for agent loop behavior.
195
223
  */
196
224
  type AgentLoopConfig = {
197
- /** Maximum number of reasoning iterations */
198
- maxIterations: number;
199
- /** Stop condition: 'auto' for automatic detection, or a custom JS expression */
200
- stopCondition?: 'auto' | string;
225
+ /** Maximum number of agent turns (1-100). The loop continues while the model calls tools. */
226
+ maxTurns: number;
227
+ /** Maximum cost budget in USD. Agent stops when exceeded. */
228
+ maxCost?: number;
201
229
  /** Enable periodic reflection during execution */
202
230
  enableReflection?: boolean;
203
- /** Number of iterations between reflections */
231
+ /** Number of iterations between reflections (1-50) */
204
232
  reflectionInterval?: number;
205
233
  };
234
+ /**
235
+ * Configuration for agent tools (search, code execution, MCP servers, etc.)
236
+ */
237
+ type AgentToolsConfig = {
238
+ /** Tool IDs to enable (e.g., "builtin:exa", "builtin:dalle", "builtin:openai_web_search") */
239
+ toolIds?: string[];
240
+ /** Per-tool configuration overrides keyed by tool ID */
241
+ toolConfigs?: Record<string, Record<string, unknown>>;
242
+ /** Inline tool definitions for runtime-defined tools */
243
+ runtimeTools?: Array<Record<string, unknown>>;
244
+ /** Custom MCP server connections */
245
+ mcpServers?: Array<Record<string, unknown>>;
246
+ /** Maximum number of tool invocations per execution */
247
+ maxToolCalls?: number;
248
+ /** Tool approval configuration for human-in-the-loop workflows */
249
+ approval?: {
250
+ /** Tool names/patterns to require approval for, or true for all tools */
251
+ require: string[] | boolean;
252
+ /** Approval timeout in milliseconds (default: 300000 / 5 minutes) */
253
+ timeout?: number;
254
+ };
255
+ };
256
+ /** Artifact kinds for the Persona sidebar and dispatch payload */
257
+ type PersonaArtifactKind = "markdown" | "component";
206
258
  /**
207
259
  * Agent configuration for agent execution mode.
208
260
  * When provided in the widget config, enables agent loop execution instead of flow dispatch.
209
261
  */
262
+ type ArtifactConfigPayload = {
263
+ enabled: true;
264
+ types: PersonaArtifactKind[];
265
+ };
210
266
  type AgentConfig = {
211
267
  /** Agent display name */
212
268
  name: string;
213
- /** Model identifier (e.g., 'openai:gpt-4o-mini') */
269
+ /** Model identifier (e.g., 'openai:gpt-4o-mini', 'qwen/qwen3-8b') */
214
270
  model: string;
215
271
  /** System prompt for the agent */
216
272
  systemPrompt: string;
217
273
  /** Temperature for model responses */
218
274
  temperature?: number;
219
- /** Loop configuration for multi-iteration execution */
275
+ /** Tool configuration for the agent */
276
+ tools?: AgentToolsConfig;
277
+ /** Persona artifacts — sibling of tools (virtual agent / API parity) */
278
+ artifacts?: ArtifactConfigPayload;
279
+ /** Loop configuration for multi-turn execution */
220
280
  loopConfig?: AgentLoopConfig;
221
281
  };
222
282
  /**
@@ -251,10 +311,10 @@ type AgentExecutionState = {
251
311
  agentName: string;
252
312
  status: 'running' | 'complete' | 'error';
253
313
  currentIteration: number;
254
- maxIterations: number;
314
+ maxTurns: number;
255
315
  startedAt?: number;
256
316
  completedAt?: number;
257
- stopReason?: 'max_iterations' | 'complete' | 'error' | 'manual';
317
+ stopReason?: 'complete' | 'end_turn' | 'max_turns' | 'max_cost' | 'timeout' | 'error';
258
318
  };
259
319
  /**
260
320
  * Metadata attached to messages created during agent execution.
@@ -449,12 +509,144 @@ type AgentWidgetControllerEventMap = {
449
509
  decision: string;
450
510
  };
451
511
  };
512
+ /**
513
+ * Layout for the artifact split / drawer (CSS lengths unless noted).
514
+ *
515
+ * **Close behavior:** In desktop split mode, the artifact chrome `Close` control uses the same
516
+ * dismiss path as the mobile drawer (`onDismiss` on the artifact pane): the pane is hidden until
517
+ * new artifact content arrives or the host calls `showArtifacts()` on the widget handle.
518
+ */
519
+ type AgentWidgetArtifactsLayoutConfig = {
520
+ /** Flex gap between chat column and artifact pane. @default 0.5rem */
521
+ splitGap?: string;
522
+ /** Artifact column width in split mode. @default 40% */
523
+ paneWidth?: string;
524
+ /** Max width of artifact column. @default 28rem */
525
+ paneMaxWidth?: string;
526
+ /** Min width of artifact column (optional). */
527
+ paneMinWidth?: string;
528
+ /**
529
+ * When the floating panel is at most this wide (px), use in-panel drawer for artifacts
530
+ * instead of a side-by-side split (viewport can still be wide).
531
+ * @default 520
532
+ */
533
+ narrowHostMaxWidth?: number;
534
+ /**
535
+ * When true (default), widen the launcher panel while artifacts are visible and not user-dismissed.
536
+ * No-op for inline embed (`launcher.enabled === false`).
537
+ */
538
+ expandLauncherPanelWhenOpen?: boolean;
539
+ /** Panel width when expanded (launcher + artifacts visible). @default min(720px, calc(100vw - 24px)) */
540
+ expandedPanelWidth?: string;
541
+ /**
542
+ * When true, shows a drag handle between chat and artifact columns in desktop split mode only
543
+ * (hidden in narrow-host drawer and viewport ≤640px). Width is not persisted across reloads.
544
+ */
545
+ resizable?: boolean;
546
+ /** Min artifact column width while resizing. Only `px` strings are supported. @default 200px */
547
+ resizableMinWidth?: string;
548
+ /** Optional max artifact width cap while resizing (`px` only). Layout still bounds by chat min width. */
549
+ resizableMaxWidth?: string;
550
+ /**
551
+ * Visual treatment for the artifact column in split mode.
552
+ * - `'panel'` — bordered sidebar with left border, gap, and shadow (default).
553
+ * - `'seamless'` — flush with chat: no border or shadow, container background, zero gap.
554
+ * @default 'panel'
555
+ */
556
+ paneAppearance?: "panel" | "seamless";
557
+ /** Border radius on the artifact pane (CSS length). Works with any `paneAppearance`. */
558
+ paneBorderRadius?: string;
559
+ /** CSS `box-shadow` on the artifact pane. Set `"none"` to suppress the default shadow. */
560
+ paneShadow?: string;
561
+ /**
562
+ * Full `border` shorthand for the artifact `<aside>` (all sides). Overrides default pane borders.
563
+ * Example: `"1px solid #cccccc"`.
564
+ */
565
+ paneBorder?: string;
566
+ /**
567
+ * `border-left` shorthand only — typical for split view next to chat (with or without resizer).
568
+ * Ignored if `paneBorder` is set. Example: `"1px solid #cccccc"`.
569
+ */
570
+ paneBorderLeft?: string;
571
+ /**
572
+ * Desktop split only (not narrow-host drawer / not ≤640px): square the **main chat card’s**
573
+ * top-right and bottom-right radii, and round the **artifact pane’s** top-right and bottom-right
574
+ * to match `persona-rounded-2xl` (`--persona-radius-lg`) so the two columns read as one shell.
575
+ */
576
+ unifiedSplitChrome?: boolean;
577
+ /**
578
+ * When `unifiedSplitChrome` is true, outer-right corner radius on the artifact column (CSS length).
579
+ * @default matches theme large radius (`--persona-radius-lg`)
580
+ */
581
+ unifiedSplitOuterRadius?: string;
582
+ /**
583
+ * Background color for the artifact column (CSS color). Sets `--persona-artifact-pane-bg` on the widget root.
584
+ */
585
+ paneBackground?: string;
586
+ /**
587
+ * Horizontal padding for artifact toolbar and content (CSS length), e.g. `24px`.
588
+ */
589
+ panePadding?: string;
590
+ /**
591
+ * Toolbar layout preset.
592
+ * - `default` — "Artifacts" title, horizontal tabs, text close.
593
+ * - `document` — view/source toggle, document title, copy / refresh / close; tab strip hidden when only one artifact.
594
+ * @default 'default'
595
+ */
596
+ toolbarPreset?: "default" | "document";
597
+ /**
598
+ * When `toolbarPreset` is `document`, show a visible "Copy" label next to the copy icon.
599
+ */
600
+ documentToolbarShowCopyLabel?: boolean;
601
+ /**
602
+ * When `toolbarPreset` is `document`, show a small chevron after the copy control (e.g. menu affordance).
603
+ */
604
+ documentToolbarShowCopyChevron?: boolean;
605
+ /** Document toolbar icon buttons (view, code, copy, refresh, close) — CSS color. Sets `--persona-artifact-doc-toolbar-icon-color` on the widget root. */
606
+ documentToolbarIconColor?: string;
607
+ /** Active view/source toggle background. Sets `--persona-artifact-doc-toggle-active-bg`. */
608
+ documentToolbarToggleActiveBackground?: string;
609
+ /** Active view/source toggle border color. Sets `--persona-artifact-doc-toggle-active-border`. */
610
+ documentToolbarToggleActiveBorderColor?: string;
611
+ /**
612
+ * Invoked when the document toolbar Refresh control is used (before the pane re-renders).
613
+ * Use to replay `connectStream`, refetch, etc.
614
+ */
615
+ onDocumentToolbarRefresh?: () => void | Promise<void>;
616
+ /**
617
+ * Optional copy dropdown entries (shown when `documentToolbarShowCopyChevron` is true and this array is non-empty).
618
+ * The main Copy control still performs default copy unless `onDocumentToolbarCopyMenuSelect` handles everything.
619
+ */
620
+ documentToolbarCopyMenuItems?: Array<{
621
+ id: string;
622
+ label: string;
623
+ }>;
624
+ /**
625
+ * When set, invoked for the chevron menu (and can override default copy per `actionId`).
626
+ */
627
+ onDocumentToolbarCopyMenuSelect?: (payload: {
628
+ actionId: string;
629
+ artifactId: string | null;
630
+ markdown: string;
631
+ jsonPayload: string;
632
+ }) => void | Promise<void>;
633
+ };
634
+ type AgentWidgetArtifactsFeature = {
635
+ /** When true, Persona shows the artifact pane and handles artifact_* SSE events */
636
+ enabled?: boolean;
637
+ /** If set, artifact events for other types are ignored */
638
+ allowedTypes?: PersonaArtifactKind[];
639
+ /** Split / drawer dimensions and launcher widen behavior */
640
+ layout?: AgentWidgetArtifactsLayoutConfig;
641
+ };
452
642
  type AgentWidgetFeatureFlags = {
453
643
  showReasoning?: boolean;
454
644
  showToolCalls?: boolean;
455
645
  showEventStreamToggle?: boolean;
456
646
  /** Configuration for the Event Stream inspector view */
457
647
  eventStream?: EventStreamConfig;
648
+ /** Optional artifact sidebar (split pane / mobile drawer) */
649
+ artifacts?: AgentWidgetArtifactsFeature;
458
650
  };
459
651
  type SSEEventRecord = {
460
652
  id: string;
@@ -607,7 +799,7 @@ type AgentWidgetTheme = {
607
799
  /**
608
800
  * Border style for the chat panel container.
609
801
  * @example "1px solid #e5e7eb" | "none"
610
- * @default "1px solid var(--tvw-cw-border)"
802
+ * @default "1px solid var(--persona-border)"
611
803
  */
612
804
  panelBorder?: string;
613
805
  /**
@@ -623,6 +815,23 @@ type AgentWidgetTheme = {
623
815
  */
624
816
  panelBorderRadius?: string;
625
817
  };
818
+ type AgentWidgetDockConfig = {
819
+ /**
820
+ * Side of the wrapped container where the docked panel should render.
821
+ * @default "right"
822
+ */
823
+ side?: "left" | "right";
824
+ /**
825
+ * Expanded width of the docked panel.
826
+ * @default "420px"
827
+ */
828
+ width?: string;
829
+ /**
830
+ * Width of the collapsed launcher rail when the docked panel is closed.
831
+ * @default "72px"
832
+ */
833
+ collapsedWidth?: string;
834
+ };
626
835
  type AgentWidgetLauncherConfig = {
627
836
  enabled?: boolean;
628
837
  title?: string;
@@ -633,6 +842,18 @@ type AgentWidgetLauncherConfig = {
633
842
  agentIconName?: string;
634
843
  agentIconHidden?: boolean;
635
844
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
845
+ /**
846
+ * Controls how the launcher panel is mounted relative to the host page.
847
+ * - "floating": default floating launcher / panel behavior
848
+ * - "docked": wraps the target container and renders as a sibling dock
849
+ *
850
+ * @default "floating"
851
+ */
852
+ mountMode?: "floating" | "docked";
853
+ /**
854
+ * Layout configuration for docked mode.
855
+ */
856
+ dock?: AgentWidgetDockConfig;
636
857
  autoExpand?: boolean;
637
858
  width?: string;
638
859
  /**
@@ -672,6 +893,21 @@ type AgentWidgetLauncherConfig = {
672
893
  * @default 0
673
894
  */
674
895
  heightOffset?: number;
896
+ /**
897
+ * When true, the widget panel expands to fill the full viewport on mobile devices.
898
+ * Removes border-radius, margins, and shadows for a native app-like experience.
899
+ * Applies when viewport width is at or below `mobileBreakpoint`.
900
+ *
901
+ * @default true
902
+ */
903
+ mobileFullscreen?: boolean;
904
+ /**
905
+ * Viewport width (in pixels) at or below which the widget enters mobile fullscreen mode.
906
+ * Only applies when `mobileFullscreen` is true.
907
+ *
908
+ * @default 640
909
+ */
910
+ mobileBreakpoint?: number;
675
911
  callToActionIconText?: string;
676
912
  callToActionIconName?: string;
677
913
  callToActionIconColor?: string;
@@ -724,6 +960,15 @@ type AgentWidgetSendButtonConfig = {
724
960
  textColor?: string;
725
961
  size?: string;
726
962
  };
963
+ /** Optional composer UI state for custom `renderComposer` implementations. */
964
+ type AgentWidgetComposerConfig = {
965
+ models?: Array<{
966
+ id: string;
967
+ label: string;
968
+ }>;
969
+ /** Current selection; host or plugin may update this at runtime. */
970
+ selectedModelId?: string;
971
+ };
727
972
  type AgentWidgetClearChatConfig = {
728
973
  enabled?: boolean;
729
974
  placement?: "inline" | "top-right";
@@ -1123,6 +1368,8 @@ type ClientChatRequest = {
1123
1368
  /** ID for the expected assistant response message */
1124
1369
  assistantMessageId?: string;
1125
1370
  metadata?: Record<string, unknown>;
1371
+ /** Per-turn inputs for Runtype prompt templates (e.g. {{page_url}}). */
1372
+ inputs?: Record<string, unknown>;
1126
1373
  context?: Record<string, unknown>;
1127
1374
  };
1128
1375
  /**
@@ -1142,6 +1389,14 @@ type ClientFeedbackRequest = {
1142
1389
  /** Optional comment for any feedback type */
1143
1390
  comment?: string;
1144
1391
  };
1392
+ /** Icon button in the header title row (minimal layout). */
1393
+ type AgentWidgetHeaderTrailingAction = {
1394
+ id: string;
1395
+ /** Lucide icon name, e.g. `chevron-down` */
1396
+ icon?: string;
1397
+ label?: string;
1398
+ ariaLabel?: string;
1399
+ };
1145
1400
  /**
1146
1401
  * Context provided to header render functions
1147
1402
  */
@@ -1149,6 +1404,10 @@ type HeaderRenderContext = {
1149
1404
  config: AgentWidgetConfig;
1150
1405
  onClose?: () => void;
1151
1406
  onClearChat?: () => void;
1407
+ /** Built from `layout.header.trailingActions` for custom `render` implementations. */
1408
+ trailingActions?: AgentWidgetHeaderTrailingAction[];
1409
+ /** Fired when a built-in trailing action is activated (same as `layout.header.onAction`). */
1410
+ onAction?: (actionId: string) => void;
1152
1411
  };
1153
1412
  /**
1154
1413
  * Context provided to message render functions
@@ -1171,12 +1430,11 @@ type SlotRenderContext = {
1171
1430
  */
1172
1431
  type AgentWidgetHeaderLayoutConfig = {
1173
1432
  /**
1174
- * Layout preset: "default" | "minimal" | "expanded"
1433
+ * Layout preset: "default" | "minimal"
1175
1434
  * - default: Standard layout with icon, title, subtitle, and buttons
1176
1435
  * - minimal: Simplified layout with just title and close button
1177
- * - expanded: Full branding area with additional content space
1178
1436
  */
1179
- layout?: "default" | "minimal" | "expanded";
1437
+ layout?: "default" | "minimal";
1180
1438
  /** Show/hide the header icon */
1181
1439
  showIcon?: boolean;
1182
1440
  /** Show/hide the title */
@@ -1192,6 +1450,12 @@ type AgentWidgetHeaderLayoutConfig = {
1192
1450
  * When provided, replaces the entire header with custom content
1193
1451
  */
1194
1452
  render?: (context: HeaderRenderContext) => HTMLElement;
1453
+ /**
1454
+ * Shown after the title in `minimal` header layout (e.g. chevron menu affordance).
1455
+ */
1456
+ trailingActions?: AgentWidgetHeaderTrailingAction[];
1457
+ /** Called when a `trailingActions` button is clicked. */
1458
+ onAction?: (actionId: string) => void;
1195
1459
  };
1196
1460
  /**
1197
1461
  * Avatar configuration for message bubbles
@@ -1299,6 +1563,12 @@ type AgentWidgetLayoutConfig = {
1299
1563
  * @default true
1300
1564
  */
1301
1565
  showFooter?: boolean;
1566
+ /**
1567
+ * Max width for the content area (messages + composer).
1568
+ * Applied with `margin: 0 auto` for centering.
1569
+ * Accepts any CSS width value (e.g. "90ch", "720px", "80%").
1570
+ */
1571
+ contentMaxWidth?: string;
1302
1572
  };
1303
1573
  /**
1304
1574
  * Token types for marked renderer methods
@@ -1827,7 +2097,7 @@ type AgentWidgetConfig = {
1827
2097
  * name: 'Assistant',
1828
2098
  * model: 'openai:gpt-4o-mini',
1829
2099
  * systemPrompt: 'You are a helpful assistant.',
1830
- * loopConfig: { maxIterations: 3, stopCondition: 'auto' }
2100
+ * loopConfig: { maxTurns: 5 }
1831
2101
  * }
1832
2102
  * }
1833
2103
  * ```
@@ -1943,6 +2213,11 @@ type AgentWidgetConfig = {
1943
2213
  welcomeSubtitle?: string;
1944
2214
  inputPlaceholder?: string;
1945
2215
  sendButtonLabel?: string;
2216
+ /**
2217
+ * When false, the welcome / intro card is not shown above the message list.
2218
+ * @default true
2219
+ */
2220
+ showWelcomeCard?: boolean;
1946
2221
  };
1947
2222
  theme?: AgentWidgetTheme;
1948
2223
  /**
@@ -2094,6 +2369,12 @@ type AgentWidgetConfig = {
2094
2369
  * @default true
2095
2370
  */
2096
2371
  enableComponentStreaming?: boolean;
2372
+ /**
2373
+ * When false, JSON component directives render without the default bubble chrome
2374
+ * (surface background, border, extra padding). Use for wide custom cards in the transcript.
2375
+ * @default true
2376
+ */
2377
+ wrapComponentDirectiveInBubble?: boolean;
2097
2378
  /**
2098
2379
  * Custom stream parser for extracting text from streaming structured responses.
2099
2380
  * Handles incremental parsing of JSON, XML, or other formats.
@@ -2292,6 +2573,11 @@ type AgentWidgetConfig = {
2292
2573
  * ```
2293
2574
  */
2294
2575
  attachments?: AgentWidgetAttachmentsConfig;
2576
+ /**
2577
+ * Composer extras for custom `renderComposer` plugins (model picker, etc.).
2578
+ * `selectedModelId` may be updated at runtime by the host.
2579
+ */
2580
+ composer?: AgentWidgetComposerConfig;
2295
2581
  /**
2296
2582
  * Persist widget state (open/closed, voice mode) across page navigations.
2297
2583
  * When `true`, uses default settings with sessionStorage.
@@ -2545,6 +2831,28 @@ type InjectUserMessageOptions = Omit<InjectMessageOptions, "role">;
2545
2831
  * Role defaults to 'system'.
2546
2832
  */
2547
2833
  type InjectSystemMessageOptions = Omit<InjectMessageOptions, "role">;
2834
+ type PersonaArtifactRecord = {
2835
+ id: string;
2836
+ artifactType: PersonaArtifactKind;
2837
+ title?: string;
2838
+ status: "streaming" | "complete";
2839
+ markdown?: string;
2840
+ component?: string;
2841
+ props?: Record<string, unknown>;
2842
+ };
2843
+ /** Programmatic artifact upsert (controller / window API) */
2844
+ type PersonaArtifactManualUpsert = {
2845
+ id?: string;
2846
+ artifactType: "markdown";
2847
+ title?: string;
2848
+ content: string;
2849
+ } | {
2850
+ id?: string;
2851
+ artifactType: "component";
2852
+ title?: string;
2853
+ component: string;
2854
+ props?: Record<string, unknown>;
2855
+ };
2548
2856
  type AgentWidgetEvent = {
2549
2857
  type: "message";
2550
2858
  message: AgentWidgetMessage;
@@ -2554,6 +2862,24 @@ type AgentWidgetEvent = {
2554
2862
  } | {
2555
2863
  type: "error";
2556
2864
  error: Error;
2865
+ } | {
2866
+ type: "artifact_start";
2867
+ id: string;
2868
+ artifactType: PersonaArtifactKind;
2869
+ title?: string;
2870
+ component?: string;
2871
+ } | {
2872
+ type: "artifact_delta";
2873
+ id: string;
2874
+ artDelta: string;
2875
+ } | {
2876
+ type: "artifact_update";
2877
+ id: string;
2878
+ props: Record<string, unknown>;
2879
+ component?: string;
2880
+ } | {
2881
+ type: "artifact_complete";
2882
+ id: string;
2557
2883
  };
2558
2884
  type AgentWidgetInitOptions = {
2559
2885
  target: string | HTMLElement;
@@ -2731,6 +3057,10 @@ type SessionCallbacks = {
2731
3057
  onStreamingChanged: (streaming: boolean) => void;
2732
3058
  onError?: (error: Error) => void;
2733
3059
  onVoiceStatusChanged?: (status: VoiceStatus) => void;
3060
+ onArtifactsState?: (state: {
3061
+ artifacts: PersonaArtifactRecord[];
3062
+ selectedId: string | null;
3063
+ }) => void;
2734
3064
  };
2735
3065
  declare class AgentWidgetSession {
2736
3066
  private config;
@@ -2743,6 +3073,8 @@ declare class AgentWidgetSession {
2743
3073
  private sequenceCounter;
2744
3074
  private clientSession;
2745
3075
  private agentExecution;
3076
+ private artifacts;
3077
+ private selectedArtifactId;
2746
3078
  private voiceProvider;
2747
3079
  private voiceActive;
2748
3080
  private voiceStatus;
@@ -2972,6 +3304,15 @@ declare class AgentWidgetSession {
2972
3304
  resolveApproval(approval: AgentWidgetApproval, decision: 'approved' | 'denied'): Promise<void>;
2973
3305
  cancel(): void;
2974
3306
  clearMessages(): void;
3307
+ getArtifacts(): PersonaArtifactRecord[];
3308
+ getArtifactById(id: string): PersonaArtifactRecord | undefined;
3309
+ getSelectedArtifactId(): string | null;
3310
+ selectArtifact(id: string | null): void;
3311
+ clearArtifacts(): void;
3312
+ upsertArtifact(manual: PersonaArtifactManualUpsert): PersonaArtifactRecord;
3313
+ private clearArtifactState;
3314
+ private emitArtifactsState;
3315
+ private applyArtifactStreamEvent;
2975
3316
  hydrateMessages(messages: AgentWidgetMessage[]): void;
2976
3317
  private handleEvent;
2977
3318
  private setStatus;
@@ -3126,6 +3467,14 @@ type Controller = {
3126
3467
  hideEventStream: () => void;
3127
3468
  /** Returns current visibility state of the event stream panel */
3128
3469
  isEventStreamVisible: () => boolean;
3470
+ /** Show artifact sidebar (no-op if features.artifacts.enabled is false) */
3471
+ showArtifacts: () => void;
3472
+ /** Hide artifact sidebar */
3473
+ hideArtifacts: () => void;
3474
+ /** Upsert an artifact programmatically */
3475
+ upsertArtifact: (manual: PersonaArtifactManualUpsert) => PersonaArtifactRecord | null;
3476
+ selectArtifact: (id: string) => void;
3477
+ clearArtifacts: () => void;
3129
3478
  /**
3130
3479
  * Focus the chat input. Returns true if focus succeeded, false if panel is closed
3131
3480
  * (launcher mode) or textarea is unavailable.
@@ -3148,6 +3497,17 @@ type AgentWidgetInitHandle = AgentWidgetController & {
3148
3497
  };
3149
3498
  declare const initAgentWidget: (options: AgentWidgetInitOptions) => AgentWidgetInitHandle;
3150
3499
 
3500
+ type WidgetHostLayoutMode = "direct" | "docked";
3501
+ type WidgetHostLayout = {
3502
+ mode: WidgetHostLayoutMode;
3503
+ host: HTMLElement;
3504
+ shell: HTMLElement | null;
3505
+ syncWidgetState: (state: Pick<AgentWidgetStateSnapshot, "open" | "launcherEnabled">) => void;
3506
+ updateConfig: (config?: AgentWidgetConfig) => void;
3507
+ destroy: () => void;
3508
+ };
3509
+ declare const createWidgetHostLayout: (target: HTMLElement, config?: AgentWidgetConfig) => WidgetHostLayout;
3510
+
3151
3511
  declare const createLocalStorageAdapter: (key?: string) => AgentWidgetStorageAdapter;
3152
3512
 
3153
3513
  type ActionManagerProcessContext = {
@@ -3339,6 +3699,142 @@ declare function validateImageFile(file: File, acceptedTypes?: string[], maxSize
3339
3699
  error?: string;
3340
3700
  };
3341
3701
 
3702
+ /**
3703
+ * Enriched DOM context collection for providing richer page information to AI.
3704
+ *
3705
+ * Captures interactive elements, stable CSS selectors, ARIA roles, data attributes,
3706
+ * and visibility state — giving the LLM much better context than basic className/innerText.
3707
+ *
3708
+ * ## Modes
3709
+ *
3710
+ * - **structured** (default): collects candidates, scores them with optional {@link ParseRule}
3711
+ * hooks, then applies `maxElements`. Rich containers (e.g. product cards) can surface
3712
+ * before unrelated static noise.
3713
+ * - **simple**: legacy behavior — cap during traversal, interactive-first ordering, no rule
3714
+ * scoring or {@link EnrichedPageElement.formattedSummary}.
3715
+ */
3716
+ interface EnrichedPageElement {
3717
+ /** Stable CSS selector the LLM can use directly */
3718
+ selector: string;
3719
+ /** Lowercase tag name */
3720
+ tagName: string;
3721
+ /** Visible text content, trimmed */
3722
+ text: string;
3723
+ /** ARIA role or null */
3724
+ role: string | null;
3725
+ /** Interactivity classification */
3726
+ interactivity: "clickable" | "input" | "navigable" | "static";
3727
+ /** Relevant attributes: id, data-*, href, aria-label, type, value, name */
3728
+ attributes: Record<string, string>;
3729
+ /**
3730
+ * When set (structured mode + matching rule), {@link formatEnrichedContext} prefers this
3731
+ * markdown-like line instead of raw `text`.
3732
+ */
3733
+ formattedSummary?: string;
3734
+ }
3735
+ /** How DOM context is collected and formatted. */
3736
+ type DomContextMode = "simple" | "structured";
3737
+ /**
3738
+ * Options that control collection limits, visibility, and mode.
3739
+ * Prefer nesting these under {@link DomContextOptions.options}; top-level fields remain
3740
+ * supported for backward compatibility.
3741
+ */
3742
+ interface ParseOptionsConfig {
3743
+ /**
3744
+ * `structured` (default): score candidates with rules, then apply `maxElements`.
3745
+ * `simple`: legacy traversal cap and ordering only — rules are ignored (with a warning
3746
+ * if `rules` was passed on {@link DomContextOptions}).
3747
+ */
3748
+ mode?: DomContextMode;
3749
+ /** Maximum number of elements to return. Default: 80 */
3750
+ maxElements?: number;
3751
+ /** CSS selector for elements to exclude (e.g. the widget host). Default: '.persona-host' */
3752
+ excludeSelector?: string;
3753
+ /** Maximum text length per element. Default: 200 */
3754
+ maxTextLength?: number;
3755
+ /** Only include visible elements. Default: true */
3756
+ visibleOnly?: boolean;
3757
+ /** Root element to walk. Default: document.body */
3758
+ root?: HTMLElement;
3759
+ /**
3760
+ * Maximum candidates gathered before scoring (structured mode only).
3761
+ * Default: `max(500, maxElements * 10)`.
3762
+ */
3763
+ maxCandidates?: number;
3764
+ }
3765
+ interface RuleScoringContext {
3766
+ doc: Document;
3767
+ maxTextLength: number;
3768
+ }
3769
+ /**
3770
+ * Extensible rule for structured DOM context: scoring, descendant suppression, and
3771
+ * optional formatted output.
3772
+ */
3773
+ interface ParseRule {
3774
+ /** Stable id for debugging and tests */
3775
+ id: string;
3776
+ /**
3777
+ * Score bonus when this rule applies to the element (0 when it does not).
3778
+ * Higher scores are kept first when applying `maxElements`.
3779
+ */
3780
+ scoreElement(el: HTMLElement, enriched: EnrichedPageElement, ctx: RuleScoringContext): number;
3781
+ /**
3782
+ * When `owner` is kept in the final set and matched this rule for formatting,
3783
+ * return true to drop `descendant` (redundant price text, CTAs summarized on the card, etc.).
3784
+ */
3785
+ shouldSuppressDescendant?(owner: HTMLElement, descendant: HTMLElement, descendantEnriched: EnrichedPageElement): boolean;
3786
+ /**
3787
+ * Markdown-like summary for the LLM. Only used when `scoreElement` &gt; 0 for this rule.
3788
+ */
3789
+ formatSummary?(el: HTMLElement, enriched: EnrichedPageElement, ctx: RuleScoringContext): string | null;
3790
+ }
3791
+ interface DomContextOptions {
3792
+ /** Nested parse options (mode, limits, root). Merged with legacy top-level fields. */
3793
+ options?: ParseOptionsConfig;
3794
+ /** Custom rules for structured mode. Default: {@link defaultParseRules} */
3795
+ rules?: ParseRule[];
3796
+ /** @inheritdoc ParseOptionsConfig.maxElements */
3797
+ maxElements?: number;
3798
+ /** @inheritdoc ParseOptionsConfig.excludeSelector */
3799
+ excludeSelector?: string;
3800
+ /** @inheritdoc ParseOptionsConfig.maxTextLength */
3801
+ maxTextLength?: number;
3802
+ /** @inheritdoc ParseOptionsConfig.visibleOnly */
3803
+ visibleOnly?: boolean;
3804
+ /** @inheritdoc ParseOptionsConfig.root */
3805
+ root?: HTMLElement;
3806
+ }
3807
+ interface FormatEnrichedContextOptions {
3808
+ /** When `simple`, ignore {@link EnrichedPageElement.formattedSummary}. Default: structured */
3809
+ mode?: DomContextMode;
3810
+ }
3811
+ /** Default structured rules: commerce-style cards and generic search/result rows. */
3812
+ declare const defaultParseRules: ParseRule[];
3813
+ /**
3814
+ * Generate a stable, unique CSS selector for an element.
3815
+ * Priority: #id → [data-testid]/[data-product] → tag.classes with :nth-of-type()
3816
+ */
3817
+ declare function generateStableSelector(el: HTMLElement): string;
3818
+ /**
3819
+ * Collect enriched page context from the DOM.
3820
+ *
3821
+ * - **Default (structured):** walks up to `maxCandidates` nodes, scores with
3822
+ * {@link defaultParseRules} (or `rules`), suppresses redundant descendants when a
3823
+ * formatting rule matches, then keeps the top `maxElements` by score (DOM order tie-break).
3824
+ * - **simple:** legacy path — stops once `maxElements` nodes are collected during traversal
3825
+ * and sorts interactive before static.
3826
+ *
3827
+ * Pass `options: { mode: "simple" }` to disable rules. If `mode` is `simple` and `rules` is
3828
+ * non-empty, rules are ignored and a console warning is emitted.
3829
+ */
3830
+ declare function collectEnrichedPageContext(options?: DomContextOptions): EnrichedPageElement[];
3831
+ /**
3832
+ * Format enriched page elements as a structured string for LLM consumption.
3833
+ * When `mode` is structured (default) and elements include {@link EnrichedPageElement.formattedSummary},
3834
+ * those render under **Structured summaries** before the usual interactivity groups.
3835
+ */
3836
+ declare function formatEnrichedContext(elements: EnrichedPageElement[], options?: FormatEnrichedContextOptions): string;
3837
+
3342
3838
  /**
3343
3839
  * Attachment Manager
3344
3840
  *
@@ -3447,6 +3943,9 @@ declare function generateUserMessageId(): string;
3447
3943
  */
3448
3944
  declare function generateAssistantMessageId(): string;
3449
3945
 
3946
+ declare const isDockedMountMode: (config?: AgentWidgetConfig) => boolean;
3947
+ declare const resolveDockConfig: (config?: AgentWidgetConfig) => Required<AgentWidgetDockConfig>;
3948
+
3450
3949
  type CodeFormat = "esm" | "script-installer" | "script-manual" | "script-advanced" | "react-component" | "react-advanced";
3451
3950
  /**
3452
3951
  * Hook code templates for code generation.
@@ -3615,6 +4114,538 @@ declare class PluginRegistry {
3615
4114
  }
3616
4115
  declare const pluginRegistry: PluginRegistry;
3617
4116
 
4117
+ type TokenType = 'color' | 'spacing' | 'typography' | 'shadow' | 'border' | 'radius';
4118
+ type TokenReference<_T extends TokenType = TokenType> = string;
4119
+ interface ColorShade {
4120
+ 50?: string;
4121
+ 100?: string;
4122
+ 200?: string;
4123
+ 300?: string;
4124
+ 400?: string;
4125
+ 500?: string;
4126
+ 600?: string;
4127
+ 700?: string;
4128
+ 800?: string;
4129
+ 900?: string;
4130
+ 950?: string;
4131
+ [key: string]: string | undefined;
4132
+ }
4133
+ interface ColorPalette {
4134
+ gray: ColorShade;
4135
+ primary: ColorShade;
4136
+ secondary: ColorShade;
4137
+ accent: ColorShade;
4138
+ success: ColorShade;
4139
+ warning: ColorShade;
4140
+ error: ColorShade;
4141
+ [key: string]: ColorShade;
4142
+ }
4143
+ interface SpacingScale {
4144
+ 0: string;
4145
+ 1: string;
4146
+ 2: string;
4147
+ 3: string;
4148
+ 4: string;
4149
+ 5: string;
4150
+ 6: string;
4151
+ 8: string;
4152
+ 10: string;
4153
+ 12: string;
4154
+ 16: string;
4155
+ 20: string;
4156
+ 24: string;
4157
+ 32: string;
4158
+ 40: string;
4159
+ 48: string;
4160
+ 56: string;
4161
+ 64: string;
4162
+ [key: string]: string;
4163
+ }
4164
+ interface ShadowScale {
4165
+ none: string;
4166
+ sm: string;
4167
+ md: string;
4168
+ lg: string;
4169
+ xl: string;
4170
+ '2xl': string;
4171
+ [key: string]: string;
4172
+ }
4173
+ interface BorderScale {
4174
+ none: string;
4175
+ sm: string;
4176
+ md: string;
4177
+ lg: string;
4178
+ [key: string]: string;
4179
+ }
4180
+ interface RadiusScale {
4181
+ none: string;
4182
+ sm: string;
4183
+ md: string;
4184
+ lg: string;
4185
+ xl: string;
4186
+ full: string;
4187
+ [key: string]: string;
4188
+ }
4189
+ interface TypographyScale {
4190
+ fontFamily: {
4191
+ sans: string;
4192
+ serif: string;
4193
+ mono: string;
4194
+ };
4195
+ fontSize: {
4196
+ xs: string;
4197
+ sm: string;
4198
+ base: string;
4199
+ lg: string;
4200
+ xl: string;
4201
+ '2xl': string;
4202
+ '3xl': string;
4203
+ '4xl': string;
4204
+ };
4205
+ fontWeight: {
4206
+ normal: string;
4207
+ medium: string;
4208
+ semibold: string;
4209
+ bold: string;
4210
+ };
4211
+ lineHeight: {
4212
+ tight: string;
4213
+ normal: string;
4214
+ relaxed: string;
4215
+ };
4216
+ }
4217
+ interface SemanticColors {
4218
+ primary: TokenReference<'color'>;
4219
+ secondary: TokenReference<'color'>;
4220
+ accent: TokenReference<'color'>;
4221
+ surface: TokenReference<'color'>;
4222
+ background: TokenReference<'color'>;
4223
+ container: TokenReference<'color'>;
4224
+ text: TokenReference<'color'>;
4225
+ textMuted: TokenReference<'color'>;
4226
+ textInverse: TokenReference<'color'>;
4227
+ border: TokenReference<'color'>;
4228
+ divider: TokenReference<'color'>;
4229
+ interactive: {
4230
+ default: TokenReference<'color'>;
4231
+ hover: TokenReference<'color'>;
4232
+ focus: TokenReference<'color'>;
4233
+ active: TokenReference<'color'>;
4234
+ disabled: TokenReference<'color'>;
4235
+ };
4236
+ feedback: {
4237
+ success: TokenReference<'color'>;
4238
+ warning: TokenReference<'color'>;
4239
+ error: TokenReference<'color'>;
4240
+ info: TokenReference<'color'>;
4241
+ };
4242
+ }
4243
+ interface SemanticSpacing {
4244
+ xs: TokenReference<'spacing'>;
4245
+ sm: TokenReference<'spacing'>;
4246
+ md: TokenReference<'spacing'>;
4247
+ lg: TokenReference<'spacing'>;
4248
+ xl: TokenReference<'spacing'>;
4249
+ '2xl': TokenReference<'spacing'>;
4250
+ }
4251
+ interface SemanticTypography {
4252
+ fontFamily: TokenReference<'typography'>;
4253
+ fontSize: TokenReference<'typography'>;
4254
+ fontWeight: TokenReference<'typography'>;
4255
+ lineHeight: TokenReference<'typography'>;
4256
+ }
4257
+ interface SemanticTokens {
4258
+ colors: SemanticColors;
4259
+ spacing: SemanticSpacing;
4260
+ typography: SemanticTypography;
4261
+ }
4262
+ interface ComponentTokenSet {
4263
+ background?: TokenReference<'color'>;
4264
+ foreground?: TokenReference<'color'>;
4265
+ border?: TokenReference<'color'>;
4266
+ borderRadius?: TokenReference<'radius'>;
4267
+ padding?: TokenReference<'spacing'>;
4268
+ margin?: TokenReference<'spacing'>;
4269
+ shadow?: TokenReference<'shadow'>;
4270
+ opacity?: number;
4271
+ }
4272
+ interface ButtonTokens extends ComponentTokenSet {
4273
+ primary: ComponentTokenSet;
4274
+ secondary: ComponentTokenSet;
4275
+ ghost: ComponentTokenSet;
4276
+ }
4277
+ interface InputTokens extends ComponentTokenSet {
4278
+ background: TokenReference<'color'>;
4279
+ placeholder: TokenReference<'color'>;
4280
+ focus: {
4281
+ border: TokenReference<'color'>;
4282
+ ring: TokenReference<'color'>;
4283
+ };
4284
+ }
4285
+ interface LauncherTokens extends ComponentTokenSet {
4286
+ size: string;
4287
+ iconSize: string;
4288
+ shadow: TokenReference<'shadow'>;
4289
+ }
4290
+ interface PanelTokens extends ComponentTokenSet {
4291
+ width: string;
4292
+ maxWidth: string;
4293
+ height: string;
4294
+ maxHeight: string;
4295
+ }
4296
+ interface HeaderTokens extends ComponentTokenSet {
4297
+ background: TokenReference<'color'>;
4298
+ border: TokenReference<'color'>;
4299
+ borderRadius: TokenReference<'radius'>;
4300
+ }
4301
+ interface MessageTokens {
4302
+ user: {
4303
+ background: TokenReference<'color'>;
4304
+ text: TokenReference<'color'>;
4305
+ borderRadius: TokenReference<'radius'>;
4306
+ };
4307
+ assistant: {
4308
+ background: TokenReference<'color'>;
4309
+ text: TokenReference<'color'>;
4310
+ borderRadius: TokenReference<'radius'>;
4311
+ /** Assistant bubble border color (CSS color). */
4312
+ border?: TokenReference<'color'>;
4313
+ /** Assistant bubble box-shadow (token ref or raw CSS, e.g. `none`). */
4314
+ shadow?: string;
4315
+ };
4316
+ }
4317
+ interface MarkdownTokens {
4318
+ inlineCode: {
4319
+ background: TokenReference<'color'>;
4320
+ foreground: TokenReference<'color'>;
4321
+ };
4322
+ /** Foreground for `<a>` in rendered markdown (assistant bubbles + artifact pane). */
4323
+ link?: {
4324
+ foreground: TokenReference<'color'>;
4325
+ };
4326
+ /**
4327
+ * Body font for rendered markdown blocks (artifact pane + markdown bubbles).
4328
+ * Use a raw CSS `font-family` value, e.g. `Georgia, serif`.
4329
+ */
4330
+ prose?: {
4331
+ fontFamily?: string;
4332
+ };
4333
+ /** Optional heading scale overrides (raw CSS or resolvable token paths). */
4334
+ heading?: {
4335
+ h1?: {
4336
+ fontSize?: string;
4337
+ fontWeight?: string;
4338
+ };
4339
+ h2?: {
4340
+ fontSize?: string;
4341
+ fontWeight?: string;
4342
+ };
4343
+ };
4344
+ }
4345
+ interface VoiceTokens {
4346
+ recording: {
4347
+ indicator: TokenReference<'color'>;
4348
+ background: TokenReference<'color'>;
4349
+ border: TokenReference<'color'>;
4350
+ };
4351
+ processing: {
4352
+ icon: TokenReference<'color'>;
4353
+ background: TokenReference<'color'>;
4354
+ };
4355
+ speaking: {
4356
+ icon: TokenReference<'color'>;
4357
+ };
4358
+ }
4359
+ interface ApprovalTokens {
4360
+ requested: {
4361
+ background: TokenReference<'color'>;
4362
+ border: TokenReference<'color'>;
4363
+ text: TokenReference<'color'>;
4364
+ };
4365
+ approve: ComponentTokenSet;
4366
+ deny: ComponentTokenSet;
4367
+ }
4368
+ interface AttachmentTokens {
4369
+ image: {
4370
+ background: TokenReference<'color'>;
4371
+ border: TokenReference<'color'>;
4372
+ };
4373
+ }
4374
+ interface ComponentTokens {
4375
+ button: ButtonTokens;
4376
+ input: InputTokens;
4377
+ launcher: LauncherTokens;
4378
+ panel: PanelTokens;
4379
+ header: HeaderTokens;
4380
+ message: MessageTokens;
4381
+ /** Markdown surfaces (chat + artifact pane). */
4382
+ markdown?: MarkdownTokens;
4383
+ voice: VoiceTokens;
4384
+ approval: ApprovalTokens;
4385
+ attachment: AttachmentTokens;
4386
+ }
4387
+ interface PaletteExtras {
4388
+ transitions?: Record<string, string>;
4389
+ easings?: Record<string, string>;
4390
+ }
4391
+ interface PersonaThemeBase {
4392
+ palette: {
4393
+ colors: ColorPalette;
4394
+ spacing: SpacingScale;
4395
+ typography: TypographyScale;
4396
+ shadows: ShadowScale;
4397
+ borders: BorderScale;
4398
+ radius: RadiusScale;
4399
+ } & PaletteExtras;
4400
+ }
4401
+ interface PersonaThemeSemantic {
4402
+ semantic: SemanticTokens;
4403
+ }
4404
+ interface PersonaThemeComponents {
4405
+ components: ComponentTokens;
4406
+ }
4407
+ type PersonaTheme = PersonaThemeBase & PersonaThemeSemantic & PersonaThemeComponents;
4408
+ interface ResolvedToken {
4409
+ path: string;
4410
+ value: string;
4411
+ type: TokenType;
4412
+ }
4413
+ interface ThemeValidationError {
4414
+ path: string;
4415
+ message: string;
4416
+ severity: 'error' | 'warning';
4417
+ }
4418
+ interface ThemeValidationResult {
4419
+ valid: boolean;
4420
+ errors: ThemeValidationError[];
4421
+ warnings: ThemeValidationError[];
4422
+ }
4423
+ interface PersonaThemePlugin {
4424
+ name: string;
4425
+ version: string;
4426
+ transform(theme: PersonaTheme): PersonaTheme;
4427
+ cssVariables?: Record<string, string>;
4428
+ afterResolve?(resolved: Record<string, string>): Record<string, string>;
4429
+ }
4430
+ interface CreateThemeOptions {
4431
+ plugins?: PersonaThemePlugin[];
4432
+ validate?: boolean;
4433
+ extend?: PersonaTheme;
4434
+ }
4435
+
4436
+ declare const DEFAULT_PALETTE: {
4437
+ colors: {
4438
+ primary: {
4439
+ 50: string;
4440
+ 100: string;
4441
+ 200: string;
4442
+ 300: string;
4443
+ 400: string;
4444
+ 500: string;
4445
+ 600: string;
4446
+ 700: string;
4447
+ 800: string;
4448
+ 900: string;
4449
+ 950: string;
4450
+ };
4451
+ secondary: {
4452
+ 50: string;
4453
+ 100: string;
4454
+ 200: string;
4455
+ 300: string;
4456
+ 400: string;
4457
+ 500: string;
4458
+ 600: string;
4459
+ 700: string;
4460
+ 800: string;
4461
+ 900: string;
4462
+ 950: string;
4463
+ };
4464
+ accent: {
4465
+ 50: string;
4466
+ 100: string;
4467
+ 200: string;
4468
+ 300: string;
4469
+ 400: string;
4470
+ 500: string;
4471
+ 600: string;
4472
+ 700: string;
4473
+ 800: string;
4474
+ 900: string;
4475
+ 950: string;
4476
+ };
4477
+ gray: {
4478
+ 50: string;
4479
+ 100: string;
4480
+ 200: string;
4481
+ 300: string;
4482
+ 400: string;
4483
+ 500: string;
4484
+ 600: string;
4485
+ 700: string;
4486
+ 800: string;
4487
+ 900: string;
4488
+ 950: string;
4489
+ };
4490
+ success: {
4491
+ 50: string;
4492
+ 100: string;
4493
+ 200: string;
4494
+ 300: string;
4495
+ 400: string;
4496
+ 500: string;
4497
+ 600: string;
4498
+ 700: string;
4499
+ 800: string;
4500
+ 900: string;
4501
+ };
4502
+ warning: {
4503
+ 50: string;
4504
+ 100: string;
4505
+ 200: string;
4506
+ 300: string;
4507
+ 400: string;
4508
+ 500: string;
4509
+ 600: string;
4510
+ 700: string;
4511
+ 800: string;
4512
+ 900: string;
4513
+ };
4514
+ error: {
4515
+ 50: string;
4516
+ 100: string;
4517
+ 200: string;
4518
+ 300: string;
4519
+ 400: string;
4520
+ 500: string;
4521
+ 600: string;
4522
+ 700: string;
4523
+ 800: string;
4524
+ 900: string;
4525
+ };
4526
+ };
4527
+ spacing: {
4528
+ 0: string;
4529
+ 1: string;
4530
+ 2: string;
4531
+ 3: string;
4532
+ 4: string;
4533
+ 5: string;
4534
+ 6: string;
4535
+ 8: string;
4536
+ 10: string;
4537
+ 12: string;
4538
+ 16: string;
4539
+ 20: string;
4540
+ 24: string;
4541
+ 32: string;
4542
+ 40: string;
4543
+ 48: string;
4544
+ 56: string;
4545
+ 64: string;
4546
+ };
4547
+ typography: {
4548
+ fontFamily: {
4549
+ sans: string;
4550
+ serif: string;
4551
+ mono: string;
4552
+ };
4553
+ fontSize: {
4554
+ xs: string;
4555
+ sm: string;
4556
+ base: string;
4557
+ lg: string;
4558
+ xl: string;
4559
+ '2xl': string;
4560
+ '3xl': string;
4561
+ '4xl': string;
4562
+ };
4563
+ fontWeight: {
4564
+ normal: string;
4565
+ medium: string;
4566
+ semibold: string;
4567
+ bold: string;
4568
+ };
4569
+ lineHeight: {
4570
+ tight: string;
4571
+ normal: string;
4572
+ relaxed: string;
4573
+ };
4574
+ };
4575
+ shadows: {
4576
+ none: string;
4577
+ sm: string;
4578
+ md: string;
4579
+ lg: string;
4580
+ xl: string;
4581
+ '2xl': string;
4582
+ };
4583
+ borders: {
4584
+ none: string;
4585
+ sm: string;
4586
+ md: string;
4587
+ lg: string;
4588
+ };
4589
+ radius: {
4590
+ none: string;
4591
+ sm: string;
4592
+ md: string;
4593
+ lg: string;
4594
+ xl: string;
4595
+ '2xl': string;
4596
+ full: string;
4597
+ };
4598
+ };
4599
+ declare const DEFAULT_SEMANTIC: SemanticTokens;
4600
+ declare const DEFAULT_COMPONENTS: ComponentTokens;
4601
+ declare function resolveTokens(theme: PersonaTheme): Record<string, ResolvedToken>;
4602
+ declare function validateTheme(theme: Partial<PersonaTheme>): ThemeValidationResult;
4603
+ declare function createTheme(userConfig?: Partial<PersonaTheme>, options?: CreateThemeOptions): PersonaTheme;
4604
+ declare function themeToCssVariables(theme: PersonaTheme): Record<string, string>;
4605
+
4606
+ type ColorScheme = 'light' | 'dark' | 'auto';
4607
+ interface PersonaWidgetConfig {
4608
+ theme?: Partial<PersonaTheme>;
4609
+ darkTheme?: Partial<PersonaTheme>;
4610
+ colorScheme?: ColorScheme;
4611
+ }
4612
+ type WidgetConfig = PersonaWidgetConfig | AgentWidgetConfig;
4613
+ declare const detectColorScheme: () => "light" | "dark";
4614
+ declare const getColorScheme: (config?: WidgetConfig) => "light" | "dark";
4615
+ declare const getActiveTheme: (config?: WidgetConfig) => PersonaTheme;
4616
+ declare const applyThemeVariables: (element: HTMLElement, config?: WidgetConfig) => void;
4617
+ declare const createThemeObserver: (callback: (scheme: "light" | "dark") => void) => (() => void);
4618
+
4619
+ declare function accessibilityPlugin(): PersonaThemePlugin;
4620
+ declare function animationsPlugin(): PersonaThemePlugin;
4621
+ declare function brandPlugin(brandConfig: {
4622
+ colors?: {
4623
+ primary?: string;
4624
+ secondary?: string;
4625
+ accent?: string;
4626
+ };
4627
+ logo?: string;
4628
+ }): PersonaThemePlugin;
4629
+ declare function reducedMotionPlugin(): PersonaThemePlugin;
4630
+ declare function highContrastPlugin(): PersonaThemePlugin;
4631
+ declare function createPlugin(config: {
4632
+ name: string;
4633
+ version: string;
4634
+ transform?: (theme: PersonaTheme) => PersonaTheme;
4635
+ cssVariables?: Record<string, string>;
4636
+ afterResolve?: (resolved: Record<string, string>) => Record<string, string>;
4637
+ }): PersonaThemePlugin;
4638
+
4639
+ interface V1ToV2MigrationOptions {
4640
+ warn?: boolean;
4641
+ colorScheme?: 'light' | 'dark' | 'auto';
4642
+ }
4643
+ declare function migrateV1Theme(v1Theme: AgentWidgetTheme | undefined, options?: V1ToV2MigrationOptions): Partial<PersonaTheme>;
4644
+ declare function validateV1Theme(v1Theme: unknown): {
4645
+ valid: boolean;
4646
+ warnings: string[];
4647
+ };
4648
+
3618
4649
  /**
3619
4650
  * Context provided to component renderers
3620
4651
  */
@@ -3721,6 +4752,12 @@ declare const createTypingIndicator: () => HTMLElement;
3721
4752
  declare const renderLoadingIndicatorWithFallback: (location: "inline" | "standalone", customRenderer?: LoadingIndicatorRenderer, widgetConfig?: AgentWidgetConfig) => HTMLElement | null;
3722
4753
  /**
3723
4754
  * Create message action buttons (copy, upvote, downvote)
4755
+ *
4756
+ * This is a pure rendering function. It creates button elements with the
4757
+ * correct `data-action` attributes, icons, and CSS classes. All click
4758
+ * handling, vote state management, clipboard logic, and callback dispatch
4759
+ * is handled via event delegation in `ui.ts` so that handlers survive
4760
+ * idiomorph DOM morphing.
3724
4761
  */
3725
4762
  declare const createMessageActions: (message: AgentWidgetMessage, actionsConfig: AgentWidgetMessageActionsConfig, _callbacks?: MessageActionCallbacks) => HTMLElement;
3726
4763
  /**
@@ -3865,6 +4902,9 @@ interface HeaderLayoutContext {
3865
4902
  showClose?: boolean;
3866
4903
  onClose?: () => void;
3867
4904
  onClearChat?: () => void;
4905
+ /** Passed from `buildHeaderWithLayout` for minimal/default chrome extensions */
4906
+ layoutHeaderConfig?: AgentWidgetHeaderLayoutConfig;
4907
+ onHeaderAction?: (actionId: string) => void;
3868
4908
  }
3869
4909
  type HeaderLayoutRenderer = (context: HeaderLayoutContext) => HeaderElements;
3870
4910
  /**
@@ -3872,16 +4912,7 @@ type HeaderLayoutRenderer = (context: HeaderLayoutContext) => HeaderElements;
3872
4912
  * Full header with icon, title, subtitle, clear chat, and close button
3873
4913
  */
3874
4914
  declare const buildDefaultHeader: HeaderLayoutRenderer;
3875
- /**
3876
- * Build minimal header layout
3877
- * Simplified layout with just title and close button
3878
- */
3879
4915
  declare const buildMinimalHeader: HeaderLayoutRenderer;
3880
- /**
3881
- * Build expanded header layout
3882
- * Full branding area with additional space for custom content
3883
- */
3884
- declare const buildExpandedHeader: HeaderLayoutRenderer;
3885
4916
  /**
3886
4917
  * Header layout registry
3887
4918
  * Maps layout names to their renderer functions
@@ -3901,4 +4932,4 @@ declare function createVoiceProvider(config: VoiceConfig): VoiceProvider;
3901
4932
  declare function createBestAvailableVoiceProvider(config?: Partial<VoiceConfig>): VoiceProvider;
3902
4933
  declare function isVoiceSupported(config?: Partial<VoiceConfig>): boolean;
3903
4934
 
3904
- export { type AgentConfig, type AgentExecutionState, type AgentLoopConfig, type AgentMessageMetadata, type AgentRequestOptions, type AgentWidgetAgentRequestPayload, type AgentWidgetApproval, type AgentWidgetApprovalConfig, type AgentWidgetAttachmentsConfig, type AgentWidgetAvatarConfig, AgentWidgetClient, type AgentWidgetConfig, type AgentWidgetController, type AgentWidgetControllerEventMap, type AgentWidgetCustomFetch, type AgentWidgetEvent, type AgentWidgetFeatureFlags, type AgentWidgetHeaderLayoutConfig, type AgentWidgetHeadersFunction, type AgentWidgetInitHandle, type AgentWidgetInitOptions, type AgentWidgetLauncherConfig, type AgentWidgetLayoutConfig, type AgentWidgetLoadingIndicatorConfig, type AgentWidgetMarkdownConfig, type AgentWidgetMarkdownOptions, type AgentWidgetMarkdownRendererOverrides, type AgentWidgetMessage, type AgentWidgetMessageActionsConfig, type AgentWidgetMessageFeedback, type AgentWidgetMessageLayoutConfig, type AgentWidgetPlugin, type AgentWidgetRequestPayload, type AgentWidgetSSEEventParser, type AgentWidgetSSEEventResult, AgentWidgetSession, type AgentWidgetSessionStatus, type AgentWidgetStreamParser, type AgentWidgetStreamParserResult, type AgentWidgetTheme, type AgentWidgetTimestampConfig, AttachmentManager, type AttachmentManagerConfig, type CSATFeedbackOptions, type ClientChatRequest, type ClientFeedbackRequest, type ClientFeedbackType, type ClientInitResponse, type ClientSession, type CodeFormat, type CodeGeneratorHooks, type CodeGeneratorOptions, type ComponentContext, type ComponentDirective, type ComponentRenderer, type ComposerBuildContext, type ComposerElements, type ContentPart, type CreateStandardBubbleOptions, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_WIDGET_CONFIG, type EventStreamBadgeColor, type EventStreamConfig, type EventStreamPayloadRenderContext, type EventStreamRowRenderContext, type EventStreamToolbarRenderContext, type EventStreamViewRenderContext, type HeaderBuildContext, type HeaderElements, type HeaderLayoutContext, type HeaderLayoutRenderer, type HeaderRenderContext, type IdleIndicatorRenderContext, type ImageContentPart, type InjectAssistantMessageOptions, type InjectMessageOptions, type InjectSystemMessageOptions, type InjectUserMessageOptions, type LoadingIndicatorRenderContext, type LoadingIndicatorRenderer, type MarkdownProcessorOptions, type MessageActionCallbacks, type MessageContent, type MessageRenderContext, type MessageTransform, type NPSFeedbackOptions, type PendingAttachment, type SSEEventCallback, type SSEEventRecord, type SlotRenderContext, type SlotRenderer, type TextContentPart, VERSION, type VoiceConfig, type VoiceProvider, type VoiceResult, type VoiceStatus, type WidgetLayoutSlot, attachHeaderToContainer, buildComposer, buildDefaultHeader, buildExpandedHeader, buildHeader, buildHeaderWithLayout, buildMinimalHeader, componentRegistry, createActionManager, createAgentExperience, createBestAvailableVoiceProvider, createBubbleWithLayout, createCSATFeedback, createComponentMiddleware, createComponentStreamParser, createDirectivePostprocessor, createFlexibleJsonStreamParser, createImagePart, createJsonStreamParser, createLocalStorageAdapter, createMarkdownProcessor, createMarkdownProcessorFromConfig, createMessageActions, createNPSFeedback, createPlainTextParser, createRegexJsonParser, createStandardBubble, createTextPart, createTypingIndicator, createVoiceProvider, createXmlParser, initAgentWidget as default, defaultActionHandlers, defaultJsonActionParser, directivePostprocessor, escapeHtml, extractComponentDirectiveFromMessage, fileToImagePart, generateAssistantMessageId, generateCodeSnippet, generateMessageId, generateUserMessageId, getDisplayText, getHeaderLayout, getImageParts, hasComponentDirective, hasImages, headerLayouts, initAgentWidget, isComponentDirectiveType, isVoiceSupported, markdownPostprocessor, mergeWithDefaults, normalizeContent, pluginRegistry, renderComponentDirective, renderLoadingIndicatorWithFallback, validateImageFile };
4935
+ export { type AgentConfig, type AgentExecutionState, type AgentLoopConfig, type AgentMessageMetadata, type AgentRequestOptions, type AgentToolsConfig, type AgentWidgetAgentRequestPayload, type AgentWidgetApproval, type AgentWidgetApprovalConfig, type AgentWidgetArtifactsFeature, type AgentWidgetArtifactsLayoutConfig, type AgentWidgetAttachmentsConfig, type AgentWidgetAvatarConfig, AgentWidgetClient, type AgentWidgetComposerConfig, type AgentWidgetConfig, type AgentWidgetController, type AgentWidgetControllerEventMap, type AgentWidgetCustomFetch, type AgentWidgetDockConfig, type AgentWidgetEvent, type AgentWidgetFeatureFlags, type AgentWidgetHeaderLayoutConfig, type AgentWidgetHeadersFunction, type AgentWidgetInitHandle, type AgentWidgetInitOptions, type AgentWidgetLauncherConfig, type AgentWidgetLayoutConfig, type AgentWidgetLoadingIndicatorConfig, type AgentWidgetMarkdownConfig, type AgentWidgetMarkdownOptions, type AgentWidgetMarkdownRendererOverrides, type AgentWidgetMessage, type AgentWidgetMessageActionsConfig, type AgentWidgetMessageFeedback, type AgentWidgetMessageLayoutConfig, type AgentWidgetPlugin, type AgentWidgetRequestPayload, type AgentWidgetSSEEventParser, type AgentWidgetSSEEventResult, AgentWidgetSession, type AgentWidgetSessionStatus, type AgentWidgetStreamParser, type AgentWidgetStreamParserResult, type AgentWidgetTheme, type AgentWidgetTimestampConfig, type ArtifactConfigPayload, AttachmentManager, type AttachmentManagerConfig, type BorderScale, type CSATFeedbackOptions, type ClientChatRequest, type ClientFeedbackRequest, type ClientFeedbackType, type ClientInitResponse, type ClientSession, type CodeFormat, type CodeGeneratorHooks, type CodeGeneratorOptions, type ColorPalette, type ColorShade, type ComponentContext, type ComponentDirective, type ComponentRenderer, type ComponentTokens, type ComposerBuildContext, type ComposerElements, type ContentPart, type CreateStandardBubbleOptions, type CreateThemeOptions, DEFAULT_COMPONENTS, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_PALETTE, DEFAULT_SEMANTIC, DEFAULT_WIDGET_CONFIG, type DomContextMode, type DomContextOptions, type EnrichedPageElement, type EventStreamBadgeColor, type EventStreamConfig, type EventStreamPayloadRenderContext, type EventStreamRowRenderContext, type EventStreamToolbarRenderContext, type EventStreamViewRenderContext, type FormatEnrichedContextOptions, type HeaderBuildContext, type HeaderElements, type HeaderLayoutContext, type HeaderLayoutRenderer, type HeaderRenderContext, type IdleIndicatorRenderContext, type ImageContentPart, type InjectAssistantMessageOptions, type InjectMessageOptions, type InjectSystemMessageOptions, type InjectUserMessageOptions, type LoadingIndicatorRenderContext, type LoadingIndicatorRenderer, type MarkdownProcessorOptions, type MessageActionCallbacks, type MessageContent, type MessageRenderContext, type MessageTransform, type NPSFeedbackOptions, type ParseOptionsConfig, type ParseRule, type PendingAttachment, type PersonaArtifactKind, type PersonaArtifactManualUpsert, type PersonaArtifactRecord, type PersonaTheme, type PersonaThemePlugin, type RadiusScale, type RuleScoringContext, type SSEEventCallback, type SSEEventRecord, type SemanticColors, type SemanticSpacing, type SemanticTypography, type ShadowScale, type SlotRenderContext, type SlotRenderer, type SpacingScale, type TextContentPart, type ThemeValidationError, type ThemeValidationResult, type TokenReference, type TypographyScale, VERSION, type VoiceConfig, type VoiceProvider, type VoiceResult, type VoiceStatus, type WidgetHostLayout, type WidgetHostLayoutMode, type WidgetLayoutSlot, accessibilityPlugin, animationsPlugin, applyThemeVariables, attachHeaderToContainer, brandPlugin, buildComposer, buildDefaultHeader, buildHeader, buildHeaderWithLayout, buildMinimalHeader, collectEnrichedPageContext, componentRegistry, createActionManager, createAgentExperience, createBestAvailableVoiceProvider, createBubbleWithLayout, createCSATFeedback, createComponentMiddleware, createComponentStreamParser, createDirectivePostprocessor, createFlexibleJsonStreamParser, createImagePart, createJsonStreamParser, createLocalStorageAdapter, createMarkdownProcessor, createMarkdownProcessorFromConfig, createMessageActions, createNPSFeedback, createPlainTextParser, createPlugin, createRegexJsonParser, createStandardBubble, createTextPart, createTheme, createThemeObserver, createTypingIndicator, createVoiceProvider, createWidgetHostLayout, createXmlParser, initAgentWidget as default, defaultActionHandlers, defaultJsonActionParser, defaultParseRules, detectColorScheme, directivePostprocessor, escapeHtml, extractComponentDirectiveFromMessage, fileToImagePart, formatEnrichedContext, generateAssistantMessageId, generateCodeSnippet, generateMessageId, generateStableSelector, generateUserMessageId, getActiveTheme, getColorScheme, getDisplayText, getHeaderLayout, getImageParts, hasComponentDirective, hasImages, headerLayouts, highContrastPlugin, initAgentWidget, isComponentDirectiveType, isDockedMountMode, isVoiceSupported, markdownPostprocessor, mergeWithDefaults, migrateV1Theme, normalizeContent, pluginRegistry, reducedMotionPlugin, renderComponentDirective, renderLoadingIndicatorWithFallback, resolveDockConfig, resolveTokens, themeToCssVariables, validateImageFile, validateTheme, validateV1Theme };