@runtypelabs/persona 3.8.2 → 3.9.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 (24) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +43 -43
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +9 -1
  5. package/dist/index.d.ts +9 -1
  6. package/dist/index.global.js +57 -57
  7. package/dist/index.global.js.map +1 -1
  8. package/dist/index.js +43 -43
  9. package/dist/index.js.map +1 -1
  10. package/dist/theme-editor.cjs +895 -816
  11. package/dist/theme-editor.js +895 -816
  12. package/dist/theme-reference.cjs +1 -1
  13. package/dist/theme-reference.js +1 -1
  14. package/package.json +1 -1
  15. package/src/client.test.ts +346 -0
  16. package/src/client.ts +72 -3
  17. package/src/components/panel.ts +2 -1
  18. package/src/defaults.ts +11 -1
  19. package/src/index.ts +2 -0
  20. package/src/presets.ts +2 -1
  21. package/src/theme-editor/sections.ts +7 -3
  22. package/src/theme-reference.ts +1 -1
  23. package/src/ui.ts +24 -5
  24. package/src/utils/tokens.ts +6 -2
package/dist/theme-editor.js CHANGED
@@ -1,393 +1,683 @@
1
- // src/utils/tokens.ts
2
- var DEFAULT_PALETTE = {
3
- colors: {
4
- primary: {
5
- 50: "#ffffff",
6
- 100: "#f5f5f5",
7
- 200: "#d4d4d4",
8
- 300: "#a3a3a3",
9
- 400: "#737373",
10
- 500: "#171717",
11
- 600: "#0f0f0f",
12
- 700: "#0a0a0a",
13
- 800: "#050505",
14
- 900: "#030303",
15
- 950: "#000000"
16
- },
17
- secondary: {
18
- 50: "#f5f3ff",
19
- 100: "#ede9fe",
20
- 200: "#ddd6fe",
21
- 300: "#c4b5fd",
22
- 400: "#a78bfa",
23
- 500: "#8b5cf6",
24
- 600: "#7c3aed",
25
- 700: "#6d28d9",
26
- 800: "#5b21b6",
27
- 900: "#4c1d95",
28
- 950: "#2e1065"
29
- },
30
- accent: {
31
- 50: "#ecfeff",
32
- 100: "#cffafe",
33
- 200: "#a5f3fc",
34
- 300: "#67e8f9",
35
- 400: "#22d3ee",
36
- 500: "#06b6d4",
37
- 600: "#0891b2",
38
- 700: "#0e7490",
39
- 800: "#155e75",
40
- 900: "#164e63",
41
- 950: "#083344"
42
- },
43
- gray: {
44
- 50: "#f9fafb",
45
- 100: "#f3f4f6",
46
- 200: "#e5e7eb",
47
- 300: "#d1d5db",
48
- 400: "#9ca3af",
49
- 500: "#6b7280",
50
- 600: "#4b5563",
51
- 700: "#374151",
52
- 800: "#1f2937",
53
- 900: "#111827",
54
- 950: "#030712"
55
- },
56
- success: {
57
- 50: "#f0fdf4",
58
- 100: "#dcfce7",
59
- 200: "#bbf7d0",
60
- 300: "#86efac",
61
- 400: "#4ade80",
62
- 500: "#22c55e",
63
- 600: "#16a34a",
64
- 700: "#15803d",
65
- 800: "#166534",
66
- 900: "#14532d"
67
- },
68
- warning: {
69
- 50: "#fefce8",
70
- 100: "#fef9c3",
71
- 200: "#fef08a",
72
- 300: "#fde047",
73
- 400: "#facc15",
74
- 500: "#eab308",
75
- 600: "#ca8a04",
76
- 700: "#a16207",
77
- 800: "#854d0e",
78
- 900: "#713f12"
79
- },
80
- error: {
81
- 50: "#fef2f2",
82
- 100: "#fee2e2",
83
- 200: "#fecaca",
84
- 300: "#fca5a5",
85
- 400: "#f87171",
86
- 500: "#ef4444",
87
- 600: "#dc2626",
88
- 700: "#b91c1c",
89
- 800: "#991b1b",
90
- 900: "#7f1d1d"
91
- },
92
- info: {
93
- 50: "#eff6ff",
94
- 100: "#dbeafe",
95
- 200: "#bfdbfe",
96
- 300: "#93c5fd",
97
- 400: "#60a5fa",
98
- 500: "#3b82f6",
99
- 600: "#2563eb",
100
- 700: "#1d4ed8",
101
- 800: "#1e40af",
102
- 900: "#1e3a8a",
103
- 950: "#172554"
1
+ // src/utils/deep-merge.ts
2
+ var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
3
+ function deepMerge(base, override) {
4
+ if (!base) return override;
5
+ if (!override) return base;
6
+ const merged = { ...base };
7
+ for (const [key, value] of Object.entries(override)) {
8
+ const existing = merged[key];
9
+ if (isObject(existing) && isObject(value)) {
10
+ merged[key] = deepMerge(existing, value);
11
+ } else {
12
+ merged[key] = value;
104
13
  }
105
- },
106
- spacing: {
107
- 0: "0px",
108
- 1: "0.25rem",
109
- 2: "0.5rem",
110
- 3: "0.75rem",
111
- 4: "1rem",
112
- 5: "1.25rem",
113
- 6: "1.5rem",
114
- 8: "2rem",
115
- 10: "2.5rem",
116
- 12: "3rem",
117
- 16: "4rem",
118
- 20: "5rem",
119
- 24: "6rem",
120
- 32: "8rem",
121
- 40: "10rem",
122
- 48: "12rem",
123
- 56: "14rem",
124
- 64: "16rem"
125
- },
126
- typography: {
127
- fontFamily: {
128
- sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
129
- serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
130
- mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
131
- },
132
- fontSize: {
133
- xs: "0.75rem",
134
- sm: "0.875rem",
135
- base: "1rem",
136
- lg: "1.125rem",
137
- xl: "1.25rem",
138
- "2xl": "1.5rem",
139
- "3xl": "1.875rem",
140
- "4xl": "2.25rem"
14
+ }
15
+ return merged;
16
+ }
17
+
18
+ // src/defaults.ts
19
+ var DEFAULT_FLOATING_LAUNCHER_WIDTH = "min(440px, calc(100vw - 24px))";
20
+ var DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH = "440px";
21
+ var DEFAULT_WIDGET_CONFIG = {
22
+ apiUrl: "http://localhost:43111/api/chat/dispatch",
23
+ // Client token mode defaults (optional, only used when clientToken is set)
24
+ clientToken: void 0,
25
+ theme: void 0,
26
+ darkTheme: void 0,
27
+ colorScheme: "light",
28
+ launcher: {
29
+ enabled: true,
30
+ mountMode: "floating",
31
+ dock: {
32
+ side: "right",
33
+ width: "420px"
141
34
  },
142
- fontWeight: {
143
- normal: "400",
144
- medium: "500",
145
- semibold: "600",
146
- bold: "700"
35
+ title: "Chat Assistant",
36
+ subtitle: "Here to help you get answers fast",
37
+ agentIconText: "\u{1F4AC}",
38
+ agentIconName: "bot",
39
+ headerIconName: "bot",
40
+ position: "bottom-right",
41
+ width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
42
+ heightOffset: 0,
43
+ autoExpand: false,
44
+ callToActionIconHidden: false,
45
+ agentIconSize: "40px",
46
+ headerIconSize: "40px",
47
+ closeButtonSize: "32px",
48
+ callToActionIconName: "arrow-up-right",
49
+ callToActionIconText: "",
50
+ callToActionIconSize: "32px",
51
+ callToActionIconPadding: "5px",
52
+ callToActionIconColor: void 0,
53
+ callToActionIconBackgroundColor: void 0,
54
+ // closeButtonColor / clearChat.iconColor omitted so theme.components.header.actionIconForeground applies.
55
+ closeButtonBackgroundColor: "transparent",
56
+ clearChat: {
57
+ backgroundColor: "transparent",
58
+ borderColor: "transparent",
59
+ enabled: true,
60
+ placement: "inline",
61
+ iconName: "refresh-cw",
62
+ size: "32px",
63
+ showTooltip: true,
64
+ tooltipText: "Clear chat",
65
+ paddingX: "0px",
66
+ paddingY: "0px"
147
67
  },
148
- lineHeight: {
149
- tight: "1.25",
150
- normal: "1.5",
151
- relaxed: "1.625"
152
- }
68
+ headerIconHidden: false,
69
+ border: void 0,
70
+ shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
153
71
  },
154
- shadows: {
155
- none: "none",
156
- sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
157
- md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
158
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
159
- xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
160
- "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
72
+ copy: {
73
+ welcomeTitle: "Hello \u{1F44B}",
74
+ welcomeSubtitle: "Ask anything about your account or products.",
75
+ inputPlaceholder: "How can I help...",
76
+ sendButtonLabel: "Send"
161
77
  },
162
- borders: {
163
- none: "none",
164
- sm: "1px solid",
165
- md: "2px solid",
166
- lg: "4px solid"
78
+ sendButton: {
79
+ borderWidth: "0px",
80
+ paddingX: "12px",
81
+ paddingY: "10px",
82
+ borderColor: void 0,
83
+ useIcon: true,
84
+ iconText: "\u2191",
85
+ size: "40px",
86
+ showTooltip: true,
87
+ tooltipText: "Send message",
88
+ iconName: "send"
167
89
  },
168
- radius: {
169
- none: "0px",
170
- sm: "0.125rem",
171
- md: "0.375rem",
172
- lg: "0.5rem",
173
- xl: "0.75rem",
174
- "2xl": "1rem",
175
- full: "9999px"
176
- }
177
- };
178
- var DEFAULT_SEMANTIC = {
179
- colors: {
180
- primary: "palette.colors.primary.500",
181
- secondary: "palette.colors.secondary.500",
182
- // Links/Focus role — solid primary
183
- accent: "palette.colors.primary.600",
184
- // Surfaces role — soft gray
185
- surface: "palette.colors.gray.50",
186
- background: "palette.colors.gray.50",
187
- container: "palette.colors.gray.50",
188
- text: "palette.colors.gray.900",
189
- textMuted: "palette.colors.gray.500",
190
- textInverse: "palette.colors.gray.50",
191
- // Borders role — soft gray
192
- border: "palette.colors.gray.200",
193
- divider: "palette.colors.gray.200",
194
- interactive: {
195
- // Primary Actions role — solid primary
196
- default: "palette.colors.primary.600",
197
- hover: "palette.colors.primary.700",
198
- // Links/Focus role — solid primary
199
- focus: "palette.colors.primary.600",
200
- active: "palette.colors.primary.600",
201
- disabled: "palette.colors.gray.300"
202
- },
203
- feedback: {
204
- success: "palette.colors.success.500",
205
- warning: "palette.colors.warning.500",
206
- error: "palette.colors.error.500",
207
- info: "palette.colors.info.500"
208
- }
209
- },
210
- spacing: {
211
- xs: "palette.spacing.1",
212
- sm: "palette.spacing.2",
213
- md: "palette.spacing.4",
214
- lg: "palette.spacing.6",
215
- xl: "palette.spacing.8",
216
- "2xl": "palette.spacing.10"
90
+ statusIndicator: {
91
+ visible: true,
92
+ idleText: "Online",
93
+ connectingText: "Connecting\u2026",
94
+ connectedText: "Streaming\u2026",
95
+ errorText: "Offline"
217
96
  },
218
- typography: {
219
- fontFamily: "palette.typography.fontFamily.sans",
220
- fontSize: "palette.typography.fontSize.base",
221
- fontWeight: "palette.typography.fontWeight.normal",
222
- lineHeight: "palette.typography.lineHeight.normal"
223
- }
224
- };
225
- var DEFAULT_COMPONENTS = {
226
- button: {
227
- primary: {
228
- // Primary Actions role — solid primary
229
- background: "palette.colors.primary.500",
230
- foreground: "palette.colors.primary.50",
231
- borderRadius: "palette.radius.lg",
232
- padding: "semantic.spacing.md"
233
- },
234
- secondary: {
235
- background: "semantic.colors.surface",
236
- foreground: "semantic.colors.secondary",
237
- borderRadius: "palette.radius.lg",
238
- padding: "semantic.spacing.md"
239
- },
240
- ghost: {
241
- background: "transparent",
242
- foreground: "semantic.colors.text",
243
- borderRadius: "palette.radius.md",
244
- padding: "semantic.spacing.sm"
245
- }
97
+ voiceRecognition: {
98
+ enabled: true,
99
+ pauseDuration: 2e3,
100
+ iconName: "mic",
101
+ iconSize: "39px",
102
+ borderWidth: "0px",
103
+ paddingX: "9px",
104
+ paddingY: "14px",
105
+ iconColor: void 0,
106
+ backgroundColor: "transparent",
107
+ borderColor: "transparent",
108
+ recordingIconColor: void 0,
109
+ recordingBackgroundColor: void 0,
110
+ recordingBorderColor: "transparent",
111
+ showTooltip: true,
112
+ tooltipText: "Start voice recognition"
246
113
  },
247
- input: {
248
- // Input role — soft gray
249
- background: "palette.colors.gray.50",
250
- placeholder: "palette.colors.gray.400",
251
- borderRadius: "palette.radius.lg",
252
- padding: "semantic.spacing.md",
253
- focus: {
254
- border: "palette.colors.gray.400",
255
- ring: "palette.colors.gray.400"
114
+ features: {
115
+ showReasoning: true,
116
+ showToolCalls: true,
117
+ scrollToBottom: {
118
+ enabled: true,
119
+ iconName: "arrow-down",
120
+ label: ""
256
121
  }
257
122
  },
258
- launcher: {
259
- background: "palette.colors.primary.500",
260
- foreground: "palette.colors.primary.50",
261
- border: "palette.colors.gray.200",
262
- size: "60px",
263
- iconSize: "28px",
264
- borderRadius: "palette.radius.full",
265
- shadow: "palette.shadows.lg"
266
- },
267
- panel: {
268
- width: "min(400px, calc(100vw - 24px))",
269
- maxWidth: "400px",
270
- height: "600px",
271
- maxHeight: "calc(100vh - 80px)",
272
- borderRadius: "palette.radius.xl",
273
- shadow: "palette.shadows.xl"
274
- },
275
- header: {
276
- // Header role — solid primary
277
- background: "palette.colors.primary.500",
278
- border: "palette.colors.primary.600",
279
- borderRadius: "palette.radius.xl palette.radius.xl 0 0",
280
- padding: "semantic.spacing.md",
281
- iconBackground: "palette.colors.primary.600",
282
- iconForeground: "palette.colors.primary.50",
283
- titleForeground: "palette.colors.primary.50",
284
- subtitleForeground: "palette.colors.primary.200",
285
- actionIconForeground: "palette.colors.primary.200"
123
+ suggestionChips: [
124
+ "What can you help me with?",
125
+ "Tell me about your features",
126
+ "How does this work?"
127
+ ],
128
+ suggestionChipsConfig: {
129
+ fontFamily: "sans-serif",
130
+ fontWeight: "500",
131
+ paddingX: "12px",
132
+ paddingY: "6px"
286
133
  },
287
- message: {
288
- user: {
289
- // User Messages role — solid primary
290
- background: "palette.colors.primary.500",
291
- text: "palette.colors.primary.50",
292
- borderRadius: "palette.radius.lg",
293
- shadow: "palette.shadows.sm"
134
+ layout: {
135
+ header: {
136
+ layout: "default",
137
+ showIcon: true,
138
+ showTitle: true,
139
+ showSubtitle: true,
140
+ showCloseButton: true,
141
+ showClearChat: true
294
142
  },
295
- assistant: {
296
- // Assistant Messages role — soft gray
297
- background: "palette.colors.gray.50",
298
- text: "palette.colors.gray.900",
299
- borderRadius: "palette.radius.lg",
300
- border: "palette.colors.gray.200",
301
- shadow: "palette.shadows.sm"
143
+ messages: {
144
+ layout: "bubble",
145
+ avatar: {
146
+ show: false,
147
+ position: "left"
148
+ },
149
+ timestamp: {
150
+ show: false,
151
+ position: "below"
152
+ },
153
+ groupConsecutive: false
302
154
  },
303
- border: "semantic.colors.border"
304
- },
305
- toolBubble: {
306
- shadow: "palette.shadows.sm"
307
- },
308
- reasoningBubble: {
309
- shadow: "palette.shadows.sm"
310
- },
311
- composer: {
312
- shadow: "none"
155
+ slots: {}
313
156
  },
314
157
  markdown: {
315
- inlineCode: {
316
- background: "palette.colors.gray.50",
317
- foreground: "palette.colors.gray.900"
158
+ options: {
159
+ gfm: true,
160
+ breaks: true
318
161
  },
319
- link: {
320
- // Links/Focus role — solid primary
321
- foreground: "palette.colors.primary.600"
162
+ disableDefaultStyles: false
163
+ },
164
+ messageActions: {
165
+ enabled: true,
166
+ showCopy: true,
167
+ showUpvote: false,
168
+ // Requires backend - disabled by default
169
+ showDownvote: false,
170
+ // Requires backend - disabled by default
171
+ visibility: "hover",
172
+ align: "right",
173
+ layout: "pill-inside"
174
+ },
175
+ debug: false
176
+ };
177
+ function mergeThemePartials(base, override) {
178
+ if (!base && !override) return void 0;
179
+ if (!base) return override;
180
+ if (!override) return base;
181
+ return deepMerge(
182
+ base,
183
+ override
184
+ );
185
+ }
186
+ function mergeWithDefaults(config) {
187
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
188
+ if (!config) return DEFAULT_WIDGET_CONFIG;
189
+ return {
190
+ ...DEFAULT_WIDGET_CONFIG,
191
+ ...config,
192
+ theme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.theme, config.theme),
193
+ darkTheme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.darkTheme, config.darkTheme),
194
+ launcher: {
195
+ ...DEFAULT_WIDGET_CONFIG.launcher,
196
+ ...config.launcher,
197
+ dock: {
198
+ ...(_a = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _a.dock,
199
+ ...(_b = config.launcher) == null ? void 0 : _b.dock
200
+ },
201
+ clearChat: {
202
+ ...(_c = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _c.clearChat,
203
+ ...(_d = config.launcher) == null ? void 0 : _d.clearChat
204
+ }
322
205
  },
323
- prose: {
324
- fontFamily: "inherit"
206
+ copy: {
207
+ ...DEFAULT_WIDGET_CONFIG.copy,
208
+ ...config.copy
325
209
  },
326
- codeBlock: {
327
- background: "semantic.colors.container",
328
- borderColor: "semantic.colors.border",
329
- textColor: "inherit"
210
+ sendButton: {
211
+ ...DEFAULT_WIDGET_CONFIG.sendButton,
212
+ ...config.sendButton
330
213
  },
331
- table: {
332
- headerBackground: "semantic.colors.container",
333
- borderColor: "semantic.colors.border"
214
+ statusIndicator: {
215
+ ...DEFAULT_WIDGET_CONFIG.statusIndicator,
216
+ ...config.statusIndicator
334
217
  },
335
- hr: {
336
- color: "semantic.colors.divider"
218
+ voiceRecognition: {
219
+ ...DEFAULT_WIDGET_CONFIG.voiceRecognition,
220
+ ...config.voiceRecognition
337
221
  },
338
- blockquote: {
339
- borderColor: "palette.colors.gray.900",
340
- background: "transparent",
341
- textColor: "palette.colors.gray.500"
342
- }
343
- },
344
- collapsibleWidget: {
345
- container: "palette.colors.gray.50",
346
- surface: "semantic.colors.surface",
347
- border: "semantic.colors.border"
348
- },
349
- voice: {
350
- recording: {
351
- indicator: "palette.colors.error.500",
352
- background: "palette.colors.error.50",
353
- border: "palette.colors.error.200"
222
+ features: (() => {
223
+ var _a2, _b2, _c2, _d2;
224
+ const da = (_a2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _a2.artifacts;
225
+ const ca = (_b2 = config.features) == null ? void 0 : _b2.artifacts;
226
+ const dsb = (_c2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _c2.scrollToBottom;
227
+ const csb = (_d2 = config.features) == null ? void 0 : _d2.scrollToBottom;
228
+ const mergedArtifacts = da === void 0 && ca === void 0 ? void 0 : {
229
+ ...da,
230
+ ...ca,
231
+ layout: {
232
+ ...da == null ? void 0 : da.layout,
233
+ ...ca == null ? void 0 : ca.layout
234
+ }
235
+ };
236
+ const mergedScrollToBottom = dsb === void 0 && csb === void 0 ? void 0 : {
237
+ ...dsb,
238
+ ...csb
239
+ };
240
+ return {
241
+ ...DEFAULT_WIDGET_CONFIG.features,
242
+ ...config.features,
243
+ ...mergedScrollToBottom !== void 0 ? { scrollToBottom: mergedScrollToBottom } : {},
244
+ ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {}
245
+ };
246
+ })(),
247
+ suggestionChips: (_e = config.suggestionChips) != null ? _e : DEFAULT_WIDGET_CONFIG.suggestionChips,
248
+ suggestionChipsConfig: {
249
+ ...DEFAULT_WIDGET_CONFIG.suggestionChipsConfig,
250
+ ...config.suggestionChipsConfig
354
251
  },
355
- processing: {
356
- icon: "palette.colors.primary.500",
357
- background: "palette.colors.primary.50"
252
+ layout: {
253
+ ...DEFAULT_WIDGET_CONFIG.layout,
254
+ ...config.layout,
255
+ header: {
256
+ ...(_f = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _f.header,
257
+ ...(_g = config.layout) == null ? void 0 : _g.header
258
+ },
259
+ messages: {
260
+ ...(_h = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _h.messages,
261
+ ...(_i = config.layout) == null ? void 0 : _i.messages,
262
+ avatar: {
263
+ ...(_k = (_j = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _j.messages) == null ? void 0 : _k.avatar,
264
+ ...(_m = (_l = config.layout) == null ? void 0 : _l.messages) == null ? void 0 : _m.avatar
265
+ },
266
+ timestamp: {
267
+ ...(_o = (_n = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _n.messages) == null ? void 0 : _o.timestamp,
268
+ ...(_q = (_p = config.layout) == null ? void 0 : _p.messages) == null ? void 0 : _q.timestamp
269
+ }
270
+ },
271
+ slots: {
272
+ ...(_r = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _r.slots,
273
+ ...(_s = config.layout) == null ? void 0 : _s.slots
274
+ }
358
275
  },
359
- speaking: {
360
- icon: "palette.colors.success.500"
276
+ markdown: {
277
+ ...DEFAULT_WIDGET_CONFIG.markdown,
278
+ ...config.markdown,
279
+ options: {
280
+ ...(_t = DEFAULT_WIDGET_CONFIG.markdown) == null ? void 0 : _t.options,
281
+ ...(_u = config.markdown) == null ? void 0 : _u.options
282
+ }
283
+ },
284
+ messageActions: {
285
+ ...DEFAULT_WIDGET_CONFIG.messageActions,
286
+ ...config.messageActions
361
287
  }
362
- },
363
- approval: {
364
- requested: {
365
- background: "palette.colors.warning.50",
366
- border: "palette.colors.warning.200",
367
- text: "palette.colors.gray.900"
288
+ };
289
+ }
290
+
291
+ // src/utils/tokens.ts
292
+ var DEFAULT_PALETTE = {
293
+ colors: {
294
+ primary: {
295
+ 50: "#ffffff",
296
+ 100: "#f5f5f5",
297
+ 200: "#d4d4d4",
298
+ 300: "#a3a3a3",
299
+ 400: "#737373",
300
+ 500: "#171717",
301
+ 600: "#0f0f0f",
302
+ 700: "#0a0a0a",
303
+ 800: "#050505",
304
+ 900: "#030303",
305
+ 950: "#000000"
368
306
  },
369
- approve: {
370
- background: "palette.colors.success.500",
371
- foreground: "palette.colors.gray.50",
372
- borderRadius: "palette.radius.md",
373
- padding: "semantic.spacing.sm"
307
+ secondary: {
308
+ 50: "#f5f3ff",
309
+ 100: "#ede9fe",
310
+ 200: "#ddd6fe",
311
+ 300: "#c4b5fd",
312
+ 400: "#a78bfa",
313
+ 500: "#8b5cf6",
314
+ 600: "#7c3aed",
315
+ 700: "#6d28d9",
316
+ 800: "#5b21b6",
317
+ 900: "#4c1d95",
318
+ 950: "#2e1065"
374
319
  },
375
- deny: {
376
- background: "palette.colors.error.500",
377
- foreground: "palette.colors.gray.50",
378
- borderRadius: "palette.radius.md",
379
- padding: "semantic.spacing.sm"
320
+ accent: {
321
+ 50: "#ecfeff",
322
+ 100: "#cffafe",
323
+ 200: "#a5f3fc",
324
+ 300: "#67e8f9",
325
+ 400: "#22d3ee",
326
+ 500: "#06b6d4",
327
+ 600: "#0891b2",
328
+ 700: "#0e7490",
329
+ 800: "#155e75",
330
+ 900: "#164e63",
331
+ 950: "#083344"
332
+ },
333
+ gray: {
334
+ 50: "#f9fafb",
335
+ 100: "#f3f4f6",
336
+ 200: "#e5e7eb",
337
+ 300: "#d1d5db",
338
+ 400: "#9ca3af",
339
+ 500: "#6b7280",
340
+ 600: "#4b5563",
341
+ 700: "#374151",
342
+ 800: "#1f2937",
343
+ 900: "#111827",
344
+ 950: "#030712"
345
+ },
346
+ success: {
347
+ 50: "#f0fdf4",
348
+ 100: "#dcfce7",
349
+ 200: "#bbf7d0",
350
+ 300: "#86efac",
351
+ 400: "#4ade80",
352
+ 500: "#22c55e",
353
+ 600: "#16a34a",
354
+ 700: "#15803d",
355
+ 800: "#166534",
356
+ 900: "#14532d"
357
+ },
358
+ warning: {
359
+ 50: "#fefce8",
360
+ 100: "#fef9c3",
361
+ 200: "#fef08a",
362
+ 300: "#fde047",
363
+ 400: "#facc15",
364
+ 500: "#eab308",
365
+ 600: "#ca8a04",
366
+ 700: "#a16207",
367
+ 800: "#854d0e",
368
+ 900: "#713f12"
369
+ },
370
+ error: {
371
+ 50: "#fef2f2",
372
+ 100: "#fee2e2",
373
+ 200: "#fecaca",
374
+ 300: "#fca5a5",
375
+ 400: "#f87171",
376
+ 500: "#ef4444",
377
+ 600: "#dc2626",
378
+ 700: "#b91c1c",
379
+ 800: "#991b1b",
380
+ 900: "#7f1d1d"
381
+ },
382
+ info: {
383
+ 50: "#eff6ff",
384
+ 100: "#dbeafe",
385
+ 200: "#bfdbfe",
386
+ 300: "#93c5fd",
387
+ 400: "#60a5fa",
388
+ 500: "#3b82f6",
389
+ 600: "#2563eb",
390
+ 700: "#1d4ed8",
391
+ 800: "#1e40af",
392
+ 900: "#1e3a8a",
393
+ 950: "#172554"
380
394
  }
381
395
  },
382
- attachment: {
383
- image: {
384
- background: "palette.colors.gray.100",
385
- border: "palette.colors.gray.200"
396
+ spacing: {
397
+ 0: "0px",
398
+ 1: "0.25rem",
399
+ 2: "0.5rem",
400
+ 3: "0.75rem",
401
+ 4: "1rem",
402
+ 5: "1.25rem",
403
+ 6: "1.5rem",
404
+ 8: "2rem",
405
+ 10: "2.5rem",
406
+ 12: "3rem",
407
+ 16: "4rem",
408
+ 20: "5rem",
409
+ 24: "6rem",
410
+ 32: "8rem",
411
+ 40: "10rem",
412
+ 48: "12rem",
413
+ 56: "14rem",
414
+ 64: "16rem"
415
+ },
416
+ typography: {
417
+ fontFamily: {
418
+ sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
419
+ serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
420
+ mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
421
+ },
422
+ fontSize: {
423
+ xs: "0.75rem",
424
+ sm: "0.875rem",
425
+ base: "1rem",
426
+ lg: "1.125rem",
427
+ xl: "1.25rem",
428
+ "2xl": "1.5rem",
429
+ "3xl": "1.875rem",
430
+ "4xl": "2.25rem"
431
+ },
432
+ fontWeight: {
433
+ normal: "400",
434
+ medium: "500",
435
+ semibold: "600",
436
+ bold: "700"
437
+ },
438
+ lineHeight: {
439
+ tight: "1.25",
440
+ normal: "1.5",
441
+ relaxed: "1.625"
386
442
  }
387
443
  },
388
- scrollToBottom: {
389
- background: "components.button.primary.background",
390
- foreground: "components.button.primary.foreground",
444
+ shadows: {
445
+ none: "none",
446
+ sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
447
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
448
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
449
+ xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
450
+ "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
451
+ },
452
+ borders: {
453
+ none: "none",
454
+ sm: "1px solid",
455
+ md: "2px solid",
456
+ lg: "4px solid"
457
+ },
458
+ radius: {
459
+ none: "0px",
460
+ sm: "0.125rem",
461
+ md: "0.375rem",
462
+ lg: "0.5rem",
463
+ xl: "0.75rem",
464
+ "2xl": "1rem",
465
+ full: "9999px"
466
+ }
467
+ };
468
+ var DEFAULT_SEMANTIC = {
469
+ colors: {
470
+ primary: "palette.colors.primary.500",
471
+ secondary: "palette.colors.secondary.500",
472
+ // Links/Focus role — solid primary
473
+ accent: "palette.colors.primary.600",
474
+ // Surfaces role — soft gray
475
+ surface: "palette.colors.gray.50",
476
+ background: "palette.colors.gray.50",
477
+ container: "palette.colors.gray.50",
478
+ text: "palette.colors.gray.900",
479
+ textMuted: "palette.colors.gray.500",
480
+ textInverse: "palette.colors.gray.50",
481
+ // Borders role — soft gray
482
+ border: "palette.colors.gray.200",
483
+ divider: "palette.colors.gray.200",
484
+ interactive: {
485
+ // Primary Actions role — solid primary
486
+ default: "palette.colors.primary.600",
487
+ hover: "palette.colors.primary.700",
488
+ // Links/Focus role — solid primary
489
+ focus: "palette.colors.primary.600",
490
+ active: "palette.colors.primary.600",
491
+ disabled: "palette.colors.gray.300"
492
+ },
493
+ feedback: {
494
+ success: "palette.colors.success.500",
495
+ warning: "palette.colors.warning.500",
496
+ error: "palette.colors.error.500",
497
+ info: "palette.colors.info.500"
498
+ }
499
+ },
500
+ spacing: {
501
+ xs: "palette.spacing.1",
502
+ sm: "palette.spacing.2",
503
+ md: "palette.spacing.4",
504
+ lg: "palette.spacing.6",
505
+ xl: "palette.spacing.8",
506
+ "2xl": "palette.spacing.10"
507
+ },
508
+ typography: {
509
+ fontFamily: "palette.typography.fontFamily.sans",
510
+ fontSize: "palette.typography.fontSize.base",
511
+ fontWeight: "palette.typography.fontWeight.normal",
512
+ lineHeight: "palette.typography.lineHeight.normal"
513
+ }
514
+ };
515
+ var DEFAULT_COMPONENTS = {
516
+ button: {
517
+ primary: {
518
+ // Primary Actions role — solid primary
519
+ background: "palette.colors.primary.500",
520
+ foreground: "palette.colors.primary.50",
521
+ borderRadius: "palette.radius.lg",
522
+ padding: "semantic.spacing.md"
523
+ },
524
+ secondary: {
525
+ background: "semantic.colors.surface",
526
+ foreground: "semantic.colors.secondary",
527
+ borderRadius: "palette.radius.lg",
528
+ padding: "semantic.spacing.md"
529
+ },
530
+ ghost: {
531
+ background: "transparent",
532
+ foreground: "semantic.colors.text",
533
+ borderRadius: "palette.radius.md",
534
+ padding: "semantic.spacing.sm"
535
+ }
536
+ },
537
+ input: {
538
+ // Input role — soft gray
539
+ background: "palette.colors.gray.50",
540
+ placeholder: "palette.colors.gray.400",
541
+ borderRadius: "palette.radius.lg",
542
+ padding: "semantic.spacing.md",
543
+ focus: {
544
+ border: "palette.colors.gray.400",
545
+ ring: "palette.colors.gray.400"
546
+ }
547
+ },
548
+ launcher: {
549
+ background: "palette.colors.primary.500",
550
+ foreground: "palette.colors.primary.50",
551
+ border: "palette.colors.gray.200",
552
+ size: "60px",
553
+ iconSize: "28px",
554
+ borderRadius: "palette.radius.full",
555
+ shadow: "palette.shadows.lg"
556
+ },
557
+ panel: {
558
+ width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
559
+ maxWidth: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
560
+ height: "600px",
561
+ maxHeight: "calc(100vh - 80px)",
562
+ borderRadius: "palette.radius.xl",
563
+ shadow: "palette.shadows.xl"
564
+ },
565
+ header: {
566
+ // Header role — solid primary
567
+ background: "palette.colors.primary.500",
568
+ border: "palette.colors.primary.600",
569
+ borderRadius: "palette.radius.xl palette.radius.xl 0 0",
570
+ padding: "semantic.spacing.md",
571
+ iconBackground: "palette.colors.primary.600",
572
+ iconForeground: "palette.colors.primary.50",
573
+ titleForeground: "palette.colors.primary.50",
574
+ subtitleForeground: "palette.colors.primary.200",
575
+ actionIconForeground: "palette.colors.primary.200"
576
+ },
577
+ message: {
578
+ user: {
579
+ // User Messages role — solid primary
580
+ background: "palette.colors.primary.500",
581
+ text: "palette.colors.primary.50",
582
+ borderRadius: "palette.radius.lg",
583
+ shadow: "palette.shadows.sm"
584
+ },
585
+ assistant: {
586
+ // Assistant Messages role — soft gray
587
+ background: "palette.colors.gray.50",
588
+ text: "palette.colors.gray.900",
589
+ borderRadius: "palette.radius.lg",
590
+ border: "palette.colors.gray.200",
591
+ shadow: "palette.shadows.sm"
592
+ },
593
+ border: "semantic.colors.border"
594
+ },
595
+ toolBubble: {
596
+ shadow: "palette.shadows.sm"
597
+ },
598
+ reasoningBubble: {
599
+ shadow: "palette.shadows.sm"
600
+ },
601
+ composer: {
602
+ shadow: "none"
603
+ },
604
+ markdown: {
605
+ inlineCode: {
606
+ background: "palette.colors.gray.50",
607
+ foreground: "palette.colors.gray.900"
608
+ },
609
+ link: {
610
+ // Links/Focus role — solid primary
611
+ foreground: "palette.colors.primary.600"
612
+ },
613
+ prose: {
614
+ fontFamily: "inherit"
615
+ },
616
+ codeBlock: {
617
+ background: "semantic.colors.container",
618
+ borderColor: "semantic.colors.border",
619
+ textColor: "inherit"
620
+ },
621
+ table: {
622
+ headerBackground: "semantic.colors.container",
623
+ borderColor: "semantic.colors.border"
624
+ },
625
+ hr: {
626
+ color: "semantic.colors.divider"
627
+ },
628
+ blockquote: {
629
+ borderColor: "palette.colors.gray.900",
630
+ background: "transparent",
631
+ textColor: "palette.colors.gray.500"
632
+ }
633
+ },
634
+ collapsibleWidget: {
635
+ container: "palette.colors.gray.50",
636
+ surface: "semantic.colors.surface",
637
+ border: "semantic.colors.border"
638
+ },
639
+ voice: {
640
+ recording: {
641
+ indicator: "palette.colors.error.500",
642
+ background: "palette.colors.error.50",
643
+ border: "palette.colors.error.200"
644
+ },
645
+ processing: {
646
+ icon: "palette.colors.primary.500",
647
+ background: "palette.colors.primary.50"
648
+ },
649
+ speaking: {
650
+ icon: "palette.colors.success.500"
651
+ }
652
+ },
653
+ approval: {
654
+ requested: {
655
+ background: "palette.colors.warning.50",
656
+ border: "palette.colors.warning.200",
657
+ text: "palette.colors.gray.900"
658
+ },
659
+ approve: {
660
+ background: "palette.colors.success.500",
661
+ foreground: "palette.colors.gray.50",
662
+ borderRadius: "palette.radius.md",
663
+ padding: "semantic.spacing.sm"
664
+ },
665
+ deny: {
666
+ background: "palette.colors.error.500",
667
+ foreground: "palette.colors.gray.50",
668
+ borderRadius: "palette.radius.md",
669
+ padding: "semantic.spacing.sm"
670
+ }
671
+ },
672
+ attachment: {
673
+ image: {
674
+ background: "palette.colors.gray.100",
675
+ border: "palette.colors.gray.200"
676
+ }
677
+ },
678
+ scrollToBottom: {
679
+ background: "components.button.primary.background",
680
+ foreground: "components.button.primary.foreground",
391
681
  border: "semantic.colors.primary",
392
682
  size: "40px",
393
683
  borderRadius: "palette.radius.full",
@@ -781,23 +1071,6 @@ function themeToCssVariables(theme) {
781
1071
  return cssVars;
782
1072
  }
783
1073
 
784
- // src/utils/deep-merge.ts
785
- var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
786
- function deepMerge(base, override) {
787
- if (!base) return override;
788
- if (!override) return base;
789
- const merged = { ...base };
790
- for (const [key, value] of Object.entries(override)) {
791
- const existing = merged[key];
792
- if (isObject(existing) && isObject(value)) {
793
- merged[key] = deepMerge(existing, value);
794
- } else {
795
- merged[key] = value;
796
- }
797
- }
798
- return merged;
799
- }
800
-
801
1074
  // src/utils/theme.ts
802
1075
  var DARK_PALETTE = {
803
1076
  colors: {
@@ -827,444 +1100,173 @@ var DARK_PALETTE = {
827
1100
  900: "#4c1d95",
828
1101
  950: "#2e1065"
829
1102
  },
830
- accent: {
831
- 50: "#ecfeff",
832
- 100: "#cffafe",
833
- 200: "#a5f3fc",
834
- 300: "#67e8f9",
835
- 400: "#22d3ee",
836
- 500: "#06b6d4",
837
- 600: "#0891b2",
838
- 700: "#0e7490",
839
- 800: "#155e75",
840
- 900: "#164e63",
841
- 950: "#083344"
842
- },
843
- gray: {
844
- 50: "#f9fafb",
845
- 100: "#f3f4f6",
846
- 200: "#e5e7eb",
847
- 300: "#d1d5db",
848
- 400: "#9ca3af",
849
- 500: "#6b7280",
850
- 600: "#4b5563",
851
- 700: "#374151",
852
- 800: "#1f2937",
853
- 900: "#111827",
854
- 950: "#030712"
855
- },
856
- success: {
857
- 50: "#f0fdf4",
858
- 100: "#dcfce7",
859
- 200: "#bbf7d0",
860
- 300: "#86efac",
861
- 400: "#4ade80",
862
- 500: "#22c55e",
863
- 600: "#16a34a",
864
- 700: "#15803d",
865
- 800: "#166534",
866
- 900: "#14532d"
867
- },
868
- warning: {
869
- 50: "#fefce8",
870
- 100: "#fef9c3",
871
- 200: "#fef08a",
872
- 300: "#fde047",
873
- 400: "#facc15",
874
- 500: "#eab308",
875
- 600: "#ca8a04",
876
- 700: "#a16207",
877
- 800: "#854d0e",
878
- 900: "#713f12"
879
- },
880
- error: {
881
- 50: "#fef2f2",
882
- 100: "#fee2e2",
883
- 200: "#fecaca",
884
- 300: "#fca5a5",
885
- 400: "#f87171",
886
- 500: "#ef4444",
887
- 600: "#dc2626",
888
- 700: "#b91c1c",
889
- 800: "#991b1b",
890
- 900: "#7f1d1d"
891
- }
892
- }
893
- };
894
- var normalizeThemeConfig = (theme) => {
895
- if (!theme || typeof theme !== "object" || Array.isArray(theme)) return void 0;
896
- return theme;
897
- };
898
- var detectColorScheme = () => {
899
- var _a;
900
- if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
901
- return "dark";
902
- }
903
- if (typeof window !== "undefined" && ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-color-scheme: dark)").matches)) {
904
- return "dark";
905
- }
906
- return "light";
907
- };
908
- var getColorSchemeFromConfig = (config) => {
909
- var _a;
910
- const colorScheme = (_a = config == null ? void 0 : config.colorScheme) != null ? _a : "light";
911
- if (colorScheme === "light") return "light";
912
- if (colorScheme === "dark") return "dark";
913
- return detectColorScheme();
914
- };
915
- var getColorScheme = (config) => {
916
- return getColorSchemeFromConfig(config);
917
- };
918
- var createLightTheme = (userConfig) => {
919
- return createTheme(userConfig);
920
- };
921
- var createDarkTheme = (userConfig) => {
922
- var _a;
923
- const baseTheme = createTheme(void 0, { validate: false });
924
- return createTheme(
925
- {
926
- ...userConfig,
927
- palette: {
928
- ...baseTheme.palette,
929
- colors: {
930
- ...DARK_PALETTE.colors,
931
- ...(_a = userConfig == null ? void 0 : userConfig.palette) == null ? void 0 : _a.colors
932
- }
933
- }
934
- },
935
- { validate: false }
936
- );
937
- };
938
- var getActiveTheme = (config) => {
939
- const scheme = getColorScheme(config);
940
- const lightThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.theme);
941
- const darkThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.darkTheme);
942
- if (scheme === "dark") {
943
- return createDarkTheme(
944
- deepMerge(
945
- lightThemeConfig != null ? lightThemeConfig : {},
946
- darkThemeConfig != null ? darkThemeConfig : {}
947
- )
948
- );
949
- }
950
- return createLightTheme(lightThemeConfig);
951
- };
952
- var getCssVariables = (theme) => {
953
- return themeToCssVariables(theme);
954
- };
955
- var applyThemeVariables = (element, config) => {
956
- var _a;
957
- const theme = getActiveTheme(config);
958
- const cssVars = getCssVariables(theme);
959
- for (const [name, value] of Object.entries(cssVars)) {
960
- element.style.setProperty(name, value);
961
- }
962
- const toolCallShadow = (_a = config == null ? void 0 : config.toolCall) == null ? void 0 : _a.shadow;
963
- if (toolCallShadow !== void 0) {
964
- element.style.setProperty(
965
- "--persona-tool-bubble-shadow",
966
- toolCallShadow.trim() === "" ? "none" : toolCallShadow
967
- );
968
- }
969
- };
970
- var createThemeObserver = (callback) => {
971
- const cleanupFns = [];
972
- if (typeof document !== "undefined" && typeof MutationObserver !== "undefined") {
973
- const observer = new MutationObserver(() => {
974
- callback(detectColorScheme());
975
- });
976
- observer.observe(document.documentElement, {
977
- attributes: true,
978
- attributeFilter: ["class"]
979
- });
980
- cleanupFns.push(() => observer.disconnect());
981
- }
982
- if (typeof window !== "undefined" && window.matchMedia) {
983
- const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
984
- const handleChange = () => callback(detectColorScheme());
985
- if (mediaQuery.addEventListener) {
986
- mediaQuery.addEventListener("change", handleChange);
987
- cleanupFns.push(() => mediaQuery.removeEventListener("change", handleChange));
988
- } else if (mediaQuery.addListener) {
989
- mediaQuery.addListener(handleChange);
990
- cleanupFns.push(() => mediaQuery.removeListener(handleChange));
991
- }
992
- }
993
- return () => {
994
- cleanupFns.forEach((fn) => fn());
995
- };
996
- };
997
-
998
- // src/defaults.ts
999
- var DEFAULT_WIDGET_CONFIG = {
1000
- apiUrl: "http://localhost:43111/api/chat/dispatch",
1001
- // Client token mode defaults (optional, only used when clientToken is set)
1002
- clientToken: void 0,
1003
- theme: void 0,
1004
- darkTheme: void 0,
1005
- colorScheme: "light",
1006
- launcher: {
1007
- enabled: true,
1008
- mountMode: "floating",
1009
- dock: {
1010
- side: "right",
1011
- width: "420px"
1012
- },
1013
- title: "Chat Assistant",
1014
- subtitle: "Here to help you get answers fast",
1015
- agentIconText: "\u{1F4AC}",
1016
- agentIconName: "bot",
1017
- headerIconName: "bot",
1018
- position: "bottom-right",
1019
- width: "min(400px, calc(100vw - 24px))",
1020
- heightOffset: 0,
1021
- autoExpand: false,
1022
- callToActionIconHidden: false,
1023
- agentIconSize: "40px",
1024
- headerIconSize: "40px",
1025
- closeButtonSize: "32px",
1026
- callToActionIconName: "arrow-up-right",
1027
- callToActionIconText: "",
1028
- callToActionIconSize: "32px",
1029
- callToActionIconPadding: "5px",
1030
- callToActionIconColor: void 0,
1031
- callToActionIconBackgroundColor: void 0,
1032
- // closeButtonColor / clearChat.iconColor omitted so theme.components.header.actionIconForeground applies.
1033
- closeButtonBackgroundColor: "transparent",
1034
- clearChat: {
1035
- backgroundColor: "transparent",
1036
- borderColor: "transparent",
1037
- enabled: true,
1038
- placement: "inline",
1039
- iconName: "refresh-cw",
1040
- size: "32px",
1041
- showTooltip: true,
1042
- tooltipText: "Clear chat",
1043
- paddingX: "0px",
1044
- paddingY: "0px"
1045
- },
1046
- headerIconHidden: false,
1047
- border: void 0,
1048
- shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
1049
- },
1050
- copy: {
1051
- welcomeTitle: "Hello \u{1F44B}",
1052
- welcomeSubtitle: "Ask anything about your account or products.",
1053
- inputPlaceholder: "How can I help...",
1054
- sendButtonLabel: "Send"
1055
- },
1056
- sendButton: {
1057
- borderWidth: "0px",
1058
- paddingX: "12px",
1059
- paddingY: "10px",
1060
- borderColor: void 0,
1061
- useIcon: true,
1062
- iconText: "\u2191",
1063
- size: "40px",
1064
- showTooltip: true,
1065
- tooltipText: "Send message",
1066
- iconName: "send"
1067
- },
1068
- statusIndicator: {
1069
- visible: true,
1070
- idleText: "Online",
1071
- connectingText: "Connecting\u2026",
1072
- connectedText: "Streaming\u2026",
1073
- errorText: "Offline"
1074
- },
1075
- voiceRecognition: {
1076
- enabled: true,
1077
- pauseDuration: 2e3,
1078
- iconName: "mic",
1079
- iconSize: "39px",
1080
- borderWidth: "0px",
1081
- paddingX: "9px",
1082
- paddingY: "14px",
1083
- iconColor: void 0,
1084
- backgroundColor: "transparent",
1085
- borderColor: "transparent",
1086
- recordingIconColor: void 0,
1087
- recordingBackgroundColor: void 0,
1088
- recordingBorderColor: "transparent",
1089
- showTooltip: true,
1090
- tooltipText: "Start voice recognition"
1091
- },
1092
- features: {
1093
- showReasoning: true,
1094
- showToolCalls: true,
1095
- scrollToBottom: {
1096
- enabled: true,
1097
- iconName: "arrow-down",
1098
- label: ""
1099
- }
1100
- },
1101
- suggestionChips: [
1102
- "What can you help me with?",
1103
- "Tell me about your features",
1104
- "How does this work?"
1105
- ],
1106
- suggestionChipsConfig: {
1107
- fontFamily: "sans-serif",
1108
- fontWeight: "500",
1109
- paddingX: "12px",
1110
- paddingY: "6px"
1111
- },
1112
- layout: {
1113
- header: {
1114
- layout: "default",
1115
- showIcon: true,
1116
- showTitle: true,
1117
- showSubtitle: true,
1118
- showCloseButton: true,
1119
- showClearChat: true
1120
- },
1121
- messages: {
1122
- layout: "bubble",
1123
- avatar: {
1124
- show: false,
1125
- position: "left"
1126
- },
1127
- timestamp: {
1128
- show: false,
1129
- position: "below"
1130
- },
1131
- groupConsecutive: false
1132
- },
1133
- slots: {}
1134
- },
1135
- markdown: {
1136
- options: {
1137
- gfm: true,
1138
- breaks: true
1139
- },
1140
- disableDefaultStyles: false
1141
- },
1142
- messageActions: {
1143
- enabled: true,
1144
- showCopy: true,
1145
- showUpvote: false,
1146
- // Requires backend - disabled by default
1147
- showDownvote: false,
1148
- // Requires backend - disabled by default
1149
- visibility: "hover",
1150
- align: "right",
1151
- layout: "pill-inside"
1152
- },
1153
- debug: false
1154
- };
1155
- function mergeThemePartials(base, override) {
1156
- if (!base && !override) return void 0;
1157
- if (!base) return override;
1158
- if (!override) return base;
1159
- return deepMerge(
1160
- base,
1161
- override
1162
- );
1163
- }
1164
- function mergeWithDefaults(config) {
1165
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
1166
- if (!config) return DEFAULT_WIDGET_CONFIG;
1167
- return {
1168
- ...DEFAULT_WIDGET_CONFIG,
1169
- ...config,
1170
- theme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.theme, config.theme),
1171
- darkTheme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.darkTheme, config.darkTheme),
1172
- launcher: {
1173
- ...DEFAULT_WIDGET_CONFIG.launcher,
1174
- ...config.launcher,
1175
- dock: {
1176
- ...(_a = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _a.dock,
1177
- ...(_b = config.launcher) == null ? void 0 : _b.dock
1178
- },
1179
- clearChat: {
1180
- ...(_c = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _c.clearChat,
1181
- ...(_d = config.launcher) == null ? void 0 : _d.clearChat
1182
- }
1183
- },
1184
- copy: {
1185
- ...DEFAULT_WIDGET_CONFIG.copy,
1186
- ...config.copy
1187
- },
1188
- sendButton: {
1189
- ...DEFAULT_WIDGET_CONFIG.sendButton,
1190
- ...config.sendButton
1103
+ accent: {
1104
+ 50: "#ecfeff",
1105
+ 100: "#cffafe",
1106
+ 200: "#a5f3fc",
1107
+ 300: "#67e8f9",
1108
+ 400: "#22d3ee",
1109
+ 500: "#06b6d4",
1110
+ 600: "#0891b2",
1111
+ 700: "#0e7490",
1112
+ 800: "#155e75",
1113
+ 900: "#164e63",
1114
+ 950: "#083344"
1191
1115
  },
1192
- statusIndicator: {
1193
- ...DEFAULT_WIDGET_CONFIG.statusIndicator,
1194
- ...config.statusIndicator
1116
+ gray: {
1117
+ 50: "#f9fafb",
1118
+ 100: "#f3f4f6",
1119
+ 200: "#e5e7eb",
1120
+ 300: "#d1d5db",
1121
+ 400: "#9ca3af",
1122
+ 500: "#6b7280",
1123
+ 600: "#4b5563",
1124
+ 700: "#374151",
1125
+ 800: "#1f2937",
1126
+ 900: "#111827",
1127
+ 950: "#030712"
1195
1128
  },
1196
- voiceRecognition: {
1197
- ...DEFAULT_WIDGET_CONFIG.voiceRecognition,
1198
- ...config.voiceRecognition
1129
+ success: {
1130
+ 50: "#f0fdf4",
1131
+ 100: "#dcfce7",
1132
+ 200: "#bbf7d0",
1133
+ 300: "#86efac",
1134
+ 400: "#4ade80",
1135
+ 500: "#22c55e",
1136
+ 600: "#16a34a",
1137
+ 700: "#15803d",
1138
+ 800: "#166534",
1139
+ 900: "#14532d"
1199
1140
  },
1200
- features: (() => {
1201
- var _a2, _b2, _c2, _d2;
1202
- const da = (_a2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _a2.artifacts;
1203
- const ca = (_b2 = config.features) == null ? void 0 : _b2.artifacts;
1204
- const dsb = (_c2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _c2.scrollToBottom;
1205
- const csb = (_d2 = config.features) == null ? void 0 : _d2.scrollToBottom;
1206
- const mergedArtifacts = da === void 0 && ca === void 0 ? void 0 : {
1207
- ...da,
1208
- ...ca,
1209
- layout: {
1210
- ...da == null ? void 0 : da.layout,
1211
- ...ca == null ? void 0 : ca.layout
1212
- }
1213
- };
1214
- const mergedScrollToBottom = dsb === void 0 && csb === void 0 ? void 0 : {
1215
- ...dsb,
1216
- ...csb
1217
- };
1218
- return {
1219
- ...DEFAULT_WIDGET_CONFIG.features,
1220
- ...config.features,
1221
- ...mergedScrollToBottom !== void 0 ? { scrollToBottom: mergedScrollToBottom } : {},
1222
- ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {}
1223
- };
1224
- })(),
1225
- suggestionChips: (_e = config.suggestionChips) != null ? _e : DEFAULT_WIDGET_CONFIG.suggestionChips,
1226
- suggestionChipsConfig: {
1227
- ...DEFAULT_WIDGET_CONFIG.suggestionChipsConfig,
1228
- ...config.suggestionChipsConfig
1141
+ warning: {
1142
+ 50: "#fefce8",
1143
+ 100: "#fef9c3",
1144
+ 200: "#fef08a",
1145
+ 300: "#fde047",
1146
+ 400: "#facc15",
1147
+ 500: "#eab308",
1148
+ 600: "#ca8a04",
1149
+ 700: "#a16207",
1150
+ 800: "#854d0e",
1151
+ 900: "#713f12"
1229
1152
  },
1230
- layout: {
1231
- ...DEFAULT_WIDGET_CONFIG.layout,
1232
- ...config.layout,
1233
- header: {
1234
- ...(_f = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _f.header,
1235
- ...(_g = config.layout) == null ? void 0 : _g.header
1236
- },
1237
- messages: {
1238
- ...(_h = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _h.messages,
1239
- ...(_i = config.layout) == null ? void 0 : _i.messages,
1240
- avatar: {
1241
- ...(_k = (_j = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _j.messages) == null ? void 0 : _k.avatar,
1242
- ...(_m = (_l = config.layout) == null ? void 0 : _l.messages) == null ? void 0 : _m.avatar
1243
- },
1244
- timestamp: {
1245
- ...(_o = (_n = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _n.messages) == null ? void 0 : _o.timestamp,
1246
- ...(_q = (_p = config.layout) == null ? void 0 : _p.messages) == null ? void 0 : _q.timestamp
1153
+ error: {
1154
+ 50: "#fef2f2",
1155
+ 100: "#fee2e2",
1156
+ 200: "#fecaca",
1157
+ 300: "#fca5a5",
1158
+ 400: "#f87171",
1159
+ 500: "#ef4444",
1160
+ 600: "#dc2626",
1161
+ 700: "#b91c1c",
1162
+ 800: "#991b1b",
1163
+ 900: "#7f1d1d"
1164
+ }
1165
+ }
1166
+ };
1167
+ var normalizeThemeConfig = (theme) => {
1168
+ if (!theme || typeof theme !== "object" || Array.isArray(theme)) return void 0;
1169
+ return theme;
1170
+ };
1171
+ var detectColorScheme = () => {
1172
+ var _a;
1173
+ if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
1174
+ return "dark";
1175
+ }
1176
+ if (typeof window !== "undefined" && ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-color-scheme: dark)").matches)) {
1177
+ return "dark";
1178
+ }
1179
+ return "light";
1180
+ };
1181
+ var getColorSchemeFromConfig = (config) => {
1182
+ var _a;
1183
+ const colorScheme = (_a = config == null ? void 0 : config.colorScheme) != null ? _a : "light";
1184
+ if (colorScheme === "light") return "light";
1185
+ if (colorScheme === "dark") return "dark";
1186
+ return detectColorScheme();
1187
+ };
1188
+ var getColorScheme = (config) => {
1189
+ return getColorSchemeFromConfig(config);
1190
+ };
1191
+ var createLightTheme = (userConfig) => {
1192
+ return createTheme(userConfig);
1193
+ };
1194
+ var createDarkTheme = (userConfig) => {
1195
+ var _a;
1196
+ const baseTheme = createTheme(void 0, { validate: false });
1197
+ return createTheme(
1198
+ {
1199
+ ...userConfig,
1200
+ palette: {
1201
+ ...baseTheme.palette,
1202
+ colors: {
1203
+ ...DARK_PALETTE.colors,
1204
+ ...(_a = userConfig == null ? void 0 : userConfig.palette) == null ? void 0 : _a.colors
1247
1205
  }
1248
- },
1249
- slots: {
1250
- ...(_r = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _r.slots,
1251
- ...(_s = config.layout) == null ? void 0 : _s.slots
1252
- }
1253
- },
1254
- markdown: {
1255
- ...DEFAULT_WIDGET_CONFIG.markdown,
1256
- ...config.markdown,
1257
- options: {
1258
- ...(_t = DEFAULT_WIDGET_CONFIG.markdown) == null ? void 0 : _t.options,
1259
- ...(_u = config.markdown) == null ? void 0 : _u.options
1260
1206
  }
1261
1207
  },
1262
- messageActions: {
1263
- ...DEFAULT_WIDGET_CONFIG.messageActions,
1264
- ...config.messageActions
1208
+ { validate: false }
1209
+ );
1210
+ };
1211
+ var getActiveTheme = (config) => {
1212
+ const scheme = getColorScheme(config);
1213
+ const lightThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.theme);
1214
+ const darkThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.darkTheme);
1215
+ if (scheme === "dark") {
1216
+ return createDarkTheme(
1217
+ deepMerge(
1218
+ lightThemeConfig != null ? lightThemeConfig : {},
1219
+ darkThemeConfig != null ? darkThemeConfig : {}
1220
+ )
1221
+ );
1222
+ }
1223
+ return createLightTheme(lightThemeConfig);
1224
+ };
1225
+ var getCssVariables = (theme) => {
1226
+ return themeToCssVariables(theme);
1227
+ };
1228
+ var applyThemeVariables = (element, config) => {
1229
+ var _a;
1230
+ const theme = getActiveTheme(config);
1231
+ const cssVars = getCssVariables(theme);
1232
+ for (const [name, value] of Object.entries(cssVars)) {
1233
+ element.style.setProperty(name, value);
1234
+ }
1235
+ const toolCallShadow = (_a = config == null ? void 0 : config.toolCall) == null ? void 0 : _a.shadow;
1236
+ if (toolCallShadow !== void 0) {
1237
+ element.style.setProperty(
1238
+ "--persona-tool-bubble-shadow",
1239
+ toolCallShadow.trim() === "" ? "none" : toolCallShadow
1240
+ );
1241
+ }
1242
+ };
1243
+ var createThemeObserver = (callback) => {
1244
+ const cleanupFns = [];
1245
+ if (typeof document !== "undefined" && typeof MutationObserver !== "undefined") {
1246
+ const observer = new MutationObserver(() => {
1247
+ callback(detectColorScheme());
1248
+ });
1249
+ observer.observe(document.documentElement, {
1250
+ attributes: true,
1251
+ attributeFilter: ["class"]
1252
+ });
1253
+ cleanupFns.push(() => observer.disconnect());
1254
+ }
1255
+ if (typeof window !== "undefined" && window.matchMedia) {
1256
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
1257
+ const handleChange = () => callback(detectColorScheme());
1258
+ if (mediaQuery.addEventListener) {
1259
+ mediaQuery.addEventListener("change", handleChange);
1260
+ cleanupFns.push(() => mediaQuery.removeEventListener("change", handleChange));
1261
+ } else if (mediaQuery.addListener) {
1262
+ mediaQuery.addListener(handleChange);
1263
+ cleanupFns.push(() => mediaQuery.removeListener(handleChange));
1265
1264
  }
1265
+ }
1266
+ return () => {
1267
+ cleanupFns.forEach((fn) => fn());
1266
1268
  };
1267
- }
1269
+ };
1268
1270
 
1269
1271
  // src/theme-editor/state.ts
1270
1272
  function getByPath(obj, path) {
@@ -2129,8 +2131,8 @@ var panelLayoutSectionDef = {
2129
2131
  title: "Panel",
2130
2132
  collapsed: false,
2131
2133
  fields: [
2132
- { id: "panel-width", label: "Width", type: "text", path: "theme.components.panel.width", defaultValue: "min(400px, calc(100vw - 24px))" },
2133
- { id: "panel-max-width", label: "Max Width", type: "text", path: "theme.components.panel.maxWidth", defaultValue: "400px" },
2134
+ { id: "panel-width", label: "Width", type: "text", path: "theme.components.panel.width", defaultValue: DEFAULT_FLOATING_LAUNCHER_WIDTH },
2135
+ { id: "panel-max-width", label: "Max Width", type: "text", path: "theme.components.panel.maxWidth", defaultValue: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH },
2134
2136
  { id: "panel-height", label: "Height", type: "text", path: "theme.components.panel.height", defaultValue: "600px" },
2135
2137
  { id: "panel-max-height", label: "Max Height", type: "text", path: "theme.components.panel.maxHeight", defaultValue: "calc(100vh - 80px)" },
2136
2138
  { id: "panel-border-radius", label: "Border Radius", type: "select", path: "theme.components.panel.borderRadius", defaultValue: "palette.radius.xl", options: [
@@ -2434,7 +2436,7 @@ var launcherBasicsSectionDef = {
2434
2436
  { id: "launch-enabled", label: "Enabled", type: "toggle", path: "launcher.enabled", defaultValue: true },
2435
2437
  { id: "launch-mount-mode", label: "Mount Mode", type: "select", path: "launcher.mountMode", defaultValue: "floating", options: [{ value: "floating", label: "Floating" }, { value: "docked", label: "Docked" }] },
2436
2438
  { id: "launch-position", label: "Position", type: "select", path: "launcher.position", defaultValue: "bottom-right", options: [{ value: "bottom-right", label: "Bottom Right" }, { value: "bottom-left", label: "Bottom Left" }, { value: "top-right", label: "Top Right" }, { value: "top-left", label: "Top Left" }] },
2437
- { id: "launch-width", label: "Width", type: "text", path: "launcher.width", defaultValue: "min(400px, calc(100vw - 24px))" },
2439
+ { id: "launch-width", label: "Width", type: "text", path: "launcher.width", defaultValue: DEFAULT_FLOATING_LAUNCHER_WIDTH },
2438
2440
  { id: "launch-auto-expand", label: "Auto Expand", type: "toggle", path: "launcher.autoExpand", defaultValue: false },
2439
2441
  { id: "launch-title", label: "Title", type: "text", path: "launcher.title", defaultValue: "Chat Assistant" },
2440
2442
  { id: "launch-subtitle", label: "Subtitle", type: "text", path: "launcher.subtitle", defaultValue: "Here to help you get answers fast" }
@@ -4148,6 +4150,7 @@ var AgentWidgetClient = class {
4148
4150
  let assistantMessage = null;
4149
4151
  const assistantMessageRef = { current: null };
4150
4152
  const partIdState = { current: null };
4153
+ let didSplitByPartId = false;
4151
4154
  const reasoningMessages = /* @__PURE__ */ new Map();
4152
4155
  const toolMessages = /* @__PURE__ */ new Map();
4153
4156
  const reasoningContext = {
@@ -4178,11 +4181,21 @@ var AgentWidgetClient = class {
4178
4181
  (_g2 = (_f2 = (_e2 = (_d2 = (_c2 = (_b2 = (_a2 = payload.callId) != null ? _a2 : payload.call_id) != null ? _b2 : payload.requestId) != null ? _c2 : payload.request_id) != null ? _d2 : payload.toolCallId) != null ? _e2 : payload.tool_call_id) != null ? _f2 : payload.stepId) != null ? _g2 : payload.step_id
4179
4182
  );
4180
4183
  };
4184
+ const baseAssistantId = assistantMessageId;
4185
+ let assistantIdConsumed = false;
4181
4186
  const ensureAssistantMessage = () => {
4182
4187
  if (assistantMessage) return assistantMessage;
4188
+ let id;
4189
+ if (!assistantIdConsumed && baseAssistantId) {
4190
+ id = baseAssistantId;
4191
+ assistantIdConsumed = true;
4192
+ } else if (baseAssistantId && partIdState.current) {
4193
+ id = `${baseAssistantId}_${partIdState.current}`;
4194
+ } else {
4195
+ id = `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`;
4196
+ }
4183
4197
  assistantMessage = {
4184
- // Use pre-generated ID if provided, otherwise generate one
4185
- id: assistantMessageId != null ? assistantMessageId : `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`,
4198
+ id,
4186
4199
  role: "assistant",
4187
4200
  content: "",
4188
4201
  createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -4551,13 +4564,51 @@ var AgentWidgetClient = class {
4551
4564
  if (callKey) {
4552
4565
  toolContext.byCall.delete(callKey);
4553
4566
  }
4567
+ } else if (payloadType === "text_start") {
4568
+ const incomingPartId = payload.partId;
4569
+ if (incomingPartId !== void 0 && partIdState.current !== null && incomingPartId !== partIdState.current) {
4570
+ const prev = assistantMessage;
4571
+ if (prev) {
4572
+ prev.streaming = false;
4573
+ emitMessage(prev);
4574
+ assistantMessage = null;
4575
+ didSplitByPartId = true;
4576
+ }
4577
+ }
4578
+ if (incomingPartId !== void 0) {
4579
+ partIdState.current = incomingPartId;
4580
+ }
4581
+ } else if (payloadType === "text_end") {
4582
+ const prev = assistantMessage;
4583
+ if (prev) {
4584
+ prev.streaming = false;
4585
+ emitMessage(prev);
4586
+ assistantMessage = null;
4587
+ didSplitByPartId = true;
4588
+ }
4554
4589
  } else if (payloadType === "step_chunk" || payloadType === "step_delta") {
4555
4590
  const stepType = payload.stepType;
4556
4591
  const executionType = payload.executionType;
4557
4592
  if (stepType === "tool" || executionType === "context") {
4558
4593
  continue;
4559
4594
  }
4595
+ const incomingPartId = payload.partId;
4596
+ if (incomingPartId !== void 0 && partIdState.current !== null && incomingPartId !== partIdState.current) {
4597
+ const prev = assistantMessage;
4598
+ if (prev) {
4599
+ prev.streaming = false;
4600
+ emitMessage(prev);
4601
+ assistantMessage = null;
4602
+ didSplitByPartId = true;
4603
+ }
4604
+ }
4605
+ if (incomingPartId !== void 0) {
4606
+ partIdState.current = incomingPartId;
4607
+ }
4560
4608
  const assistant = ensureAssistantMessage();
4609
+ if (incomingPartId !== void 0 && !assistant.partId) {
4610
+ assistant.partId = incomingPartId;
4611
+ }
4561
4612
  const chunk = (_ca = (_ba = (_aa = (_$ = payload.text) != null ? _$ : payload.delta) != null ? _aa : payload.content) != null ? _ba : payload.chunk) != null ? _ca : "";
4562
4613
  if (chunk) {
4563
4614
  const rawBuffer = (_da = rawContentBuffers.get(assistant.id)) != null ? _da : "";
@@ -4781,7 +4832,17 @@ var AgentWidgetClient = class {
4781
4832
  }
4782
4833
  } else if (payloadType === "flow_complete") {
4783
4834
  const finalContent = (_ma = payload.result) == null ? void 0 : _ma.response;
4784
- if (finalContent !== void 0 && finalContent !== null) {
4835
+ if (didSplitByPartId) {
4836
+ if (assistantMessage !== null) {
4837
+ const msg = assistantMessage;
4838
+ streamParsers.delete(msg.id);
4839
+ rawContentBuffers.delete(msg.id);
4840
+ if (msg.streaming !== false) {
4841
+ msg.streaming = false;
4842
+ emitMessage(msg);
4843
+ }
4844
+ }
4845
+ } else if (finalContent !== void 0 && finalContent !== null) {
4785
4846
  const assistant = ensureAssistantMessage();
4786
4847
  const rawBuffer = rawContentBuffers.get(assistant.id);
4787
4848
  const stringContent = rawBuffer != null ? rawBuffer : ensureStringContent(finalContent);
@@ -9201,7 +9262,7 @@ var createWrapper = (config) => {
9201
9262
  "persona-widget-panel persona-relative persona-min-h-[320px]"
9202
9263
  );
9203
9264
  const launcherWidth = (_i = (_h = config == null ? void 0 : config.launcher) == null ? void 0 : _h.width) != null ? _i : config == null ? void 0 : config.launcherWidth;
9204
- const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
9265
+ const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
9205
9266
  panel.style.width = width;
9206
9267
  panel.style.maxWidth = width;
9207
9268
  wrapper.appendChild(panel);
@@ -13377,6 +13438,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
13377
13438
  selectedModelId: composerCfg == null ? void 0 : composerCfg.selectedModelId,
13378
13439
  onModelChange: (modelId) => {
13379
13440
  config.composer = { ...config.composer, selectedModelId: modelId };
13441
+ if (config.agent) {
13442
+ config.agent = { ...config.agent, model: modelId };
13443
+ }
13380
13444
  },
13381
13445
  onVoiceToggle: ((_A = config.voiceRecognition) == null ? void 0 : _A.enabled) === true ? () => {
13382
13446
  composerVoiceBridge == null ? void 0 : composerVoiceBridge();
@@ -13423,6 +13487,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
13423
13487
  composerForm.style.marginLeft = "auto";
13424
13488
  composerForm.style.marginRight = "auto";
13425
13489
  }
13490
+ if (contentMaxWidth && suggestions) {
13491
+ suggestions.style.maxWidth = contentMaxWidth;
13492
+ suggestions.style.marginLeft = "auto";
13493
+ suggestions.style.marginRight = "auto";
13494
+ }
13426
13495
  if (contentMaxWidth && attachmentPreviewsContainer) {
13427
13496
  attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
13428
13497
  attachmentPreviewsContainer.style.marginLeft = "auto";
@@ -13901,7 +13970,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
13901
13970
  const mobileBreakpoint = (_g2 = (_f2 = config.launcher) == null ? void 0 : _f2.mobileBreakpoint) != null ? _g2 : 640;
13902
13971
  if (mobileFullscreen && ownerWindow2.innerWidth <= mobileBreakpoint) return;
13903
13972
  if (!shouldExpandLauncherForArtifacts(config, launcherEnabled)) return;
13904
- const base = (_j2 = (_i2 = (_h2 = config.launcher) == null ? void 0 : _h2.width) != null ? _i2 : config.launcherWidth) != null ? _j2 : "min(400px, calc(100vw - 24px))";
13973
+ const base = (_j2 = (_i2 = (_h2 = config.launcher) == null ? void 0 : _h2.width) != null ? _i2 : config.launcherWidth) != null ? _j2 : DEFAULT_FLOATING_LAUNCHER_WIDTH;
13905
13974
  const expanded = (_n2 = (_m2 = (_l2 = (_k2 = config.features) == null ? void 0 : _k2.artifacts) == null ? void 0 : _l2.layout) == null ? void 0 : _m2.expandedPanelWidth) != null ? _n2 : "min(720px, calc(100vw - 24px))";
13906
13975
  const hasVisible = lastArtifactsState.artifacts.length > 0 && !artifactsPaneUserHidden;
13907
13976
  if (hasVisible) {
@@ -14017,7 +14086,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
14017
14086
  return;
14018
14087
  }
14019
14088
  const launcherWidth = (_r2 = (_q2 = config == null ? void 0 : config.launcher) == null ? void 0 : _q2.width) != null ? _r2 : config == null ? void 0 : config.launcherWidth;
14020
- const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
14089
+ const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
14021
14090
  if (!sidebarMode && !dockedMode) {
14022
14091
  if (isInlineEmbed && fullHeight) {
14023
14092
  panel.style.width = "100%";
@@ -15537,7 +15606,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
15537
15606
  }
15538
15607
  if (!sidebarMode && !dockedMode) {
15539
15608
  const launcherWidth = (_k2 = (_j2 = config == null ? void 0 : config.launcher) == null ? void 0 : _j2.width) != null ? _k2 : config == null ? void 0 : config.launcherWidth;
15540
- const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
15609
+ const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
15541
15610
  panel.style.width = width;
15542
15611
  panel.style.maxWidth = width;
15543
15612
  }
@@ -16626,6 +16695,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
16626
16695
  composerForm.style.marginLeft = "auto";
16627
16696
  composerForm.style.marginRight = "auto";
16628
16697
  }
16698
+ if (suggestions) {
16699
+ suggestions.style.maxWidth = updatedContentMaxWidth;
16700
+ suggestions.style.marginLeft = "auto";
16701
+ suggestions.style.marginRight = "auto";
16702
+ }
16629
16703
  } else {
16630
16704
  messagesWrapper.style.maxWidth = "";
16631
16705
  messagesWrapper.style.marginLeft = "";
@@ -16636,6 +16710,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
16636
16710
  composerForm.style.marginLeft = "";
16637
16711
  composerForm.style.marginRight = "";
16638
16712
  }
16713
+ if (suggestions) {
16714
+ suggestions.style.maxWidth = "";
16715
+ suggestions.style.marginLeft = "";
16716
+ suggestions.style.marginRight = "";
16717
+ }
16639
16718
  }
16640
16719
  const statusIndicatorConfig = (_Qa = config.statusIndicator) != null ? _Qa : {};
16641
16720
  const isVisible = (_Ra = statusIndicatorConfig.visible) != null ? _Ra : true;