@ihoomanai/chat-widget 4.0.1 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/SRI_HASHES.md +8 -8
- package/cdn/health.json +2 -2
- package/cdn/latest/chat.js +9 -2
- package/cdn/latest/chat.js.map +1 -1
- package/cdn/latest/chat.min.js +1 -1
- package/cdn/latest/chat.min.js.map +1 -1
- package/cdn/manifest.json +13 -13
- package/cdn/{v3 → v4}/chat.js +10 -3
- package/cdn/v4/chat.js.map +1 -0
- package/cdn/{v3.0.21 → v4}/chat.min.js +1 -1
- package/cdn/v4/chat.min.js.map +1 -0
- package/cdn/{v3.0.21 → v4.0.2}/chat.js +9 -2
- package/cdn/v4.0.2/chat.js.map +1 -0
- package/cdn/{v3 → v4.0.2}/chat.min.js +1 -1
- package/cdn/v4.0.2/chat.min.js.map +1 -0
- package/dist/index.cjs.js +170 -219
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +170 -219
- 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 +170 -219
- 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 +172 -223
- package/cdn/v3/chat.js.map +0 -1
- package/cdn/v3/chat.min.js.map +0 -1
- package/cdn/v3.0.21/chat.js.map +0 -1
- package/cdn/v3.0.21/chat.min.js.map +0 -1
package/src/widget.ts
CHANGED
|
@@ -17,21 +17,21 @@ import type {
|
|
|
17
17
|
WidgetView,
|
|
18
18
|
} from './types';
|
|
19
19
|
|
|
20
|
-
const VERSION = '4.
|
|
20
|
+
const VERSION = '4.1.0';
|
|
21
21
|
const STORAGE_PREFIX = 'ihooman_chat_';
|
|
22
22
|
const DEFAULT_SERVER_URL = 'https://api.ihooman.ai';
|
|
23
23
|
|
|
24
24
|
const defaultConfig: Partial<WidgetConfig> = {
|
|
25
25
|
serverUrl: DEFAULT_SERVER_URL,
|
|
26
|
-
theme: '
|
|
26
|
+
theme: 'light',
|
|
27
27
|
position: 'bottom-right',
|
|
28
|
-
title: '
|
|
29
|
-
subtitle: '
|
|
30
|
-
welcomeMessage: '
|
|
31
|
-
placeholder: '
|
|
32
|
-
primaryColor: '#
|
|
33
|
-
gradientFrom: '#
|
|
34
|
-
gradientTo: '#
|
|
28
|
+
title: 'Chat Support',
|
|
29
|
+
subtitle: 'We typically reply within minutes',
|
|
30
|
+
welcomeMessage: 'Hi there! 👋 How can we help you today?',
|
|
31
|
+
placeholder: 'Type a message...',
|
|
32
|
+
primaryColor: '#00aeff',
|
|
33
|
+
gradientFrom: '#00aeff',
|
|
34
|
+
gradientTo: '#0066ff',
|
|
35
35
|
showTimestamps: true,
|
|
36
36
|
showTypingIndicator: true,
|
|
37
37
|
enableSounds: true,
|
|
@@ -39,11 +39,11 @@ const defaultConfig: Partial<WidgetConfig> = {
|
|
|
39
39
|
startOpen: false,
|
|
40
40
|
persistSession: true,
|
|
41
41
|
zIndex: 9999,
|
|
42
|
-
width:
|
|
43
|
-
height:
|
|
44
|
-
buttonSize:
|
|
42
|
+
width: 380,
|
|
43
|
+
height: 560,
|
|
44
|
+
buttonSize: 60,
|
|
45
45
|
borderRadius: 16,
|
|
46
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
46
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
47
47
|
avatarUrl: '',
|
|
48
48
|
poweredBy: true,
|
|
49
49
|
presetQuestions: [],
|
|
@@ -54,23 +54,22 @@ const defaultConfig: Partial<WidgetConfig> = {
|
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
const icons = {
|
|
57
|
-
chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
58
|
-
close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
59
|
-
send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
60
|
-
attach: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
61
|
-
minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
chevronRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>`,
|
|
57
|
+
chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>`,
|
|
58
|
+
close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
|
|
59
|
+
send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`,
|
|
60
|
+
attach: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-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>`,
|
|
61
|
+
minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
|
|
62
|
+
bot: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path></svg>`,
|
|
63
|
+
agent: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`,
|
|
64
|
+
ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>`,
|
|
65
|
+
history: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`,
|
|
66
|
+
plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
|
|
67
|
+
star: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>`,
|
|
68
|
+
starEmpty: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>`,
|
|
69
|
+
thumbUp: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>`,
|
|
70
|
+
thumbDown: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>`,
|
|
71
|
+
chevronLeft: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
|
|
72
|
+
chevronRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
|
|
74
73
|
};
|
|
75
74
|
|
|
76
75
|
let config: WidgetConfig = { widgetId: '', ...defaultConfig };
|
|
@@ -246,34 +245,27 @@ function matchUrlPattern(pattern: string): boolean {
|
|
|
246
245
|
// ============================================================================
|
|
247
246
|
|
|
248
247
|
function generateStyles(): string {
|
|
249
|
-
const { fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
|
|
250
|
-
const isDark = config.theme === 'dark'
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
const
|
|
254
|
-
const
|
|
255
|
-
const
|
|
256
|
-
const
|
|
257
|
-
const
|
|
258
|
-
const
|
|
259
|
-
const
|
|
260
|
-
const
|
|
261
|
-
const
|
|
262
|
-
const
|
|
263
|
-
const accentColor = isDark ? '#ededed' : '#18181b';
|
|
264
|
-
const accentBg = isDark ? '#ededed' : '#18181b';
|
|
265
|
-
const accentText = isDark ? '#09090b' : '#fafafa';
|
|
266
|
-
const userMsgBg = isDark ? '#27272a' : '#18181b';
|
|
267
|
-
const userMsgText = isDark ? '#ededed' : '#fafafa';
|
|
268
|
-
const botMsgBg = 'transparent';
|
|
248
|
+
const { primaryColor, gradientFrom, gradientTo, fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
|
|
249
|
+
const isDark = config.theme === 'dark';
|
|
250
|
+
const bgColor = isDark ? '#0a0a0f' : '#ffffff';
|
|
251
|
+
const bgSecondary = isDark ? '#111118' : '#f9fafb';
|
|
252
|
+
const bgTertiary = isDark ? '#16161f' : '#f1f5f9';
|
|
253
|
+
const textColor = isDark ? '#e4e4e7' : '#1f2937';
|
|
254
|
+
const mutedColor = isDark ? '#52525b' : '#6b7280';
|
|
255
|
+
const textSecondary = isDark ? '#a1a1aa' : '#6b7280';
|
|
256
|
+
const borderColor = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.08)';
|
|
257
|
+
const borderLight = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)';
|
|
258
|
+
const inputBg = isDark ? '#111118' : '#f9fafb';
|
|
259
|
+
const accentColor = isDark ? (primaryColor || '#10b981') : primaryColor;
|
|
260
|
+
const messageBgUser = isDark ? '#1a1a26' : `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
|
|
261
|
+
const messageBgBot = isDark ? '#16161f' : '#f1f5f9';
|
|
269
262
|
const positionRight = config.position?.includes('right') ?? true;
|
|
270
263
|
const positionBottom = config.position?.includes('bottom') ?? true;
|
|
271
|
-
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)';
|
|
272
264
|
|
|
273
265
|
return `
|
|
274
266
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
275
267
|
:host { all: initial; }
|
|
276
|
-
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.
|
|
268
|
+
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
|
|
277
269
|
button {
|
|
278
270
|
font-family: inherit;
|
|
279
271
|
font-size: 100%;
|
|
@@ -286,188 +278,144 @@ function generateStyles(): string {
|
|
|
286
278
|
cursor: pointer;
|
|
287
279
|
outline: none;
|
|
288
280
|
}
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
.ihooman-toggle {
|
|
293
|
-
.ihooman-toggle
|
|
294
|
-
.ihooman-toggle
|
|
295
|
-
.ihooman-toggle
|
|
296
|
-
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease-out, opacity 0.15s ease; }
|
|
297
|
-
.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; }
|
|
281
|
+
.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: ${isDark ? bgSecondary : `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`} !important; border: ${isDark ? `1px solid ${borderColor}` : 'none'} !important; cursor: pointer; z-index: ${zIndex}; display: flex !important; align-items: center; justify-content: center; box-shadow: ${isDark ? '0 8px 32px rgba(0,0,0,0.5)' : '0 4px 20px rgba(0, 174, 255, 0.35)'}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
|
|
282
|
+
.ihooman-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0, 174, 255, 0.45); }
|
|
283
|
+
.ihooman-toggle:active { transform: scale(0.95); }
|
|
284
|
+
.ihooman-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 50%; }
|
|
285
|
+
.ihooman-toggle svg { width: 26px; height: 26px; color: white; transition: transform 0.3s ease, opacity 0.2s ease; position: relative; z-index: 1; }
|
|
286
|
+
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.2s ease; }
|
|
287
|
+
.ihooman-toggle .close-icon { position: absolute; display: flex; align-items: center; justify-content: center; transform: rotate(-90deg) scale(0); opacity: 0; transition: transform 0.3s ease, opacity 0.2s ease; }
|
|
298
288
|
.ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
|
|
299
289
|
.ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
|
|
300
|
-
.ihooman-pulse {
|
|
301
|
-
|
|
290
|
+
.ihooman-pulse { position: absolute; inset: 0; border-radius: 50%; background: ${primaryColor}; animation: ihooman-pulse 2s ease-out infinite; }
|
|
291
|
+
@keyframes ihooman-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
|
|
292
|
+
.ihooman-toggle.open .ihooman-pulse { display: none; }
|
|
293
|
+
.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; }
|
|
302
294
|
.ihooman-badge:empty { display: none; }
|
|
303
|
-
|
|
304
|
-
/* ── Window ── */
|
|
305
|
-
.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; }
|
|
295
|
+
.ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; 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(20px) scale(0.95); transition: opacity 0.3s, visibility 0.3s, transform 0.3s; overscroll-behavior: contain; }
|
|
306
296
|
.ihooman-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
.ihooman-container { position: relative;
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
.ihooman-header
|
|
313
|
-
.ihooman-header-avatar { width:
|
|
314
|
-
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
|
|
315
|
-
.ihooman-header-avatar svg { width: 18px; height: 18px; color: ${textSecondary}; }
|
|
297
|
+
.ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; flex-shrink: 0; }
|
|
298
|
+
.ihooman-container::before { content: ''; position: absolute; inset: 0; background: ${bgColor}; opacity: ${isDark ? '1' : '0.97'}; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: ${borderRadius}px; border: 1px solid ${borderColor}; box-shadow: ${isDark ? '0 25px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02)' : '0 25px 50px -12px rgba(0, 0, 0, 0.25)'}; }
|
|
299
|
+
.ihooman-container > * { position: relative; z-index: 1; }
|
|
300
|
+
.ihooman-header { padding: 16px 20px; background: ${isDark ? bgSecondary : `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`}; color: ${isDark ? textColor : 'white'}; display: flex; align-items: center; gap: 12px; flex-shrink: 0; border-bottom: ${isDark ? `1px solid ${borderColor}` : 'none'}; }
|
|
301
|
+
.ihooman-header-avatar { width: ${isDark ? '38px' : '42px'}; height: ${isDark ? '38px' : '42px'}; border-radius: ${isDark ? '12px' : '50%'}; background: ${isDark ? bgTertiary : 'rgba(255,255,255,0.2)'}; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: ${isDark ? `1px solid ${borderColor}` : 'none'}; position: relative; overflow: hidden; }
|
|
302
|
+
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
|
|
303
|
+
.ihooman-header-avatar svg { width: 22px; height: 22px; }
|
|
316
304
|
.ihooman-header-info { flex: 1; min-width: 0; }
|
|
317
|
-
.ihooman-header-title { font-size:
|
|
318
|
-
.ihooman-header-status { display: flex; align-items: center; gap:
|
|
319
|
-
.ihooman-status-dot { width:
|
|
320
|
-
.ihooman-status-dot.offline { background: #
|
|
321
|
-
.ihooman-header-actions { display: flex; gap:
|
|
322
|
-
.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:
|
|
323
|
-
.ihooman-header-btn:hover { background: ${
|
|
324
|
-
.ihooman-header-btn svg { width:
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
.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; }
|
|
328
|
-
.ihooman-messages::-webkit-scrollbar { width: 4px; }
|
|
305
|
+
.ihooman-header-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
|
|
306
|
+
.ihooman-header-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }
|
|
307
|
+
.ihooman-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
|
|
308
|
+
.ihooman-status-dot.offline { background: #f59e0b; }
|
|
309
|
+
.ihooman-header-actions { display: flex; gap: 8px; }
|
|
310
|
+
.ihooman-header-btn { width: 30px; height: 30px; border-radius: ${isDark ? '8px' : '6px'}; background: ${isDark ? 'transparent' : 'rgba(255,255,255,0.15)'}; border: ${isDark ? `1px solid ${borderColor}` : 'none'}; cursor: pointer; display: flex; align-items: center; justify-content: center; color: ${isDark ? textSecondary : 'white'}; transition: all 0.2s; }
|
|
311
|
+
.ihooman-header-btn:hover { background: ${isDark ? bgTertiary : 'rgba(255,255,255,0.25)'}; color: ${isDark ? textColor : 'white'}; }
|
|
312
|
+
.ihooman-header-btn svg { width: 14px; height: 14px; }
|
|
313
|
+
.ihooman-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: ${bgColor}; overscroll-behavior: contain; min-height: 0; ${isDark ? 'background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px); background-size: 40px 40px;' : ''} }
|
|
314
|
+
.ihooman-messages::-webkit-scrollbar { width: 6px; }
|
|
329
315
|
.ihooman-messages::-webkit-scrollbar-track { background: transparent; }
|
|
330
|
-
.ihooman-messages::-webkit-scrollbar-thumb { background: ${
|
|
331
|
-
.ihooman-message { display: flex; flex-direction: column; max-width:
|
|
332
|
-
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(
|
|
316
|
+
.ihooman-messages::-webkit-scrollbar-thumb { background: ${borderColor}; border-radius: 3px; }
|
|
317
|
+
.ihooman-message { display: flex; flex-direction: column; max-width: 85%; animation: ihooman-fadeIn 0.3s ease; }
|
|
318
|
+
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
333
319
|
.ihooman-message.user { align-self: flex-end; align-items: flex-end; }
|
|
334
|
-
.ihooman-message.bot { align-self: flex-start; align-items: flex-start;
|
|
335
|
-
.ihooman-message-content { padding:
|
|
336
|
-
.ihooman-message.user .ihooman-message-content { background: ${
|
|
337
|
-
.ihooman-message.bot .ihooman-message-content { background: ${
|
|
338
|
-
.ihooman-message-content
|
|
339
|
-
.ihooman-message-
|
|
340
|
-
.ihooman-
|
|
341
|
-
.ihooman-
|
|
342
|
-
.ihooman-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
.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; }
|
|
347
|
-
@keyframes ihooman-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
|
348
|
-
.ihooman-typing-dots { display: flex; gap: 3px; align-items: center; }
|
|
349
|
-
.ihooman-typing-dot { width: 5px; height: 5px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.2s ease-in-out infinite; }
|
|
350
|
-
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
351
|
-
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
352
|
-
@keyframes ihooman-typing { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }
|
|
353
|
-
|
|
354
|
-
/* ── Input Area ── */
|
|
320
|
+
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; }
|
|
321
|
+
.ihooman-message-content { padding: 12px 16px; border-radius: 16px; word-wrap: break-word; }
|
|
322
|
+
.ihooman-message.user .ihooman-message-content { background: ${messageBgUser}; color: ${isDark ? textColor : 'white'}; border-bottom-right-radius: 4px; ${isDark ? `border: 1px solid ${borderColor};` : ''} }
|
|
323
|
+
.ihooman-message.bot .ihooman-message-content { background: ${messageBgBot}; color: ${textColor}; border-bottom-left-radius: 4px; ${isDark ? `border: 1px solid ${borderLight};` : ''} }
|
|
324
|
+
.ihooman-message-content code { background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; }
|
|
325
|
+
.ihooman-message-time { font-size: 11px; color: ${mutedColor}; margin-top: 4px; padding: 0 4px; }
|
|
326
|
+
.ihooman-typing { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: ${messageBgBot}; border-radius: 16px; border-bottom-left-radius: 4px; max-width: 80px; align-self: flex-start; }
|
|
327
|
+
.ihooman-typing-dots { display: flex; gap: 4px; }
|
|
328
|
+
.ihooman-typing-dot { width: 8px; height: 8px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.4s infinite; }
|
|
329
|
+
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
330
|
+
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
331
|
+
@keyframes ihooman-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
|
|
355
332
|
.ihooman-input-area { padding: 12px 16px; background: ${bgColor}; border-top: 1px solid ${borderColor}; flex-shrink: 0; }
|
|
356
|
-
.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.
|
|
357
|
-
.ihooman-input-wrapper:focus-within { border-color: ${isDark ? '
|
|
358
|
-
.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.
|
|
333
|
+
.ihooman-input-wrapper { display: flex; align-items: flex-end; gap: 8px; background: ${inputBg}; border: 1px solid ${borderColor}; border-radius: ${isDark ? '16px' : '12px'}; padding: 8px 12px; transition: border-color 0.2s, box-shadow 0.2s; }
|
|
334
|
+
.ihooman-input-wrapper:focus-within { border-color: ${isDark ? 'rgba(255,255,255,0.12)' : primaryColor}; box-shadow: ${isDark ? 'none' : '0 0 0 3px rgba(0, 174, 255, 0.1)'}; }
|
|
335
|
+
.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.4; }
|
|
359
336
|
.ihooman-input::placeholder { color: ${mutedColor}; }
|
|
360
|
-
.ihooman-input-btn { width:
|
|
361
|
-
.ihooman-input-btn:hover {
|
|
362
|
-
.ihooman-input-btn.send { background: ${
|
|
363
|
-
.ihooman-input-btn.send:hover { opacity: 0.
|
|
364
|
-
.ihooman-input-btn.send:disabled { opacity: 0.
|
|
337
|
+
.ihooman-input-btn { width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: transparent; color: ${mutedColor}; }
|
|
338
|
+
.ihooman-input-btn:hover { background: ${borderColor}; color: ${textColor}; }
|
|
339
|
+
.ihooman-input-btn.send { background: ${isDark ? bgTertiary : `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`}; color: ${isDark ? mutedColor : 'white'}; ${isDark ? `border: 1px solid ${borderColor};` : ''} }
|
|
340
|
+
.ihooman-input-btn.send:hover { ${isDark ? `background: ${accentColor}; border-color: ${accentColor}; color: white;` : 'opacity: 0.9;'} }
|
|
341
|
+
.ihooman-input-btn.send:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
365
342
|
.ihooman-input-btn svg { width: 16px; height: 16px; }
|
|
366
|
-
.ihooman-input:disabled { opacity: 0.
|
|
367
|
-
.ihooman-input-btn.attach:disabled { opacity: 0.
|
|
343
|
+
.ihooman-input:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
344
|
+
.ihooman-input-btn.attach:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
368
345
|
.ihooman-file-input { display: none; }
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
372
|
-
.ihooman-powered a { color: ${textSecondary}; text-decoration: none; font-weight: 500; }
|
|
373
|
-
.ihooman-powered a:hover { color: ${textColor}; }
|
|
374
|
-
|
|
375
|
-
/* ── Escalation ── */
|
|
346
|
+
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
|
|
347
|
+
.ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
|
|
376
348
|
.ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
|
377
349
|
.ihooman-escalation-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
|
|
378
|
-
|
|
379
|
-
/* ── Status Bar ── */
|
|
380
|
-
.ihooman-status-bar { padding: 8px 16px; text-align: center; font-size: 12px; display: none; font-weight: 500; }
|
|
350
|
+
.ihooman-status-bar { padding: 10px 16px; text-align: center; font-size: 13px; display: none; }
|
|
381
351
|
.ihooman-status-bar.show { display: block; }
|
|
382
|
-
.ihooman-status-bar.waiting { background:
|
|
383
|
-
.ihooman-status-bar.connected { background:
|
|
384
|
-
|
|
385
|
-
/* ── Chat View ── */
|
|
352
|
+
.ihooman-status-bar.waiting { background: #fef3c7; color: #92400e; }
|
|
353
|
+
.ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
|
|
386
354
|
.ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
|
|
387
355
|
.ihooman-chat-view.hidden { display: none; }
|
|
388
|
-
|
|
389
|
-
/* ── Ticket View ── */
|
|
390
|
-
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 14px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
356
|
+
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
391
357
|
.ihooman-ticket-view.show { display: flex; }
|
|
392
|
-
.ihooman-ticket-title { font-size:
|
|
393
|
-
.ihooman-ticket-subtitle { font-size: 13px; color: ${
|
|
394
|
-
.ihooman-ticket-input { padding:
|
|
395
|
-
.ihooman-ticket-input:focus { border-color: ${
|
|
358
|
+
.ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
359
|
+
.ihooman-ticket-subtitle { font-size: 13px; color: ${mutedColor}; margin: 0; }
|
|
360
|
+
.ihooman-ticket-input { padding: 12px 14px; border: 1px solid ${borderColor}; border-radius: 10px; font-size: 14px; font-family: inherit; background: ${inputBg}; color: ${textColor}; outline: none; transition: border-color 0.2s; }
|
|
361
|
+
.ihooman-ticket-input:focus { border-color: ${primaryColor}; }
|
|
396
362
|
.ihooman-ticket-input::placeholder { color: ${mutedColor}; }
|
|
397
363
|
.ihooman-ticket-textarea { min-height: 100px; resize: vertical; }
|
|
398
|
-
.ihooman-ticket-submit { display: flex; align-items: center; justify-content: center; padding:
|
|
399
|
-
.ihooman-ticket-submit:hover { opacity: 0.
|
|
400
|
-
.ihooman-ticket-submit:disabled { opacity: 0.
|
|
401
|
-
.ihooman-ticket-back { display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: ${
|
|
402
|
-
.ihooman-ticket-back:hover { background: ${
|
|
403
|
-
|
|
404
|
-
/* ── History View ── */
|
|
364
|
+
.ihooman-ticket-submit { display: flex; align-items: center; justify-content: center; padding: 12px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
|
|
365
|
+
.ihooman-ticket-submit:hover { opacity: 0.9; }
|
|
366
|
+
.ihooman-ticket-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
367
|
+
.ihooman-ticket-back { display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
|
|
368
|
+
.ihooman-ticket-back:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
405
369
|
.ihooman-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
|
|
406
370
|
.ihooman-history-view.show { display: flex; }
|
|
407
371
|
.ihooman-history-header { padding: 12px 16px; border-bottom: 1px solid ${borderColor}; display: flex; justify-content: space-between; align-items: center; }
|
|
408
|
-
.ihooman-history-title { font-size:
|
|
409
|
-
.ihooman-history-new { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: ${
|
|
410
|
-
.ihooman-history-new:hover { opacity: 0.
|
|
372
|
+
.ihooman-history-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
373
|
+
.ihooman-history-new { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
|
|
374
|
+
.ihooman-history-new:hover { opacity: 0.9; }
|
|
411
375
|
.ihooman-history-new svg { width: 12px; height: 12px; flex-shrink: 0; }
|
|
412
376
|
.ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
|
|
413
|
-
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
414
|
-
.ihooman-history-item:hover { background: ${
|
|
415
|
-
.ihooman-history-item.active { background: ${
|
|
377
|
+
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; background: ${bgColor}; }
|
|
378
|
+
.ihooman-history-item:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : '#f8fafc'}; }
|
|
379
|
+
.ihooman-history-item.active { background: ${isDark ? 'rgba(0, 174, 255, 0.1)' : '#eff6ff'}; border-color: ${primaryColor}; }
|
|
416
380
|
.ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
417
381
|
.ihooman-history-meta { font-size: 11px; color: ${mutedColor}; margin-top: 4px; display: flex; justify-content: space-between; }
|
|
418
|
-
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size:
|
|
419
|
-
|
|
420
|
-
/* ── Preset Questions ── */
|
|
421
|
-
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
382
|
+
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
|
|
383
|
+
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; background: ${bgColor}; border-top: ${isDark ? 'none' : `1px solid ${borderColor}`}; }
|
|
422
384
|
.ihooman-preset-questions:empty { display: none; }
|
|
423
385
|
.ihooman-preset-questions.hidden { display: none; }
|
|
424
|
-
|
|
425
|
-
/* ── Proactive Toast ── */
|
|
426
|
-
.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}; }
|
|
386
|
+
.ihooman-proactive-toast { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; max-width: 300px; padding: 16px; background: ${bgColor}; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: ${(zIndex ?? 9999) - 2}; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; border: 1px solid ${borderColor}; }
|
|
427
387
|
.ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
428
|
-
.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; }
|
|
429
389
|
.ihooman-proactive-toast-actions { display: flex; gap: 8px; }
|
|
430
|
-
.ihooman-proactive-toast-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius:
|
|
431
|
-
.ihooman-proactive-toast-btn.primary { background: ${
|
|
432
|
-
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.
|
|
433
|
-
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${
|
|
434
|
-
.ihooman-proactive-toast-btn.secondary:hover { background: ${
|
|
435
|
-
|
|
436
|
-
/* ── Survey View ── */
|
|
437
|
-
.ihooman-survey-view { display: none; flex-direction: column; padding: 24px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
390
|
+
.ihooman-proactive-toast-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; line-height: 1.4; }
|
|
391
|
+
.ihooman-proactive-toast-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; }
|
|
392
|
+
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.9; }
|
|
393
|
+
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; }
|
|
394
|
+
.ihooman-proactive-toast-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
395
|
+
.ihooman-survey-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
438
396
|
.ihooman-survey-view.show { display: flex; }
|
|
439
|
-
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center;
|
|
397
|
+
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; }
|
|
440
398
|
.ihooman-survey-stars { display: flex; gap: 8px; }
|
|
441
|
-
.ihooman-survey-star { width:
|
|
399
|
+
.ihooman-survey-star { width: 40px; height: 40px; cursor: pointer; color: ${mutedColor}; transition: all 0.2s; }
|
|
442
400
|
.ihooman-survey-star:hover, .ihooman-survey-star.active { color: #fbbf24; transform: scale(1.1); }
|
|
443
401
|
.ihooman-survey-star svg { width: 100%; height: 100%; }
|
|
444
|
-
.ihooman-survey-comment { width: 100%; padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
445
|
-
.ihooman-survey-
|
|
446
|
-
.ihooman-survey-submit
|
|
447
|
-
.ihooman-survey-submit:hover { opacity: 0.85; }
|
|
402
|
+
.ihooman-survey-comment { width: 100%; padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; font-size: 14px; resize: none; min-height: 80px; background: ${inputBg}; color: ${textColor}; }
|
|
403
|
+
.ihooman-survey-submit { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; line-height: 1.4; }
|
|
404
|
+
.ihooman-survey-submit:hover { opacity: 0.9; }
|
|
448
405
|
.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; }
|
|
449
406
|
.ihooman-survey-skip:hover { color: ${textColor}; }
|
|
450
|
-
|
|
451
|
-
/* ── Feedback ── */
|
|
452
|
-
.ihooman-feedback-btns { display: flex; gap: 4px; margin-top: 4px; }
|
|
407
|
+
.ihooman-feedback-btns { display: flex; gap: 6px; margin-top: 6px; }
|
|
453
408
|
.ihooman-feedback-btn svg { width: 12px; height: 12px; }
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
.ihooman-carousel {
|
|
457
|
-
.ihooman-carousel::-webkit-scrollbar { height: 3px; }
|
|
458
|
-
.ihooman-carousel::-webkit-scrollbar-thumb { background: ${isDark ? '#27272a' : '#d4d4d8'}; border-radius: 2px; }
|
|
459
|
-
.ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgElevated}; }
|
|
409
|
+
.ihooman-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
|
|
410
|
+
.ihooman-carousel::-webkit-scrollbar { height: 4px; }
|
|
411
|
+
.ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgColor}; }
|
|
460
412
|
.ihooman-carousel-card img { width: 100%; height: 120px; object-fit: cover; }
|
|
461
413
|
.ihooman-carousel-card-content { padding: 12px; }
|
|
462
|
-
.ihooman-carousel-card-title { font-size:
|
|
463
|
-
.ihooman-carousel-card-desc { font-size: 12px; color: ${
|
|
414
|
+
.ihooman-carousel-card-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
|
|
415
|
+
.ihooman-carousel-card-desc { font-size: 12px; color: ${mutedColor}; margin-bottom: 8px; }
|
|
464
416
|
.ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
|
|
465
|
-
|
|
466
|
-
/* ── Quick Replies ── */
|
|
467
417
|
.ihooman-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
468
|
-
|
|
469
|
-
/* ── Responsive ── */
|
|
470
|
-
@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; } }
|
|
418
|
+
@media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); min-height: 400px; max-height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } .ihooman-proactive-toast { left: 10px; right: 10px; max-width: none; } }
|
|
471
419
|
`;
|
|
472
420
|
}
|
|
473
421
|
|
|
@@ -514,9 +462,9 @@ function createWidget(): void {
|
|
|
514
462
|
<div class="ihooman-window" role="dialog" aria-label="Chat window">
|
|
515
463
|
<div class="ihooman-container">
|
|
516
464
|
<div class="ihooman-header">
|
|
517
|
-
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="
|
|
465
|
+
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="Support">` : icons.bot}</div>
|
|
518
466
|
<div class="ihooman-header-info">
|
|
519
|
-
<div class="ihooman-header-title">${escapeHtml(config.title || '
|
|
467
|
+
<div class="ihooman-header-title">${escapeHtml(config.title || 'Chat Support')}</div>
|
|
520
468
|
<div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
|
|
521
469
|
</div>
|
|
522
470
|
<div class="ihooman-header-actions">
|
|
@@ -538,7 +486,7 @@ function createWidget(): void {
|
|
|
538
486
|
</div>
|
|
539
487
|
</div>
|
|
540
488
|
<div class="ihooman-ticket-view">
|
|
541
|
-
<h4 class="ihooman-ticket-title"
|
|
489
|
+
<h4 class="ihooman-ticket-title">📝 Submit a Ticket</h4>
|
|
542
490
|
<p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
|
|
543
491
|
<input class="ihooman-ticket-input" id="ihooman-ticket-name" placeholder="Your name" required>
|
|
544
492
|
<input class="ihooman-ticket-input" id="ihooman-ticket-email" type="email" placeholder="Your email" required>
|
|
@@ -1191,7 +1139,7 @@ function showTyping(): void {
|
|
|
1191
1139
|
|
|
1192
1140
|
const typing = document.createElement('div');
|
|
1193
1141
|
typing.className = 'ihooman-typing';
|
|
1194
|
-
typing.innerHTML = `<
|
|
1142
|
+
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>`;
|
|
1195
1143
|
elements.messages.appendChild(typing);
|
|
1196
1144
|
elements.messages.scrollTop = elements.messages.scrollHeight;
|
|
1197
1145
|
}
|
|
@@ -1213,7 +1161,7 @@ function disableInput(): void {
|
|
|
1213
1161
|
function enableInput(): void {
|
|
1214
1162
|
if (elements.input) {
|
|
1215
1163
|
elements.input.disabled = false;
|
|
1216
|
-
elements.input.placeholder = config.placeholder || '
|
|
1164
|
+
elements.input.placeholder = config.placeholder || 'Type a message...';
|
|
1217
1165
|
}
|
|
1218
1166
|
if (elements.sendBtn) elements.sendBtn.disabled = !elements.input?.value.trim();
|
|
1219
1167
|
if (elements.attachBtn) elements.attachBtn.disabled = false;
|
|
@@ -1936,10 +1884,11 @@ function getFontWeightValue(weight: string): number {
|
|
|
1936
1884
|
}
|
|
1937
1885
|
}
|
|
1938
1886
|
|
|
1887
|
+
// Default button styles - MUST match client-dashboard/src/components/widget/ButtonStylingEditor.tsx
|
|
1939
1888
|
const DEFAULT_BUTTON_STYLES = {
|
|
1940
1889
|
primary: {
|
|
1941
|
-
backgroundColor: '#
|
|
1942
|
-
textColor: '#
|
|
1890
|
+
backgroundColor: '#00aeff',
|
|
1891
|
+
textColor: '#ffffff',
|
|
1943
1892
|
borderColor: 'transparent',
|
|
1944
1893
|
borderWidth: 0,
|
|
1945
1894
|
borderRadius: 8,
|
|
@@ -1950,8 +1899,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1950
1899
|
},
|
|
1951
1900
|
secondary: {
|
|
1952
1901
|
backgroundColor: 'transparent',
|
|
1953
|
-
textColor: '#
|
|
1954
|
-
borderColor: '#
|
|
1902
|
+
textColor: '#6b7280',
|
|
1903
|
+
borderColor: '#e5e7eb',
|
|
1955
1904
|
borderWidth: 1,
|
|
1956
1905
|
borderRadius: 8,
|
|
1957
1906
|
paddingVertical: 8,
|
|
@@ -1960,9 +1909,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1960
1909
|
fontWeight: 'medium',
|
|
1961
1910
|
},
|
|
1962
1911
|
presetQuestions: {
|
|
1963
|
-
backgroundColor: '
|
|
1964
|
-
textColor: '#
|
|
1965
|
-
borderColor: '
|
|
1912
|
+
backgroundColor: 'rgba(0, 174, 255, 0.1)',
|
|
1913
|
+
textColor: '#00aeff',
|
|
1914
|
+
borderColor: 'rgba(0, 174, 255, 0.2)',
|
|
1966
1915
|
borderWidth: 1,
|
|
1967
1916
|
borderRadius: 20,
|
|
1968
1917
|
paddingVertical: 6,
|
|
@@ -1971,9 +1920,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1971
1920
|
fontWeight: 'medium',
|
|
1972
1921
|
},
|
|
1973
1922
|
quickReplies: {
|
|
1974
|
-
backgroundColor: '#
|
|
1975
|
-
textColor: '#
|
|
1976
|
-
borderColor: '#
|
|
1923
|
+
backgroundColor: '#f3f4f6',
|
|
1924
|
+
textColor: '#374151',
|
|
1925
|
+
borderColor: '#e5e7eb',
|
|
1977
1926
|
borderWidth: 1,
|
|
1978
1927
|
borderRadius: 16,
|
|
1979
1928
|
paddingVertical: 5,
|
|
@@ -1983,8 +1932,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1983
1932
|
},
|
|
1984
1933
|
feedback: {
|
|
1985
1934
|
backgroundColor: 'transparent',
|
|
1986
|
-
textColor: '#
|
|
1987
|
-
borderColor: '#
|
|
1935
|
+
textColor: '#9ca3af',
|
|
1936
|
+
borderColor: '#e5e7eb',
|
|
1988
1937
|
borderWidth: 1,
|
|
1989
1938
|
borderRadius: 6,
|
|
1990
1939
|
paddingVertical: 4,
|
|
@@ -1993,19 +1942,19 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1993
1942
|
fontWeight: 'medium',
|
|
1994
1943
|
},
|
|
1995
1944
|
headerActions: {
|
|
1996
|
-
backgroundColor: '
|
|
1997
|
-
textColor: '#
|
|
1945
|
+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
1946
|
+
textColor: '#ffffff',
|
|
1998
1947
|
borderColor: 'transparent',
|
|
1999
1948
|
borderWidth: 0,
|
|
2000
|
-
borderRadius:
|
|
1949
|
+
borderRadius: 6,
|
|
2001
1950
|
paddingVertical: 6,
|
|
2002
1951
|
paddingHorizontal: 6,
|
|
2003
1952
|
fontSize: 14,
|
|
2004
1953
|
fontWeight: 'medium',
|
|
2005
1954
|
},
|
|
2006
1955
|
escalation: {
|
|
2007
|
-
backgroundColor: '#
|
|
2008
|
-
textColor: '#
|
|
1956
|
+
backgroundColor: '#00aeff',
|
|
1957
|
+
textColor: '#ffffff',
|
|
2009
1958
|
borderColor: 'transparent',
|
|
2010
1959
|
borderWidth: 0,
|
|
2011
1960
|
borderRadius: 8,
|
|
@@ -2015,21 +1964,21 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
2015
1964
|
fontWeight: 'medium',
|
|
2016
1965
|
},
|
|
2017
1966
|
cardActions: {
|
|
2018
|
-
backgroundColor: '#
|
|
2019
|
-
textColor: '#
|
|
1967
|
+
backgroundColor: '#00aeff',
|
|
1968
|
+
textColor: '#ffffff',
|
|
2020
1969
|
borderColor: 'transparent',
|
|
2021
1970
|
borderWidth: 0,
|
|
2022
|
-
borderRadius:
|
|
1971
|
+
borderRadius: 6,
|
|
2023
1972
|
paddingVertical: 6,
|
|
2024
1973
|
paddingHorizontal: 12,
|
|
2025
1974
|
fontSize: 12,
|
|
2026
1975
|
fontWeight: 'medium',
|
|
2027
1976
|
},
|
|
2028
1977
|
toggleButton: {
|
|
2029
|
-
backgroundColor: '#
|
|
2030
|
-
textColor: '#
|
|
2031
|
-
borderColor: '
|
|
2032
|
-
borderWidth:
|
|
1978
|
+
backgroundColor: '#00aeff',
|
|
1979
|
+
textColor: '#ffffff',
|
|
1980
|
+
borderColor: 'transparent',
|
|
1981
|
+
borderWidth: 0,
|
|
2033
1982
|
borderRadius: 30,
|
|
2034
1983
|
paddingVertical: 0,
|
|
2035
1984
|
paddingHorizontal: 0,
|
|
@@ -2038,7 +1987,7 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
2038
1987
|
},
|
|
2039
1988
|
attachButton: {
|
|
2040
1989
|
backgroundColor: 'transparent',
|
|
2041
|
-
textColor: '#
|
|
1990
|
+
textColor: '#6b7280',
|
|
2042
1991
|
borderColor: 'transparent',
|
|
2043
1992
|
borderWidth: 0,
|
|
2044
1993
|
borderRadius: 8,
|