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