@ihoomanai/chat-widget 4.0.0 → 4.0.2
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/dist/index.cjs.js +165 -219
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +165 -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 +165 -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 +167 -223
package/src/widget.ts
CHANGED
|
@@ -17,21 +17,21 @@ import type {
|
|
|
17
17
|
WidgetView,
|
|
18
18
|
} from './types';
|
|
19
19
|
|
|
20
|
-
const VERSION = '4.0.
|
|
20
|
+
const VERSION = '4.0.2';
|
|
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,22 @@ 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 mutedColor = isDark ? '#52525b' : '#a1a1aa';
|
|
259
|
-
const borderColor = isDark ? '#27272a' : '#e4e4e7';
|
|
260
|
-
const borderSubtle = isDark ? '#1f1f23' : '#f4f4f5';
|
|
261
|
-
const inputBg = isDark ? '#141414' : '#fafafa';
|
|
262
|
-
const hoverBg = isDark ? '#1c1c1c' : '#f4f4f5';
|
|
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 ? '#1a1a2e' : '#ffffff';
|
|
251
|
+
const textColor = isDark ? '#e4e4e7' : '#1f2937';
|
|
252
|
+
const mutedColor = isDark ? '#71717a' : '#6b7280';
|
|
253
|
+
const borderColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)';
|
|
254
|
+
const inputBg = isDark ? '#16162a' : '#f9fafb';
|
|
255
|
+
const messageBgUser = `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
|
|
256
|
+
const messageBgBot = isDark ? '#252542' : '#f1f5f9';
|
|
269
257
|
const positionRight = config.position?.includes('right') ?? true;
|
|
270
258
|
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
259
|
|
|
273
260
|
return `
|
|
274
261
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
275
262
|
:host { all: initial; }
|
|
276
|
-
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.
|
|
263
|
+
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
|
|
277
264
|
button {
|
|
278
265
|
font-family: inherit;
|
|
279
266
|
font-size: 100%;
|
|
@@ -286,188 +273,144 @@ function generateStyles(): string {
|
|
|
286
273
|
cursor: pointer;
|
|
287
274
|
outline: none;
|
|
288
275
|
}
|
|
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; }
|
|
276
|
+
.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: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}) !important; border: none !important; cursor: pointer; z-index: ${zIndex}; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 174, 255, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
|
|
277
|
+
.ihooman-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0, 174, 255, 0.45); }
|
|
278
|
+
.ihooman-toggle:active { transform: scale(0.95); }
|
|
279
|
+
.ihooman-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 50%; }
|
|
280
|
+
.ihooman-toggle svg { width: 26px; height: 26px; color: white; transition: transform 0.3s ease, opacity 0.2s ease; position: relative; z-index: 1; }
|
|
281
|
+
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.2s ease; }
|
|
282
|
+
.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
283
|
.ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
|
|
299
284
|
.ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
|
|
300
|
-
.ihooman-pulse {
|
|
301
|
-
|
|
285
|
+
.ihooman-pulse { position: absolute; inset: 0; border-radius: 50%; background: ${primaryColor}; animation: ihooman-pulse 2s ease-out infinite; }
|
|
286
|
+
@keyframes ihooman-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
|
|
287
|
+
.ihooman-toggle.open .ihooman-pulse { display: none; }
|
|
288
|
+
.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
289
|
.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; }
|
|
290
|
+
.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
291
|
.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}; }
|
|
292
|
+
.ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; flex-shrink: 0; }
|
|
293
|
+
.ihooman-container::before { content: ''; position: absolute; inset: 0; background: ${bgColor}; opacity: 0.97; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: ${borderRadius}px; border: 1px solid ${borderColor}; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
|
|
294
|
+
.ihooman-container > * { position: relative; z-index: 1; }
|
|
295
|
+
.ihooman-header { padding: 16px 20px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
|
|
296
|
+
.ihooman-header-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
297
|
+
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
|
|
298
|
+
.ihooman-header-avatar svg { width: 22px; height: 22px; }
|
|
316
299
|
.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:
|
|
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; }
|
|
300
|
+
.ihooman-header-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
|
|
301
|
+
.ihooman-header-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }
|
|
302
|
+
.ihooman-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
|
|
303
|
+
.ihooman-status-dot.offline { background: #f59e0b; }
|
|
304
|
+
.ihooman-header-actions { display: flex; gap: 8px; }
|
|
305
|
+
.ihooman-header-btn { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: background 0.2s; }
|
|
306
|
+
.ihooman-header-btn:hover { background: rgba(255,255,255,0.25); }
|
|
307
|
+
.ihooman-header-btn svg { width: 14px; height: 14px; }
|
|
308
|
+
.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; }
|
|
309
|
+
.ihooman-messages::-webkit-scrollbar { width: 6px; }
|
|
329
310
|
.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(
|
|
311
|
+
.ihooman-messages::-webkit-scrollbar-thumb { background: ${borderColor}; border-radius: 3px; }
|
|
312
|
+
.ihooman-message { display: flex; flex-direction: column; max-width: 85%; animation: ihooman-fadeIn 0.3s ease; }
|
|
313
|
+
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
333
314
|
.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 ── */
|
|
315
|
+
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; }
|
|
316
|
+
.ihooman-message-content { padding: 12px 16px; border-radius: 16px; word-wrap: break-word; }
|
|
317
|
+
.ihooman-message.user .ihooman-message-content { background: ${messageBgUser}; color: white; border-bottom-right-radius: 4px; }
|
|
318
|
+
.ihooman-message.bot .ihooman-message-content { background: ${messageBgBot}; color: ${textColor}; border-bottom-left-radius: 4px; }
|
|
319
|
+
.ihooman-message-content code { background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; }
|
|
320
|
+
.ihooman-message-time { font-size: 11px; color: ${mutedColor}; margin-top: 4px; padding: 0 4px; }
|
|
321
|
+
.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; }
|
|
322
|
+
.ihooman-typing-dots { display: flex; gap: 4px; }
|
|
323
|
+
.ihooman-typing-dot { width: 8px; height: 8px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.4s infinite; }
|
|
324
|
+
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
325
|
+
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
326
|
+
@keyframes ihooman-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
|
|
355
327
|
.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: ${
|
|
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.
|
|
328
|
+
.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.2s, box-shadow 0.2s; }
|
|
329
|
+
.ihooman-input-wrapper:focus-within { border-color: ${primaryColor}; box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.1); }
|
|
330
|
+
.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
331
|
.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.
|
|
332
|
+
.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}; }
|
|
333
|
+
.ihooman-input-btn:hover { background: ${borderColor}; color: ${textColor}; }
|
|
334
|
+
.ihooman-input-btn.send { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; }
|
|
335
|
+
.ihooman-input-btn.send:hover { opacity: 0.9; }
|
|
336
|
+
.ihooman-input-btn.send:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
365
337
|
.ihooman-input-btn svg { width: 16px; height: 16px; }
|
|
366
|
-
.ihooman-input:disabled { opacity: 0.
|
|
367
|
-
.ihooman-input-btn.attach:disabled { opacity: 0.
|
|
338
|
+
.ihooman-input:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
339
|
+
.ihooman-input-btn.attach:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
368
340
|
.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 ── */
|
|
341
|
+
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
|
|
342
|
+
.ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
|
|
376
343
|
.ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
|
377
344
|
.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; }
|
|
345
|
+
.ihooman-status-bar { padding: 10px 16px; text-align: center; font-size: 13px; display: none; }
|
|
381
346
|
.ihooman-status-bar.show { display: block; }
|
|
382
|
-
.ihooman-status-bar.waiting { background:
|
|
383
|
-
.ihooman-status-bar.connected { background:
|
|
384
|
-
|
|
385
|
-
/* ── Chat View ── */
|
|
347
|
+
.ihooman-status-bar.waiting { background: #fef3c7; color: #92400e; }
|
|
348
|
+
.ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
|
|
386
349
|
.ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
|
|
387
350
|
.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; }
|
|
351
|
+
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
391
352
|
.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: ${
|
|
353
|
+
.ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
354
|
+
.ihooman-ticket-subtitle { font-size: 13px; color: ${mutedColor}; margin: 0; }
|
|
355
|
+
.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; }
|
|
356
|
+
.ihooman-ticket-input:focus { border-color: ${primaryColor}; }
|
|
396
357
|
.ihooman-ticket-input::placeholder { color: ${mutedColor}; }
|
|
397
358
|
.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 ── */
|
|
359
|
+
.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; }
|
|
360
|
+
.ihooman-ticket-submit:hover { opacity: 0.9; }
|
|
361
|
+
.ihooman-ticket-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
362
|
+
.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; }
|
|
363
|
+
.ihooman-ticket-back:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
405
364
|
.ihooman-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
|
|
406
365
|
.ihooman-history-view.show { display: flex; }
|
|
407
366
|
.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.
|
|
367
|
+
.ihooman-history-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
368
|
+
.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; }
|
|
369
|
+
.ihooman-history-new:hover { opacity: 0.9; }
|
|
411
370
|
.ihooman-history-new svg { width: 12px; height: 12px; flex-shrink: 0; }
|
|
412
371
|
.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: ${
|
|
372
|
+
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; background: ${bgColor}; }
|
|
373
|
+
.ihooman-history-item:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : '#f8fafc'}; }
|
|
374
|
+
.ihooman-history-item.active { background: ${isDark ? 'rgba(0, 174, 255, 0.1)' : '#eff6ff'}; border-color: ${primaryColor}; }
|
|
416
375
|
.ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
417
376
|
.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}; }
|
|
377
|
+
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
|
|
378
|
+
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderColor}; }
|
|
422
379
|
.ihooman-preset-questions:empty { display: none; }
|
|
423
380
|
.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}; }
|
|
381
|
+
.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
382
|
.ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
428
|
-
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px;
|
|
383
|
+
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; }
|
|
429
384
|
.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; }
|
|
385
|
+
.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; }
|
|
386
|
+
.ihooman-proactive-toast-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; }
|
|
387
|
+
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.9; }
|
|
388
|
+
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; }
|
|
389
|
+
.ihooman-proactive-toast-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
390
|
+
.ihooman-survey-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
438
391
|
.ihooman-survey-view.show { display: flex; }
|
|
439
|
-
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center;
|
|
392
|
+
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; }
|
|
440
393
|
.ihooman-survey-stars { display: flex; gap: 8px; }
|
|
441
|
-
.ihooman-survey-star { width:
|
|
394
|
+
.ihooman-survey-star { width: 40px; height: 40px; cursor: pointer; color: ${mutedColor}; transition: all 0.2s; }
|
|
442
395
|
.ihooman-survey-star:hover, .ihooman-survey-star.active { color: #fbbf24; transform: scale(1.1); }
|
|
443
396
|
.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; }
|
|
397
|
+
.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}; }
|
|
398
|
+
.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; }
|
|
399
|
+
.ihooman-survey-submit:hover { opacity: 0.9; }
|
|
448
400
|
.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
401
|
.ihooman-survey-skip:hover { color: ${textColor}; }
|
|
450
|
-
|
|
451
|
-
/* ── Feedback ── */
|
|
452
|
-
.ihooman-feedback-btns { display: flex; gap: 4px; margin-top: 4px; }
|
|
402
|
+
.ihooman-feedback-btns { display: flex; gap: 6px; margin-top: 6px; }
|
|
453
403
|
.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}; }
|
|
404
|
+
.ihooman-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
|
|
405
|
+
.ihooman-carousel::-webkit-scrollbar { height: 4px; }
|
|
406
|
+
.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
407
|
.ihooman-carousel-card img { width: 100%; height: 120px; object-fit: cover; }
|
|
461
408
|
.ihooman-carousel-card-content { padding: 12px; }
|
|
462
|
-
.ihooman-carousel-card-title { font-size:
|
|
463
|
-
.ihooman-carousel-card-desc { font-size: 12px; color: ${
|
|
409
|
+
.ihooman-carousel-card-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
|
|
410
|
+
.ihooman-carousel-card-desc { font-size: 12px; color: ${mutedColor}; margin-bottom: 8px; }
|
|
464
411
|
.ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
|
|
465
|
-
|
|
466
|
-
/* ── Quick Replies ── */
|
|
467
412
|
.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; } }
|
|
413
|
+
@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
414
|
`;
|
|
472
415
|
}
|
|
473
416
|
|
|
@@ -514,9 +457,9 @@ function createWidget(): void {
|
|
|
514
457
|
<div class="ihooman-window" role="dialog" aria-label="Chat window">
|
|
515
458
|
<div class="ihooman-container">
|
|
516
459
|
<div class="ihooman-header">
|
|
517
|
-
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="
|
|
460
|
+
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="Support">` : icons.bot}</div>
|
|
518
461
|
<div class="ihooman-header-info">
|
|
519
|
-
<div class="ihooman-header-title">${escapeHtml(config.title || '
|
|
462
|
+
<div class="ihooman-header-title">${escapeHtml(config.title || 'Chat Support')}</div>
|
|
520
463
|
<div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
|
|
521
464
|
</div>
|
|
522
465
|
<div class="ihooman-header-actions">
|
|
@@ -538,7 +481,7 @@ function createWidget(): void {
|
|
|
538
481
|
</div>
|
|
539
482
|
</div>
|
|
540
483
|
<div class="ihooman-ticket-view">
|
|
541
|
-
<h4 class="ihooman-ticket-title"
|
|
484
|
+
<h4 class="ihooman-ticket-title">📝 Submit a Ticket</h4>
|
|
542
485
|
<p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
|
|
543
486
|
<input class="ihooman-ticket-input" id="ihooman-ticket-name" placeholder="Your name" required>
|
|
544
487
|
<input class="ihooman-ticket-input" id="ihooman-ticket-email" type="email" placeholder="Your email" required>
|
|
@@ -1191,7 +1134,7 @@ function showTyping(): void {
|
|
|
1191
1134
|
|
|
1192
1135
|
const typing = document.createElement('div');
|
|
1193
1136
|
typing.className = 'ihooman-typing';
|
|
1194
|
-
typing.innerHTML = `<
|
|
1137
|
+
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
1138
|
elements.messages.appendChild(typing);
|
|
1196
1139
|
elements.messages.scrollTop = elements.messages.scrollHeight;
|
|
1197
1140
|
}
|
|
@@ -1213,7 +1156,7 @@ function disableInput(): void {
|
|
|
1213
1156
|
function enableInput(): void {
|
|
1214
1157
|
if (elements.input) {
|
|
1215
1158
|
elements.input.disabled = false;
|
|
1216
|
-
elements.input.placeholder = config.placeholder || '
|
|
1159
|
+
elements.input.placeholder = config.placeholder || 'Type a message...';
|
|
1217
1160
|
}
|
|
1218
1161
|
if (elements.sendBtn) elements.sendBtn.disabled = !elements.input?.value.trim();
|
|
1219
1162
|
if (elements.attachBtn) elements.attachBtn.disabled = false;
|
|
@@ -1936,10 +1879,11 @@ function getFontWeightValue(weight: string): number {
|
|
|
1936
1879
|
}
|
|
1937
1880
|
}
|
|
1938
1881
|
|
|
1882
|
+
// Default button styles - MUST match client-dashboard/src/components/widget/ButtonStylingEditor.tsx
|
|
1939
1883
|
const DEFAULT_BUTTON_STYLES = {
|
|
1940
1884
|
primary: {
|
|
1941
|
-
backgroundColor: '#
|
|
1942
|
-
textColor: '#
|
|
1885
|
+
backgroundColor: '#00aeff',
|
|
1886
|
+
textColor: '#ffffff',
|
|
1943
1887
|
borderColor: 'transparent',
|
|
1944
1888
|
borderWidth: 0,
|
|
1945
1889
|
borderRadius: 8,
|
|
@@ -1950,8 +1894,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1950
1894
|
},
|
|
1951
1895
|
secondary: {
|
|
1952
1896
|
backgroundColor: 'transparent',
|
|
1953
|
-
textColor: '#
|
|
1954
|
-
borderColor: '#
|
|
1897
|
+
textColor: '#6b7280',
|
|
1898
|
+
borderColor: '#e5e7eb',
|
|
1955
1899
|
borderWidth: 1,
|
|
1956
1900
|
borderRadius: 8,
|
|
1957
1901
|
paddingVertical: 8,
|
|
@@ -1960,9 +1904,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1960
1904
|
fontWeight: 'medium',
|
|
1961
1905
|
},
|
|
1962
1906
|
presetQuestions: {
|
|
1963
|
-
backgroundColor: '
|
|
1964
|
-
textColor: '#
|
|
1965
|
-
borderColor: '
|
|
1907
|
+
backgroundColor: 'rgba(0, 174, 255, 0.1)',
|
|
1908
|
+
textColor: '#00aeff',
|
|
1909
|
+
borderColor: 'rgba(0, 174, 255, 0.2)',
|
|
1966
1910
|
borderWidth: 1,
|
|
1967
1911
|
borderRadius: 20,
|
|
1968
1912
|
paddingVertical: 6,
|
|
@@ -1971,9 +1915,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1971
1915
|
fontWeight: 'medium',
|
|
1972
1916
|
},
|
|
1973
1917
|
quickReplies: {
|
|
1974
|
-
backgroundColor: '#
|
|
1975
|
-
textColor: '#
|
|
1976
|
-
borderColor: '#
|
|
1918
|
+
backgroundColor: '#f3f4f6',
|
|
1919
|
+
textColor: '#374151',
|
|
1920
|
+
borderColor: '#e5e7eb',
|
|
1977
1921
|
borderWidth: 1,
|
|
1978
1922
|
borderRadius: 16,
|
|
1979
1923
|
paddingVertical: 5,
|
|
@@ -1983,8 +1927,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1983
1927
|
},
|
|
1984
1928
|
feedback: {
|
|
1985
1929
|
backgroundColor: 'transparent',
|
|
1986
|
-
textColor: '#
|
|
1987
|
-
borderColor: '#
|
|
1930
|
+
textColor: '#9ca3af',
|
|
1931
|
+
borderColor: '#e5e7eb',
|
|
1988
1932
|
borderWidth: 1,
|
|
1989
1933
|
borderRadius: 6,
|
|
1990
1934
|
paddingVertical: 4,
|
|
@@ -1993,19 +1937,19 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1993
1937
|
fontWeight: 'medium',
|
|
1994
1938
|
},
|
|
1995
1939
|
headerActions: {
|
|
1996
|
-
backgroundColor: '
|
|
1997
|
-
textColor: '#
|
|
1940
|
+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
1941
|
+
textColor: '#ffffff',
|
|
1998
1942
|
borderColor: 'transparent',
|
|
1999
1943
|
borderWidth: 0,
|
|
2000
|
-
borderRadius:
|
|
1944
|
+
borderRadius: 6,
|
|
2001
1945
|
paddingVertical: 6,
|
|
2002
1946
|
paddingHorizontal: 6,
|
|
2003
1947
|
fontSize: 14,
|
|
2004
1948
|
fontWeight: 'medium',
|
|
2005
1949
|
},
|
|
2006
1950
|
escalation: {
|
|
2007
|
-
backgroundColor: '#
|
|
2008
|
-
textColor: '#
|
|
1951
|
+
backgroundColor: '#00aeff',
|
|
1952
|
+
textColor: '#ffffff',
|
|
2009
1953
|
borderColor: 'transparent',
|
|
2010
1954
|
borderWidth: 0,
|
|
2011
1955
|
borderRadius: 8,
|
|
@@ -2015,21 +1959,21 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
2015
1959
|
fontWeight: 'medium',
|
|
2016
1960
|
},
|
|
2017
1961
|
cardActions: {
|
|
2018
|
-
backgroundColor: '#
|
|
2019
|
-
textColor: '#
|
|
1962
|
+
backgroundColor: '#00aeff',
|
|
1963
|
+
textColor: '#ffffff',
|
|
2020
1964
|
borderColor: 'transparent',
|
|
2021
1965
|
borderWidth: 0,
|
|
2022
|
-
borderRadius:
|
|
1966
|
+
borderRadius: 6,
|
|
2023
1967
|
paddingVertical: 6,
|
|
2024
1968
|
paddingHorizontal: 12,
|
|
2025
1969
|
fontSize: 12,
|
|
2026
1970
|
fontWeight: 'medium',
|
|
2027
1971
|
},
|
|
2028
1972
|
toggleButton: {
|
|
2029
|
-
backgroundColor: '#
|
|
2030
|
-
textColor: '#
|
|
2031
|
-
borderColor: '
|
|
2032
|
-
borderWidth:
|
|
1973
|
+
backgroundColor: '#00aeff',
|
|
1974
|
+
textColor: '#ffffff',
|
|
1975
|
+
borderColor: 'transparent',
|
|
1976
|
+
borderWidth: 0,
|
|
2033
1977
|
borderRadius: 30,
|
|
2034
1978
|
paddingVertical: 0,
|
|
2035
1979
|
paddingHorizontal: 0,
|
|
@@ -2038,7 +1982,7 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
2038
1982
|
},
|
|
2039
1983
|
attachButton: {
|
|
2040
1984
|
backgroundColor: 'transparent',
|
|
2041
|
-
textColor: '#
|
|
1985
|
+
textColor: '#6b7280',
|
|
2042
1986
|
borderColor: 'transparent',
|
|
2043
1987
|
borderWidth: 0,
|
|
2044
1988
|
borderRadius: 8,
|