vanilla-agent 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +310 -0
- package/dist/index.cjs +14 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +370 -0
- package/dist/index.d.ts +370 -0
- package/dist/index.global.js +1710 -0
- package/dist/index.global.js.map +1 -0
- package/dist/index.js +14 -0
- package/dist/index.js.map +1 -0
- package/dist/install.global.js +2 -0
- package/dist/install.global.js.map +1 -0
- package/dist/widget.css +752 -0
- package/package.json +61 -0
- package/src/client.ts +577 -0
- package/src/components/forms.ts +165 -0
- package/src/components/launcher.ts +184 -0
- package/src/components/message-bubble.ts +52 -0
- package/src/components/messages.ts +43 -0
- package/src/components/panel.ts +555 -0
- package/src/components/reasoning-bubble.ts +114 -0
- package/src/components/suggestions.ts +52 -0
- package/src/components/tool-bubble.ts +158 -0
- package/src/index.ts +37 -0
- package/src/install.ts +159 -0
- package/src/plugins/registry.ts +72 -0
- package/src/plugins/types.ts +90 -0
- package/src/postprocessors.ts +76 -0
- package/src/runtime/init.ts +116 -0
- package/src/session.ts +206 -0
- package/src/styles/tailwind.css +19 -0
- package/src/styles/widget.css +752 -0
- package/src/types.ts +194 -0
- package/src/ui.ts +1325 -0
- package/src/utils/constants.ts +11 -0
- package/src/utils/dom.ts +20 -0
- package/src/utils/formatting.ts +77 -0
- package/src/utils/icons.ts +92 -0
- package/src/utils/positioning.ts +12 -0
- package/src/utils/theme.ts +20 -0
- package/src/widget.css +1 -0
- package/widget.css +1 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,370 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Plugin interface for customizing widget components
|
|
3
|
+
*/
|
|
4
|
+
interface ChatWidgetPlugin {
|
|
5
|
+
/**
|
|
6
|
+
* Unique identifier for the plugin
|
|
7
|
+
*/
|
|
8
|
+
id: string;
|
|
9
|
+
/**
|
|
10
|
+
* Optional priority (higher = runs first). Default: 0
|
|
11
|
+
*/
|
|
12
|
+
priority?: number;
|
|
13
|
+
/**
|
|
14
|
+
* Custom renderer for message bubbles
|
|
15
|
+
* Return null to use default renderer
|
|
16
|
+
*/
|
|
17
|
+
renderMessage?: (context: {
|
|
18
|
+
message: ChatWidgetMessage;
|
|
19
|
+
defaultRenderer: () => HTMLElement;
|
|
20
|
+
config: ChatWidgetConfig;
|
|
21
|
+
}) => HTMLElement | null;
|
|
22
|
+
/**
|
|
23
|
+
* Custom renderer for launcher button
|
|
24
|
+
* Return null to use default renderer
|
|
25
|
+
*/
|
|
26
|
+
renderLauncher?: (context: {
|
|
27
|
+
config: ChatWidgetConfig;
|
|
28
|
+
defaultRenderer: () => HTMLElement;
|
|
29
|
+
onToggle: () => void;
|
|
30
|
+
}) => HTMLElement | null;
|
|
31
|
+
/**
|
|
32
|
+
* Custom renderer for panel header
|
|
33
|
+
* Return null to use default renderer
|
|
34
|
+
*/
|
|
35
|
+
renderHeader?: (context: {
|
|
36
|
+
config: ChatWidgetConfig;
|
|
37
|
+
defaultRenderer: () => HTMLElement;
|
|
38
|
+
onClose?: () => void;
|
|
39
|
+
}) => HTMLElement | null;
|
|
40
|
+
/**
|
|
41
|
+
* Custom renderer for composer/input area
|
|
42
|
+
* Return null to use default renderer
|
|
43
|
+
*/
|
|
44
|
+
renderComposer?: (context: {
|
|
45
|
+
config: ChatWidgetConfig;
|
|
46
|
+
defaultRenderer: () => HTMLElement;
|
|
47
|
+
onSubmit: (text: string) => void;
|
|
48
|
+
disabled: boolean;
|
|
49
|
+
}) => HTMLElement | null;
|
|
50
|
+
/**
|
|
51
|
+
* Custom renderer for reasoning bubbles
|
|
52
|
+
* Return null to use default renderer
|
|
53
|
+
*/
|
|
54
|
+
renderReasoning?: (context: {
|
|
55
|
+
message: ChatWidgetMessage;
|
|
56
|
+
defaultRenderer: () => HTMLElement;
|
|
57
|
+
config: ChatWidgetConfig;
|
|
58
|
+
}) => HTMLElement | null;
|
|
59
|
+
/**
|
|
60
|
+
* Custom renderer for tool call bubbles
|
|
61
|
+
* Return null to use default renderer
|
|
62
|
+
*/
|
|
63
|
+
renderToolCall?: (context: {
|
|
64
|
+
message: ChatWidgetMessage;
|
|
65
|
+
defaultRenderer: () => HTMLElement;
|
|
66
|
+
config: ChatWidgetConfig;
|
|
67
|
+
}) => HTMLElement | null;
|
|
68
|
+
/**
|
|
69
|
+
* Called when plugin is registered
|
|
70
|
+
*/
|
|
71
|
+
onRegister?: () => void;
|
|
72
|
+
/**
|
|
73
|
+
* Called when plugin is unregistered
|
|
74
|
+
*/
|
|
75
|
+
onUnregister?: () => void;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
type ChatWidgetFeatureFlags = {
|
|
79
|
+
showReasoning?: boolean;
|
|
80
|
+
showToolCalls?: boolean;
|
|
81
|
+
};
|
|
82
|
+
type ChatWidgetTheme = {
|
|
83
|
+
primary?: string;
|
|
84
|
+
secondary?: string;
|
|
85
|
+
surface?: string;
|
|
86
|
+
muted?: string;
|
|
87
|
+
accent?: string;
|
|
88
|
+
container?: string;
|
|
89
|
+
border?: string;
|
|
90
|
+
divider?: string;
|
|
91
|
+
messageBorder?: string;
|
|
92
|
+
inputBackground?: string;
|
|
93
|
+
callToAction?: string;
|
|
94
|
+
callToActionBackground?: string;
|
|
95
|
+
sendButtonBackgroundColor?: string;
|
|
96
|
+
sendButtonTextColor?: string;
|
|
97
|
+
sendButtonBorderColor?: string;
|
|
98
|
+
closeButtonColor?: string;
|
|
99
|
+
closeButtonBackgroundColor?: string;
|
|
100
|
+
closeButtonBorderColor?: string;
|
|
101
|
+
micIconColor?: string;
|
|
102
|
+
micBackgroundColor?: string;
|
|
103
|
+
micBorderColor?: string;
|
|
104
|
+
recordingIconColor?: string;
|
|
105
|
+
recordingBackgroundColor?: string;
|
|
106
|
+
recordingBorderColor?: string;
|
|
107
|
+
inputFontFamily?: "sans-serif" | "serif" | "mono";
|
|
108
|
+
inputFontWeight?: string;
|
|
109
|
+
radiusSm?: string;
|
|
110
|
+
radiusMd?: string;
|
|
111
|
+
radiusLg?: string;
|
|
112
|
+
launcherRadius?: string;
|
|
113
|
+
buttonRadius?: string;
|
|
114
|
+
};
|
|
115
|
+
type ChatWidgetLauncherConfig = {
|
|
116
|
+
enabled?: boolean;
|
|
117
|
+
title?: string;
|
|
118
|
+
subtitle?: string;
|
|
119
|
+
textHidden?: boolean;
|
|
120
|
+
iconUrl?: string;
|
|
121
|
+
agentIconText?: string;
|
|
122
|
+
agentIconName?: string;
|
|
123
|
+
agentIconHidden?: boolean;
|
|
124
|
+
position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
125
|
+
autoExpand?: boolean;
|
|
126
|
+
width?: string;
|
|
127
|
+
callToActionIconText?: string;
|
|
128
|
+
callToActionIconName?: string;
|
|
129
|
+
callToActionIconColor?: string;
|
|
130
|
+
callToActionIconBackgroundColor?: string;
|
|
131
|
+
callToActionIconHidden?: boolean;
|
|
132
|
+
callToActionIconPadding?: string;
|
|
133
|
+
agentIconSize?: string;
|
|
134
|
+
callToActionIconSize?: string;
|
|
135
|
+
headerIconSize?: string;
|
|
136
|
+
headerIconName?: string;
|
|
137
|
+
headerIconHidden?: boolean;
|
|
138
|
+
closeButtonSize?: string;
|
|
139
|
+
closeButtonColor?: string;
|
|
140
|
+
closeButtonBackgroundColor?: string;
|
|
141
|
+
closeButtonBorderWidth?: string;
|
|
142
|
+
closeButtonBorderColor?: string;
|
|
143
|
+
closeButtonBorderRadius?: string;
|
|
144
|
+
closeButtonPlacement?: "inline" | "top-right";
|
|
145
|
+
};
|
|
146
|
+
type ChatWidgetSendButtonConfig = {
|
|
147
|
+
borderWidth?: string;
|
|
148
|
+
borderColor?: string;
|
|
149
|
+
paddingX?: string;
|
|
150
|
+
paddingY?: string;
|
|
151
|
+
iconText?: string;
|
|
152
|
+
iconName?: string;
|
|
153
|
+
useIcon?: boolean;
|
|
154
|
+
tooltipText?: string;
|
|
155
|
+
showTooltip?: boolean;
|
|
156
|
+
backgroundColor?: string;
|
|
157
|
+
textColor?: string;
|
|
158
|
+
size?: string;
|
|
159
|
+
};
|
|
160
|
+
type ChatWidgetStatusIndicatorConfig = {
|
|
161
|
+
visible?: boolean;
|
|
162
|
+
idleText?: string;
|
|
163
|
+
connectingText?: string;
|
|
164
|
+
connectedText?: string;
|
|
165
|
+
errorText?: string;
|
|
166
|
+
};
|
|
167
|
+
type ChatWidgetVoiceRecognitionConfig = {
|
|
168
|
+
enabled?: boolean;
|
|
169
|
+
pauseDuration?: number;
|
|
170
|
+
iconName?: string;
|
|
171
|
+
iconSize?: string;
|
|
172
|
+
iconColor?: string;
|
|
173
|
+
backgroundColor?: string;
|
|
174
|
+
borderColor?: string;
|
|
175
|
+
borderWidth?: string;
|
|
176
|
+
paddingX?: string;
|
|
177
|
+
paddingY?: string;
|
|
178
|
+
tooltipText?: string;
|
|
179
|
+
showTooltip?: boolean;
|
|
180
|
+
recordingIconColor?: string;
|
|
181
|
+
recordingBackgroundColor?: string;
|
|
182
|
+
recordingBorderColor?: string;
|
|
183
|
+
showRecordingIndicator?: boolean;
|
|
184
|
+
};
|
|
185
|
+
type ChatWidgetConfig = {
|
|
186
|
+
apiUrl?: string;
|
|
187
|
+
flowId?: string;
|
|
188
|
+
headers?: Record<string, string>;
|
|
189
|
+
copy?: {
|
|
190
|
+
welcomeTitle?: string;
|
|
191
|
+
welcomeSubtitle?: string;
|
|
192
|
+
inputPlaceholder?: string;
|
|
193
|
+
sendButtonLabel?: string;
|
|
194
|
+
};
|
|
195
|
+
theme?: ChatWidgetTheme;
|
|
196
|
+
features?: ChatWidgetFeatureFlags;
|
|
197
|
+
launcher?: ChatWidgetLauncherConfig;
|
|
198
|
+
initialMessages?: ChatWidgetMessage[];
|
|
199
|
+
suggestionChips?: string[];
|
|
200
|
+
debug?: boolean;
|
|
201
|
+
formEndpoint?: string;
|
|
202
|
+
launcherWidth?: string;
|
|
203
|
+
sendButton?: ChatWidgetSendButtonConfig;
|
|
204
|
+
statusIndicator?: ChatWidgetStatusIndicatorConfig;
|
|
205
|
+
voiceRecognition?: ChatWidgetVoiceRecognitionConfig;
|
|
206
|
+
postprocessMessage?: (context: {
|
|
207
|
+
text: string;
|
|
208
|
+
message: ChatWidgetMessage;
|
|
209
|
+
streaming: boolean;
|
|
210
|
+
}) => string;
|
|
211
|
+
plugins?: ChatWidgetPlugin[];
|
|
212
|
+
};
|
|
213
|
+
type ChatWidgetMessageRole = "user" | "assistant" | "system";
|
|
214
|
+
type ChatWidgetReasoning = {
|
|
215
|
+
id: string;
|
|
216
|
+
status: "pending" | "streaming" | "complete";
|
|
217
|
+
chunks: string[];
|
|
218
|
+
startedAt?: number;
|
|
219
|
+
completedAt?: number;
|
|
220
|
+
durationMs?: number;
|
|
221
|
+
};
|
|
222
|
+
type ChatWidgetToolCall = {
|
|
223
|
+
id: string;
|
|
224
|
+
name?: string;
|
|
225
|
+
status: "pending" | "running" | "complete";
|
|
226
|
+
args?: unknown;
|
|
227
|
+
chunks?: string[];
|
|
228
|
+
result?: unknown;
|
|
229
|
+
duration?: number;
|
|
230
|
+
startedAt?: number;
|
|
231
|
+
completedAt?: number;
|
|
232
|
+
durationMs?: number;
|
|
233
|
+
};
|
|
234
|
+
type ChatWidgetMessageVariant = "assistant" | "reasoning" | "tool";
|
|
235
|
+
type ChatWidgetMessage = {
|
|
236
|
+
id: string;
|
|
237
|
+
role: ChatWidgetMessageRole;
|
|
238
|
+
content: string;
|
|
239
|
+
createdAt: string;
|
|
240
|
+
streaming?: boolean;
|
|
241
|
+
variant?: ChatWidgetMessageVariant;
|
|
242
|
+
sequence?: number;
|
|
243
|
+
reasoning?: ChatWidgetReasoning;
|
|
244
|
+
toolCall?: ChatWidgetToolCall;
|
|
245
|
+
tools?: ChatWidgetToolCall[];
|
|
246
|
+
};
|
|
247
|
+
type ChatWidgetEvent = {
|
|
248
|
+
type: "message";
|
|
249
|
+
message: ChatWidgetMessage;
|
|
250
|
+
} | {
|
|
251
|
+
type: "status";
|
|
252
|
+
status: "connecting" | "connected" | "error" | "idle";
|
|
253
|
+
} | {
|
|
254
|
+
type: "error";
|
|
255
|
+
error: Error;
|
|
256
|
+
};
|
|
257
|
+
type ChatWidgetInitOptions = {
|
|
258
|
+
target: string | HTMLElement;
|
|
259
|
+
config?: ChatWidgetConfig;
|
|
260
|
+
useShadowDom?: boolean;
|
|
261
|
+
onReady?: () => void;
|
|
262
|
+
};
|
|
263
|
+
|
|
264
|
+
type Controller = {
|
|
265
|
+
update: (config: ChatWidgetConfig) => void;
|
|
266
|
+
destroy: () => void;
|
|
267
|
+
open: () => void;
|
|
268
|
+
close: () => void;
|
|
269
|
+
toggle: () => void;
|
|
270
|
+
};
|
|
271
|
+
declare const createChatExperience: (mount: HTMLElement, initialConfig?: ChatWidgetConfig) => Controller;
|
|
272
|
+
type ChatWidgetController = Controller;
|
|
273
|
+
|
|
274
|
+
type ChatWidgetInitHandle = ChatWidgetController & {
|
|
275
|
+
host: HTMLElement;
|
|
276
|
+
};
|
|
277
|
+
declare const initChatWidget: (options: ChatWidgetInitOptions) => ChatWidgetInitHandle;
|
|
278
|
+
|
|
279
|
+
type ChatWidgetSessionStatus = "idle" | "connecting" | "connected" | "error";
|
|
280
|
+
type SessionCallbacks = {
|
|
281
|
+
onMessagesChanged: (messages: ChatWidgetMessage[]) => void;
|
|
282
|
+
onStatusChanged: (status: ChatWidgetSessionStatus) => void;
|
|
283
|
+
onStreamingChanged: (streaming: boolean) => void;
|
|
284
|
+
onError?: (error: Error) => void;
|
|
285
|
+
};
|
|
286
|
+
declare class ChatWidgetSession {
|
|
287
|
+
private config;
|
|
288
|
+
private callbacks;
|
|
289
|
+
private client;
|
|
290
|
+
private messages;
|
|
291
|
+
private status;
|
|
292
|
+
private streaming;
|
|
293
|
+
private abortController;
|
|
294
|
+
private sequenceCounter;
|
|
295
|
+
constructor(config: ChatWidgetConfig | undefined, callbacks: SessionCallbacks);
|
|
296
|
+
updateConfig(next: ChatWidgetConfig): void;
|
|
297
|
+
getMessages(): ChatWidgetMessage[];
|
|
298
|
+
getStatus(): ChatWidgetSessionStatus;
|
|
299
|
+
isStreaming(): boolean;
|
|
300
|
+
sendMessage(rawInput: string): Promise<void>;
|
|
301
|
+
cancel(): void;
|
|
302
|
+
private handleEvent;
|
|
303
|
+
private setStatus;
|
|
304
|
+
private setStreaming;
|
|
305
|
+
private appendMessage;
|
|
306
|
+
private upsertMessage;
|
|
307
|
+
private ensureSequence;
|
|
308
|
+
private nextSequence;
|
|
309
|
+
private sortMessages;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
type DispatchOptions = {
|
|
313
|
+
messages: ChatWidgetMessage[];
|
|
314
|
+
signal?: AbortSignal;
|
|
315
|
+
};
|
|
316
|
+
type SSEHandler = (event: ChatWidgetEvent) => void;
|
|
317
|
+
declare class ChatWidgetClient {
|
|
318
|
+
private config;
|
|
319
|
+
private readonly apiUrl;
|
|
320
|
+
private readonly headers;
|
|
321
|
+
private readonly debug;
|
|
322
|
+
constructor(config?: ChatWidgetConfig);
|
|
323
|
+
dispatch(options: DispatchOptions, onEvent: SSEHandler): Promise<void>;
|
|
324
|
+
private streamResponse;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
/**
|
|
328
|
+
* Basic markdown renderer. Remember to sanitize the returned HTML if you render
|
|
329
|
+
* untrusted content in your host page.
|
|
330
|
+
*/
|
|
331
|
+
declare const markdownPostprocessor: (text: string) => string;
|
|
332
|
+
/**
|
|
333
|
+
* Escapes HTML entities. Used as the default safe renderer.
|
|
334
|
+
*/
|
|
335
|
+
declare const escapeHtml: (text: string) => string;
|
|
336
|
+
/**
|
|
337
|
+
* Converts special directives (either `<Form type="init" />` or
|
|
338
|
+
* `<Directive>{"component":"form","type":"init"}</Directive>`) into placeholder
|
|
339
|
+
* elements that the widget upgrades after render. Remaining text is rendered as
|
|
340
|
+
* Markdown.
|
|
341
|
+
*/
|
|
342
|
+
declare const directivePostprocessor: (text: string) => string;
|
|
343
|
+
|
|
344
|
+
declare class PluginRegistry {
|
|
345
|
+
private plugins;
|
|
346
|
+
/**
|
|
347
|
+
* Register a plugin
|
|
348
|
+
*/
|
|
349
|
+
register(plugin: ChatWidgetPlugin): void;
|
|
350
|
+
/**
|
|
351
|
+
* Unregister a plugin
|
|
352
|
+
*/
|
|
353
|
+
unregister(pluginId: string): void;
|
|
354
|
+
/**
|
|
355
|
+
* Get all plugins sorted by priority
|
|
356
|
+
*/
|
|
357
|
+
getAll(): ChatWidgetPlugin[];
|
|
358
|
+
/**
|
|
359
|
+
* Get plugins for a specific instance (from config)
|
|
360
|
+
* Merges instance plugins with globally registered plugins
|
|
361
|
+
*/
|
|
362
|
+
getForInstance(instancePlugins?: ChatWidgetPlugin[]): ChatWidgetPlugin[];
|
|
363
|
+
/**
|
|
364
|
+
* Clear all plugins
|
|
365
|
+
*/
|
|
366
|
+
clear(): void;
|
|
367
|
+
}
|
|
368
|
+
declare const pluginRegistry: PluginRegistry;
|
|
369
|
+
|
|
370
|
+
export { ChatWidgetClient, type ChatWidgetConfig, type ChatWidgetController, type ChatWidgetEvent, type ChatWidgetFeatureFlags, type ChatWidgetInitHandle, type ChatWidgetInitOptions, type ChatWidgetLauncherConfig, type ChatWidgetMessage, type ChatWidgetPlugin, ChatWidgetSession, type ChatWidgetSessionStatus, type ChatWidgetTheme, createChatExperience, initChatWidget as default, directivePostprocessor, escapeHtml, initChatWidget, markdownPostprocessor, pluginRegistry };
|