@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.esm.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
|
|
@@ -10,20 +10,20 @@
|
|
|
10
10
|
* Enhanced with professional features
|
|
11
11
|
* @version 3.0.0
|
|
12
12
|
*/
|
|
13
|
-
const VERSION = '
|
|
13
|
+
const VERSION = '4.0.0';
|
|
14
14
|
const STORAGE_PREFIX = 'ihooman_chat_';
|
|
15
15
|
const DEFAULT_SERVER_URL = 'https://api.ihooman.ai';
|
|
16
16
|
const defaultConfig = {
|
|
17
17
|
serverUrl: DEFAULT_SERVER_URL,
|
|
18
|
-
theme: '
|
|
18
|
+
theme: 'dark',
|
|
19
19
|
position: 'bottom-right',
|
|
20
|
-
title: '
|
|
21
|
-
subtitle: '
|
|
22
|
-
welcomeMessage: '
|
|
23
|
-
placeholder: '
|
|
24
|
-
primaryColor: '#
|
|
25
|
-
gradientFrom: '#
|
|
26
|
-
gradientTo: '#
|
|
20
|
+
title: 'AI Assistant',
|
|
21
|
+
subtitle: 'Always here to help',
|
|
22
|
+
welcomeMessage: 'Hello! How can I help you today?',
|
|
23
|
+
placeholder: 'Send a message...',
|
|
24
|
+
primaryColor: '#ededed',
|
|
25
|
+
gradientFrom: '#171717',
|
|
26
|
+
gradientTo: '#171717',
|
|
27
27
|
showTimestamps: true,
|
|
28
28
|
showTypingIndicator: true,
|
|
29
29
|
enableSounds: true,
|
|
@@ -31,11 +31,11 @@ const defaultConfig = {
|
|
|
31
31
|
startOpen: false,
|
|
32
32
|
persistSession: true,
|
|
33
33
|
zIndex: 9999,
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
36
|
-
buttonSize:
|
|
34
|
+
width: 400,
|
|
35
|
+
height: 620,
|
|
36
|
+
buttonSize: 52,
|
|
37
37
|
borderRadius: 16,
|
|
38
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
38
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif',
|
|
39
39
|
avatarUrl: '',
|
|
40
40
|
poweredBy: true,
|
|
41
41
|
presetQuestions: [],
|
|
@@ -45,18 +45,18 @@ const defaultConfig = {
|
|
|
45
45
|
allowLocalhost: true,
|
|
46
46
|
};
|
|
47
47
|
const icons = {
|
|
48
|
-
chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
49
|
-
close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
50
|
-
send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
51
|
-
attach: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
52
|
-
minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
53
|
-
|
|
54
|
-
agent: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
55
|
-
ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
56
|
-
history: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
57
|
-
plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
58
|
-
star: `<svg viewBox="0 0 24 24" fill="currentColor"><
|
|
59
|
-
starEmpty: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
48
|
+
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>`,
|
|
49
|
+
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>`,
|
|
50
|
+
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>`,
|
|
51
|
+
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>`,
|
|
52
|
+
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>`,
|
|
53
|
+
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>`,
|
|
54
|
+
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>`,
|
|
55
|
+
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>`,
|
|
56
|
+
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>`,
|
|
57
|
+
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>`,
|
|
58
|
+
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>`,
|
|
59
|
+
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>`};
|
|
60
60
|
let config = { widgetId: '', ...defaultConfig };
|
|
61
61
|
let state = {
|
|
62
62
|
isOpen: false,
|
|
@@ -202,21 +202,32 @@ function matchUrlPattern(pattern) {
|
|
|
202
202
|
// STYLES
|
|
203
203
|
// ============================================================================
|
|
204
204
|
function generateStyles() {
|
|
205
|
-
const {
|
|
206
|
-
const isDark = config.theme === 'dark';
|
|
207
|
-
|
|
208
|
-
const
|
|
209
|
-
const
|
|
210
|
-
const
|
|
211
|
-
const
|
|
212
|
-
const
|
|
213
|
-
const
|
|
205
|
+
const { fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
|
|
206
|
+
const isDark = config.theme === 'dark' || config.theme === 'auto';
|
|
207
|
+
// Professional dark/light color tokens — Vercel-inspired
|
|
208
|
+
const bgColor = isDark ? '#0a0a0a' : '#ffffff';
|
|
209
|
+
const bgElevated = isDark ? '#141414' : '#fafafa';
|
|
210
|
+
const bgSurface = isDark ? '#1a1a1a' : '#f4f4f5';
|
|
211
|
+
const textColor = isDark ? '#ededed' : '#09090b';
|
|
212
|
+
const textSecondary = isDark ? '#a1a1aa' : '#71717a';
|
|
213
|
+
const mutedColor = isDark ? '#52525b' : '#a1a1aa';
|
|
214
|
+
const borderColor = isDark ? '#27272a' : '#e4e4e7';
|
|
215
|
+
const borderSubtle = isDark ? '#1f1f23' : '#f4f4f5';
|
|
216
|
+
const inputBg = isDark ? '#141414' : '#fafafa';
|
|
217
|
+
const hoverBg = isDark ? '#1c1c1c' : '#f4f4f5';
|
|
218
|
+
const accentColor = isDark ? '#ededed' : '#18181b';
|
|
219
|
+
const accentBg = isDark ? '#ededed' : '#18181b';
|
|
220
|
+
const accentText = isDark ? '#09090b' : '#fafafa';
|
|
221
|
+
const userMsgBg = isDark ? '#27272a' : '#18181b';
|
|
222
|
+
const userMsgText = isDark ? '#ededed' : '#fafafa';
|
|
223
|
+
const botMsgBg = 'transparent';
|
|
214
224
|
const positionRight = config.position?.includes('right') ?? true;
|
|
215
225
|
const positionBottom = config.position?.includes('bottom') ?? true;
|
|
226
|
+
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)';
|
|
216
227
|
return `
|
|
217
228
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
218
229
|
:host { all: initial; }
|
|
219
|
-
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.
|
|
230
|
+
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.6; color: ${textColor}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
220
231
|
button {
|
|
221
232
|
font-family: inherit;
|
|
222
233
|
font-size: 100%;
|
|
@@ -229,144 +240,188 @@ function generateStyles() {
|
|
|
229
240
|
cursor: pointer;
|
|
230
241
|
outline: none;
|
|
231
242
|
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
.ihooman-toggle
|
|
236
|
-
.ihooman-toggle
|
|
237
|
-
.ihooman-toggle
|
|
238
|
-
.ihooman-toggle
|
|
243
|
+
button:focus-visible { outline: 2px solid ${accentColor}; outline-offset: 2px; }
|
|
244
|
+
|
|
245
|
+
/* ── Toggle Button ── */
|
|
246
|
+
.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; }
|
|
247
|
+
.ihooman-toggle:hover { transform: scale(1.05); box-shadow: ${shadowLg}; }
|
|
248
|
+
.ihooman-toggle:active { transform: scale(0.96); }
|
|
249
|
+
.ihooman-toggle svg { width: 22px; height: 22px; color: ${accentText}; transition: transform 0.25s ease-out, opacity 0.15s ease; position: relative; z-index: 1; }
|
|
250
|
+
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease-out, opacity 0.15s ease; }
|
|
251
|
+
.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; }
|
|
239
252
|
.ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
|
|
240
253
|
.ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
|
|
241
|
-
.ihooman-pulse {
|
|
242
|
-
|
|
243
|
-
.ihooman-toggle.open .ihooman-pulse { display: none; }
|
|
244
|
-
.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; }
|
|
254
|
+
.ihooman-pulse { display: none; }
|
|
255
|
+
.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}; }
|
|
245
256
|
.ihooman-badge:empty { display: none; }
|
|
246
|
-
|
|
257
|
+
|
|
258
|
+
/* ── Window ── */
|
|
259
|
+
.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; }
|
|
247
260
|
.ihooman-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
.ihooman-container
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
.ihooman-header
|
|
254
|
-
.ihooman-header-avatar
|
|
261
|
+
|
|
262
|
+
/* ── Container ── */
|
|
263
|
+
.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}; }
|
|
264
|
+
|
|
265
|
+
/* ── Header ── */
|
|
266
|
+
.ihooman-header { padding: 14px 16px; background: ${bgElevated}; color: ${textColor}; display: flex; align-items: center; gap: 12px; flex-shrink: 0; border-bottom: 1px solid ${borderColor}; }
|
|
267
|
+
.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}; }
|
|
268
|
+
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
|
|
269
|
+
.ihooman-header-avatar svg { width: 18px; height: 18px; color: ${textSecondary}; }
|
|
255
270
|
.ihooman-header-info { flex: 1; min-width: 0; }
|
|
256
|
-
.ihooman-header-title { font-size:
|
|
257
|
-
.ihooman-header-status { display: flex; align-items: center; gap:
|
|
258
|
-
.ihooman-status-dot { width:
|
|
259
|
-
.ihooman-status-dot.offline { background: #
|
|
260
|
-
.ihooman-header-actions { display: flex; gap:
|
|
261
|
-
.ihooman-header-btn { width:
|
|
262
|
-
.ihooman-header-btn:hover { background:
|
|
263
|
-
.ihooman-header-btn svg { width:
|
|
264
|
-
|
|
265
|
-
|
|
271
|
+
.ihooman-header-title { font-size: 14px; font-weight: 600; margin-bottom: 1px; letter-spacing: -0.01em; color: ${textColor}; }
|
|
272
|
+
.ihooman-header-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: ${textSecondary}; }
|
|
273
|
+
.ihooman-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
|
|
274
|
+
.ihooman-status-dot.offline { background: #a1a1aa; }
|
|
275
|
+
.ihooman-header-actions { display: flex; gap: 4px; }
|
|
276
|
+
.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; }
|
|
277
|
+
.ihooman-header-btn:hover { background: ${hoverBg}; color: ${textColor}; }
|
|
278
|
+
.ihooman-header-btn svg { width: 15px; height: 15px; }
|
|
279
|
+
|
|
280
|
+
/* ── Messages ── */
|
|
281
|
+
.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; }
|
|
282
|
+
.ihooman-messages::-webkit-scrollbar { width: 4px; }
|
|
266
283
|
.ihooman-messages::-webkit-scrollbar-track { background: transparent; }
|
|
267
|
-
.ihooman-messages::-webkit-scrollbar-thumb { background: ${
|
|
268
|
-
.ihooman-message { display: flex; flex-direction: column; max-width:
|
|
269
|
-
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(
|
|
284
|
+
.ihooman-messages::-webkit-scrollbar-thumb { background: ${isDark ? '#27272a' : '#d4d4d8'}; border-radius: 2px; }
|
|
285
|
+
.ihooman-message { display: flex; flex-direction: column; max-width: 88%; animation: ihooman-fadeIn 0.25s ease-out; }
|
|
286
|
+
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
|
|
270
287
|
.ihooman-message.user { align-self: flex-end; align-items: flex-end; }
|
|
271
|
-
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; }
|
|
272
|
-
.ihooman-message-content { padding:
|
|
273
|
-
.ihooman-message.user .ihooman-message-content { background: ${
|
|
274
|
-
.ihooman-message.bot .ihooman-message-content { background: ${
|
|
275
|
-
.ihooman-message-content
|
|
276
|
-
.ihooman-message-
|
|
277
|
-
.ihooman-
|
|
278
|
-
.ihooman-
|
|
279
|
-
.ihooman-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
288
|
+
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; max-width: 100%; }
|
|
289
|
+
.ihooman-message-content { padding: 10px 14px; border-radius: 14px; word-wrap: break-word; overflow-wrap: break-word; font-size: 14px; line-height: 1.6; }
|
|
290
|
+
.ihooman-message.user .ihooman-message-content { background: ${userMsgBg}; color: ${userMsgText}; border-bottom-right-radius: 4px; }
|
|
291
|
+
.ihooman-message.bot .ihooman-message-content { background: ${botMsgBg}; color: ${textColor}; padding: 6px 2px; }
|
|
292
|
+
.ihooman-message-content a { color: ${isDark ? '#60a5fa' : '#2563eb'}; text-decoration: underline; text-underline-offset: 2px; }
|
|
293
|
+
.ihooman-message-content a:hover { opacity: 0.8; }
|
|
294
|
+
.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}; }
|
|
295
|
+
.ihooman-message-content strong { font-weight: 600; }
|
|
296
|
+
.ihooman-message-time { font-size: 11px; color: ${mutedColor}; margin-top: 3px; padding: 0 4px; }
|
|
297
|
+
|
|
298
|
+
/* ── Typing Indicator — Shimmer ── */
|
|
299
|
+
.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; }
|
|
300
|
+
.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; }
|
|
301
|
+
@keyframes ihooman-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
|
302
|
+
.ihooman-typing-dots { display: flex; gap: 3px; align-items: center; }
|
|
303
|
+
.ihooman-typing-dot { width: 5px; height: 5px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.2s ease-in-out infinite; }
|
|
304
|
+
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
305
|
+
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
306
|
+
@keyframes ihooman-typing { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }
|
|
307
|
+
|
|
308
|
+
/* ── Input Area ── */
|
|
283
309
|
.ihooman-input-area { padding: 12px 16px; background: ${bgColor}; border-top: 1px solid ${borderColor}; flex-shrink: 0; }
|
|
284
|
-
.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.
|
|
285
|
-
.ihooman-input-wrapper:focus-within { border-color: ${
|
|
286
|
-
.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.
|
|
310
|
+
.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; }
|
|
311
|
+
.ihooman-input-wrapper:focus-within { border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
312
|
+
.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; }
|
|
287
313
|
.ihooman-input::placeholder { color: ${mutedColor}; }
|
|
288
|
-
.ihooman-input-btn { width:
|
|
289
|
-
.ihooman-input-btn:hover {
|
|
290
|
-
.ihooman-input-btn.send { background:
|
|
291
|
-
.ihooman-input-btn.send:hover { opacity: 0.
|
|
292
|
-
.ihooman-input-btn.send:disabled { opacity: 0.
|
|
314
|
+
.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; }
|
|
315
|
+
.ihooman-input-btn:hover { color: ${textColor}; background: ${hoverBg}; }
|
|
316
|
+
.ihooman-input-btn.send { background: ${accentBg}; color: ${accentText}; }
|
|
317
|
+
.ihooman-input-btn.send:hover { opacity: 0.85; }
|
|
318
|
+
.ihooman-input-btn.send:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
293
319
|
.ihooman-input-btn svg { width: 16px; height: 16px; }
|
|
294
|
-
.ihooman-input:disabled { opacity: 0.
|
|
295
|
-
.ihooman-input-btn.attach:disabled { opacity: 0.
|
|
320
|
+
.ihooman-input:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
321
|
+
.ihooman-input-btn.attach:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
296
322
|
.ihooman-file-input { display: none; }
|
|
297
|
-
|
|
298
|
-
|
|
323
|
+
|
|
324
|
+
/* ── Powered By ── */
|
|
325
|
+
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
326
|
+
.ihooman-powered a { color: ${textSecondary}; text-decoration: none; font-weight: 500; }
|
|
327
|
+
.ihooman-powered a:hover { color: ${textColor}; }
|
|
328
|
+
|
|
329
|
+
/* ── Escalation ── */
|
|
299
330
|
.ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
|
300
331
|
.ihooman-escalation-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
|
|
301
|
-
|
|
332
|
+
|
|
333
|
+
/* ── Status Bar ── */
|
|
334
|
+
.ihooman-status-bar { padding: 8px 16px; text-align: center; font-size: 12px; display: none; font-weight: 500; }
|
|
302
335
|
.ihooman-status-bar.show { display: block; }
|
|
303
|
-
.ihooman-status-bar.waiting { background: #
|
|
304
|
-
.ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
|
|
336
|
+
.ihooman-status-bar.waiting { background: ${isDark ? '#1c1917' : '#fef9c3'}; color: ${isDark ? '#fbbf24' : '#92400e'}; border-bottom: 1px solid ${isDark ? '#292524' : '#fef08a'}; }
|
|
337
|
+
.ihooman-status-bar.connected { background: ${isDark ? '#052e16' : '#dcfce7'}; color: ${isDark ? '#4ade80' : '#166534'}; border-bottom: 1px solid ${isDark ? '#14532d' : '#bbf7d0'}; }
|
|
338
|
+
|
|
339
|
+
/* ── Chat View ── */
|
|
305
340
|
.ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
|
|
306
341
|
.ihooman-chat-view.hidden { display: none; }
|
|
307
|
-
|
|
342
|
+
|
|
343
|
+
/* ── Ticket View ── */
|
|
344
|
+
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 14px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
308
345
|
.ihooman-ticket-view.show { display: flex; }
|
|
309
|
-
.ihooman-ticket-title { font-size:
|
|
310
|
-
.ihooman-ticket-subtitle { font-size: 13px; color: ${
|
|
311
|
-
.ihooman-ticket-input { padding:
|
|
312
|
-
.ihooman-ticket-input:focus { border-color: ${
|
|
346
|
+
.ihooman-ticket-title { font-size: 16px; font-weight: 600; color: ${textColor}; margin: 0; letter-spacing: -0.01em; }
|
|
347
|
+
.ihooman-ticket-subtitle { font-size: 13px; color: ${textSecondary}; margin: 0; }
|
|
348
|
+
.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; }
|
|
349
|
+
.ihooman-ticket-input:focus { border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
313
350
|
.ihooman-ticket-input::placeholder { color: ${mutedColor}; }
|
|
314
351
|
.ihooman-ticket-textarea { min-height: 100px; resize: vertical; }
|
|
315
|
-
.ihooman-ticket-submit { display: flex; align-items: center; justify-content: center; padding:
|
|
316
|
-
.ihooman-ticket-submit:hover { opacity: 0.
|
|
317
|
-
.ihooman-ticket-submit:disabled { opacity: 0.
|
|
318
|
-
.ihooman-ticket-back { display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: ${
|
|
319
|
-
.ihooman-ticket-back:hover { background: ${
|
|
352
|
+
.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; }
|
|
353
|
+
.ihooman-ticket-submit:hover { opacity: 0.85; }
|
|
354
|
+
.ihooman-ticket-submit:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
355
|
+
.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; }
|
|
356
|
+
.ihooman-ticket-back:hover { background: ${hoverBg}; color: ${textColor}; }
|
|
357
|
+
|
|
358
|
+
/* ── History View ── */
|
|
320
359
|
.ihooman-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
|
|
321
360
|
.ihooman-history-view.show { display: flex; }
|
|
322
361
|
.ihooman-history-header { padding: 12px 16px; border-bottom: 1px solid ${borderColor}; display: flex; justify-content: space-between; align-items: center; }
|
|
323
|
-
.ihooman-history-title { font-size:
|
|
324
|
-
.ihooman-history-new { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background:
|
|
325
|
-
.ihooman-history-new:hover { opacity: 0.
|
|
362
|
+
.ihooman-history-title { font-size: 13px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
363
|
+
.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; }
|
|
364
|
+
.ihooman-history-new:hover { opacity: 0.85; }
|
|
326
365
|
.ihooman-history-new svg { width: 12px; height: 12px; flex-shrink: 0; }
|
|
327
366
|
.ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
|
|
328
|
-
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
329
|
-
.ihooman-history-item:hover { background: ${
|
|
330
|
-
.ihooman-history-item.active { background: ${isDark ? '
|
|
367
|
+
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 10px; margin-bottom: 6px; cursor: pointer; transition: all 0.15s ease; background: ${bgColor}; }
|
|
368
|
+
.ihooman-history-item:hover { background: ${hoverBg}; }
|
|
369
|
+
.ihooman-history-item.active { background: ${hoverBg}; border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
331
370
|
.ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
332
371
|
.ihooman-history-meta { font-size: 11px; color: ${mutedColor}; margin-top: 4px; display: flex; justify-content: space-between; }
|
|
333
|
-
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size:
|
|
334
|
-
|
|
372
|
+
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 13px; }
|
|
373
|
+
|
|
374
|
+
/* ── Preset Questions ── */
|
|
375
|
+
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
335
376
|
.ihooman-preset-questions:empty { display: none; }
|
|
336
377
|
.ihooman-preset-questions.hidden { display: none; }
|
|
337
|
-
|
|
378
|
+
|
|
379
|
+
/* ── Proactive Toast ── */
|
|
380
|
+
.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}; }
|
|
338
381
|
.ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
339
|
-
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; }
|
|
382
|
+
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; line-height: 1.5; }
|
|
340
383
|
.ihooman-proactive-toast-actions { display: flex; gap: 8px; }
|
|
341
|
-
.ihooman-proactive-toast-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius:
|
|
342
|
-
.ihooman-proactive-toast-btn.primary { background:
|
|
343
|
-
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.
|
|
344
|
-
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${
|
|
345
|
-
.ihooman-proactive-toast-btn.secondary:hover { background: ${
|
|
346
|
-
|
|
384
|
+
.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; }
|
|
385
|
+
.ihooman-proactive-toast-btn.primary { background: ${accentBg}; color: ${accentText}; border: none; }
|
|
386
|
+
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.85; }
|
|
387
|
+
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${textSecondary}; border: 1px solid ${borderColor}; }
|
|
388
|
+
.ihooman-proactive-toast-btn.secondary:hover { background: ${hoverBg}; }
|
|
389
|
+
|
|
390
|
+
/* ── Survey View ── */
|
|
391
|
+
.ihooman-survey-view { display: none; flex-direction: column; padding: 24px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
347
392
|
.ihooman-survey-view.show { display: flex; }
|
|
348
|
-
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; }
|
|
393
|
+
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; letter-spacing: -0.01em; }
|
|
349
394
|
.ihooman-survey-stars { display: flex; gap: 8px; }
|
|
350
|
-
.ihooman-survey-star { width:
|
|
395
|
+
.ihooman-survey-star { width: 36px; height: 36px; cursor: pointer; color: ${mutedColor}; transition: all 0.15s ease; }
|
|
351
396
|
.ihooman-survey-star:hover, .ihooman-survey-star.active { color: #fbbf24; transform: scale(1.1); }
|
|
352
397
|
.ihooman-survey-star svg { width: 100%; height: 100%; }
|
|
353
|
-
.ihooman-survey-comment { width: 100%; padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
354
|
-
.ihooman-survey-
|
|
355
|
-
.ihooman-survey-submit:
|
|
398
|
+
.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; }
|
|
399
|
+
.ihooman-survey-comment:focus { border-color: ${isDark ? '#3f3f46' : '#a1a1aa'}; }
|
|
400
|
+
.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; }
|
|
401
|
+
.ihooman-survey-submit:hover { opacity: 0.85; }
|
|
356
402
|
.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; }
|
|
357
403
|
.ihooman-survey-skip:hover { color: ${textColor}; }
|
|
358
|
-
|
|
404
|
+
|
|
405
|
+
/* ── Feedback ── */
|
|
406
|
+
.ihooman-feedback-btns { display: flex; gap: 4px; margin-top: 4px; }
|
|
359
407
|
.ihooman-feedback-btn svg { width: 12px; height: 12px; }
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
.ihooman-carousel
|
|
408
|
+
|
|
409
|
+
/* ── Carousel ── */
|
|
410
|
+
.ihooman-carousel { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
|
|
411
|
+
.ihooman-carousel::-webkit-scrollbar { height: 3px; }
|
|
412
|
+
.ihooman-carousel::-webkit-scrollbar-thumb { background: ${isDark ? '#27272a' : '#d4d4d8'}; border-radius: 2px; }
|
|
413
|
+
.ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgElevated}; }
|
|
363
414
|
.ihooman-carousel-card img { width: 100%; height: 120px; object-fit: cover; }
|
|
364
415
|
.ihooman-carousel-card-content { padding: 12px; }
|
|
365
|
-
.ihooman-carousel-card-title { font-size:
|
|
366
|
-
.ihooman-carousel-card-desc { font-size: 12px; color: ${
|
|
416
|
+
.ihooman-carousel-card-title { font-size: 13px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
|
|
417
|
+
.ihooman-carousel-card-desc { font-size: 12px; color: ${textSecondary}; margin-bottom: 8px; }
|
|
367
418
|
.ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
|
|
419
|
+
|
|
420
|
+
/* ── Quick Replies ── */
|
|
368
421
|
.ihooman-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
369
|
-
|
|
422
|
+
|
|
423
|
+
/* ── Responsive ── */
|
|
424
|
+
@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; } }
|
|
370
425
|
`;
|
|
371
426
|
}
|
|
372
427
|
// ============================================================================
|
|
@@ -406,9 +461,9 @@ function createWidget() {
|
|
|
406
461
|
<div class="ihooman-window" role="dialog" aria-label="Chat window">
|
|
407
462
|
<div class="ihooman-container">
|
|
408
463
|
<div class="ihooman-header">
|
|
409
|
-
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="
|
|
464
|
+
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="Assistant">` : icons.sparkle}</div>
|
|
410
465
|
<div class="ihooman-header-info">
|
|
411
|
-
<div class="ihooman-header-title">${escapeHtml(config.title || '
|
|
466
|
+
<div class="ihooman-header-title">${escapeHtml(config.title || 'AI Assistant')}</div>
|
|
412
467
|
<div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
|
|
413
468
|
</div>
|
|
414
469
|
<div class="ihooman-header-actions">
|
|
@@ -430,7 +485,7 @@ function createWidget() {
|
|
|
430
485
|
</div>
|
|
431
486
|
</div>
|
|
432
487
|
<div class="ihooman-ticket-view">
|
|
433
|
-
<h4 class="ihooman-ticket-title"
|
|
488
|
+
<h4 class="ihooman-ticket-title">Submit a Ticket</h4>
|
|
434
489
|
<p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
|
|
435
490
|
<input class="ihooman-ticket-input" id="ihooman-ticket-name" placeholder="Your name" required>
|
|
436
491
|
<input class="ihooman-ticket-input" id="ihooman-ticket-email" type="email" placeholder="Your email" required>
|
|
@@ -889,6 +944,7 @@ async function handleRequestLiveAgent() {
|
|
|
889
944
|
function startLiveAgentPolling() {
|
|
890
945
|
if (liveAgentPollInterval)
|
|
891
946
|
return;
|
|
947
|
+
let agentConnected = false;
|
|
892
948
|
liveAgentPollInterval = setInterval(async () => {
|
|
893
949
|
if (!state.sessionId || !isLiveAgentMode) {
|
|
894
950
|
stopLiveAgentPolling();
|
|
@@ -902,6 +958,12 @@ function startLiveAgentPolling() {
|
|
|
902
958
|
// Check both ticket_status and conversation_status for agent handling
|
|
903
959
|
if (data.ticket_status === 'in_progress' || data.conversation_status === 'active') {
|
|
904
960
|
updateStatusBar('connected', '🟢 Connected to live agent');
|
|
961
|
+
// Agent is connected — stop polling, WebSocket handles real-time updates.
|
|
962
|
+
// Status changes (close/resolve) will come through WebSocket messages.
|
|
963
|
+
if (!agentConnected) {
|
|
964
|
+
agentConnected = true;
|
|
965
|
+
stopLiveAgentPolling();
|
|
966
|
+
}
|
|
905
967
|
}
|
|
906
968
|
else if (data.ticket_status === 'open') {
|
|
907
969
|
updateStatusBar('waiting', data.position_in_queue > 1
|
|
@@ -919,7 +981,7 @@ function startLiveAgentPolling() {
|
|
|
919
981
|
}
|
|
920
982
|
}
|
|
921
983
|
catch { /* ignore */ }
|
|
922
|
-
},
|
|
984
|
+
}, 15000);
|
|
923
985
|
}
|
|
924
986
|
function stopLiveAgentPolling() {
|
|
925
987
|
if (liveAgentPollInterval) {
|
|
@@ -1014,7 +1076,7 @@ function showTyping() {
|
|
|
1014
1076
|
return;
|
|
1015
1077
|
const typing = document.createElement('div');
|
|
1016
1078
|
typing.className = 'ihooman-typing';
|
|
1017
|
-
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>`;
|
|
1079
|
+
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>`;
|
|
1018
1080
|
elements.messages.appendChild(typing);
|
|
1019
1081
|
elements.messages.scrollTop = elements.messages.scrollHeight;
|
|
1020
1082
|
}
|
|
@@ -1036,7 +1098,7 @@ function disableInput() {
|
|
|
1036
1098
|
function enableInput() {
|
|
1037
1099
|
if (elements.input) {
|
|
1038
1100
|
elements.input.disabled = false;
|
|
1039
|
-
elements.input.placeholder = config.placeholder || '
|
|
1101
|
+
elements.input.placeholder = config.placeholder || 'Send a message...';
|
|
1040
1102
|
}
|
|
1041
1103
|
if (elements.sendBtn)
|
|
1042
1104
|
elements.sendBtn.disabled = !elements.input?.value.trim();
|
|
@@ -1660,11 +1722,10 @@ function getFontWeightValue(weight) {
|
|
|
1660
1722
|
default: return 500;
|
|
1661
1723
|
}
|
|
1662
1724
|
}
|
|
1663
|
-
// Default button styles - MUST match client-dashboard/src/components/widget/ButtonStylingEditor.tsx
|
|
1664
1725
|
const DEFAULT_BUTTON_STYLES = {
|
|
1665
1726
|
primary: {
|
|
1666
|
-
backgroundColor: '#
|
|
1667
|
-
textColor: '#
|
|
1727
|
+
backgroundColor: '#ededed',
|
|
1728
|
+
textColor: '#09090b',
|
|
1668
1729
|
borderColor: 'transparent',
|
|
1669
1730
|
borderWidth: 0,
|
|
1670
1731
|
borderRadius: 8,
|
|
@@ -1675,8 +1736,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1675
1736
|
},
|
|
1676
1737
|
secondary: {
|
|
1677
1738
|
backgroundColor: 'transparent',
|
|
1678
|
-
textColor: '#
|
|
1679
|
-
borderColor: '#
|
|
1739
|
+
textColor: '#a1a1aa',
|
|
1740
|
+
borderColor: '#27272a',
|
|
1680
1741
|
borderWidth: 1,
|
|
1681
1742
|
borderRadius: 8,
|
|
1682
1743
|
paddingVertical: 8,
|
|
@@ -1685,9 +1746,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1685
1746
|
fontWeight: 'medium',
|
|
1686
1747
|
},
|
|
1687
1748
|
presetQuestions: {
|
|
1688
|
-
backgroundColor: '
|
|
1689
|
-
textColor: '#
|
|
1690
|
-
borderColor: '
|
|
1749
|
+
backgroundColor: 'transparent',
|
|
1750
|
+
textColor: '#a1a1aa',
|
|
1751
|
+
borderColor: '#27272a',
|
|
1691
1752
|
borderWidth: 1,
|
|
1692
1753
|
borderRadius: 20,
|
|
1693
1754
|
paddingVertical: 6,
|
|
@@ -1696,9 +1757,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1696
1757
|
fontWeight: 'medium',
|
|
1697
1758
|
},
|
|
1698
1759
|
quickReplies: {
|
|
1699
|
-
backgroundColor: '#
|
|
1700
|
-
textColor: '#
|
|
1701
|
-
borderColor: '#
|
|
1760
|
+
backgroundColor: '#1a1a1a',
|
|
1761
|
+
textColor: '#a1a1aa',
|
|
1762
|
+
borderColor: '#27272a',
|
|
1702
1763
|
borderWidth: 1,
|
|
1703
1764
|
borderRadius: 16,
|
|
1704
1765
|
paddingVertical: 5,
|
|
@@ -1708,8 +1769,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1708
1769
|
},
|
|
1709
1770
|
feedback: {
|
|
1710
1771
|
backgroundColor: 'transparent',
|
|
1711
|
-
textColor: '#
|
|
1712
|
-
borderColor: '#
|
|
1772
|
+
textColor: '#52525b',
|
|
1773
|
+
borderColor: '#27272a',
|
|
1713
1774
|
borderWidth: 1,
|
|
1714
1775
|
borderRadius: 6,
|
|
1715
1776
|
paddingVertical: 4,
|
|
@@ -1718,19 +1779,19 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1718
1779
|
fontWeight: 'medium',
|
|
1719
1780
|
},
|
|
1720
1781
|
headerActions: {
|
|
1721
|
-
backgroundColor: '
|
|
1722
|
-
textColor: '#
|
|
1782
|
+
backgroundColor: 'transparent',
|
|
1783
|
+
textColor: '#a1a1aa',
|
|
1723
1784
|
borderColor: 'transparent',
|
|
1724
1785
|
borderWidth: 0,
|
|
1725
|
-
borderRadius:
|
|
1786
|
+
borderRadius: 8,
|
|
1726
1787
|
paddingVertical: 6,
|
|
1727
1788
|
paddingHorizontal: 6,
|
|
1728
1789
|
fontSize: 14,
|
|
1729
1790
|
fontWeight: 'medium',
|
|
1730
1791
|
},
|
|
1731
1792
|
escalation: {
|
|
1732
|
-
backgroundColor: '#
|
|
1733
|
-
textColor: '#
|
|
1793
|
+
backgroundColor: '#ededed',
|
|
1794
|
+
textColor: '#09090b',
|
|
1734
1795
|
borderColor: 'transparent',
|
|
1735
1796
|
borderWidth: 0,
|
|
1736
1797
|
borderRadius: 8,
|
|
@@ -1740,21 +1801,21 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1740
1801
|
fontWeight: 'medium',
|
|
1741
1802
|
},
|
|
1742
1803
|
cardActions: {
|
|
1743
|
-
backgroundColor: '#
|
|
1744
|
-
textColor: '#
|
|
1804
|
+
backgroundColor: '#ededed',
|
|
1805
|
+
textColor: '#09090b',
|
|
1745
1806
|
borderColor: 'transparent',
|
|
1746
1807
|
borderWidth: 0,
|
|
1747
|
-
borderRadius:
|
|
1808
|
+
borderRadius: 8,
|
|
1748
1809
|
paddingVertical: 6,
|
|
1749
1810
|
paddingHorizontal: 12,
|
|
1750
1811
|
fontSize: 12,
|
|
1751
1812
|
fontWeight: 'medium',
|
|
1752
1813
|
},
|
|
1753
1814
|
toggleButton: {
|
|
1754
|
-
backgroundColor: '#
|
|
1755
|
-
textColor: '#
|
|
1756
|
-
borderColor: '
|
|
1757
|
-
borderWidth:
|
|
1815
|
+
backgroundColor: '#ededed',
|
|
1816
|
+
textColor: '#09090b',
|
|
1817
|
+
borderColor: '#27272a',
|
|
1818
|
+
borderWidth: 1,
|
|
1758
1819
|
borderRadius: 30,
|
|
1759
1820
|
paddingVertical: 0,
|
|
1760
1821
|
paddingHorizontal: 0,
|
|
@@ -1763,7 +1824,7 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1763
1824
|
},
|
|
1764
1825
|
attachButton: {
|
|
1765
1826
|
backgroundColor: 'transparent',
|
|
1766
|
-
textColor: '#
|
|
1827
|
+
textColor: '#52525b',
|
|
1767
1828
|
borderColor: 'transparent',
|
|
1768
1829
|
borderWidth: 0,
|
|
1769
1830
|
borderRadius: 8,
|