@ihoomanai/chat-widget 4.0.1 → 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.esm.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
|
|
@@ -10,20 +10,20 @@
|
|
|
10
10
|
* Enhanced with professional features
|
|
11
11
|
* @version 3.0.0
|
|
12
12
|
*/
|
|
13
|
-
const VERSION = '4.0.
|
|
13
|
+
const VERSION = '4.0.2';
|
|
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,21 @@ 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
|
|
213
|
-
const
|
|
214
|
-
const borderColor = isDark ? '#27272a' : '#e4e4e7';
|
|
215
|
-
const borderSubtle = isDark ? '#1f1f23' : '#f4f4f5';
|
|
216
|
-
const inputBg = isDark ? '#141414' : '#fafafa';
|
|
217
|
-
const hoverBg = isDark ? '#1c1c1c' : '#f4f4f5';
|
|
218
|
-
const accentColor = isDark ? '#ededed' : '#18181b';
|
|
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 ? '#1a1a2e' : '#ffffff';
|
|
208
|
+
const textColor = isDark ? '#e4e4e7' : '#1f2937';
|
|
209
|
+
const mutedColor = isDark ? '#71717a' : '#6b7280';
|
|
210
|
+
const borderColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)';
|
|
211
|
+
const inputBg = isDark ? '#16162a' : '#f9fafb';
|
|
212
|
+
const messageBgUser = `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
|
|
213
|
+
const messageBgBot = isDark ? '#252542' : '#f1f5f9';
|
|
224
214
|
const positionRight = config.position?.includes('right') ?? true;
|
|
225
215
|
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
216
|
return `
|
|
228
217
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
229
218
|
:host { all: initial; }
|
|
230
|
-
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.
|
|
219
|
+
.ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
|
|
231
220
|
button {
|
|
232
221
|
font-family: inherit;
|
|
233
222
|
font-size: 100%;
|
|
@@ -240,188 +229,144 @@ function generateStyles() {
|
|
|
240
229
|
cursor: pointer;
|
|
241
230
|
outline: none;
|
|
242
231
|
}
|
|
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; }
|
|
232
|
+
.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; }
|
|
233
|
+
.ihooman-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0, 174, 255, 0.45); }
|
|
234
|
+
.ihooman-toggle:active { transform: scale(0.95); }
|
|
235
|
+
.ihooman-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 50%; }
|
|
236
|
+
.ihooman-toggle svg { width: 26px; height: 26px; color: white; transition: transform 0.3s ease, opacity 0.2s ease; position: relative; z-index: 1; }
|
|
237
|
+
.ihooman-toggle .chat-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.2s ease; }
|
|
238
|
+
.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
239
|
.ihooman-toggle.open .chat-icon { transform: rotate(90deg) scale(0); opacity: 0; }
|
|
253
240
|
.ihooman-toggle.open .close-icon { transform: rotate(0) scale(1); opacity: 1; }
|
|
254
|
-
.ihooman-pulse {
|
|
255
|
-
|
|
241
|
+
.ihooman-pulse { position: absolute; inset: 0; border-radius: 50%; background: ${primaryColor}; animation: ihooman-pulse 2s ease-out infinite; }
|
|
242
|
+
@keyframes ihooman-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
|
|
243
|
+
.ihooman-toggle.open .ihooman-pulse { display: none; }
|
|
244
|
+
.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
245
|
.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; }
|
|
246
|
+
.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
247
|
.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}; }
|
|
248
|
+
.ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; flex-shrink: 0; }
|
|
249
|
+
.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); }
|
|
250
|
+
.ihooman-container > * { position: relative; z-index: 1; }
|
|
251
|
+
.ihooman-header { padding: 16px 20px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
|
|
252
|
+
.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; }
|
|
253
|
+
.ihooman-header-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
|
|
254
|
+
.ihooman-header-avatar svg { width: 22px; height: 22px; }
|
|
270
255
|
.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:
|
|
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; }
|
|
256
|
+
.ihooman-header-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
|
|
257
|
+
.ihooman-header-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }
|
|
258
|
+
.ihooman-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
|
|
259
|
+
.ihooman-status-dot.offline { background: #f59e0b; }
|
|
260
|
+
.ihooman-header-actions { display: flex; gap: 8px; }
|
|
261
|
+
.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; }
|
|
262
|
+
.ihooman-header-btn:hover { background: rgba(255,255,255,0.25); }
|
|
263
|
+
.ihooman-header-btn svg { width: 14px; height: 14px; }
|
|
264
|
+
.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; }
|
|
265
|
+
.ihooman-messages::-webkit-scrollbar { width: 6px; }
|
|
283
266
|
.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(
|
|
267
|
+
.ihooman-messages::-webkit-scrollbar-thumb { background: ${borderColor}; border-radius: 3px; }
|
|
268
|
+
.ihooman-message { display: flex; flex-direction: column; max-width: 85%; animation: ihooman-fadeIn 0.3s ease; }
|
|
269
|
+
@keyframes ihooman-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
287
270
|
.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 ── */
|
|
271
|
+
.ihooman-message.bot { align-self: flex-start; align-items: flex-start; }
|
|
272
|
+
.ihooman-message-content { padding: 12px 16px; border-radius: 16px; word-wrap: break-word; }
|
|
273
|
+
.ihooman-message.user .ihooman-message-content { background: ${messageBgUser}; color: white; border-bottom-right-radius: 4px; }
|
|
274
|
+
.ihooman-message.bot .ihooman-message-content { background: ${messageBgBot}; color: ${textColor}; border-bottom-left-radius: 4px; }
|
|
275
|
+
.ihooman-message-content code { background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; }
|
|
276
|
+
.ihooman-message-time { font-size: 11px; color: ${mutedColor}; margin-top: 4px; padding: 0 4px; }
|
|
277
|
+
.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; }
|
|
278
|
+
.ihooman-typing-dots { display: flex; gap: 4px; }
|
|
279
|
+
.ihooman-typing-dot { width: 8px; height: 8px; background: ${mutedColor}; border-radius: 50%; animation: ihooman-typing 1.4s infinite; }
|
|
280
|
+
.ihooman-typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
281
|
+
.ihooman-typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
282
|
+
@keyframes ihooman-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
|
|
309
283
|
.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: ${
|
|
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.
|
|
284
|
+
.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; }
|
|
285
|
+
.ihooman-input-wrapper:focus-within { border-color: ${primaryColor}; box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.1); }
|
|
286
|
+
.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
287
|
.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.
|
|
288
|
+
.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}; }
|
|
289
|
+
.ihooman-input-btn:hover { background: ${borderColor}; color: ${textColor}; }
|
|
290
|
+
.ihooman-input-btn.send { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; }
|
|
291
|
+
.ihooman-input-btn.send:hover { opacity: 0.9; }
|
|
292
|
+
.ihooman-input-btn.send:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
319
293
|
.ihooman-input-btn svg { width: 16px; height: 16px; }
|
|
320
|
-
.ihooman-input:disabled { opacity: 0.
|
|
321
|
-
.ihooman-input-btn.attach:disabled { opacity: 0.
|
|
294
|
+
.ihooman-input:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
295
|
+
.ihooman-input-btn.attach:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
322
296
|
.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 ── */
|
|
297
|
+
.ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
|
|
298
|
+
.ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
|
|
330
299
|
.ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
|
331
300
|
.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; }
|
|
301
|
+
.ihooman-status-bar { padding: 10px 16px; text-align: center; font-size: 13px; display: none; }
|
|
335
302
|
.ihooman-status-bar.show { display: block; }
|
|
336
|
-
.ihooman-status-bar.waiting { background:
|
|
337
|
-
.ihooman-status-bar.connected { background:
|
|
338
|
-
|
|
339
|
-
/* ── Chat View ── */
|
|
303
|
+
.ihooman-status-bar.waiting { background: #fef3c7; color: #92400e; }
|
|
304
|
+
.ihooman-status-bar.connected { background: #dcfce7; color: #166534; }
|
|
340
305
|
.ihooman-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
|
|
341
306
|
.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; }
|
|
307
|
+
.ihooman-ticket-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; overflow-y: auto; min-height: 0; }
|
|
345
308
|
.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: ${
|
|
309
|
+
.ihooman-ticket-title { font-size: 18px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
310
|
+
.ihooman-ticket-subtitle { font-size: 13px; color: ${mutedColor}; margin: 0; }
|
|
311
|
+
.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; }
|
|
312
|
+
.ihooman-ticket-input:focus { border-color: ${primaryColor}; }
|
|
350
313
|
.ihooman-ticket-input::placeholder { color: ${mutedColor}; }
|
|
351
314
|
.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 ── */
|
|
315
|
+
.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; }
|
|
316
|
+
.ihooman-ticket-submit:hover { opacity: 0.9; }
|
|
317
|
+
.ihooman-ticket-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
318
|
+
.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; }
|
|
319
|
+
.ihooman-ticket-back:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
359
320
|
.ihooman-history-view { display: none; flex-direction: column; flex: 1; overflow: hidden; background: ${bgColor}; }
|
|
360
321
|
.ihooman-history-view.show { display: flex; }
|
|
361
322
|
.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.
|
|
323
|
+
.ihooman-history-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin: 0; }
|
|
324
|
+
.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; }
|
|
325
|
+
.ihooman-history-new:hover { opacity: 0.9; }
|
|
365
326
|
.ihooman-history-new svg { width: 12px; height: 12px; flex-shrink: 0; }
|
|
366
327
|
.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: ${
|
|
328
|
+
.ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; background: ${bgColor}; }
|
|
329
|
+
.ihooman-history-item:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : '#f8fafc'}; }
|
|
330
|
+
.ihooman-history-item.active { background: ${isDark ? 'rgba(0, 174, 255, 0.1)' : '#eff6ff'}; border-color: ${primaryColor}; }
|
|
370
331
|
.ihooman-history-preview { font-size: 13px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
371
332
|
.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}; }
|
|
333
|
+
.ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
|
|
334
|
+
.ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderColor}; }
|
|
376
335
|
.ihooman-preset-questions:empty { display: none; }
|
|
377
336
|
.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}; }
|
|
337
|
+
.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
338
|
.ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
382
|
-
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px;
|
|
339
|
+
.ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; }
|
|
383
340
|
.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; }
|
|
341
|
+
.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; }
|
|
342
|
+
.ihooman-proactive-toast-btn.primary { background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; }
|
|
343
|
+
.ihooman-proactive-toast-btn.primary:hover { opacity: 0.9; }
|
|
344
|
+
.ihooman-proactive-toast-btn.secondary { background: transparent; color: ${mutedColor}; border: 1px solid ${borderColor}; }
|
|
345
|
+
.ihooman-proactive-toast-btn.secondary:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}; }
|
|
346
|
+
.ihooman-survey-view { display: none; flex-direction: column; padding: 20px; gap: 16px; background: ${bgColor}; flex: 1; align-items: center; justify-content: center; }
|
|
392
347
|
.ihooman-survey-view.show { display: flex; }
|
|
393
|
-
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center;
|
|
348
|
+
.ihooman-survey-question { font-size: 16px; font-weight: 600; color: ${textColor}; text-align: center; }
|
|
394
349
|
.ihooman-survey-stars { display: flex; gap: 8px; }
|
|
395
|
-
.ihooman-survey-star { width:
|
|
350
|
+
.ihooman-survey-star { width: 40px; height: 40px; cursor: pointer; color: ${mutedColor}; transition: all 0.2s; }
|
|
396
351
|
.ihooman-survey-star:hover, .ihooman-survey-star.active { color: #fbbf24; transform: scale(1.1); }
|
|
397
352
|
.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; }
|
|
353
|
+
.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}; }
|
|
354
|
+
.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; }
|
|
355
|
+
.ihooman-survey-submit:hover { opacity: 0.9; }
|
|
402
356
|
.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
357
|
.ihooman-survey-skip:hover { color: ${textColor}; }
|
|
404
|
-
|
|
405
|
-
/* ── Feedback ── */
|
|
406
|
-
.ihooman-feedback-btns { display: flex; gap: 4px; margin-top: 4px; }
|
|
358
|
+
.ihooman-feedback-btns { display: flex; gap: 6px; margin-top: 6px; }
|
|
407
359
|
.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}; }
|
|
360
|
+
.ihooman-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
|
|
361
|
+
.ihooman-carousel::-webkit-scrollbar { height: 4px; }
|
|
362
|
+
.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
363
|
.ihooman-carousel-card img { width: 100%; height: 120px; object-fit: cover; }
|
|
415
364
|
.ihooman-carousel-card-content { padding: 12px; }
|
|
416
|
-
.ihooman-carousel-card-title { font-size:
|
|
417
|
-
.ihooman-carousel-card-desc { font-size: 12px; color: ${
|
|
365
|
+
.ihooman-carousel-card-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
|
|
366
|
+
.ihooman-carousel-card-desc { font-size: 12px; color: ${mutedColor}; margin-bottom: 8px; }
|
|
418
367
|
.ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
|
|
419
|
-
|
|
420
|
-
/* ── Quick Replies ── */
|
|
421
368
|
.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; } }
|
|
369
|
+
@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
370
|
`;
|
|
426
371
|
}
|
|
427
372
|
// ============================================================================
|
|
@@ -461,9 +406,9 @@ function createWidget() {
|
|
|
461
406
|
<div class="ihooman-window" role="dialog" aria-label="Chat window">
|
|
462
407
|
<div class="ihooman-container">
|
|
463
408
|
<div class="ihooman-header">
|
|
464
|
-
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="
|
|
409
|
+
<div class="ihooman-header-avatar">${config.avatarUrl ? `<img src="${escapeHtml(config.avatarUrl)}" alt="Support">` : icons.bot}</div>
|
|
465
410
|
<div class="ihooman-header-info">
|
|
466
|
-
<div class="ihooman-header-title">${escapeHtml(config.title || '
|
|
411
|
+
<div class="ihooman-header-title">${escapeHtml(config.title || 'Chat Support')}</div>
|
|
467
412
|
<div class="ihooman-header-status"><span class="ihooman-status-dot"></span><span class="ihooman-status-text">Online</span></div>
|
|
468
413
|
</div>
|
|
469
414
|
<div class="ihooman-header-actions">
|
|
@@ -485,7 +430,7 @@ function createWidget() {
|
|
|
485
430
|
</div>
|
|
486
431
|
</div>
|
|
487
432
|
<div class="ihooman-ticket-view">
|
|
488
|
-
<h4 class="ihooman-ticket-title"
|
|
433
|
+
<h4 class="ihooman-ticket-title">📝 Submit a Ticket</h4>
|
|
489
434
|
<p class="ihooman-ticket-subtitle">We'll get back to you via email</p>
|
|
490
435
|
<input class="ihooman-ticket-input" id="ihooman-ticket-name" placeholder="Your name" required>
|
|
491
436
|
<input class="ihooman-ticket-input" id="ihooman-ticket-email" type="email" placeholder="Your email" required>
|
|
@@ -1076,7 +1021,7 @@ function showTyping() {
|
|
|
1076
1021
|
return;
|
|
1077
1022
|
const typing = document.createElement('div');
|
|
1078
1023
|
typing.className = 'ihooman-typing';
|
|
1079
|
-
typing.innerHTML = `<
|
|
1024
|
+
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
1025
|
elements.messages.appendChild(typing);
|
|
1081
1026
|
elements.messages.scrollTop = elements.messages.scrollHeight;
|
|
1082
1027
|
}
|
|
@@ -1098,7 +1043,7 @@ function disableInput() {
|
|
|
1098
1043
|
function enableInput() {
|
|
1099
1044
|
if (elements.input) {
|
|
1100
1045
|
elements.input.disabled = false;
|
|
1101
|
-
elements.input.placeholder = config.placeholder || '
|
|
1046
|
+
elements.input.placeholder = config.placeholder || 'Type a message...';
|
|
1102
1047
|
}
|
|
1103
1048
|
if (elements.sendBtn)
|
|
1104
1049
|
elements.sendBtn.disabled = !elements.input?.value.trim();
|
|
@@ -1722,10 +1667,11 @@ function getFontWeightValue(weight) {
|
|
|
1722
1667
|
default: return 500;
|
|
1723
1668
|
}
|
|
1724
1669
|
}
|
|
1670
|
+
// Default button styles - MUST match client-dashboard/src/components/widget/ButtonStylingEditor.tsx
|
|
1725
1671
|
const DEFAULT_BUTTON_STYLES = {
|
|
1726
1672
|
primary: {
|
|
1727
|
-
backgroundColor: '#
|
|
1728
|
-
textColor: '#
|
|
1673
|
+
backgroundColor: '#00aeff',
|
|
1674
|
+
textColor: '#ffffff',
|
|
1729
1675
|
borderColor: 'transparent',
|
|
1730
1676
|
borderWidth: 0,
|
|
1731
1677
|
borderRadius: 8,
|
|
@@ -1736,8 +1682,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1736
1682
|
},
|
|
1737
1683
|
secondary: {
|
|
1738
1684
|
backgroundColor: 'transparent',
|
|
1739
|
-
textColor: '#
|
|
1740
|
-
borderColor: '#
|
|
1685
|
+
textColor: '#6b7280',
|
|
1686
|
+
borderColor: '#e5e7eb',
|
|
1741
1687
|
borderWidth: 1,
|
|
1742
1688
|
borderRadius: 8,
|
|
1743
1689
|
paddingVertical: 8,
|
|
@@ -1746,9 +1692,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1746
1692
|
fontWeight: 'medium',
|
|
1747
1693
|
},
|
|
1748
1694
|
presetQuestions: {
|
|
1749
|
-
backgroundColor: '
|
|
1750
|
-
textColor: '#
|
|
1751
|
-
borderColor: '
|
|
1695
|
+
backgroundColor: 'rgba(0, 174, 255, 0.1)',
|
|
1696
|
+
textColor: '#00aeff',
|
|
1697
|
+
borderColor: 'rgba(0, 174, 255, 0.2)',
|
|
1752
1698
|
borderWidth: 1,
|
|
1753
1699
|
borderRadius: 20,
|
|
1754
1700
|
paddingVertical: 6,
|
|
@@ -1757,9 +1703,9 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1757
1703
|
fontWeight: 'medium',
|
|
1758
1704
|
},
|
|
1759
1705
|
quickReplies: {
|
|
1760
|
-
backgroundColor: '#
|
|
1761
|
-
textColor: '#
|
|
1762
|
-
borderColor: '#
|
|
1706
|
+
backgroundColor: '#f3f4f6',
|
|
1707
|
+
textColor: '#374151',
|
|
1708
|
+
borderColor: '#e5e7eb',
|
|
1763
1709
|
borderWidth: 1,
|
|
1764
1710
|
borderRadius: 16,
|
|
1765
1711
|
paddingVertical: 5,
|
|
@@ -1769,8 +1715,8 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1769
1715
|
},
|
|
1770
1716
|
feedback: {
|
|
1771
1717
|
backgroundColor: 'transparent',
|
|
1772
|
-
textColor: '#
|
|
1773
|
-
borderColor: '#
|
|
1718
|
+
textColor: '#9ca3af',
|
|
1719
|
+
borderColor: '#e5e7eb',
|
|
1774
1720
|
borderWidth: 1,
|
|
1775
1721
|
borderRadius: 6,
|
|
1776
1722
|
paddingVertical: 4,
|
|
@@ -1779,19 +1725,19 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1779
1725
|
fontWeight: 'medium',
|
|
1780
1726
|
},
|
|
1781
1727
|
headerActions: {
|
|
1782
|
-
backgroundColor: '
|
|
1783
|
-
textColor: '#
|
|
1728
|
+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
1729
|
+
textColor: '#ffffff',
|
|
1784
1730
|
borderColor: 'transparent',
|
|
1785
1731
|
borderWidth: 0,
|
|
1786
|
-
borderRadius:
|
|
1732
|
+
borderRadius: 6,
|
|
1787
1733
|
paddingVertical: 6,
|
|
1788
1734
|
paddingHorizontal: 6,
|
|
1789
1735
|
fontSize: 14,
|
|
1790
1736
|
fontWeight: 'medium',
|
|
1791
1737
|
},
|
|
1792
1738
|
escalation: {
|
|
1793
|
-
backgroundColor: '#
|
|
1794
|
-
textColor: '#
|
|
1739
|
+
backgroundColor: '#00aeff',
|
|
1740
|
+
textColor: '#ffffff',
|
|
1795
1741
|
borderColor: 'transparent',
|
|
1796
1742
|
borderWidth: 0,
|
|
1797
1743
|
borderRadius: 8,
|
|
@@ -1801,21 +1747,21 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1801
1747
|
fontWeight: 'medium',
|
|
1802
1748
|
},
|
|
1803
1749
|
cardActions: {
|
|
1804
|
-
backgroundColor: '#
|
|
1805
|
-
textColor: '#
|
|
1750
|
+
backgroundColor: '#00aeff',
|
|
1751
|
+
textColor: '#ffffff',
|
|
1806
1752
|
borderColor: 'transparent',
|
|
1807
1753
|
borderWidth: 0,
|
|
1808
|
-
borderRadius:
|
|
1754
|
+
borderRadius: 6,
|
|
1809
1755
|
paddingVertical: 6,
|
|
1810
1756
|
paddingHorizontal: 12,
|
|
1811
1757
|
fontSize: 12,
|
|
1812
1758
|
fontWeight: 'medium',
|
|
1813
1759
|
},
|
|
1814
1760
|
toggleButton: {
|
|
1815
|
-
backgroundColor: '#
|
|
1816
|
-
textColor: '#
|
|
1817
|
-
borderColor: '
|
|
1818
|
-
borderWidth:
|
|
1761
|
+
backgroundColor: '#00aeff',
|
|
1762
|
+
textColor: '#ffffff',
|
|
1763
|
+
borderColor: 'transparent',
|
|
1764
|
+
borderWidth: 0,
|
|
1819
1765
|
borderRadius: 30,
|
|
1820
1766
|
paddingVertical: 0,
|
|
1821
1767
|
paddingHorizontal: 0,
|
|
@@ -1824,7 +1770,7 @@ const DEFAULT_BUTTON_STYLES = {
|
|
|
1824
1770
|
},
|
|
1825
1771
|
attachButton: {
|
|
1826
1772
|
backgroundColor: 'transparent',
|
|
1827
|
-
textColor: '#
|
|
1773
|
+
textColor: '#6b7280',
|
|
1828
1774
|
borderColor: 'transparent',
|
|
1829
1775
|
borderWidth: 0,
|
|
1830
1776
|
borderRadius: 8,
|