@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/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @ihoomanai/chat-widget v4.0
|
|
3
|
-
*
|
|
2
|
+
* @ihoomanai/chat-widget v4.1.0
|
|
3
|
+
* Universal chat support widget for any website - secure Widget ID based initialization
|
|
4
4
|
*
|
|
5
5
|
* @license MIT
|
|
6
6
|
* @copyright Ihooman AI
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
* Enhanced with professional features
|
|
17
17
|
* @version 3.0.0
|
|
18
18
|
*/
|
|
19
|
-
const VERSION = '4.
|
|
19
|
+
const VERSION = '4.1.0';
|
|
20
20
|
const STORAGE_PREFIX = 'ihooman_chat_';
|
|
21
21
|
const DEFAULT_SERVER_URL = 'https://api.ihooman.ai';
|
|
22
22
|
const defaultConfig = {
|
|
23
23
|
serverUrl: DEFAULT_SERVER_URL,
|
|
24
|
-
theme: '
|
|
24
|
+
theme: 'light',
|
|
25
25
|
position: 'bottom-right',
|
|
26
|
-
title: '
|
|
27
|
-
subtitle: '
|
|
28
|
-
welcomeMessage: '
|
|
29
|
-
placeholder: '
|
|
30
|
-
primaryColor: '#
|
|
31
|
-
gradientFrom: '#
|
|
32
|
-
gradientTo: '#
|
|
26
|
+
title: 'Chat Support',
|
|
27
|
+
subtitle: 'We typically reply within minutes',
|
|
28
|
+
welcomeMessage: 'Hi there! 👋 How can we help you today?',
|
|
29
|
+
placeholder: 'Type a message...',
|
|
30
|
+
primaryColor: '#00aeff',
|
|
31
|
+
gradientFrom: '#00aeff',
|
|
32
|
+
gradientTo: '#0066ff',
|
|
33
33
|
showTimestamps: true,
|
|
34
34
|
showTypingIndicator: true,
|
|
35
35
|
enableSounds: true,
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
startOpen: false,
|
|
38
38
|
persistSession: true,
|
|
39
39
|
zIndex: 9999,
|
|
40
|
-
width:
|
|
41
|
-
height:
|
|
42
|
-
buttonSize:
|
|
40
|
+
width: 380,
|
|
41
|
+
height: 560,
|
|
42
|
+
buttonSize: 60,
|
|
43
43
|
borderRadius: 16,
|
|
44
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
44
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
45
45
|
avatarUrl: '',
|
|
46
46
|
poweredBy: true,
|
|
47
47
|
presetQuestions: [],
|
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
allowLocalhost: true,
|
|
52
52
|
};
|
|
53
53
|
const icons = {
|
|
54
|
-
chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
55
|
-
close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
56
|
-
send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
57
|
-
attach: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
58
|
-
minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
59
|
-
|
|
60
|
-
agent: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
61
|
-
ticket: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
62
|
-
history: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
63
|
-
plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
64
|
-
star: `<svg viewBox="0 0 24 24" fill="currentColor"
|
|
65
|
-
starEmpty: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
54
|
+
chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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>`,
|
|
55
|
+
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>`,
|
|
56
|
+
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>`,
|
|
57
|
+
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>`,
|
|
58
|
+
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>`,
|
|
59
|
+
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>`,
|
|
60
|
+
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>`,
|
|
61
|
+
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>`,
|
|
62
|
+
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>`,
|
|
63
|
+
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>`,
|
|
64
|
+
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>`,
|
|
65
|
+
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>`};
|
|
66
66
|
let config = { widgetId: '', ...defaultConfig };
|
|
67
67
|
let state = {
|
|
68
68
|
isOpen: false,
|
|
@@ -208,32 +208,26 @@
|
|
|
208
208
|
// STYLES
|
|
209
209
|
// ============================================================================
|
|
210
210
|
function generateStyles() {
|
|
211
|
-
const { fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
|
|
212
|
-
const isDark = config.theme === 'dark'
|
|
213
|
-
|
|
214
|
-
const
|
|
215
|
-
const
|
|
216
|
-
const
|
|
217
|
-
const
|
|
218
|
-
const textSecondary = isDark ? '#a1a1aa' : '#
|
|
219
|
-
const
|
|
220
|
-
const
|
|
221
|
-
const
|
|
222
|
-
const
|
|
223
|
-
const
|
|
224
|
-
const
|
|
225
|
-
const accentBg = isDark ? '#ededed' : '#18181b';
|
|
226
|
-
const accentText = isDark ? '#09090b' : '#fafafa';
|
|
227
|
-
const userMsgBg = isDark ? '#27272a' : '#18181b';
|
|
228
|
-
const userMsgText = isDark ? '#ededed' : '#fafafa';
|
|
229
|
-
const botMsgBg = 'transparent';
|
|
211
|
+
const { primaryColor, gradientFrom, gradientTo, fontFamily, borderRadius, zIndex, width, height, buttonSize } = config;
|
|
212
|
+
const isDark = config.theme === 'dark';
|
|
213
|
+
const bgColor = isDark ? '#0a0a0f' : '#ffffff';
|
|
214
|
+
const bgSecondary = isDark ? '#111118' : '#f9fafb';
|
|
215
|
+
const bgTertiary = isDark ? '#16161f' : '#f1f5f9';
|
|
216
|
+
const textColor = isDark ? '#e4e4e7' : '#1f2937';
|
|
217
|
+
const mutedColor = isDark ? '#52525b' : '#6b7280';
|
|
218
|
+
const textSecondary = isDark ? '#a1a1aa' : '#6b7280';
|
|
219
|
+
const borderColor = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.08)';
|
|
220
|
+
const borderLight = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)';
|
|
221
|
+
const inputBg = isDark ? '#111118' : '#f9fafb';
|
|
222
|
+
const accentColor = isDark ? (primaryColor || '#10b981') : primaryColor;
|
|
223
|
+
const messageBgUser = isDark ? '#1a1a26' : `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
|
|
224
|
+
const messageBgBot = isDark ? '#16161f' : '#f1f5f9';
|
|
230
225
|
const positionRight = config.position?.includes('right') ?? true;
|
|
231
226
|
const positionBottom = config.position?.includes('bottom') ?? true;
|
|
232
|
-
const shadowLg = isDark ? '0 24px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05)' : '0 24px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05)';
|
|
233
227
|
return `
|
|
234
228
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
235
229
|
:host { all: initial; }
|
|
236
|
-
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.
|
|
230
|
+
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
|
|
237
231
|
button {
|
|
238
232
|
font-family: inherit;
|
|
239
233
|
font-size: 100%;
|
|
@@ -246,188 +240,144 @@
|
|
|
246
240
|
cursor: pointer;
|
|
247
241
|
outline: none;
|
|
248
242
|
}
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
.ihooman-toggle {
|
|
253
|
-
.ihooman-toggle
|
|
254
|
-
.ihooman-toggle
|
|
255
|
-
.ihooman-toggle
|
|
256
|
-
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease-out, opacity 0.15s ease; }
|
|
257
|
-
.ihooman-toggle .close-icon { position: absolute; display: flex; align-items: center; justify-content: center; transform: rotate(-90deg) scale(0); opacity: 0; transition: transform 0.25s ease-out, opacity 0.15s ease; }
|
|
243
|
+
.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; }
|
|
244
|
+
.ihooman-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0, 174, 255, 0.45); }
|
|
245
|
+
.ihooman-toggle:active { transform: scale(0.95); }
|
|
246
|
+
.ihooman-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 50%; }
|
|
247
|
+
.ihooman-toggle svg { width: 26px; height: 26px; color: white; transition: transform 0.3s ease, opacity 0.2s ease; position: relative; z-index: 1; }
|
|
248
|
+
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.2s ease; }
|
|
249
|
+
.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; }
|
|
258
250
|
.ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
|
|
259
251
|
.ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
|
|
260
|
-
.ihooman-pulse {
|
|
261
|
-
|
|
252
|
+
.ihooman-pulse { position: absolute; inset: 0; border-radius: 50%; background: ${primaryColor}; animation: ihooman-pulse 2s ease-out infinite; }
|
|
253
|
+
@keyframes ihooman-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
|
|
254
|
+
.ihooman-toggle.open .ihooman-pulse { display: none; }
|
|
255
|
+
.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; }
|
|
262
256
|
.ihooman-badge:empty { display: none; }
|
|
263
|
-
|
|
264
|
-
/* ── Window ── */
|
|
265
|
-
.ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 84px' : 'top: 84px'}; width: ${width}px; height: ${height}px; min-height: ${height}px; max-height: ${height}px; z-index: ${(zIndex ?? 9999) - 1}; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.97); transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out; overscroll-behavior: contain; }
|
|
257
|
+
.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; }
|
|
266
258
|
.ihooman-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
.ihooman-container { position: relative;
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
.ihooman-header
|
|
273
|
-
.ihooman-header-avatar { width:
|
|
274
|
-
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
|
|
275
|
-
.ihooman-header-avatar svg { width: 18px; height: 18px; color: ${textSecondary}; }
|
|
259
|
+
.ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; flex-shrink: 0; }
|
|
260
|
+
.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)'}; }
|
|
261
|
+
.ihooman-container > * { position: relative; z-index: 1; }
|
|
262
|
+
.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'}; }
|
|
263
|
+
.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; }
|
|
264
|
+
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
|
|
265
|
+
.ihooman-header-avatar svg { width: 22px; height: 22px; }
|
|
276
266
|
.ihooman-header-info { flex: 1; min-width: 0; }
|
|
277
|
-
.ihooman-header-title { font-size:
|
|
278
|
-
.ihooman-header-status { display: flex; align-items: center; gap:
|
|
279
|
-
.ihooman-status-dot { width:
|
|
280
|
-
.ihooman-status-dot.offline { background: #
|
|
281
|
-
.ihooman-header-actions { display: flex; gap:
|
|
282
|
-
.ihooman-header-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: ${textSecondary}; transition:
|
|
283
|
-
.ihooman-header-btn:hover { background: ${
|
|
284
|
-
.ihooman-header-btn svg { width:
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
.ihooman-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; background: ${bgColor}; overscroll-behavior: contain; min-height: 0; }
|
|
288
|
-
.ihooman-messages::-webkit-scrollbar { width: 4px; }
|
|
267
|
+
.ihooman-header-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
|
|
268
|
+
.ihooman-header-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }
|
|
269
|
+
.ihooman-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
|
|
270
|
+
.ihooman-status-dot.offline { background: #f59e0b; }
|
|
271
|
+
.ihooman-header-actions { display: flex; gap: 8px; }
|
|
272
|
+
.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; }
|
|
273
|
+
.ihooman-header-btn:hover { background: ${isDark ? bgTertiary : 'rgba(255,255,255,0.25)'}; color: ${isDark ? textColor : 'white'}; }
|
|
274
|
+
.ihooman-header-btn svg { width: 14px; height: 14px; }
|
|
275
|
+
.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;' : ''} }
|
|
276
|
+
.ihooman-messages::-webkit-scrollbar { width: 6px; }
|
|
289
277
|
.ihooman-messages::-webkit-scrollbar-track { background: transparent; }
|
|
290
|
-
.ihooman-messages::-webkit-scrollbar-thumb { background: ${
|
|
291
|
-
.ihooman-message { display: flex; flex-direction: column; max-width:
|
|
292
|
-
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(
|
|
278
|
+
.ihooman-messages::-webkit-scrollbar-thumb { background: ${borderColor}; border-radius: 3px; }
|
|
279
|
+
.ihooman-message { display: flex; flex-direction: column; max-width: 85%; animation: ihooman-fadeIn 0.3s ease; }
|
|
280
|
+
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
293
281
|
.ihooman-message.user { align-self: flex-end; align-items: flex-end; }
|
|
294
|
-
.ihooman-message.bot { align-self: flex-start; align-items: flex-start;
|
|
295
|
-
.ihooman-message-content { padding:
|
|
296
|
-
.ihooman-message.user .ihooman-message-content { background: ${
|
|
297
|
-
.ihooman-message.bot .ihooman-message-content { background: ${
|
|
298
|
-
.ihooman-message-content
|
|
299
|
-
.ihooman-message-
|
|
300
|
-
.ihooman-
|
|
301
|
-
.ihooman-
|
|
302
|
-
.ihooman-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
.ihooman-typing-shimmer { font-size: 13px; color: ${mutedColor}; background: linear-gradient(90deg, ${mutedColor} 25%, ${textSecondary} 50%, ${mutedColor} 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ihooman-shimmer 1.5s ease-in-out infinite; }
|
|
307
|
-
@keyframes ihooman-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
|
308
|
-
.ihooman-typing-dots { display: flex; gap: 3px; align-items: center; }
|
|
309
|
-
.ihooman-typing-dot { width: 5px; height: 5px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.2s ease-in-out infinite; }
|
|
310
|
-
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
311
|
-
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
312
|
-
@keyframes ihooman-typing { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }
|
|
313
|
-
|
|
314
|
-
/* ── Input Area ── */
|
|
282
|
+
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; }
|
|
283
|
+
.ihooman-message-content { padding: 12px 16px; border-radius: 16px; word-wrap: break-word; }
|
|
284
|
+
.ihooman-message.user .ihooman-message-content { background: ${messageBgUser}; color: ${isDark ? textColor : 'white'}; border-bottom-right-radius: 4px; ${isDark ? `border: 1px solid ${borderColor};` : ''} }
|
|
285
|
+
.ihooman-message.bot .ihooman-message-content { background: ${messageBgBot}; color: ${textColor}; border-bottom-left-radius: 4px; ${isDark ? `border: 1px solid ${borderLight};` : ''} }
|
|
286
|
+
.ihooman-message-content code { background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; }
|
|
287
|
+
.ihooman-message-time { font-size: 11px; color: ${mutedColor}; margin-top: 4px; padding: 0 4px; }
|
|
288
|
+
.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; }
|
|
289
|
+
.ihooman-typing-dots { display: flex; gap: 4px; }
|
|
290
|
+
.ihooman-typing-dot { width: 8px; height: 8px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.4s infinite; }
|
|
291
|
+
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
292
|
+
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
293
|
+
@keyframes ihooman-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
|
|
315
294
|
.ihooman-input-area { padding: 12px 16px; background: ${bgColor}; border-top: 1px solid ${borderColor}; flex-shrink: 0; }
|
|
316
|
-
.ihooman-input-wrapper { display: flex; align-items: flex-end; gap: 8px; background: ${inputBg}; border: 1px solid ${borderColor}; border-radius: 12px; padding: 8px 12px; transition: border-color 0.
|
|
317
|
-
.ihooman-input-wrapper:focus-within { border-color: ${isDark ? '
|
|
318
|
-
.ihooman-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 14px; color: ${textColor}; resize: none; max-height: 100px; outline: none; line-height: 1.
|
|
295
|
+
.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; }
|
|
296
|
+
.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)'}; }
|
|
297
|
+
.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; }
|
|
319
298
|
.ihooman-input::placeholder { color: ${mutedColor}; }
|
|
320
|
-
.ihooman-input-btn { width:
|
|
321
|
-
.ihooman-input-btn:hover {
|
|
322
|
-
.ihooman-input-btn.send { background: ${
|
|
323
|
-
.ihooman-input-btn.send:hover { opacity: 0.
|
|
324
|
-
.ihooman-input-btn.send:disabled { opacity: 0.
|
|
299
|
+
.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}; }
|
|
300
|
+
.ihooman-input-btn:hover { background: ${borderColor}; color: ${textColor}; }
|
|
301
|
+
.ihooman-input-btn.send { background: ${isDark ? bgTertiary : `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`}; color: ${isDark ? mutedColor : 'white'}; ${isDark ? `border: 1px solid ${borderColor};` : ''} }
|
|
302
|
+
.ihooman-input-btn.send:hover { ${isDark ? `background: ${accentColor}; border-color: ${accentColor}; color: white;` : 'opacity: 0.9;'} }
|
|
303
|
+
.ihooman-input-btn.send:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
325
304
|
.ihooman-input-btn svg { width: 16px; height: 16px; }
|
|
326
|
-
.ihooman-input:disabled { opacity: 0.
|
|
327
|
-
.ihooman-input-btn.attach:disabled { opacity: 0.
|
|
305
|
+
.ihooman-input:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
306
|
+
.ihooman-input-btn.attach:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
328
307
|
.ihooman-file-input { display: none; }
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
332
|
-
.ihooman-powered a { color: ${textSecondary}; text-decoration: none; font-weight: 500; }
|
|
333
|
-
.ihooman-powered a:hover { color: ${textColor}; }
|
|
334
|
-
|
|
335
|
-
/* ── Escalation ── */
|
|
308
|
+
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
|
|
309
|
+
.ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
|
|
336
310
|
.ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
|
337
311
|
.ihooman-escalation-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
|
|
338
|
-
|
|
339
|
-
/* ── Status Bar ── */
|
|
340
|
-
.ihooman-status-bar { padding: 8px 16px; text-align: center; font-size: 12px; display: none; font-weight: 500; }
|
|
312
|
+
.ihooman-status-bar { padding: 10px 16px; text-align: center; font-size: 13px; display: none; }
|
|
341
313
|
.ihooman-status-bar.show { display: block; }
|
|
342
|
-
.ihooman-status-bar.waiting { background:
|
|
343
|
-
.ihooman-status-bar.connected { background:
|
|
344
|
-
|
|
345
|
-
/* ── Chat View ── */
|
|
314
|
+
.ihooman-status-bar.waiting { background: #fef3c7; color: #92400e; }
|
|
315
|
+
.ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
|
|
346
316
|
.ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
|
|
347
317
|
.ihooman-chat-view.hidden { display: none; }
|
|
348
|
-
|
|
349
|
-
/* ── Ticket View ── */
|
|
350
|
-
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 14px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
318
|
+
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
351
319
|
.ihooman-ticket-view.show { display: flex; }
|
|
352
|
-
.ihooman-ticket-title { font-size:
|
|
353
|
-
.ihooman-ticket-subtitle { font-size: 13px; color: ${
|
|
354
|
-
.ihooman-ticket-input { padding:
|
|
355
|
-
.ihooman-ticket-input:focus { border-color: ${
|
|
320
|
+
.ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
321
|
+
.ihooman-ticket-subtitle { font-size: 13px; color: ${mutedColor}; margin: 0; }
|
|
322
|
+
.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; }
|
|
323
|
+
.ihooman-ticket-input:focus { border-color: ${primaryColor}; }
|
|
356
324
|
.ihooman-ticket-input::placeholder { color: ${mutedColor}; }
|
|
357
325
|
.ihooman-ticket-textarea { min-height: 100px; resize: vertical; }
|
|
358
|
-
.ihooman-ticket-submit { display: flex; align-items: center; justify-content: center; padding:
|
|
359
|
-
.ihooman-ticket-submit:hover { opacity: 0.
|
|
360
|
-
.ihooman-ticket-submit:disabled { opacity: 0.
|
|
361
|
-
.ihooman-ticket-back { display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; color: ${
|
|
362
|
-
.ihooman-ticket-back:hover { background: ${
|
|
363
|
-
|
|
364
|
-
/* ── History View ── */
|
|
326
|
+
.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; }
|
|
327
|
+
.ihooman-ticket-submit:hover { opacity: 0.9; }
|
|
328
|
+
.ihooman-ticket-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
329
|
+
.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; }
|
|
330
|
+
.ihooman-ticket-back:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
365
331
|
.ihooman-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
|
|
366
332
|
.ihooman-history-view.show { display: flex; }
|
|
367
333
|
.ihooman-history-header { padding: 12px 16px; border-bottom: 1px solid ${borderColor}; display: flex; justify-content: space-between; align-items: center; }
|
|
368
|
-
.ihooman-history-title { font-size:
|
|
369
|
-
.ihooman-history-new { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: ${
|
|
370
|
-
.ihooman-history-new:hover { opacity: 0.
|
|
334
|
+
.ihooman-history-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
335
|
+
.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; }
|
|
336
|
+
.ihooman-history-new:hover { opacity: 0.9; }
|
|
371
337
|
.ihooman-history-new svg { width: 12px; height: 12px; flex-shrink: 0; }
|
|
372
338
|
.ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
|
|
373
|
-
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
374
|
-
.ihooman-history-item:hover { background: ${
|
|
375
|
-
.ihooman-history-item.active { background: ${
|
|
339
|
+
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; background: ${bgColor}; }
|
|
340
|
+
.ihooman-history-item:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : '#f8fafc'}; }
|
|
341
|
+
.ihooman-history-item.active { background: ${isDark ? 'rgba(0, 174, 255, 0.1)' : '#eff6ff'}; border-color: ${primaryColor}; }
|
|
376
342
|
.ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
377
343
|
.ihooman-history-meta { font-size: 11px; color: ${mutedColor}; margin-top: 4px; display: flex; justify-content: space-between; }
|
|
378
|
-
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size:
|
|
379
|
-
|
|
380
|
-
/* ── Preset Questions ── */
|
|
381
|
-
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderSubtle}; }
|
|
344
|
+
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
|
|
345
|
+
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; background: ${bgColor}; border-top: ${isDark ? 'none' : `1px solid ${borderColor}`}; }
|
|
382
346
|
.ihooman-preset-questions:empty { display: none; }
|
|
383
347
|
.ihooman-preset-questions.hidden { display: none; }
|
|
384
|
-
|
|
385
|
-
/* ── Proactive Toast ── */
|
|
386
|
-
.ihooman-proactive-toast { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 84px' : 'top: 84px'}; max-width: 320px; padding: 16px; background: ${bgElevated}; border-radius: 14px; box-shadow: ${shadowLg}; z-index: ${(zIndex ?? 9999) - 2}; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s ease-out; border: 1px solid ${borderColor}; }
|
|
348
|
+
.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}; }
|
|
387
349
|
.ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
388
|
-
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px;
|
|
350
|
+
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; }
|
|
389
351
|
.ihooman-proactive-toast-actions { display: flex; gap: 8px; }
|
|
390
|
-
.ihooman-proactive-toast-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius:
|
|
391
|
-
.ihooman-proactive-toast-btn.primary { background: ${
|
|
392
|
-
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.
|
|
393
|
-
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${
|
|
394
|
-
.ihooman-proactive-toast-btn.secondary:hover { background: ${
|
|
395
|
-
|
|
396
|
-
/* ── Survey View ── */
|
|
397
|
-
.ihooman-survey-view { display: none; flex-direction: column; padding: 24px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
352
|
+
.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; }
|
|
353
|
+
.ihooman-proactive-toast-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; }
|
|
354
|
+
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.9; }
|
|
355
|
+
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; }
|
|
356
|
+
.ihooman-proactive-toast-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
357
|
+
.ihooman-survey-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
398
358
|
.ihooman-survey-view.show { display: flex; }
|
|
399
|
-
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center;
|
|
359
|
+
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; }
|
|
400
360
|
.ihooman-survey-stars { display: flex; gap: 8px; }
|
|
401
|
-
.ihooman-survey-star { width:
|
|
361
|
+
.ihooman-survey-star { width: 40px; height: 40px; cursor: pointer; color: ${mutedColor}; transition: all 0.2s; }
|
|
402
362
|
.ihooman-survey-star:hover, .ihooman-survey-star.active { color: #fbbf24; transform: scale(1.1); }
|
|
403
363
|
.ihooman-survey-star svg { width: 100%; height: 100%; }
|
|
404
|
-
.ihooman-survey-comment { width: 100%; padding: 12px; border: 1px solid ${borderColor}; border-radius:
|
|
405
|
-
.ihooman-survey-
|
|
406
|
-
.ihooman-survey-submit
|
|
407
|
-
.ihooman-survey-submit:hover { opacity: 0.85; }
|
|
364
|
+
.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}; }
|
|
365
|
+
.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; }
|
|
366
|
+
.ihooman-survey-submit:hover { opacity: 0.9; }
|
|
408
367
|
.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; }
|
|
409
368
|
.ihooman-survey-skip:hover { color: ${textColor}; }
|
|
410
|
-
|
|
411
|
-
/* ── Feedback ── */
|
|
412
|
-
.ihooman-feedback-btns { display: flex; gap: 4px; margin-top: 4px; }
|
|
369
|
+
.ihooman-feedback-btns { display: flex; gap: 6px; margin-top: 6px; }
|
|
413
370
|
.ihooman-feedback-btn svg { width: 12px; height: 12px; }
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
.ihooman-carousel {
|
|
417
|
-
.ihooman-carousel::-webkit-scrollbar { height: 3px; }
|
|
418
|
-
.ihooman-carousel::-webkit-scrollbar-thumb { background: ${isDark ? '#27272a' : '#d4d4d8'}; border-radius: 2px; }
|
|
419
|
-
.ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgElevated}; }
|
|
371
|
+
.ihooman-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
|
|
372
|
+
.ihooman-carousel::-webkit-scrollbar { height: 4px; }
|
|
373
|
+
.ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgColor}; }
|
|
420
374
|
.ihooman-carousel-card img { width: 100%; height: 120px; object-fit: cover; }
|
|
421
375
|
.ihooman-carousel-card-content { padding: 12px; }
|
|
422
|
-
.ihooman-carousel-card-title { font-size:
|
|
423
|
-
.ihooman-carousel-card-desc { font-size: 12px; color: ${
|
|
376
|
+
.ihooman-carousel-card-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
|
|
377
|
+
.ihooman-carousel-card-desc { font-size: 12px; color: ${mutedColor}; margin-bottom: 8px; }
|
|
424
378
|
.ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
|
|
425
|
-
|
|
426
|
-
/* ── Quick Replies ── */
|
|
427
379
|
.ihooman-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
428
|
-
|
|
429
|
-
/* ── Responsive ── */
|
|
430
|
-
@media (max-width: 480px) { .ihooman-window { width: calc(100vw - 16px); height: calc(100vh - 100px); min-height: 400px; max-height: calc(100vh - 100px); left: 8px; right: 8px; bottom: 80px; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } .ihooman-proactive-toast { left: 8px; right: 8px; max-width: none; } }
|
|
380
|
+
@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; } }
|
|
431
381
|
`;
|
|
432
382
|
}
|
|
433
383
|
// ============================================================================
|
|
@@ -467,9 +417,9 @@
|
|
|
467
417
|
<div class="ihooman-window" role="dialog" aria-label="Chat window">
|
|
468
418
|
<div class="ihooman-container">
|
|
469
419
|
<div class="ihooman-header">
|
|
470
|
-
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="
|
|
420
|
+
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="Support">` : icons.bot}</div>
|
|
471
421
|
<div class="ihooman-header-info">
|
|
472
|
-
<div class="ihooman-header-title">${escapeHtml(config.title || '
|
|
422
|
+
<div class="ihooman-header-title">${escapeHtml(config.title || 'Chat Support')}</div>
|
|
473
423
|
<div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
|
|
474
424
|
</div>
|
|
475
425
|
<div class="ihooman-header-actions">
|
|
@@ -491,7 +441,7 @@
|
|
|
491
441
|
</div>
|
|
492
442
|
</div>
|
|
493
443
|
<div class="ihooman-ticket-view">
|
|
494
|
-
<h4 class="ihooman-ticket-title"
|
|
444
|
+
<h4 class="ihooman-ticket-title">📝 Submit a Ticket</h4>
|
|
495
445
|
<p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
|
|
496
446
|
<input class="ihooman-ticket-input" id="ihooman-ticket-name" placeholder="Your name" required>
|
|
497
447
|
<input class="ihooman-ticket-input" id="ihooman-ticket-email" type="email" placeholder="Your email" required>
|
|
@@ -1082,7 +1032,7 @@
|
|
|
1082
1032
|
return;
|
|
1083
1033
|
const typing = document.createElement('div');
|
|
1084
1034
|
typing.className = 'ihooman-typing';
|
|
1085
|
-
typing.innerHTML = `<
|
|
1035
|
+
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>`;
|
|
1086
1036
|
elements.messages.appendChild(typing);
|
|
1087
1037
|
elements.messages.scrollTop = elements.messages.scrollHeight;
|
|
1088
1038
|
}
|
|
@@ -1104,7 +1054,7 @@
|
|
|
1104
1054
|
function enableInput() {
|
|
1105
1055
|
if (elements.input) {
|
|
1106
1056
|
elements.input.disabled = false;
|
|
1107
|
-
elements.input.placeholder = config.placeholder || '
|
|
1057
|
+
elements.input.placeholder = config.placeholder || 'Type a message...';
|
|
1108
1058
|
}
|
|
1109
1059
|
if (elements.sendBtn)
|
|
1110
1060
|
elements.sendBtn.disabled = !elements.input?.value.trim();
|
|
@@ -1728,10 +1678,11 @@
|
|
|
1728
1678
|
default: return 500;
|
|
1729
1679
|
}
|
|
1730
1680
|
}
|
|
1681
|
+
// Default button styles - MUST match client-dashboard/src/components/widget/ButtonStylingEditor.tsx
|
|
1731
1682
|
const DEFAULT_BUTTON_STYLES = {
|
|
1732
1683
|
primary: {
|
|
1733
|
-
backgroundColor: '#
|
|
1734
|
-
textColor: '#
|
|
1684
|
+
backgroundColor: '#00aeff',
|
|
1685
|
+
textColor: '#ffffff',
|
|
1735
1686
|
borderColor: 'transparent',
|
|
1736
1687
|
borderWidth: 0,
|
|
1737
1688
|
borderRadius: 8,
|
|
@@ -1742,8 +1693,8 @@
|
|
|
1742
1693
|
},
|
|
1743
1694
|
secondary: {
|
|
1744
1695
|
backgroundColor: 'transparent',
|
|
1745
|
-
textColor: '#
|
|
1746
|
-
borderColor: '#
|
|
1696
|
+
textColor: '#6b7280',
|
|
1697
|
+
borderColor: '#e5e7eb',
|
|
1747
1698
|
borderWidth: 1,
|
|
1748
1699
|
borderRadius: 8,
|
|
1749
1700
|
paddingVertical: 8,
|
|
@@ -1752,9 +1703,9 @@
|
|
|
1752
1703
|
fontWeight: 'medium',
|
|
1753
1704
|
},
|
|
1754
1705
|
presetQuestions: {
|
|
1755
|
-
backgroundColor: '
|
|
1756
|
-
textColor: '#
|
|
1757
|
-
borderColor: '
|
|
1706
|
+
backgroundColor: 'rgba(0, 174, 255, 0.1)',
|
|
1707
|
+
textColor: '#00aeff',
|
|
1708
|
+
borderColor: 'rgba(0, 174, 255, 0.2)',
|
|
1758
1709
|
borderWidth: 1,
|
|
1759
1710
|
borderRadius: 20,
|
|
1760
1711
|
paddingVertical: 6,
|
|
@@ -1763,9 +1714,9 @@
|
|
|
1763
1714
|
fontWeight: 'medium',
|
|
1764
1715
|
},
|
|
1765
1716
|
quickReplies: {
|
|
1766
|
-
backgroundColor: '#
|
|
1767
|
-
textColor: '#
|
|
1768
|
-
borderColor: '#
|
|
1717
|
+
backgroundColor: '#f3f4f6',
|
|
1718
|
+
textColor: '#374151',
|
|
1719
|
+
borderColor: '#e5e7eb',
|
|
1769
1720
|
borderWidth: 1,
|
|
1770
1721
|
borderRadius: 16,
|
|
1771
1722
|
paddingVertical: 5,
|
|
@@ -1775,8 +1726,8 @@
|
|
|
1775
1726
|
},
|
|
1776
1727
|
feedback: {
|
|
1777
1728
|
backgroundColor: 'transparent',
|
|
1778
|
-
textColor: '#
|
|
1779
|
-
borderColor: '#
|
|
1729
|
+
textColor: '#9ca3af',
|
|
1730
|
+
borderColor: '#e5e7eb',
|
|
1780
1731
|
borderWidth: 1,
|
|
1781
1732
|
borderRadius: 6,
|
|
1782
1733
|
paddingVertical: 4,
|
|
@@ -1785,19 +1736,19 @@
|
|
|
1785
1736
|
fontWeight: 'medium',
|
|
1786
1737
|
},
|
|
1787
1738
|
headerActions: {
|
|
1788
|
-
backgroundColor: '
|
|
1789
|
-
textColor: '#
|
|
1739
|
+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
1740
|
+
textColor: '#ffffff',
|
|
1790
1741
|
borderColor: 'transparent',
|
|
1791
1742
|
borderWidth: 0,
|
|
1792
|
-
borderRadius:
|
|
1743
|
+
borderRadius: 6,
|
|
1793
1744
|
paddingVertical: 6,
|
|
1794
1745
|
paddingHorizontal: 6,
|
|
1795
1746
|
fontSize: 14,
|
|
1796
1747
|
fontWeight: 'medium',
|
|
1797
1748
|
},
|
|
1798
1749
|
escalation: {
|
|
1799
|
-
backgroundColor: '#
|
|
1800
|
-
textColor: '#
|
|
1750
|
+
backgroundColor: '#00aeff',
|
|
1751
|
+
textColor: '#ffffff',
|
|
1801
1752
|
borderColor: 'transparent',
|
|
1802
1753
|
borderWidth: 0,
|
|
1803
1754
|
borderRadius: 8,
|
|
@@ -1807,21 +1758,21 @@
|
|
|
1807
1758
|
fontWeight: 'medium',
|
|
1808
1759
|
},
|
|
1809
1760
|
cardActions: {
|
|
1810
|
-
backgroundColor: '#
|
|
1811
|
-
textColor: '#
|
|
1761
|
+
backgroundColor: '#00aeff',
|
|
1762
|
+
textColor: '#ffffff',
|
|
1812
1763
|
borderColor: 'transparent',
|
|
1813
1764
|
borderWidth: 0,
|
|
1814
|
-
borderRadius:
|
|
1765
|
+
borderRadius: 6,
|
|
1815
1766
|
paddingVertical: 6,
|
|
1816
1767
|
paddingHorizontal: 12,
|
|
1817
1768
|
fontSize: 12,
|
|
1818
1769
|
fontWeight: 'medium',
|
|
1819
1770
|
},
|
|
1820
1771
|
toggleButton: {
|
|
1821
|
-
backgroundColor: '#
|
|
1822
|
-
textColor: '#
|
|
1823
|
-
borderColor: '
|
|
1824
|
-
borderWidth:
|
|
1772
|
+
backgroundColor: '#00aeff',
|
|
1773
|
+
textColor: '#ffffff',
|
|
1774
|
+
borderColor: 'transparent',
|
|
1775
|
+
borderWidth: 0,
|
|
1825
1776
|
borderRadius: 30,
|
|
1826
1777
|
paddingVertical: 0,
|
|
1827
1778
|
paddingHorizontal: 0,
|
|
@@ -1830,7 +1781,7 @@
|
|
|
1830
1781
|
},
|
|
1831
1782
|
attachButton: {
|
|
1832
1783
|
backgroundColor: 'transparent',
|
|
1833
|
-
textColor: '#
|
|
1784
|
+
textColor: '#6b7280',
|
|
1834
1785
|
borderColor: 'transparent',
|
|
1835
1786
|
borderWidth: 0,
|
|
1836
1787
|
borderRadius: 8,
|