@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;AAgIpB,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"}
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"}
@@ -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
- // Design-system color tokens (inlined to avoid a runtime import chain)
34
- // purple[4]=#6a59ce base.white=#ffffff slateGrey[10]=#cbd0d7
35
- // slateGrey[12]=#f6f7f9 slateGrey[8]=#87919f slateGrey[7]=#677384
36
- // red[4]=#ff2524
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 PURPLE_4 = '#6a59ce';
39
- const WHITE = '#ffffff';
40
- const SLATE_10 = '#cbd0d7';
41
- const SLATE_12 = '#f6f7f9';
42
- const SLATE_8 = '#87919f';
43
- const SLATE_7 = '#677384';
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: PURPLE_4,
81
- color: WHITE,
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: SLATE_10,
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: SLATE_8,
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: RED_4,
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: SLATE_12,
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: PURPLE_4,
128
- color: WHITE,
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: ${SLATE_8};">Chat widget requires config and runtime.</div>`;
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@syntrologie/adapt-chatbot",
3
- "version": "2.8.0-canary.97",
3
+ "version": "2.8.0-canary.98",
4
4
  "description": "Adaptive Chatbot - AI chat assistant widget with action execution",
5
5
  "license": "Proprietary",
6
6
  "private": false,