vanilla-agent 1.20.0 → 1.22.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 +87 -0
- package/dist/index.cjs +24 -24
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +608 -6
- package/dist/index.d.ts +608 -6
- package/dist/index.global.js +44 -44
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +23 -23
- package/dist/index.js.map +1 -1
- package/dist/install.global.js +1 -1
- package/dist/install.global.js.map +1 -1
- package/dist/widget.css +467 -5
- package/package.json +1 -1
- package/src/client.ts +215 -1
- package/src/components/launcher.ts +10 -1
- package/src/components/message-bubble.ts +208 -4
- package/src/components/messages.ts +10 -3
- package/src/defaults.ts +32 -0
- package/src/index.ts +20 -4
- package/src/install.ts +69 -7
- package/src/postprocessors.ts +124 -6
- package/src/session.ts +77 -1
- package/src/styles/widget.css +467 -5
- package/src/types.ts +487 -0
- package/src/ui.ts +40 -5
package/dist/index.d.cts
CHANGED
|
@@ -135,6 +135,64 @@ type AgentWidgetActionEventPayload = {
|
|
|
135
135
|
action: AgentWidgetParsedAction;
|
|
136
136
|
message: AgentWidgetMessage;
|
|
137
137
|
};
|
|
138
|
+
/**
|
|
139
|
+
* Feedback event payload for upvote/downvote actions on messages
|
|
140
|
+
*/
|
|
141
|
+
type AgentWidgetMessageFeedback = {
|
|
142
|
+
type: "upvote" | "downvote";
|
|
143
|
+
messageId: string;
|
|
144
|
+
message: AgentWidgetMessage;
|
|
145
|
+
};
|
|
146
|
+
/**
|
|
147
|
+
* Configuration for message action buttons (copy, upvote, downvote)
|
|
148
|
+
*/
|
|
149
|
+
type AgentWidgetMessageActionsConfig = {
|
|
150
|
+
/**
|
|
151
|
+
* Enable/disable message actions entirely
|
|
152
|
+
* @default true
|
|
153
|
+
*/
|
|
154
|
+
enabled?: boolean;
|
|
155
|
+
/**
|
|
156
|
+
* Show copy button
|
|
157
|
+
* @default true
|
|
158
|
+
*/
|
|
159
|
+
showCopy?: boolean;
|
|
160
|
+
/**
|
|
161
|
+
* Show upvote button
|
|
162
|
+
* @default false (requires backend)
|
|
163
|
+
*/
|
|
164
|
+
showUpvote?: boolean;
|
|
165
|
+
/**
|
|
166
|
+
* Show downvote button
|
|
167
|
+
* @default false (requires backend)
|
|
168
|
+
*/
|
|
169
|
+
showDownvote?: boolean;
|
|
170
|
+
/**
|
|
171
|
+
* Visibility mode: 'always' shows buttons always, 'hover' shows on hover only
|
|
172
|
+
* @default 'hover'
|
|
173
|
+
*/
|
|
174
|
+
visibility?: "always" | "hover";
|
|
175
|
+
/**
|
|
176
|
+
* Horizontal alignment of action buttons
|
|
177
|
+
* @default 'right'
|
|
178
|
+
*/
|
|
179
|
+
align?: "left" | "center" | "right";
|
|
180
|
+
/**
|
|
181
|
+
* Layout style for action buttons
|
|
182
|
+
* - 'pill-inside': Compact floating pill around just the buttons (default for hover)
|
|
183
|
+
* - 'row-inside': Full-width row at the bottom of the message
|
|
184
|
+
* @default 'pill-inside'
|
|
185
|
+
*/
|
|
186
|
+
layout?: "pill-inside" | "row-inside";
|
|
187
|
+
/**
|
|
188
|
+
* Callback when user submits feedback (upvote/downvote)
|
|
189
|
+
*/
|
|
190
|
+
onFeedback?: (feedback: AgentWidgetMessageFeedback) => void;
|
|
191
|
+
/**
|
|
192
|
+
* Callback when user copies a message
|
|
193
|
+
*/
|
|
194
|
+
onCopy?: (message: AgentWidgetMessage) => void;
|
|
195
|
+
};
|
|
138
196
|
type AgentWidgetStateEvent = {
|
|
139
197
|
open: boolean;
|
|
140
198
|
source: "user" | "auto" | "api" | "system";
|
|
@@ -154,6 +212,8 @@ type AgentWidgetControllerEventMap = {
|
|
|
154
212
|
"widget:opened": AgentWidgetStateEvent;
|
|
155
213
|
"widget:closed": AgentWidgetStateEvent;
|
|
156
214
|
"widget:state": AgentWidgetStateSnapshot;
|
|
215
|
+
"message:feedback": AgentWidgetMessageFeedback;
|
|
216
|
+
"message:copy": AgentWidgetMessage;
|
|
157
217
|
};
|
|
158
218
|
type AgentWidgetFeatureFlags = {
|
|
159
219
|
showReasoning?: boolean;
|
|
@@ -287,6 +347,18 @@ type AgentWidgetLauncherConfig = {
|
|
|
287
347
|
closeButtonTooltipText?: string;
|
|
288
348
|
closeButtonShowTooltip?: boolean;
|
|
289
349
|
clearChat?: AgentWidgetClearChatConfig;
|
|
350
|
+
/**
|
|
351
|
+
* Border style for the launcher button.
|
|
352
|
+
* @example "1px solid #e5e7eb" | "2px solid #3b82f6" | "none"
|
|
353
|
+
* @default "1px solid #e5e7eb"
|
|
354
|
+
*/
|
|
355
|
+
border?: string;
|
|
356
|
+
/**
|
|
357
|
+
* Box shadow for the launcher button.
|
|
358
|
+
* @example "0 10px 15px -3px rgba(0,0,0,0.1)" | "none"
|
|
359
|
+
* @default "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
|
|
360
|
+
*/
|
|
361
|
+
shadow?: string;
|
|
290
362
|
};
|
|
291
363
|
type AgentWidgetSendButtonConfig = {
|
|
292
364
|
borderWidth?: string;
|
|
@@ -452,6 +524,55 @@ type AgentWidgetCustomFetch = (url: string, init: RequestInit, payload: AgentWid
|
|
|
452
524
|
* Dynamic headers function - called before each request
|
|
453
525
|
*/
|
|
454
526
|
type AgentWidgetHeadersFunction = () => Record<string, string> | Promise<Record<string, string>>;
|
|
527
|
+
/**
|
|
528
|
+
* Session information returned after client token initialization.
|
|
529
|
+
* Contains session ID, expiry time, flow info, and config from the server.
|
|
530
|
+
*/
|
|
531
|
+
type ClientSession = {
|
|
532
|
+
/** Unique session identifier */
|
|
533
|
+
sessionId: string;
|
|
534
|
+
/** When the session expires */
|
|
535
|
+
expiresAt: Date;
|
|
536
|
+
/** Flow information */
|
|
537
|
+
flow: {
|
|
538
|
+
id: string;
|
|
539
|
+
name: string;
|
|
540
|
+
description: string | null;
|
|
541
|
+
};
|
|
542
|
+
/** Configuration from the server */
|
|
543
|
+
config: {
|
|
544
|
+
welcomeMessage: string | null;
|
|
545
|
+
placeholder: string;
|
|
546
|
+
theme: Record<string, unknown> | null;
|
|
547
|
+
};
|
|
548
|
+
};
|
|
549
|
+
/**
|
|
550
|
+
* Raw API response from /v1/client/init endpoint
|
|
551
|
+
*/
|
|
552
|
+
type ClientInitResponse = {
|
|
553
|
+
session_id: string;
|
|
554
|
+
expires_at: string;
|
|
555
|
+
flow: {
|
|
556
|
+
id: string;
|
|
557
|
+
name: string;
|
|
558
|
+
description: string | null;
|
|
559
|
+
};
|
|
560
|
+
config: {
|
|
561
|
+
welcome_message: string | null;
|
|
562
|
+
placeholder: string;
|
|
563
|
+
theme: Record<string, unknown> | null;
|
|
564
|
+
};
|
|
565
|
+
};
|
|
566
|
+
/**
|
|
567
|
+
* Request payload for /v1/client/chat endpoint
|
|
568
|
+
*/
|
|
569
|
+
type ClientChatRequest = {
|
|
570
|
+
session_id: string;
|
|
571
|
+
messages: Array<{
|
|
572
|
+
role: 'user' | 'assistant' | 'system';
|
|
573
|
+
content: string;
|
|
574
|
+
}>;
|
|
575
|
+
};
|
|
455
576
|
/**
|
|
456
577
|
* Context provided to header render functions
|
|
457
578
|
*/
|
|
@@ -597,9 +718,315 @@ type AgentWidgetLayoutConfig = {
|
|
|
597
718
|
/** Slot renderers for custom content injection */
|
|
598
719
|
slots?: Partial<Record<WidgetLayoutSlot, SlotRenderer>>;
|
|
599
720
|
};
|
|
721
|
+
/**
|
|
722
|
+
* Token types for marked renderer methods
|
|
723
|
+
*/
|
|
724
|
+
type AgentWidgetMarkdownHeadingToken = {
|
|
725
|
+
type: "heading";
|
|
726
|
+
raw: string;
|
|
727
|
+
depth: 1 | 2 | 3 | 4 | 5 | 6;
|
|
728
|
+
text: string;
|
|
729
|
+
tokens: unknown[];
|
|
730
|
+
};
|
|
731
|
+
type AgentWidgetMarkdownCodeToken = {
|
|
732
|
+
type: "code";
|
|
733
|
+
raw: string;
|
|
734
|
+
text: string;
|
|
735
|
+
lang?: string;
|
|
736
|
+
escaped?: boolean;
|
|
737
|
+
};
|
|
738
|
+
type AgentWidgetMarkdownBlockquoteToken = {
|
|
739
|
+
type: "blockquote";
|
|
740
|
+
raw: string;
|
|
741
|
+
text: string;
|
|
742
|
+
tokens: unknown[];
|
|
743
|
+
};
|
|
744
|
+
type AgentWidgetMarkdownTableToken = {
|
|
745
|
+
type: "table";
|
|
746
|
+
raw: string;
|
|
747
|
+
header: Array<{
|
|
748
|
+
text: string;
|
|
749
|
+
tokens: unknown[];
|
|
750
|
+
}>;
|
|
751
|
+
rows: Array<Array<{
|
|
752
|
+
text: string;
|
|
753
|
+
tokens: unknown[];
|
|
754
|
+
}>>;
|
|
755
|
+
align: Array<"left" | "center" | "right" | null>;
|
|
756
|
+
};
|
|
757
|
+
type AgentWidgetMarkdownLinkToken = {
|
|
758
|
+
type: "link";
|
|
759
|
+
raw: string;
|
|
760
|
+
href: string;
|
|
761
|
+
title: string | null;
|
|
762
|
+
text: string;
|
|
763
|
+
tokens: unknown[];
|
|
764
|
+
};
|
|
765
|
+
type AgentWidgetMarkdownImageToken = {
|
|
766
|
+
type: "image";
|
|
767
|
+
raw: string;
|
|
768
|
+
href: string;
|
|
769
|
+
title: string | null;
|
|
770
|
+
text: string;
|
|
771
|
+
};
|
|
772
|
+
type AgentWidgetMarkdownListToken = {
|
|
773
|
+
type: "list";
|
|
774
|
+
raw: string;
|
|
775
|
+
ordered: boolean;
|
|
776
|
+
start: number | "";
|
|
777
|
+
loose: boolean;
|
|
778
|
+
items: unknown[];
|
|
779
|
+
};
|
|
780
|
+
type AgentWidgetMarkdownListItemToken = {
|
|
781
|
+
type: "list_item";
|
|
782
|
+
raw: string;
|
|
783
|
+
task: boolean;
|
|
784
|
+
checked?: boolean;
|
|
785
|
+
loose: boolean;
|
|
786
|
+
text: string;
|
|
787
|
+
tokens: unknown[];
|
|
788
|
+
};
|
|
789
|
+
type AgentWidgetMarkdownParagraphToken = {
|
|
790
|
+
type: "paragraph";
|
|
791
|
+
raw: string;
|
|
792
|
+
text: string;
|
|
793
|
+
tokens: unknown[];
|
|
794
|
+
};
|
|
795
|
+
type AgentWidgetMarkdownCodespanToken = {
|
|
796
|
+
type: "codespan";
|
|
797
|
+
raw: string;
|
|
798
|
+
text: string;
|
|
799
|
+
};
|
|
800
|
+
type AgentWidgetMarkdownStrongToken = {
|
|
801
|
+
type: "strong";
|
|
802
|
+
raw: string;
|
|
803
|
+
text: string;
|
|
804
|
+
tokens: unknown[];
|
|
805
|
+
};
|
|
806
|
+
type AgentWidgetMarkdownEmToken = {
|
|
807
|
+
type: "em";
|
|
808
|
+
raw: string;
|
|
809
|
+
text: string;
|
|
810
|
+
tokens: unknown[];
|
|
811
|
+
};
|
|
812
|
+
/**
|
|
813
|
+
* Custom renderer overrides for markdown elements.
|
|
814
|
+
* Each method receives the token and should return an HTML string.
|
|
815
|
+
* Return `false` to use the default renderer.
|
|
816
|
+
*
|
|
817
|
+
* @example
|
|
818
|
+
* ```typescript
|
|
819
|
+
* renderer: {
|
|
820
|
+
* heading(token) {
|
|
821
|
+
* return `<h${token.depth} class="custom-heading">${token.text}</h${token.depth}>`;
|
|
822
|
+
* },
|
|
823
|
+
* link(token) {
|
|
824
|
+
* return `<a href="${token.href}" target="_blank" rel="noopener">${token.text}</a>`;
|
|
825
|
+
* }
|
|
826
|
+
* }
|
|
827
|
+
* ```
|
|
828
|
+
*/
|
|
829
|
+
type AgentWidgetMarkdownRendererOverrides = {
|
|
830
|
+
/** Override heading rendering (h1-h6) */
|
|
831
|
+
heading?: (token: AgentWidgetMarkdownHeadingToken) => string | false;
|
|
832
|
+
/** Override code block rendering */
|
|
833
|
+
code?: (token: AgentWidgetMarkdownCodeToken) => string | false;
|
|
834
|
+
/** Override blockquote rendering */
|
|
835
|
+
blockquote?: (token: AgentWidgetMarkdownBlockquoteToken) => string | false;
|
|
836
|
+
/** Override table rendering */
|
|
837
|
+
table?: (token: AgentWidgetMarkdownTableToken) => string | false;
|
|
838
|
+
/** Override link rendering */
|
|
839
|
+
link?: (token: AgentWidgetMarkdownLinkToken) => string | false;
|
|
840
|
+
/** Override image rendering */
|
|
841
|
+
image?: (token: AgentWidgetMarkdownImageToken) => string | false;
|
|
842
|
+
/** Override list rendering (ul/ol) */
|
|
843
|
+
list?: (token: AgentWidgetMarkdownListToken) => string | false;
|
|
844
|
+
/** Override list item rendering */
|
|
845
|
+
listitem?: (token: AgentWidgetMarkdownListItemToken) => string | false;
|
|
846
|
+
/** Override paragraph rendering */
|
|
847
|
+
paragraph?: (token: AgentWidgetMarkdownParagraphToken) => string | false;
|
|
848
|
+
/** Override inline code rendering */
|
|
849
|
+
codespan?: (token: AgentWidgetMarkdownCodespanToken) => string | false;
|
|
850
|
+
/** Override strong/bold rendering */
|
|
851
|
+
strong?: (token: AgentWidgetMarkdownStrongToken) => string | false;
|
|
852
|
+
/** Override emphasis/italic rendering */
|
|
853
|
+
em?: (token: AgentWidgetMarkdownEmToken) => string | false;
|
|
854
|
+
/** Override horizontal rule rendering */
|
|
855
|
+
hr?: () => string | false;
|
|
856
|
+
/** Override line break rendering */
|
|
857
|
+
br?: () => string | false;
|
|
858
|
+
/** Override deleted/strikethrough rendering */
|
|
859
|
+
del?: (token: {
|
|
860
|
+
type: "del";
|
|
861
|
+
raw: string;
|
|
862
|
+
text: string;
|
|
863
|
+
tokens: unknown[];
|
|
864
|
+
}) => string | false;
|
|
865
|
+
/** Override checkbox rendering (in task lists) */
|
|
866
|
+
checkbox?: (token: {
|
|
867
|
+
checked: boolean;
|
|
868
|
+
}) => string | false;
|
|
869
|
+
/** Override HTML passthrough */
|
|
870
|
+
html?: (token: {
|
|
871
|
+
type: "html";
|
|
872
|
+
raw: string;
|
|
873
|
+
text: string;
|
|
874
|
+
}) => string | false;
|
|
875
|
+
/** Override text rendering */
|
|
876
|
+
text?: (token: {
|
|
877
|
+
type: "text";
|
|
878
|
+
raw: string;
|
|
879
|
+
text: string;
|
|
880
|
+
}) => string | false;
|
|
881
|
+
};
|
|
882
|
+
/**
|
|
883
|
+
* Markdown parsing options (subset of marked options)
|
|
884
|
+
*/
|
|
885
|
+
type AgentWidgetMarkdownOptions = {
|
|
886
|
+
/**
|
|
887
|
+
* Enable GitHub Flavored Markdown (tables, strikethrough, autolinks).
|
|
888
|
+
* @default true
|
|
889
|
+
*/
|
|
890
|
+
gfm?: boolean;
|
|
891
|
+
/**
|
|
892
|
+
* Convert \n in paragraphs into <br>.
|
|
893
|
+
* @default true
|
|
894
|
+
*/
|
|
895
|
+
breaks?: boolean;
|
|
896
|
+
/**
|
|
897
|
+
* Conform to original markdown.pl as much as possible.
|
|
898
|
+
* @default false
|
|
899
|
+
*/
|
|
900
|
+
pedantic?: boolean;
|
|
901
|
+
/**
|
|
902
|
+
* Add id attributes to headings.
|
|
903
|
+
* @default false
|
|
904
|
+
*/
|
|
905
|
+
headerIds?: boolean;
|
|
906
|
+
/**
|
|
907
|
+
* Prefix for heading id attributes.
|
|
908
|
+
* @default ""
|
|
909
|
+
*/
|
|
910
|
+
headerPrefix?: string;
|
|
911
|
+
/**
|
|
912
|
+
* Mangle email addresses for spam protection.
|
|
913
|
+
* @default true
|
|
914
|
+
*/
|
|
915
|
+
mangle?: boolean;
|
|
916
|
+
/**
|
|
917
|
+
* Silent mode - don't throw on parse errors.
|
|
918
|
+
* @default false
|
|
919
|
+
*/
|
|
920
|
+
silent?: boolean;
|
|
921
|
+
};
|
|
922
|
+
/**
|
|
923
|
+
* Markdown configuration for customizing how markdown is rendered in chat messages.
|
|
924
|
+
* Provides three levels of control:
|
|
925
|
+
*
|
|
926
|
+
* 1. **CSS Variables** - Override styles via `--cw-md-*` CSS custom properties
|
|
927
|
+
* 2. **Parsing Options** - Configure marked behavior via `options`
|
|
928
|
+
* 3. **Custom Renderers** - Full control via `renderer` overrides
|
|
929
|
+
*
|
|
930
|
+
* @example
|
|
931
|
+
* ```typescript
|
|
932
|
+
* // Level 2: Configure parsing options
|
|
933
|
+
* config: {
|
|
934
|
+
* markdown: {
|
|
935
|
+
* options: {
|
|
936
|
+
* gfm: true,
|
|
937
|
+
* breaks: true,
|
|
938
|
+
* headerIds: true
|
|
939
|
+
* }
|
|
940
|
+
* }
|
|
941
|
+
* }
|
|
942
|
+
* ```
|
|
943
|
+
*
|
|
944
|
+
* @example
|
|
945
|
+
* ```typescript
|
|
946
|
+
* // Level 3: Custom renderers
|
|
947
|
+
* config: {
|
|
948
|
+
* markdown: {
|
|
949
|
+
* renderer: {
|
|
950
|
+
* heading(token) {
|
|
951
|
+
* return `<h${token.depth} class="custom-h${token.depth}">${token.text}</h${token.depth}>`;
|
|
952
|
+
* },
|
|
953
|
+
* link(token) {
|
|
954
|
+
* return `<a href="${token.href}" target="_blank">${token.text}</a>`;
|
|
955
|
+
* },
|
|
956
|
+
* table(token) {
|
|
957
|
+
* // Wrap tables in a scrollable container
|
|
958
|
+
* return `<div class="table-scroll">${this.parser.parse(token.tokens)}</div>`;
|
|
959
|
+
* }
|
|
960
|
+
* }
|
|
961
|
+
* }
|
|
962
|
+
* }
|
|
963
|
+
* ```
|
|
964
|
+
*/
|
|
965
|
+
type AgentWidgetMarkdownConfig = {
|
|
966
|
+
/**
|
|
967
|
+
* Markdown parsing options.
|
|
968
|
+
* These are passed directly to the marked parser.
|
|
969
|
+
*/
|
|
970
|
+
options?: AgentWidgetMarkdownOptions;
|
|
971
|
+
/**
|
|
972
|
+
* Custom renderer overrides for specific markdown elements.
|
|
973
|
+
* Each method receives a token object and should return an HTML string.
|
|
974
|
+
* Return `false` to fall back to the default renderer.
|
|
975
|
+
*/
|
|
976
|
+
renderer?: AgentWidgetMarkdownRendererOverrides;
|
|
977
|
+
/**
|
|
978
|
+
* Disable default markdown CSS styles.
|
|
979
|
+
* When true, the widget won't apply any default styles to markdown elements,
|
|
980
|
+
* allowing you to provide your own CSS.
|
|
981
|
+
*
|
|
982
|
+
* @default false
|
|
983
|
+
*/
|
|
984
|
+
disableDefaultStyles?: boolean;
|
|
985
|
+
};
|
|
600
986
|
type AgentWidgetConfig = {
|
|
601
987
|
apiUrl?: string;
|
|
602
988
|
flowId?: string;
|
|
989
|
+
/**
|
|
990
|
+
* Client token for direct browser-to-API communication.
|
|
991
|
+
* When set, the widget uses /v1/client/* endpoints instead of /v1/dispatch.
|
|
992
|
+
* Mutually exclusive with apiKey/headers authentication.
|
|
993
|
+
*
|
|
994
|
+
* @example
|
|
995
|
+
* ```typescript
|
|
996
|
+
* config: {
|
|
997
|
+
* clientToken: 'ct_live_flow01k7_a8b9c0d1e2f3g4h5i6j7k8l9'
|
|
998
|
+
* }
|
|
999
|
+
* ```
|
|
1000
|
+
*/
|
|
1001
|
+
clientToken?: string;
|
|
1002
|
+
/**
|
|
1003
|
+
* Callback when session is initialized (client token mode only).
|
|
1004
|
+
* Receives session info including expiry time.
|
|
1005
|
+
*
|
|
1006
|
+
* @example
|
|
1007
|
+
* ```typescript
|
|
1008
|
+
* config: {
|
|
1009
|
+
* onSessionInit: (session) => {
|
|
1010
|
+
* console.log('Session started:', session.sessionId);
|
|
1011
|
+
* }
|
|
1012
|
+
* }
|
|
1013
|
+
* ```
|
|
1014
|
+
*/
|
|
1015
|
+
onSessionInit?: (session: ClientSession) => void;
|
|
1016
|
+
/**
|
|
1017
|
+
* Callback when session expires or errors (client token mode only).
|
|
1018
|
+
* Widget should prompt user to refresh.
|
|
1019
|
+
*
|
|
1020
|
+
* @example
|
|
1021
|
+
* ```typescript
|
|
1022
|
+
* config: {
|
|
1023
|
+
* onSessionExpired: () => {
|
|
1024
|
+
* alert('Your session has expired. Please refresh the page.');
|
|
1025
|
+
* }
|
|
1026
|
+
* }
|
|
1027
|
+
* ```
|
|
1028
|
+
*/
|
|
1029
|
+
onSessionExpired?: () => void;
|
|
603
1030
|
/**
|
|
604
1031
|
* Static headers to include with each request.
|
|
605
1032
|
* For dynamic headers (e.g., auth tokens), use `getHeaders` instead.
|
|
@@ -806,6 +1233,55 @@ type AgentWidgetConfig = {
|
|
|
806
1233
|
* ```
|
|
807
1234
|
*/
|
|
808
1235
|
layout?: AgentWidgetLayoutConfig;
|
|
1236
|
+
/**
|
|
1237
|
+
* Markdown rendering configuration.
|
|
1238
|
+
* Customize how markdown is parsed and rendered in chat messages.
|
|
1239
|
+
*
|
|
1240
|
+
* Override methods:
|
|
1241
|
+
* 1. **CSS Variables** - Override `--cw-md-*` variables in your stylesheet
|
|
1242
|
+
* 2. **Options** - Configure marked parser behavior
|
|
1243
|
+
* 3. **Renderers** - Custom rendering functions for specific elements
|
|
1244
|
+
* 4. **postprocessMessage** - Complete control over message transformation
|
|
1245
|
+
*
|
|
1246
|
+
* @example
|
|
1247
|
+
* ```typescript
|
|
1248
|
+
* config: {
|
|
1249
|
+
* markdown: {
|
|
1250
|
+
* options: { breaks: true, gfm: true },
|
|
1251
|
+
* renderer: {
|
|
1252
|
+
* link(token) {
|
|
1253
|
+
* return `<a href="${token.href}" target="_blank">${token.text}</a>`;
|
|
1254
|
+
* }
|
|
1255
|
+
* }
|
|
1256
|
+
* }
|
|
1257
|
+
* }
|
|
1258
|
+
* ```
|
|
1259
|
+
*/
|
|
1260
|
+
markdown?: AgentWidgetMarkdownConfig;
|
|
1261
|
+
/**
|
|
1262
|
+
* Configuration for message action buttons (copy, upvote, downvote).
|
|
1263
|
+
* Shows action buttons on assistant messages for user feedback.
|
|
1264
|
+
*
|
|
1265
|
+
* @example
|
|
1266
|
+
* ```typescript
|
|
1267
|
+
* config: {
|
|
1268
|
+
* messageActions: {
|
|
1269
|
+
* enabled: true,
|
|
1270
|
+
* showCopy: true,
|
|
1271
|
+
* showUpvote: true,
|
|
1272
|
+
* showDownvote: true,
|
|
1273
|
+
* visibility: 'hover',
|
|
1274
|
+
* onFeedback: (feedback) => {
|
|
1275
|
+
* console.log('Feedback:', feedback.type, feedback.messageId);
|
|
1276
|
+
* },
|
|
1277
|
+
* onCopy: (message) => {
|
|
1278
|
+
* console.log('Copied message:', message.id);
|
|
1279
|
+
* }
|
|
1280
|
+
* }
|
|
1281
|
+
* }
|
|
1282
|
+
* ```
|
|
1283
|
+
*/
|
|
1284
|
+
messageActions?: AgentWidgetMessageActionsConfig;
|
|
809
1285
|
};
|
|
810
1286
|
type AgentWidgetMessageRole = "user" | "assistant" | "system";
|
|
811
1287
|
type AgentWidgetReasoning = {
|
|
@@ -898,7 +1374,34 @@ declare class AgentWidgetSession {
|
|
|
898
1374
|
private streaming;
|
|
899
1375
|
private abortController;
|
|
900
1376
|
private sequenceCounter;
|
|
1377
|
+
private clientSession;
|
|
901
1378
|
constructor(config: AgentWidgetConfig | undefined, callbacks: SessionCallbacks);
|
|
1379
|
+
/**
|
|
1380
|
+
* Check if running in client token mode
|
|
1381
|
+
*/
|
|
1382
|
+
isClientTokenMode(): boolean;
|
|
1383
|
+
/**
|
|
1384
|
+
* Initialize the client session (for client token mode).
|
|
1385
|
+
* This is called automatically on first message, but can be called
|
|
1386
|
+
* explicitly to pre-initialize the session and get config from server.
|
|
1387
|
+
*/
|
|
1388
|
+
initClientSession(): Promise<ClientSession | null>;
|
|
1389
|
+
/**
|
|
1390
|
+
* Set the client session after initialization
|
|
1391
|
+
*/
|
|
1392
|
+
setClientSession(session: ClientSession): void;
|
|
1393
|
+
/**
|
|
1394
|
+
* Get current client session
|
|
1395
|
+
*/
|
|
1396
|
+
getClientSession(): ClientSession | null;
|
|
1397
|
+
/**
|
|
1398
|
+
* Check if session is valid and not expired
|
|
1399
|
+
*/
|
|
1400
|
+
isSessionValid(): boolean;
|
|
1401
|
+
/**
|
|
1402
|
+
* Clear session (on expiry or error)
|
|
1403
|
+
*/
|
|
1404
|
+
clearClientSession(): void;
|
|
902
1405
|
updateConfig(next: AgentWidgetConfig): void;
|
|
903
1406
|
getMessages(): AgentWidgetMessage[];
|
|
904
1407
|
getStatus(): AgentWidgetSessionStatus;
|
|
@@ -968,8 +1471,43 @@ declare class AgentWidgetClient {
|
|
|
968
1471
|
private readonly customFetch?;
|
|
969
1472
|
private readonly parseSSEEvent?;
|
|
970
1473
|
private readonly getHeaders?;
|
|
1474
|
+
private clientSession;
|
|
1475
|
+
private sessionInitPromise;
|
|
971
1476
|
constructor(config?: AgentWidgetConfig);
|
|
1477
|
+
/**
|
|
1478
|
+
* Check if running in client token mode
|
|
1479
|
+
*/
|
|
1480
|
+
isClientTokenMode(): boolean;
|
|
1481
|
+
/**
|
|
1482
|
+
* Get the appropriate API URL based on mode
|
|
1483
|
+
*/
|
|
1484
|
+
private getClientApiUrl;
|
|
1485
|
+
/**
|
|
1486
|
+
* Get the current client session (if any)
|
|
1487
|
+
*/
|
|
1488
|
+
getClientSession(): ClientSession | null;
|
|
1489
|
+
/**
|
|
1490
|
+
* Initialize session for client token mode.
|
|
1491
|
+
* Called automatically on first message if not already initialized.
|
|
1492
|
+
*/
|
|
1493
|
+
initSession(): Promise<ClientSession>;
|
|
1494
|
+
private _doInitSession;
|
|
1495
|
+
/**
|
|
1496
|
+
* Clear the current client session
|
|
1497
|
+
*/
|
|
1498
|
+
clearClientSession(): void;
|
|
1499
|
+
/**
|
|
1500
|
+
* Send a message - handles both proxy and client token modes
|
|
1501
|
+
*/
|
|
972
1502
|
dispatch(options: DispatchOptions, onEvent: SSEHandler): Promise<void>;
|
|
1503
|
+
/**
|
|
1504
|
+
* Client token mode dispatch
|
|
1505
|
+
*/
|
|
1506
|
+
private dispatchClientToken;
|
|
1507
|
+
/**
|
|
1508
|
+
* Proxy mode dispatch (original implementation)
|
|
1509
|
+
*/
|
|
1510
|
+
private dispatchProxy;
|
|
973
1511
|
private buildPayload;
|
|
974
1512
|
/**
|
|
975
1513
|
* Handle custom SSE event parsing via parseSSEEvent callback
|
|
@@ -1006,8 +1544,51 @@ declare const createActionManager: (options: ActionManagerOptions) => {
|
|
|
1006
1544
|
};
|
|
1007
1545
|
|
|
1008
1546
|
/**
|
|
1009
|
-
*
|
|
1010
|
-
|
|
1547
|
+
* Options for creating a markdown processor
|
|
1548
|
+
*/
|
|
1549
|
+
type MarkdownProcessorOptions = {
|
|
1550
|
+
/** Marked parsing options */
|
|
1551
|
+
markedOptions?: AgentWidgetMarkdownOptions;
|
|
1552
|
+
/** Custom renderer overrides */
|
|
1553
|
+
renderer?: AgentWidgetMarkdownRendererOverrides;
|
|
1554
|
+
};
|
|
1555
|
+
/**
|
|
1556
|
+
* Creates a configured markdown processor with custom options and renderers.
|
|
1557
|
+
*
|
|
1558
|
+
* @param options - Configuration options for the markdown processor
|
|
1559
|
+
* @returns A function that converts markdown text to HTML
|
|
1560
|
+
*
|
|
1561
|
+
* @example
|
|
1562
|
+
* ```typescript
|
|
1563
|
+
* // Basic usage with defaults
|
|
1564
|
+
* const processor = createMarkdownProcessor();
|
|
1565
|
+
* const html = processor("# Hello World");
|
|
1566
|
+
*
|
|
1567
|
+
* // With custom options
|
|
1568
|
+
* const processor = createMarkdownProcessor({
|
|
1569
|
+
* markedOptions: { gfm: true, breaks: true },
|
|
1570
|
+
* renderer: {
|
|
1571
|
+
* link(token) {
|
|
1572
|
+
* return `<a href="${token.href}" target="_blank">${token.text}</a>`;
|
|
1573
|
+
* }
|
|
1574
|
+
* }
|
|
1575
|
+
* });
|
|
1576
|
+
* ```
|
|
1577
|
+
*/
|
|
1578
|
+
declare const createMarkdownProcessor: (options?: MarkdownProcessorOptions) => (text: string) => string;
|
|
1579
|
+
/**
|
|
1580
|
+
* Creates a markdown processor from AgentWidgetMarkdownConfig.
|
|
1581
|
+
* This is a convenience function that maps the widget config to processor options.
|
|
1582
|
+
*
|
|
1583
|
+
* @param config - The markdown configuration from widget config
|
|
1584
|
+
* @returns A function that converts markdown text to HTML
|
|
1585
|
+
*/
|
|
1586
|
+
declare const createMarkdownProcessorFromConfig: (config?: AgentWidgetMarkdownConfig) => (text: string) => string;
|
|
1587
|
+
/**
|
|
1588
|
+
* Basic markdown renderer using default settings.
|
|
1589
|
+
* Remember to sanitize the returned HTML if you render untrusted content in your host page.
|
|
1590
|
+
*
|
|
1591
|
+
* For custom configuration, use `createMarkdownProcessor()` or `createMarkdownProcessorFromConfig()`.
|
|
1011
1592
|
*/
|
|
1012
1593
|
declare const markdownPostprocessor: (text: string) => string;
|
|
1013
1594
|
/**
|
|
@@ -1015,10 +1596,23 @@ declare const markdownPostprocessor: (text: string) => string;
|
|
|
1015
1596
|
*/
|
|
1016
1597
|
declare const escapeHtml: (text: string) => string;
|
|
1017
1598
|
/**
|
|
1599
|
+
* Creates a directive postprocessor with custom markdown configuration.
|
|
1018
1600
|
* Converts special directives (either `<Form type="init" />` or
|
|
1019
1601
|
* `<Directive>{"component":"form","type":"init"}</Directive>`) into placeholder
|
|
1020
1602
|
* elements that the widget upgrades after render. Remaining text is rendered as
|
|
1021
|
-
* Markdown.
|
|
1603
|
+
* Markdown with the provided configuration.
|
|
1604
|
+
*
|
|
1605
|
+
* @param markdownConfig - Optional markdown configuration
|
|
1606
|
+
* @returns A function that processes text with directives and markdown
|
|
1607
|
+
*/
|
|
1608
|
+
declare const createDirectivePostprocessor: (markdownConfig?: AgentWidgetMarkdownConfig) => (text: string) => string;
|
|
1609
|
+
/**
|
|
1610
|
+
* Converts special directives (either `<Form type="init" />` or
|
|
1611
|
+
* `<Directive>{"component":"form","type":"init"}</Directive>`) into placeholder
|
|
1612
|
+
* elements that the widget upgrades after render. Remaining text is rendered as
|
|
1613
|
+
* Markdown using default settings.
|
|
1614
|
+
*
|
|
1615
|
+
* For custom markdown configuration, use `createDirectivePostprocessor()`.
|
|
1022
1616
|
*/
|
|
1023
1617
|
declare const directivePostprocessor: (text: string) => string;
|
|
1024
1618
|
|
|
@@ -1179,17 +1773,25 @@ type MessageTransform = (context: {
|
|
|
1179
1773
|
streaming: boolean;
|
|
1180
1774
|
raw?: string;
|
|
1181
1775
|
}) => string;
|
|
1776
|
+
type MessageActionCallbacks = {
|
|
1777
|
+
onCopy?: (message: AgentWidgetMessage) => void;
|
|
1778
|
+
onFeedback?: (feedback: AgentWidgetMessageFeedback) => void;
|
|
1779
|
+
};
|
|
1182
1780
|
declare const createTypingIndicator: () => HTMLElement;
|
|
1781
|
+
/**
|
|
1782
|
+
* Create message action buttons (copy, upvote, downvote)
|
|
1783
|
+
*/
|
|
1784
|
+
declare const createMessageActions: (message: AgentWidgetMessage, actionsConfig: AgentWidgetMessageActionsConfig, callbacks?: MessageActionCallbacks) => HTMLElement;
|
|
1183
1785
|
/**
|
|
1184
1786
|
* Create standard message bubble
|
|
1185
1787
|
* Supports layout configuration for avatars, timestamps, and visual presets
|
|
1186
1788
|
*/
|
|
1187
|
-
declare const createStandardBubble: (message: AgentWidgetMessage, transform: MessageTransform, layoutConfig?: AgentWidgetMessageLayoutConfig) => HTMLElement;
|
|
1789
|
+
declare const createStandardBubble: (message: AgentWidgetMessage, transform: MessageTransform, layoutConfig?: AgentWidgetMessageLayoutConfig, actionsConfig?: AgentWidgetMessageActionsConfig, actionCallbacks?: MessageActionCallbacks) => HTMLElement;
|
|
1188
1790
|
/**
|
|
1189
1791
|
* Create bubble with custom renderer support
|
|
1190
1792
|
* Uses custom renderer if provided in layout config, otherwise falls back to standard bubble
|
|
1191
1793
|
*/
|
|
1192
|
-
declare const createBubbleWithLayout: (message: AgentWidgetMessage, transform: MessageTransform, layoutConfig?: AgentWidgetMessageLayoutConfig) => HTMLElement;
|
|
1794
|
+
declare const createBubbleWithLayout: (message: AgentWidgetMessage, transform: MessageTransform, layoutConfig?: AgentWidgetMessageLayoutConfig, actionsConfig?: AgentWidgetMessageActionsConfig, actionCallbacks?: MessageActionCallbacks) => HTMLElement;
|
|
1193
1795
|
|
|
1194
1796
|
/**
|
|
1195
1797
|
* Options for component middleware
|
|
@@ -1326,4 +1928,4 @@ declare const getHeaderLayout: (layoutName: string) => HeaderLayoutRenderer;
|
|
|
1326
1928
|
*/
|
|
1327
1929
|
declare const buildHeaderWithLayout: (config: AgentWidgetConfig, layoutConfig?: AgentWidgetHeaderLayoutConfig, context?: Partial<HeaderLayoutContext>) => HeaderElements;
|
|
1328
1930
|
|
|
1329
|
-
export { type AgentWidgetAvatarConfig, AgentWidgetClient, type AgentWidgetConfig, type AgentWidgetController, type AgentWidgetCustomFetch, type AgentWidgetEvent, type AgentWidgetFeatureFlags, type AgentWidgetHeaderLayoutConfig, type AgentWidgetHeadersFunction, type AgentWidgetInitHandle, type AgentWidgetInitOptions, type AgentWidgetLauncherConfig, type AgentWidgetLayoutConfig, type AgentWidgetMessage, type AgentWidgetMessageLayoutConfig, type AgentWidgetPlugin, type AgentWidgetRequestPayload, type AgentWidgetSSEEventParser, type AgentWidgetSSEEventResult, AgentWidgetSession, type AgentWidgetSessionStatus, type AgentWidgetStreamParser, type AgentWidgetStreamParserResult, type AgentWidgetTheme, type AgentWidgetTimestampConfig, type CodeFormat, type ComponentContext, type ComponentDirective, type ComponentRenderer, type ComposerBuildContext, type ComposerElements, DEFAULT_WIDGET_CONFIG, type HeaderBuildContext, type HeaderElements, type HeaderLayoutContext, type HeaderLayoutRenderer, type HeaderRenderContext, type MessageRenderContext, type MessageTransform, type SlotRenderContext, type SlotRenderer, type WidgetLayoutSlot, attachHeaderToContainer, buildComposer, buildDefaultHeader, buildExpandedHeader, buildHeader, buildHeaderWithLayout, buildMinimalHeader, componentRegistry, createActionManager, createAgentExperience, createBubbleWithLayout, createComponentMiddleware, createComponentStreamParser, createFlexibleJsonStreamParser, createJsonStreamParser, createLocalStorageAdapter, createPlainTextParser, createRegexJsonParser, createStandardBubble, createTypingIndicator, createXmlParser, initAgentWidget as default, defaultActionHandlers, defaultJsonActionParser, directivePostprocessor, escapeHtml, extractComponentDirectiveFromMessage, generateCodeSnippet, getHeaderLayout, hasComponentDirective, headerLayouts, initAgentWidget, isComponentDirectiveType, markdownPostprocessor, mergeWithDefaults, pluginRegistry, renderComponentDirective };
|
|
1931
|
+
export { type AgentWidgetAvatarConfig, AgentWidgetClient, type AgentWidgetConfig, type AgentWidgetController, type AgentWidgetCustomFetch, type AgentWidgetEvent, type AgentWidgetFeatureFlags, type AgentWidgetHeaderLayoutConfig, type AgentWidgetHeadersFunction, type AgentWidgetInitHandle, type AgentWidgetInitOptions, type AgentWidgetLauncherConfig, type AgentWidgetLayoutConfig, 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 ClientChatRequest, type ClientInitResponse, type ClientSession, type CodeFormat, type ComponentContext, type ComponentDirective, type ComponentRenderer, type ComposerBuildContext, type ComposerElements, DEFAULT_WIDGET_CONFIG, type HeaderBuildContext, type HeaderElements, type HeaderLayoutContext, type HeaderLayoutRenderer, type HeaderRenderContext, type MarkdownProcessorOptions, type MessageActionCallbacks, type MessageRenderContext, type MessageTransform, type SlotRenderContext, type SlotRenderer, type WidgetLayoutSlot, attachHeaderToContainer, buildComposer, buildDefaultHeader, buildExpandedHeader, buildHeader, buildHeaderWithLayout, buildMinimalHeader, componentRegistry, createActionManager, createAgentExperience, createBubbleWithLayout, createComponentMiddleware, createComponentStreamParser, createDirectivePostprocessor, createFlexibleJsonStreamParser, createJsonStreamParser, createLocalStorageAdapter, createMarkdownProcessor, createMarkdownProcessorFromConfig, createMessageActions, createPlainTextParser, createRegexJsonParser, createStandardBubble, createTypingIndicator, createXmlParser, initAgentWidget as default, defaultActionHandlers, defaultJsonActionParser, directivePostprocessor, escapeHtml, extractComponentDirectiveFromMessage, generateCodeSnippet, getHeaderLayout, hasComponentDirective, headerLayouts, initAgentWidget, isComponentDirectiveType, markdownPostprocessor, mergeWithDefaults, pluginRegistry, renderComponentDirective };
|