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