@syntrologie/adapt-chatbot 2.8.0-canary.97 → 2.8.0-canary.98
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatAssistantLit.d.ts","sourceRoot":"","sources":["../src/ChatAssistantLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAEV,aAAa,EACb,oBAAoB,EACpB,WAAW,EACZ,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatAssistantLit.d.ts","sourceRoot":"","sources":["../src/ChatAssistantLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAEV,aAAa,EACb,oBAAoB,EACpB,WAAW,EACZ,MAAM,YAAY,CAAC;AAsIpB,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,qBAAa,oBAAqB,SAAQ,UAAU;;IAGzC,gBAAgB;IAMzB,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;MAUxB;IAIF,MAAM,EAAE,aAAa,GAAG,SAAS,CAAa;IAC9C,OAAO,EAAE,oBAAoB,GAAG,SAAS,CAAa;IACtD,MAAM,SAAoB;IAI1B,gBAAgB,CAAC,SAAS,EAAE,WAAW,EAAE,CAAM;IAC/C,gBAAgB,CAAC,UAAU,UAAS;IACpC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAUrC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAc5B,YAAY,IAAI,IAAI;IAQpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuB5C,MAAM;IAqJf,8EAA8E;IAC9E,aAAa,IAAI,IAAI;CAWtB;AAQD,eAAO,MAAM,4BAA4B,QAAO,IAK/C,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,oBAAoB,CAAC;KAC/C;CACF;AAMD,eAAO,MAAM,yBAAyB;qBACnB,WAAW,gBAAgB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAiCpE,CAAC"}
|
package/dist/ChatAssistantLit.js
CHANGED
|
@@ -30,18 +30,24 @@ import { styleMap } from 'lit/directives/style-map.js';
|
|
|
30
30
|
import { parseActions } from './actionParser.js';
|
|
31
31
|
import { sendMessage } from './apiClient.js';
|
|
32
32
|
// ============================================================================
|
|
33
|
-
//
|
|
34
|
-
//
|
|
35
|
-
//
|
|
36
|
-
//
|
|
33
|
+
// Customer-themable colors
|
|
34
|
+
//
|
|
35
|
+
// This adaptive ships to customer pages and must pull its palette from
|
|
36
|
+
// `--sc-*` CSS variables (same pattern as adaptive-faq / adaptive-nav), so
|
|
37
|
+
// customers can theme chat to match their site without shipping a fork.
|
|
38
|
+
//
|
|
39
|
+
// The TOKEN_* constants below are *fallbacks only* — they match Syntro
|
|
40
|
+
// design-system values (purple[4], base.white, slateGrey[7,8,10,12], red[4])
|
|
41
|
+
// so dev/test environments without a customer theme still look on-brand.
|
|
42
|
+
// Do NOT import from `@syntro/design-system` at runtime — adaptives keep it
|
|
43
|
+
// as a devDep, not a runtime dep.
|
|
37
44
|
// ============================================================================
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
const
|
|
44
|
-
const RED_4 = '#ff2524';
|
|
45
|
+
const TOKEN_PURPLE_4 = '#6a59ce';
|
|
46
|
+
const TOKEN_WHITE = '#ffffff';
|
|
47
|
+
const TOKEN_SLATE_10 = '#cbd0d7';
|
|
48
|
+
const TOKEN_SLATE_12 = '#f6f7f9';
|
|
49
|
+
const TOKEN_SLATE_8 = '#87919f';
|
|
50
|
+
const TOKEN_RED_4 = '#ff2524';
|
|
45
51
|
// ============================================================================
|
|
46
52
|
// ID generator (matches the one in useChat.ts)
|
|
47
53
|
// ============================================================================
|
|
@@ -77,28 +83,28 @@ const bubbleBaseStyle = {
|
|
|
77
83
|
};
|
|
78
84
|
const userBubbleExtra = {
|
|
79
85
|
alignSelf: 'flex-end',
|
|
80
|
-
backgroundColor:
|
|
81
|
-
color:
|
|
86
|
+
backgroundColor: `var(--sc-color-primary, ${TOKEN_PURPLE_4})`,
|
|
87
|
+
color: `var(--sc-color-primary-text, ${TOKEN_WHITE})`,
|
|
82
88
|
borderBottomRightRadius: '4px',
|
|
83
89
|
};
|
|
84
90
|
const assistantBubbleExtra = {
|
|
85
91
|
alignSelf: 'flex-start',
|
|
86
|
-
backgroundColor: 'rgba(255, 255, 255, 0.08)',
|
|
87
|
-
color:
|
|
92
|
+
backgroundColor: 'var(--sc-chat-assistant-bubble-bg, rgba(255, 255, 255, 0.08))',
|
|
93
|
+
color: `var(--sc-content-text-color, ${TOKEN_SLATE_10})`,
|
|
88
94
|
borderBottomLeftRadius: '4px',
|
|
89
95
|
};
|
|
90
96
|
const loadingDotsStyle = {
|
|
91
97
|
alignSelf: 'flex-start',
|
|
92
98
|
padding: '8px 16px',
|
|
93
|
-
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
99
|
+
backgroundColor: 'var(--sc-chat-loading-bg, rgba(255, 255, 255, 0.05))',
|
|
94
100
|
borderRadius: '12px',
|
|
95
|
-
color:
|
|
101
|
+
color: `var(--sc-content-text-secondary-color, ${TOKEN_SLATE_8})`,
|
|
96
102
|
fontSize: '13px',
|
|
97
103
|
};
|
|
98
104
|
const errorBannerStyle = {
|
|
99
105
|
padding: '8px 12px',
|
|
100
|
-
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
|
101
|
-
color:
|
|
106
|
+
backgroundColor: 'var(--sc-color-error-bg, rgba(239, 68, 68, 0.1))',
|
|
107
|
+
color: `var(--sc-color-error, ${TOKEN_RED_4})`,
|
|
102
108
|
fontSize: '13px',
|
|
103
109
|
borderRadius: '8px',
|
|
104
110
|
margin: '0 12px',
|
|
@@ -107,15 +113,15 @@ const inputFormStyle = {
|
|
|
107
113
|
display: 'flex',
|
|
108
114
|
gap: '8px',
|
|
109
115
|
padding: '12px',
|
|
110
|
-
borderTop: '1px solid rgba(255, 255, 255, 0.06)',
|
|
116
|
+
borderTop: '1px solid var(--sc-content-border-color, rgba(255, 255, 255, 0.06))',
|
|
111
117
|
};
|
|
112
118
|
const inputStyle = {
|
|
113
119
|
flex: '1',
|
|
114
120
|
padding: '8px 12px',
|
|
115
121
|
borderRadius: '8px',
|
|
116
|
-
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
117
|
-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
|
118
|
-
color:
|
|
122
|
+
border: '1px solid var(--sc-content-border-color, rgba(255, 255, 255, 0.1))',
|
|
123
|
+
backgroundColor: 'var(--sc-chat-input-bg, rgba(0, 0, 0, 0.2))',
|
|
124
|
+
color: `var(--sc-content-heading-color, ${TOKEN_SLATE_12})`,
|
|
119
125
|
fontSize: '14px',
|
|
120
126
|
outline: 'none',
|
|
121
127
|
fontFamily: 'inherit',
|
|
@@ -124,8 +130,8 @@ const sendButtonStyle = {
|
|
|
124
130
|
padding: '8px 16px',
|
|
125
131
|
borderRadius: '8px',
|
|
126
132
|
border: 'none',
|
|
127
|
-
backgroundColor:
|
|
128
|
-
color:
|
|
133
|
+
backgroundColor: `var(--sc-color-primary, ${TOKEN_PURPLE_4})`,
|
|
134
|
+
color: `var(--sc-color-primary-text, ${TOKEN_WHITE})`,
|
|
129
135
|
fontWeight: '600',
|
|
130
136
|
fontSize: '13px',
|
|
131
137
|
cursor: 'pointer',
|
|
@@ -363,7 +369,7 @@ export const ChatAssistantLitMountable = {
|
|
|
363
369
|
mount(container, mountConfig) {
|
|
364
370
|
const { config, runtime, tileId = 'chatbot-widget', } = (mountConfig ?? {});
|
|
365
371
|
if (!config || !runtime) {
|
|
366
|
-
container.innerHTML = `<div style="padding: 16px; color: ${
|
|
372
|
+
container.innerHTML = `<div style="padding: 16px; color: var(--sc-content-text-secondary-color, ${TOKEN_SLATE_8});">Chat widget requires config and runtime.</div>`;
|
|
367
373
|
return () => {
|
|
368
374
|
container.innerHTML = '';
|
|
369
375
|
};
|
package/package.json
CHANGED