@ihoomanai/chat-widget 3.0.22 → 4.0.1
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/cdn/latest/chat.js +1 -1
- package/cdn/latest/chat.min.js +1 -1
- package/cdn/v3/chat.js +2 -2
- package/cdn/v3/chat.min.js +1 -1
- package/cdn/v3.0.21/chat.js +1 -1
- package/cdn/v3.0.21/chat.min.js +1 -1
- package/dist/index.cjs.js +227 -166
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +227 -166
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.umd.js +227 -166
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/widget.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/widget.ts +232 -168
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @ihoomanai/chat-widget
|
|
3
|
-
*
|
|
2
|
+
* @ihoomanai/chat-widget v4.0.1
|
|
3
|
+
* Professional AI chat widget for any website - dark theme, modern design, secure Widget ID based initialization
|
|
4
4
|
*
|
|
5
5
|
* @license MIT
|
|
6
6
|
* @copyright Ihooman AI
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
* Enhanced with professional features
|
|
17
17
|
* @version 3.0.0
|
|
18
18
|
*/
|
|
19
|
-
const VERSION = '
|
|
19
|
+
const VERSION = '4.0.0';
|
|
20
20
|
const STORAGE_PREFIX = 'ihooman_chat_';
|
|
21
21
|
const DEFAULT_SERVER_URL = 'https://api.ihooman.ai';
|
|
22
22
|
const defaultConfig = {
|
|
23
23
|
serverUrl: DEFAULT_SERVER_URL,
|
|
24
|
-
theme: '
|
|
24
|
+
theme: 'dark',
|
|
25
25
|
position: 'bottom-right',
|
|
26
|
-
title: '
|
|
27
|
-
subtitle: '
|
|
28
|
-
welcomeMessage: '
|
|
29
|
-
placeholder: '
|
|
30
|
-
primaryColor: '#
|
|
31
|
-
gradientFrom: '#
|
|
32
|
-
gradientTo: '#
|
|
26
|
+
title: 'AI Assistant',
|
|
27
|
+
subtitle: 'Always here to help',
|
|
28
|
+
welcomeMessage: 'Hello! How can I help you today?',
|
|
29
|
+
placeholder: 'Send a message...',
|
|
30
|
+
primaryColor: '#ededed',
|
|
31
|
+
gradientFrom: '#171717',
|
|
32
|
+
gradientTo: '#171717',
|
|
33
33
|
showTimestamps: true,
|
|
34
34
|
showTypingIndicator: true,
|
|
35
35
|
enableSounds: true,
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
startOpen: false,
|
|
38
38
|
persistSession: true,
|
|
39
39
|
zIndex: 9999,
|
|
40
|
-
width:
|
|
41
|
-
height:
|
|
42
|
-
buttonSize:
|
|
40
|
+
width: 400,
|
|
41
|
+
height: 620,
|
|
42
|
+
buttonSize: 52,
|
|
43
43
|
borderRadius: 16,
|
|
44
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
44
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif',
|
|
45
45
|
avatarUrl: '',
|
|
46
46
|
poweredBy: true,
|
|
47
47
|
presetQuestions: [],
|
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
allowLocalhost: true,
|
|
52
52
|
};
|
|
53
53
|
const icons = {
|
|
54
|
-
chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
55
|
-
close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
56
|
-
send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
57
|
-
attach: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
58
|
-
minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
59
|
-
|
|
60
|
-
agent: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
61
|
-
ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
62
|
-
history: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
63
|
-
plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
64
|
-
star: `<svg viewBox="0 0 24 24" fill="currentColor"><
|
|
65
|
-
starEmpty: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
54
|
+
chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`,
|
|
55
|
+
close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
|
|
56
|
+
send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>`,
|
|
57
|
+
attach: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>`,
|
|
58
|
+
minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>`,
|
|
59
|
+
sparkle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path></svg>`,
|
|
60
|
+
agent: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="5"></circle><path d="M20 21a8 8 0 0 0-16 0"></path></svg>`,
|
|
61
|
+
ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 18v-1"></path><path d="M14 18v-1"></path><path d="M10 14v-1"></path><path d="M14 14v-1"></path></svg>`,
|
|
62
|
+
history: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>`,
|
|
63
|
+
plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>`,
|
|
64
|
+
star: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>`,
|
|
65
|
+
starEmpty: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>`};
|
|
66
66
|
let config = { widgetId: '', ...defaultConfig };
|
|
67
67
|
let state = {
|
|
68
68
|
isOpen: false,
|
|
@@ -208,21 +208,32 @@
|
|
|
208
208
|
// STYLES
|
|
209
209
|
// ============================================================================
|
|
210
210
|
function generateStyles() {
|
|
211
|
-
const {
|
|
212
|
-
const isDark = config.theme === 'dark';
|
|
213
|
-
|
|
214
|
-
const
|
|
215
|
-
const
|
|
216
|
-
const
|
|
217
|
-
const
|
|
218
|
-
const
|
|
219
|
-
const
|
|
211
|
+
const { fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
|
|
212
|
+
const isDark = config.theme === 'dark' || config.theme === 'auto';
|
|
213
|
+
// Professional dark/light color tokens — Vercel-inspired
|
|
214
|
+
const bgColor = isDark ? '#0a0a0a' : '#ffffff';
|
|
215
|
+
const bgElevated = isDark ? '#141414' : '#fafafa';
|
|
216
|
+
const bgSurface = isDark ? '#1a1a1a' : '#f4f4f5';
|
|
217
|
+
const textColor = isDark ? '#ededed' : '#09090b';
|
|
218
|
+
const textSecondary = isDark ? '#a1a1aa' : '#71717a';
|
|
219
|
+
const mutedColor = isDark ? '#52525b' : '#a1a1aa';
|
|
220
|
+
const borderColor = isDark ? '#27272a' : '#e4e4e7';
|
|
221
|
+
const borderSubtle = isDark ? '#1f1f23' : '#f4f4f5';
|
|
222
|
+
const inputBg = isDark ? '#141414' : '#fafafa';
|
|
223
|
+
const hoverBg = isDark ? '#1c1c1c' : '#f4f4f5';
|
|
224
|
+
const accentColor = isDark ? '#ededed' : '#18181b';
|
|
225
|
+
const accentBg = isDark ? '#ededed' : '#18181b';
|
|
226
|
+
const accentText = isDark ? '#09090b' : '#fafafa';
|
|
227
|
+
const userMsgBg = isDark ? '#27272a' : '#18181b';
|
|
228
|
+
const userMsgText = isDark ? '#ededed' : '#fafafa';
|
|
229
|
+
const botMsgBg = 'transparent';
|
|
220
230
|
const positionRight = config.position?.includes('right') ?? true;
|
|
221
231
|
const positionBottom = config.position?.includes('bottom') ?? true;
|
|
232
|
+
const shadowLg = isDark ? '0 24px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05)' : '0 24px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05)';
|
|
222
233
|
return `
|
|
223
234
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
224
235
|
:host { all: initial; }
|
|
225
|
-
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.
|
|
236
|
+
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.6; color: ${textColor}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
226
237
|
button {
|
|
227
238
|
font-family: inherit;
|
|
228
239
|
font-size: 100%;
|
|
@@ -235,144 +246,188 @@
|
|
|
235
246
|
cursor: pointer;
|
|
236
247
|
outline: none;
|
|
237
248
|
}
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
.ihooman-toggle
|
|
242
|
-
.ihooman-toggle
|
|
243
|
-
.ihooman-toggle
|
|
244
|
-
.ihooman-toggle
|
|
249
|
+
button:focus-visible { outline: 2px solid ${accentColor}; outline-offset: 2px; }
|
|
250
|
+
|
|
251
|
+
/* ── Toggle Button ── */
|
|
252
|
+
.ihooman-toggle { position: fixed !important; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 20px' : 'top: 20px'}; width: ${buttonSize}px !important; height: ${buttonSize}px !important; border-radius: 50% !important; background: ${accentBg} !important; border: 1px solid ${borderColor} !important; cursor: pointer; z-index: ${zIndex}; display: flex !important; align-items: center; justify-content: center; box-shadow: ${shadowLg}; transition: all 0.2s ease-out; overflow: hidden; }
|
|
253
|
+
.ihooman-toggle:hover { transform: scale(1.05); box-shadow: ${shadowLg}; }
|
|
254
|
+
.ihooman-toggle:active { transform: scale(0.96); }
|
|
255
|
+
.ihooman-toggle svg { width: 22px; height: 22px; color: ${accentText}; transition: transform 0.25s ease-out, opacity 0.15s ease; position: relative; z-index: 1; }
|
|
256
|
+
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease-out, opacity 0.15s ease; }
|
|
257
|
+
.ihooman-toggle .close-icon { position: absolute; display: flex; align-items: center; justify-content: center; transform: rotate(-90deg) scale(0); opacity: 0; transition: transform 0.25s ease-out, opacity 0.15s ease; }
|
|
245
258
|
.ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
|
|
246
259
|
.ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
|
|
247
|
-
.ihooman-pulse {
|
|
248
|
-
|
|
249
|
-
.ihooman-toggle.open .ihooman-pulse { display: none; }
|
|
250
|
-
.ihooman-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; background: #ef4444; color: white; font-size: 11px; font-weight: 600; border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 2; }
|
|
260
|
+
.ihooman-pulse { display: none; }
|
|
261
|
+
.ihooman-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; background: #dc2626; color: white; font-size: 10px; font-weight: 600; border-radius: 9px; display: flex; align-items: center; justify-content: center; z-index: 2; border: 2px solid ${bgColor}; }
|
|
251
262
|
.ihooman-badge:empty { display: none; }
|
|
252
|
-
|
|
263
|
+
|
|
264
|
+
/* ── Window ── */
|
|
265
|
+
.ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 84px' : 'top: 84px'}; width: ${width}px; height: ${height}px; min-height: ${height}px; max-height: ${height}px; z-index: ${(zIndex ?? 9999) - 1}; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.97); transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out; overscroll-behavior: contain; }
|
|
253
266
|
.ihooman-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
.ihooman-container
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
.ihooman-header
|
|
260
|
-
.ihooman-header-avatar
|
|
267
|
+
|
|
268
|
+
/* ── Container ── */
|
|
269
|
+
.ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; flex-shrink: 0; background: ${bgColor}; border: 1px solid ${borderColor}; box-shadow: ${shadowLg}; }
|
|
270
|
+
|
|
271
|
+
/* ── Header ── */
|
|
272
|
+
.ihooman-header { padding: 14px 16px; background: ${bgElevated}; color: ${textColor}; display: flex; align-items: center; gap: 12px; flex-shrink: 0; border-bottom: 1px solid ${borderColor}; }
|
|
273
|
+
.ihooman-header-avatar { width: 36px; height: 36px; border-radius: 10px; background: ${bgSurface}; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid ${borderColor}; }
|
|
274
|
+
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
|
|
275
|
+
.ihooman-header-avatar svg { width: 18px; height: 18px; color: ${textSecondary}; }
|
|
261
276
|
.ihooman-header-info { flex: 1; min-width: 0; }
|
|
262
|
-
.ihooman-header-title { font-size:
|
|
263
|
-
.ihooman-header-status { display: flex; align-items: center; gap:
|
|
264
|
-
.ihooman-status-dot { width:
|
|
265
|
-
.ihooman-status-dot.offline { background: #
|
|
266
|
-
.ihooman-header-actions { display: flex; gap:
|
|
267
|
-
.ihooman-header-btn { width:
|
|
268
|
-
.ihooman-header-btn:hover { background:
|
|
269
|
-
.ihooman-header-btn svg { width:
|
|
270
|
-
|
|
271
|
-
|
|
277
|
+
.ihooman-header-title { font-size: 14px; font-weight: 600; margin-bottom: 1px; letter-spacing: -0.01em; color: ${textColor}; }
|
|
278
|
+
.ihooman-header-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: ${textSecondary}; }
|
|
279
|
+
.ihooman-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
|
|
280
|
+
.ihooman-status-dot.offline { background: #a1a1aa; }
|
|
281
|
+
.ihooman-header-actions { display: flex; gap: 4px; }
|
|
282
|
+
.ihooman-header-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: ${textSecondary}; transition: background 0.15s ease, color 0.15s ease; }
|
|
283
|
+
.ihooman-header-btn:hover { background: ${hoverBg}; color: ${textColor}; }
|
|
284
|
+
.ihooman-header-btn svg { width: 15px; height: 15px; }
|
|
285
|
+
|
|
286
|
+
/* ── Messages ── */
|
|
287
|
+
.ihooman-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; background: ${bgColor}; overscroll-behavior: contain; min-height: 0; }
|
|
288
|
+
.ihooman-messages::-webkit-scrollbar { width: 4px; }
|
|
272
289
|
.ihooman-messages::-webkit-scrollbar-track { background: transparent; }
|
|
273
|
-
.ihooman-messages::-webkit-scrollbar-thumb { background: ${
|
|
274
|
-
.ihooman-message { display: flex; flex-direction: column; max-width:
|
|
275
|
-
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(
|
|
290
|
+
.ihooman-messages::-webkit-scrollbar-thumb { background: ${isDark ? '#27272a' : '#d4d4d8'}; border-radius: 2px; }
|
|
291
|
+
.ihooman-message { display: flex; flex-direction: column; max-width: 88%; animation: ihooman-fadeIn 0.25s ease-out; }
|
|
292
|
+
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
|
|
276
293
|
.ihooman-message.user { align-self: flex-end; align-items: flex-end; }
|
|
277
|
-
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; }
|
|
278
|
-
.ihooman-message-content { padding:
|
|
279
|
-
.ihooman-message.user .ihooman-message-content { background: ${
|
|
280
|
-
.ihooman-message.bot .ihooman-message-content { background: ${
|
|
281
|
-
.ihooman-message-content
|
|
282
|
-
.ihooman-message-
|
|
283
|
-
.ihooman-
|
|
284
|
-
.ihooman-
|
|
285
|
-
.ihooman-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
294
|
+
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; max-width: 100%; }
|
|
295
|
+
.ihooman-message-content { padding: 10px 14px; border-radius: 14px; word-wrap: break-word; overflow-wrap: break-word; font-size: 14px; line-height: 1.6; }
|
|
296
|
+
.ihooman-message.user .ihooman-message-content { background: ${userMsgBg}; color: ${userMsgText}; border-bottom-right-radius: 4px; }
|
|
297
|
+
.ihooman-message.bot .ihooman-message-content { background: ${botMsgBg}; color: ${textColor}; padding: 6px 2px; }
|
|
298
|
+
.ihooman-message-content a { color: ${isDark ? '#60a5fa' : '#2563eb'}; text-decoration: underline; text-underline-offset: 2px; }
|
|
299
|
+
.ihooman-message-content a:hover { opacity: 0.8; }
|
|
300
|
+
.ihooman-message-content code { background: ${isDark ? '#27272a' : '#f4f4f5'}; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace; font-size: 12.5px; border: 1px solid ${borderSubtle}; }
|
|
301
|
+
.ihooman-message-content strong { font-weight: 600; }
|
|
302
|
+
.ihooman-message-time { font-size: 11px; color: ${mutedColor}; margin-top: 3px; padding: 0 4px; }
|
|
303
|
+
|
|
304
|
+
/* ── Typing Indicator — Shimmer ── */
|
|
305
|
+
.ihooman-typing { display: flex; align-items: center; gap: 10px; padding: 10px 2px; max-width: 180px; align-self: flex-start; animation: ihooman-fadeIn 0.2s ease-out; }
|
|
306
|
+
.ihooman-typing-shimmer { font-size: 13px; color: ${mutedColor}; background: linear-gradient(90deg, ${mutedColor} 25%, ${textSecondary} 50%, ${mutedColor} 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ihooman-shimmer 1.5s ease-in-out infinite; }
|
|
307
|
+
@keyframes ihooman-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
|
308
|
+
.ihooman-typing-dots { display: flex; gap: 3px; align-items: center; }
|
|
309
|
+
.ihooman-typing-dot { width: 5px; height: 5px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.2s ease-in-out infinite; }
|
|
310
|
+
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
311
|
+
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
312
|
+
@keyframes ihooman-typing { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }
|
|
313
|
+
|
|
314
|
+
/* ── Input Area ── */
|
|
289
315
|
.ihooman-input-area { padding: 12px 16px; background: ${bgColor}; border-top: 1px solid ${borderColor}; flex-shrink: 0; }
|
|
290
|
-
.ihooman-input-wrapper { display: flex; align-items: flex-end; gap: 8px; background: ${inputBg}; border: 1px solid ${borderColor}; border-radius: 12px; padding: 8px 12px; transition: border-color 0.
|
|
291
|
-
.ihooman-input-wrapper:focus-within { border-color: ${
|
|
292
|
-
.ihooman-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 14px; color: ${textColor}; resize: none; max-height: 100px; outline: none; line-height: 1.
|
|
316
|
+
.ihooman-input-wrapper { display: flex; align-items: flex-end; gap: 8px; background: ${inputBg}; border: 1px solid ${borderColor}; border-radius: 12px; padding: 8px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
|
|
317
|
+
.ihooman-input-wrapper:focus-within { border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
318
|
+
.ihooman-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 14px; color: ${textColor}; resize: none; max-height: 100px; outline: none; line-height: 1.5; }
|
|
293
319
|
.ihooman-input::placeholder { color: ${mutedColor}; }
|
|
294
|
-
.ihooman-input-btn { width:
|
|
295
|
-
.ihooman-input-btn:hover {
|
|
296
|
-
.ihooman-input-btn.send { background:
|
|
297
|
-
.ihooman-input-btn.send:hover { opacity: 0.
|
|
298
|
-
.ihooman-input-btn.send:disabled { opacity: 0.
|
|
320
|
+
.ihooman-input-btn { width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; background: transparent; color: ${mutedColor}; flex-shrink: 0; }
|
|
321
|
+
.ihooman-input-btn:hover { color: ${textColor}; background: ${hoverBg}; }
|
|
322
|
+
.ihooman-input-btn.send { background: ${accentBg}; color: ${accentText}; }
|
|
323
|
+
.ihooman-input-btn.send:hover { opacity: 0.85; }
|
|
324
|
+
.ihooman-input-btn.send:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
299
325
|
.ihooman-input-btn svg { width: 16px; height: 16px; }
|
|
300
|
-
.ihooman-input:disabled { opacity: 0.
|
|
301
|
-
.ihooman-input-btn.attach:disabled { opacity: 0.
|
|
326
|
+
.ihooman-input:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
327
|
+
.ihooman-input-btn.attach:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
302
328
|
.ihooman-file-input { display: none; }
|
|
303
|
-
|
|
304
|
-
|
|
329
|
+
|
|
330
|
+
/* ── Powered By ── */
|
|
331
|
+
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
332
|
+
.ihooman-powered a { color: ${textSecondary}; text-decoration: none; font-weight: 500; }
|
|
333
|
+
.ihooman-powered a:hover { color: ${textColor}; }
|
|
334
|
+
|
|
335
|
+
/* ── Escalation ── */
|
|
305
336
|
.ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
|
306
337
|
.ihooman-escalation-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
|
|
307
|
-
|
|
338
|
+
|
|
339
|
+
/* ── Status Bar ── */
|
|
340
|
+
.ihooman-status-bar { padding: 8px 16px; text-align: center; font-size: 12px; display: none; font-weight: 500; }
|
|
308
341
|
.ihooman-status-bar.show { display: block; }
|
|
309
|
-
.ihooman-status-bar.waiting { background: #
|
|
310
|
-
.ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
|
|
342
|
+
.ihooman-status-bar.waiting { background: ${isDark ? '#1c1917' : '#fef9c3'}; color: ${isDark ? '#fbbf24' : '#92400e'}; border-bottom: 1px solid ${isDark ? '#292524' : '#fef08a'}; }
|
|
343
|
+
.ihooman-status-bar.connected { background: ${isDark ? '#052e16' : '#dcfce7'}; color: ${isDark ? '#4ade80' : '#166534'}; border-bottom: 1px solid ${isDark ? '#14532d' : '#bbf7d0'}; }
|
|
344
|
+
|
|
345
|
+
/* ── Chat View ── */
|
|
311
346
|
.ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
|
|
312
347
|
.ihooman-chat-view.hidden { display: none; }
|
|
313
|
-
|
|
348
|
+
|
|
349
|
+
/* ── Ticket View ── */
|
|
350
|
+
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 14px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
314
351
|
.ihooman-ticket-view.show { display: flex; }
|
|
315
|
-
.ihooman-ticket-title { font-size:
|
|
316
|
-
.ihooman-ticket-subtitle { font-size: 13px; color: ${
|
|
317
|
-
.ihooman-ticket-input { padding:
|
|
318
|
-
.ihooman-ticket-input:focus { border-color: ${
|
|
352
|
+
.ihooman-ticket-title { font-size: 16px; font-weight: 600; color: ${textColor}; margin: 0; letter-spacing: -0.01em; }
|
|
353
|
+
.ihooman-ticket-subtitle { font-size: 13px; color: ${textSecondary}; margin: 0; }
|
|
354
|
+
.ihooman-ticket-input { padding: 10px 14px; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 14px; font-family: inherit; background: ${inputBg}; color: ${textColor}; outline: none; transition: border-color 0.15s ease; }
|
|
355
|
+
.ihooman-ticket-input:focus { border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
319
356
|
.ihooman-ticket-input::placeholder { color: ${mutedColor}; }
|
|
320
357
|
.ihooman-ticket-textarea { min-height: 100px; resize: vertical; }
|
|
321
|
-
.ihooman-ticket-submit { display: flex; align-items: center; justify-content: center; padding:
|
|
322
|
-
.ihooman-ticket-submit:hover { opacity: 0.
|
|
323
|
-
.ihooman-ticket-submit:disabled { opacity: 0.
|
|
324
|
-
.ihooman-ticket-back { display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: ${
|
|
325
|
-
.ihooman-ticket-back:hover { background: ${
|
|
358
|
+
.ihooman-ticket-submit { display: flex; align-items: center; justify-content: center; padding: 10px; background: ${accentBg}; color: ${accentText}; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; }
|
|
359
|
+
.ihooman-ticket-submit:hover { opacity: 0.85; }
|
|
360
|
+
.ihooman-ticket-submit:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
361
|
+
.ihooman-ticket-back { display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: ${textSecondary}; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; }
|
|
362
|
+
.ihooman-ticket-back:hover { background: ${hoverBg}; color: ${textColor}; }
|
|
363
|
+
|
|
364
|
+
/* ── History View ── */
|
|
326
365
|
.ihooman-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
|
|
327
366
|
.ihooman-history-view.show { display: flex; }
|
|
328
367
|
.ihooman-history-header { padding: 12px 16px; border-bottom: 1px solid ${borderColor}; display: flex; justify-content: space-between; align-items: center; }
|
|
329
|
-
.ihooman-history-title { font-size:
|
|
330
|
-
.ihooman-history-new { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background:
|
|
331
|
-
.ihooman-history-new:hover { opacity: 0.
|
|
368
|
+
.ihooman-history-title { font-size: 13px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
369
|
+
.ihooman-history-new { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: ${accentBg}; color: ${accentText}; border: none; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; }
|
|
370
|
+
.ihooman-history-new:hover { opacity: 0.85; }
|
|
332
371
|
.ihooman-history-new svg { width: 12px; height: 12px; flex-shrink: 0; }
|
|
333
372
|
.ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
|
|
334
|
-
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
335
|
-
.ihooman-history-item:hover { background: ${
|
|
336
|
-
.ihooman-history-item.active { background: ${isDark ? '
|
|
373
|
+
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 10px; margin-bottom: 6px; cursor: pointer; transition: all 0.15s ease; background: ${bgColor}; }
|
|
374
|
+
.ihooman-history-item:hover { background: ${hoverBg}; }
|
|
375
|
+
.ihooman-history-item.active { background: ${hoverBg}; border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
337
376
|
.ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
338
377
|
.ihooman-history-meta { font-size: 11px; color: ${mutedColor}; margin-top: 4px; display: flex; justify-content: space-between; }
|
|
339
|
-
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size:
|
|
340
|
-
|
|
378
|
+
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 13px; }
|
|
379
|
+
|
|
380
|
+
/* ── Preset Questions ── */
|
|
381
|
+
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
341
382
|
.ihooman-preset-questions:empty { display: none; }
|
|
342
383
|
.ihooman-preset-questions.hidden { display: none; }
|
|
343
|
-
|
|
384
|
+
|
|
385
|
+
/* ── Proactive Toast ── */
|
|
386
|
+
.ihooman-proactive-toast { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 84px' : 'top: 84px'}; max-width: 320px; padding: 16px; background: ${bgElevated}; border-radius: 14px; box-shadow: ${shadowLg}; z-index: ${(zIndex ?? 9999) - 2}; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s ease-out; border: 1px solid ${borderColor}; }
|
|
344
387
|
.ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
345
|
-
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; }
|
|
388
|
+
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; line-height: 1.5; }
|
|
346
389
|
.ihooman-proactive-toast-actions { display: flex; gap: 8px; }
|
|
347
|
-
.ihooman-proactive-toast-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius:
|
|
348
|
-
.ihooman-proactive-toast-btn.primary { background:
|
|
349
|
-
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.
|
|
350
|
-
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${
|
|
351
|
-
.ihooman-proactive-toast-btn.secondary:hover { background: ${
|
|
352
|
-
|
|
390
|
+
.ihooman-proactive-toast-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; }
|
|
391
|
+
.ihooman-proactive-toast-btn.primary { background: ${accentBg}; color: ${accentText}; border: none; }
|
|
392
|
+
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.85; }
|
|
393
|
+
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${textSecondary}; border: 1px solid ${borderColor}; }
|
|
394
|
+
.ihooman-proactive-toast-btn.secondary:hover { background: ${hoverBg}; }
|
|
395
|
+
|
|
396
|
+
/* ── Survey View ── */
|
|
397
|
+
.ihooman-survey-view { display: none; flex-direction: column; padding: 24px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
353
398
|
.ihooman-survey-view.show { display: flex; }
|
|
354
|
-
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; }
|
|
399
|
+
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; letter-spacing: -0.01em; }
|
|
355
400
|
.ihooman-survey-stars { display: flex; gap: 8px; }
|
|
356
|
-
.ihooman-survey-star { width:
|
|
401
|
+
.ihooman-survey-star { width: 36px; height: 36px; cursor: pointer; color: ${mutedColor}; transition: all 0.15s ease; }
|
|
357
402
|
.ihooman-survey-star:hover, .ihooman-survey-star.active { color: #fbbf24; transform: scale(1.1); }
|
|
358
403
|
.ihooman-survey-star svg { width: 100%; height: 100%; }
|
|
359
|
-
.ihooman-survey-comment { width: 100%; padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
360
|
-
.ihooman-survey-
|
|
361
|
-
.ihooman-survey-submit:
|
|
404
|
+
.ihooman-survey-comment { width: 100%; padding: 12px; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 14px; font-family: inherit; resize: none; min-height: 80px; background: ${inputBg}; color: ${textColor}; outline: none; }
|
|
405
|
+
.ihooman-survey-comment:focus { border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
406
|
+
.ihooman-survey-submit { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: ${accentBg}; color: ${accentText}; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; line-height: 1.4; transition: all 0.15s ease; }
|
|
407
|
+
.ihooman-survey-submit:hover { opacity: 0.85; }
|
|
362
408
|
.ihooman-survey-skip { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: transparent; color: ${mutedColor}; border: none; font-size: 12px; cursor: pointer; line-height: 1.4; }
|
|
363
409
|
.ihooman-survey-skip:hover { color: ${textColor}; }
|
|
364
|
-
|
|
410
|
+
|
|
411
|
+
/* ── Feedback ── */
|
|
412
|
+
.ihooman-feedback-btns { display: flex; gap: 4px; margin-top: 4px; }
|
|
365
413
|
.ihooman-feedback-btn svg { width: 12px; height: 12px; }
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
.ihooman-carousel
|
|
414
|
+
|
|
415
|
+
/* ── Carousel ── */
|
|
416
|
+
.ihooman-carousel { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
|
|
417
|
+
.ihooman-carousel::-webkit-scrollbar { height: 3px; }
|
|
418
|
+
.ihooman-carousel::-webkit-scrollbar-thumb { background: ${isDark ? '#27272a' : '#d4d4d8'}; border-radius: 2px; }
|
|
419
|
+
.ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgElevated}; }
|
|
369
420
|
.ihooman-carousel-card img { width: 100%; height: 120px; object-fit: cover; }
|
|
370
421
|
.ihooman-carousel-card-content { padding: 12px; }
|
|
371
|
-
.ihooman-carousel-card-title { font-size:
|
|
372
|
-
.ihooman-carousel-card-desc { font-size: 12px; color: ${
|
|
422
|
+
.ihooman-carousel-card-title { font-size: 13px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
|
|
423
|
+
.ihooman-carousel-card-desc { font-size: 12px; color: ${textSecondary}; margin-bottom: 8px; }
|
|
373
424
|
.ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
|
|
425
|
+
|
|
426
|
+
/* ── Quick Replies ── */
|
|
374
427
|
.ihooman-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
375
|
-
|
|
428
|
+
|
|
429
|
+
/* ── Responsive ── */
|
|
430
|
+
@media (max-width: 480px) { .ihooman-window { width: calc(100vw - 16px); height: calc(100vh - 100px); min-height: 400px; max-height: calc(100vh - 100px); left: 8px; right: 8px; bottom: 80px; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } .ihooman-proactive-toast { left: 8px; right: 8px; max-width: none; } }
|
|
376
431
|
`;
|
|
377
432
|
}
|
|
378
433
|
// ============================================================================
|
|
@@ -412,9 +467,9 @@
|
|
|
412
467
|
<div class="ihooman-window" role="dialog" aria-label="Chat window">
|
|
413
468
|
<div class="ihooman-container">
|
|
414
469
|
<div class="ihooman-header">
|
|
415
|
-
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="
|
|
470
|
+
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="Assistant">` : icons.sparkle}</div>
|
|
416
471
|
<div class="ihooman-header-info">
|
|
417
|
-
<div class="ihooman-header-title">${escapeHtml(config.title || '
|
|
472
|
+
<div class="ihooman-header-title">${escapeHtml(config.title || 'AI Assistant')}</div>
|
|
418
473
|
<div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
|
|
419
474
|
</div>
|
|
420
475
|
<div class="ihooman-header-actions">
|
|
@@ -436,7 +491,7 @@
|
|
|
436
491
|
</div>
|
|
437
492
|
</div>
|
|
438
493
|
<div class="ihooman-ticket-view">
|
|
439
|
-
<h4 class="ihooman-ticket-title"
|
|
494
|
+
<h4 class="ihooman-ticket-title">Submit a Ticket</h4>
|
|
440
495
|
<p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
|
|
441
496
|
<input class="ihooman-ticket-input" id="ihooman-ticket-name" placeholder="Your name" required>
|
|
442
497
|
<input class="ihooman-ticket-input" id="ihooman-ticket-email" type="email" placeholder="Your email" required>
|
|
@@ -895,6 +950,7 @@
|
|
|
895
950
|
function startLiveAgentPolling() {
|
|
896
951
|
if (liveAgentPollInterval)
|
|
897
952
|
return;
|
|
953
|
+
let agentConnected = false;
|
|
898
954
|
liveAgentPollInterval = setInterval(async () => {
|
|
899
955
|
if (!state.sessionId || !isLiveAgentMode) {
|
|
900
956
|
stopLiveAgentPolling();
|
|
@@ -908,6 +964,12 @@
|
|
|
908
964
|
// Check both ticket_status and conversation_status for agent handling
|
|
909
965
|
if (data.ticket_status === 'in_progress' || data.conversation_status === 'active') {
|
|
910
966
|
updateStatusBar('connected', '🟢 Connected to live agent');
|
|
967
|
+
// Agent is connected — stop polling, WebSocket handles real-time updates.
|
|
968
|
+
// Status changes (close/resolve) will come through WebSocket messages.
|
|
969
|
+
if (!agentConnected) {
|
|
970
|
+
agentConnected = true;
|
|
971
|
+
stopLiveAgentPolling();
|
|
972
|
+
}
|
|
911
973
|
}
|
|
912
974
|
else if (data.ticket_status === 'open') {
|
|
913
975
|
updateStatusBar('waiting', data.position_in_queue > 1
|
|
@@ -925,7 +987,7 @@
|
|
|
925
987
|
}
|
|
926
988
|
}
|
|
927
989
|
catch { /* ignore */ }
|
|
928
|
-
},
|
|
990
|
+
}, 15000);
|
|
929
991
|
}
|
|
930
992
|
function stopLiveAgentPolling() {
|
|
931
993
|
if (liveAgentPollInterval) {
|
|
@@ -1020,7 +1082,7 @@
|
|
|
1020
1082
|
return;
|
|
1021
1083
|
const typing = document.createElement('div');
|
|
1022
1084
|
typing.className = 'ihooman-typing';
|
|
1023
|
-
typing.innerHTML = `<div class="ihooman-typing-dots"><span class="ihooman-typing-dot"></span><span class="ihooman-typing-dot"></span><span class="ihooman-typing-dot"></span></div>`;
|
|
1085
|
+
typing.innerHTML = `<span class="ihooman-typing-shimmer">Thinking...</span><div class="ihooman-typing-dots"><span class="ihooman-typing-dot"></span><span class="ihooman-typing-dot"></span><span class="ihooman-typing-dot"></span></div>`;
|
|
1024
1086
|
elements.messages.appendChild(typing);
|
|
1025
1087
|
elements.messages.scrollTop = elements.messages.scrollHeight;
|
|
1026
1088
|
}
|
|
@@ -1042,7 +1104,7 @@
|
|
|
1042
1104
|
function enableInput() {
|
|
1043
1105
|
if (elements.input) {
|
|
1044
1106
|
elements.input.disabled = false;
|
|
1045
|
-
elements.input.placeholder = config.placeholder || '
|
|
1107
|
+
elements.input.placeholder = config.placeholder || 'Send a message...';
|
|
1046
1108
|
}
|
|
1047
1109
|
if (elements.sendBtn)
|
|
1048
1110
|
elements.sendBtn.disabled = !elements.input?.value.trim();
|
|
@@ -1666,11 +1728,10 @@
|
|
|
1666
1728
|
default: return 500;
|
|
1667
1729
|
}
|
|
1668
1730
|
}
|
|
1669
|
-
// Default button styles - MUST match client-dashboard/src/components/widget/ButtonStylingEditor.tsx
|
|
1670
1731
|
const DEFAULT_BUTTON_STYLES = {
|
|
1671
1732
|
primary: {
|
|
1672
|
-
backgroundColor: '#
|
|
1673
|
-
textColor: '#
|
|
1733
|
+
backgroundColor: '#ededed',
|
|
1734
|
+
textColor: '#09090b',
|
|
1674
1735
|
borderColor: 'transparent',
|
|
1675
1736
|
borderWidth: 0,
|
|
1676
1737
|
borderRadius: 8,
|
|
@@ -1681,8 +1742,8 @@
|
|
|
1681
1742
|
},
|
|
1682
1743
|
secondary: {
|
|
1683
1744
|
backgroundColor: 'transparent',
|
|
1684
|
-
textColor: '#
|
|
1685
|
-
borderColor: '#
|
|
1745
|
+
textColor: '#a1a1aa',
|
|
1746
|
+
borderColor: '#27272a',
|
|
1686
1747
|
borderWidth: 1,
|
|
1687
1748
|
borderRadius: 8,
|
|
1688
1749
|
paddingVertical: 8,
|
|
@@ -1691,9 +1752,9 @@
|
|
|
1691
1752
|
fontWeight: 'medium',
|
|
1692
1753
|
},
|
|
1693
1754
|
presetQuestions: {
|
|
1694
|
-
backgroundColor: '
|
|
1695
|
-
textColor: '#
|
|
1696
|
-
borderColor: '
|
|
1755
|
+
backgroundColor: 'transparent',
|
|
1756
|
+
textColor: '#a1a1aa',
|
|
1757
|
+
borderColor: '#27272a',
|
|
1697
1758
|
borderWidth: 1,
|
|
1698
1759
|
borderRadius: 20,
|
|
1699
1760
|
paddingVertical: 6,
|
|
@@ -1702,9 +1763,9 @@
|
|
|
1702
1763
|
fontWeight: 'medium',
|
|
1703
1764
|
},
|
|
1704
1765
|
quickReplies: {
|
|
1705
|
-
backgroundColor: '#
|
|
1706
|
-
textColor: '#
|
|
1707
|
-
borderColor: '#
|
|
1766
|
+
backgroundColor: '#1a1a1a',
|
|
1767
|
+
textColor: '#a1a1aa',
|
|
1768
|
+
borderColor: '#27272a',
|
|
1708
1769
|
borderWidth: 1,
|
|
1709
1770
|
borderRadius: 16,
|
|
1710
1771
|
paddingVertical: 5,
|
|
@@ -1714,8 +1775,8 @@
|
|
|
1714
1775
|
},
|
|
1715
1776
|
feedback: {
|
|
1716
1777
|
backgroundColor: 'transparent',
|
|
1717
|
-
textColor: '#
|
|
1718
|
-
borderColor: '#
|
|
1778
|
+
textColor: '#52525b',
|
|
1779
|
+
borderColor: '#27272a',
|
|
1719
1780
|
borderWidth: 1,
|
|
1720
1781
|
borderRadius: 6,
|
|
1721
1782
|
paddingVertical: 4,
|
|
@@ -1724,19 +1785,19 @@
|
|
|
1724
1785
|
fontWeight: 'medium',
|
|
1725
1786
|
},
|
|
1726
1787
|
headerActions: {
|
|
1727
|
-
backgroundColor: '
|
|
1728
|
-
textColor: '#
|
|
1788
|
+
backgroundColor: 'transparent',
|
|
1789
|
+
textColor: '#a1a1aa',
|
|
1729
1790
|
borderColor: 'transparent',
|
|
1730
1791
|
borderWidth: 0,
|
|
1731
|
-
borderRadius:
|
|
1792
|
+
borderRadius: 8,
|
|
1732
1793
|
paddingVertical: 6,
|
|
1733
1794
|
paddingHorizontal: 6,
|
|
1734
1795
|
fontSize: 14,
|
|
1735
1796
|
fontWeight: 'medium',
|
|
1736
1797
|
},
|
|
1737
1798
|
escalation: {
|
|
1738
|
-
backgroundColor: '#
|
|
1739
|
-
textColor: '#
|
|
1799
|
+
backgroundColor: '#ededed',
|
|
1800
|
+
textColor: '#09090b',
|
|
1740
1801
|
borderColor: 'transparent',
|
|
1741
1802
|
borderWidth: 0,
|
|
1742
1803
|
borderRadius: 8,
|
|
@@ -1746,21 +1807,21 @@
|
|
|
1746
1807
|
fontWeight: 'medium',
|
|
1747
1808
|
},
|
|
1748
1809
|
cardActions: {
|
|
1749
|
-
backgroundColor: '#
|
|
1750
|
-
textColor: '#
|
|
1810
|
+
backgroundColor: '#ededed',
|
|
1811
|
+
textColor: '#09090b',
|
|
1751
1812
|
borderColor: 'transparent',
|
|
1752
1813
|
borderWidth: 0,
|
|
1753
|
-
borderRadius:
|
|
1814
|
+
borderRadius: 8,
|
|
1754
1815
|
paddingVertical: 6,
|
|
1755
1816
|
paddingHorizontal: 12,
|
|
1756
1817
|
fontSize: 12,
|
|
1757
1818
|
fontWeight: 'medium',
|
|
1758
1819
|
},
|
|
1759
1820
|
toggleButton: {
|
|
1760
|
-
backgroundColor: '#
|
|
1761
|
-
textColor: '#
|
|
1762
|
-
borderColor: '
|
|
1763
|
-
borderWidth:
|
|
1821
|
+
backgroundColor: '#ededed',
|
|
1822
|
+
textColor: '#09090b',
|
|
1823
|
+
borderColor: '#27272a',
|
|
1824
|
+
borderWidth: 1,
|
|
1764
1825
|
borderRadius: 30,
|
|
1765
1826
|
paddingVertical: 0,
|
|
1766
1827
|
paddingHorizontal: 0,
|
|
@@ -1769,7 +1830,7 @@
|
|
|
1769
1830
|
},
|
|
1770
1831
|
attachButton: {
|
|
1771
1832
|
backgroundColor: 'transparent',
|
|
1772
|
-
textColor: '#
|
|
1833
|
+
textColor: '#52525b',
|
|
1773
1834
|
borderColor: 'transparent',
|
|
1774
1835
|
borderWidth: 0,
|
|
1775
1836
|
borderRadius: 8,
|