@chatwidgetai/chat-widget 0.1.5 → 0.1.7
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/README.md +7 -8
- package/dist/ai-chat-widget.umd.js +39580 -0
- package/dist/ai-chat-widget.umd.js.map +1 -0
- package/dist/api/client.d.ts +3 -1
- package/dist/api/client.d.ts.map +1 -1
- package/dist/components/ChatWidget.d.ts +1 -1
- package/dist/components/ChatWidget.d.ts.map +1 -1
- package/dist/components/ChatWindow.d.ts +1 -1
- package/dist/components/ChatWindow.d.ts.map +1 -1
- package/dist/components/Message.d.ts.map +1 -1
- package/dist/components/MessageInput.d.ts.map +1 -1
- package/dist/components/SuggestedQuestions.d.ts +2 -2
- package/dist/components/SuggestedQuestions.d.ts.map +1 -1
- package/dist/hooks/useChat.d.ts +0 -1
- package/dist/hooks/useChat.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +57 -318
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +57 -318
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +5 -122
- package/dist/types/index.d.ts.map +1 -1
- package/dist/umd.d.ts +0 -2
- package/dist/umd.d.ts.map +1 -1
- package/dist/utils/applyAppearanceStyles.d.ts +3 -3
- package/dist/utils/applyAppearanceStyles.d.ts.map +1 -1
- package/dist/utils/autoThemeDetector.d.ts.map +1 -1
- package/package.json +2 -1
package/dist/index.esm.js
CHANGED
|
@@ -4,6 +4,9 @@ import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
|
4
4
|
/**
|
|
5
5
|
* API Client for Widget Communication
|
|
6
6
|
* Handles all HTTP requests to the widget API
|
|
7
|
+
*
|
|
8
|
+
* Note: No API key required - widget ID acts as the access token.
|
|
9
|
+
* The widget ID should be kept confidential by the site owner.
|
|
7
10
|
*/
|
|
8
11
|
class ApiError extends Error {
|
|
9
12
|
constructor(message, status, options) {
|
|
@@ -88,7 +91,6 @@ class WidgetApiClient {
|
|
|
88
91
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/config`, {
|
|
89
92
|
method: 'GET',
|
|
90
93
|
headers: {
|
|
91
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
92
94
|
'Content-Type': 'application/json',
|
|
93
95
|
},
|
|
94
96
|
});
|
|
@@ -111,9 +113,6 @@ class WidgetApiClient {
|
|
|
111
113
|
const query = params.toString() ? `?${params.toString()}` : '';
|
|
112
114
|
const response = await fetch(`${baseUrl}${query}`, {
|
|
113
115
|
method: 'GET',
|
|
114
|
-
headers: {
|
|
115
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
116
|
-
},
|
|
117
116
|
});
|
|
118
117
|
if (!response.ok) {
|
|
119
118
|
throw await buildApiError(response, 'Failed to load conversation');
|
|
@@ -129,9 +128,6 @@ class WidgetApiClient {
|
|
|
129
128
|
formData.append('conversationId', conversationId);
|
|
130
129
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/upload`, {
|
|
131
130
|
method: 'POST',
|
|
132
|
-
headers: {
|
|
133
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
134
|
-
},
|
|
135
131
|
body: formData,
|
|
136
132
|
});
|
|
137
133
|
if (!response.ok) {
|
|
@@ -148,7 +144,6 @@ class WidgetApiClient {
|
|
|
148
144
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/chat`, {
|
|
149
145
|
method: 'POST',
|
|
150
146
|
headers: {
|
|
151
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
152
147
|
'Content-Type': 'application/json',
|
|
153
148
|
},
|
|
154
149
|
body: JSON.stringify({
|
|
@@ -171,7 +166,6 @@ class WidgetApiClient {
|
|
|
171
166
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/agent`, {
|
|
172
167
|
method: 'POST',
|
|
173
168
|
headers: {
|
|
174
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
175
169
|
'Content-Type': 'application/json',
|
|
176
170
|
},
|
|
177
171
|
body: JSON.stringify({
|
|
@@ -206,7 +200,6 @@ class WidgetApiClient {
|
|
|
206
200
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/feedback`, {
|
|
207
201
|
method: 'POST',
|
|
208
202
|
headers: {
|
|
209
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
210
203
|
'Content-Type': 'application/json',
|
|
211
204
|
},
|
|
212
205
|
body: JSON.stringify({
|
|
@@ -233,7 +226,6 @@ class WidgetApiClient {
|
|
|
233
226
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/validate`, {
|
|
234
227
|
method: 'POST',
|
|
235
228
|
headers: {
|
|
236
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
237
229
|
'Content-Type': 'application/json',
|
|
238
230
|
},
|
|
239
231
|
body: JSON.stringify({
|
|
@@ -402,7 +394,7 @@ function deriveErrorInfo(error) {
|
|
|
402
394
|
return { message: 'Something went wrong. Please try again.' };
|
|
403
395
|
}
|
|
404
396
|
function useChat(options) {
|
|
405
|
-
const { widgetId,
|
|
397
|
+
const { widgetId, apiUrl, onMessage, onError, } = options;
|
|
406
398
|
const [state, setState] = useState({
|
|
407
399
|
messages: [],
|
|
408
400
|
isOpen: false,
|
|
@@ -412,7 +404,7 @@ function useChat(options) {
|
|
|
412
404
|
conversationId: '', // Will be set after loading conversation
|
|
413
405
|
config: null,
|
|
414
406
|
});
|
|
415
|
-
const apiClient = useRef(new WidgetApiClient({ widgetId,
|
|
407
|
+
const apiClient = useRef(new WidgetApiClient({ widgetId, apiUrl }));
|
|
416
408
|
// Load configuration on mount and hydrate with existing conversation if available
|
|
417
409
|
useEffect(() => {
|
|
418
410
|
let isMounted = true;
|
|
@@ -423,8 +415,6 @@ function useChat(options) {
|
|
|
423
415
|
const config = await apiClient.current.getConfig();
|
|
424
416
|
console.log('[useChat] Config fetched successfully:', {
|
|
425
417
|
hasAppearance: !!config.appearance,
|
|
426
|
-
hasLightMode: !!config.appearance?.lightMode,
|
|
427
|
-
hasDarkMode: !!config.appearance?.darkMode,
|
|
428
418
|
});
|
|
429
419
|
const persistConversation = config.behavior.persistConversation ?? true;
|
|
430
420
|
let conversationId = '';
|
|
@@ -471,7 +461,7 @@ function useChat(options) {
|
|
|
471
461
|
console.log('[useChat] Effect cleanup, unmounting component');
|
|
472
462
|
isMounted = false;
|
|
473
463
|
};
|
|
474
|
-
}, [widgetId,
|
|
464
|
+
}, [widgetId, apiUrl, onError]);
|
|
475
465
|
// Save conversation when messages change
|
|
476
466
|
useEffect(() => {
|
|
477
467
|
const persistConversation = state.config?.behavior.persistConversation ?? true;
|
|
@@ -21366,8 +21356,8 @@ function defaultUrlTransform(value) {
|
|
|
21366
21356
|
}
|
|
21367
21357
|
|
|
21368
21358
|
// SVG Icon components
|
|
21369
|
-
const ThumbsUpIcon = () => (jsx("svg", { width: "
|
|
21370
|
-
const ThumbsDownIcon = () => (jsx("svg", { width: "
|
|
21359
|
+
const ThumbsUpIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) }));
|
|
21360
|
+
const ThumbsDownIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" }) }));
|
|
21371
21361
|
const CheckIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
21372
21362
|
const FeedbackButtons = ({ messageId, currentFeedback, onFeedback, }) => {
|
|
21373
21363
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
@@ -21448,7 +21438,7 @@ const Message = ({ message, showTimestamp = true, enableFeedback = true, showSou
|
|
|
21448
21438
|
const showTimestampForThis = showTimestamp && !isTool && !(isAssistant && !aiHasContent);
|
|
21449
21439
|
return (jsxs("div", { className: `ai-chat-message ${messageClass}`, children: [isTool ? (
|
|
21450
21440
|
// Render tool call completion as a standalone, non-bubble event
|
|
21451
|
-
renderTool()) : (jsx("div", { className: "ai-chat-message-content", children: isAssistant ? (renderAssistant()) : isSystem ? (jsxs("div", { className: "ai-chat-system-message", children: [jsx("span", { className: "system-icon", children: "\u2139\uFE0F" }), message.message.content] })) : (userMessage) })), showTimestampForThis && (
|
|
21441
|
+
renderTool()) : (jsx("div", { className: "ai-chat-message-content", children: isAssistant ? (renderAssistant()) : isSystem ? (jsxs("div", { className: "ai-chat-system-message", children: [jsx("span", { className: "system-icon", children: "\u2139\uFE0F" }), message.message.content] })) : (userMessage) })), showTimestampForThis && (jsxs("div", { className: "ai-chat-message-meta", children: [jsx("span", { className: "ai-chat-message-timestamp", children: formatTime(message.timestamp) }), isAssistant && aiHasContent && enableFeedback && onFeedback && (jsx(FeedbackButtons, { messageId: message.id, currentFeedback: message.feedback, onFeedback: onFeedback }))] })), isAssistant && aiHasContent && showSources && message.sources && message.sources.length > 0 && (jsx(Sources, { sources: message.sources, displayMode: sourceDisplayMode }))] }));
|
|
21452
21442
|
};
|
|
21453
21443
|
|
|
21454
21444
|
const TypingIndicator = () => {
|
|
@@ -21559,15 +21549,14 @@ const MessageInput = ({ onSend, placeholder = 'Type your message...', disabled =
|
|
|
21559
21549
|
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
|
21560
21550
|
}
|
|
21561
21551
|
};
|
|
21562
|
-
|
|
21552
|
+
const canSend = value.trim() || selectedFiles.length > 0;
|
|
21563
21553
|
return (jsxs("div", { className: `ai-chat-input-container ${separateFromChat ? 'separate' : 'integrated'}`, children: [selectedFiles.length > 0 && (jsx("div", { className: "ai-chat-file-list", children: selectedFiles.map((file, index) => {
|
|
21564
21554
|
const ext = getFileExtension(file.name);
|
|
21565
|
-
return (jsxs("div", { className: "ai-chat-file-item", children: [jsx("span", { className: "ai-chat-file-extension", children: ext }), jsxs("div", { className: "ai-chat-file-info", children: [jsx("span", { className: "ai-chat-file-name", children: file.name }), jsx("span", { className: "ai-chat-file-size", children: formatFileSize(file.size) })] }), jsx("button", { className: "ai-chat-file-remove", onClick: () => handleRemoveFile(index), "aria-label": "Remove file", children: "
|
|
21566
|
-
}) })), jsxs("div", { className: "ai-chat-input-wrapper", children: [enableFileUpload && (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileSelect, style: { display: 'none' }, multiple: true, accept: ALLOWED_EXTENSIONS.join(','), "aria-label": "File input" }), jsx("button", { className: "ai-chat-file-button", onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", children: jsx("svg", { width: "
|
|
21555
|
+
return (jsxs("div", { className: "ai-chat-file-item", children: [jsx("span", { className: "ai-chat-file-extension", children: ext }), jsxs("div", { className: "ai-chat-file-info", children: [jsx("span", { className: "ai-chat-file-name", children: file.name }), jsx("span", { className: "ai-chat-file-size", children: formatFileSize(file.size) })] }), jsx("button", { className: "ai-chat-file-remove", onClick: () => handleRemoveFile(index), "aria-label": "Remove file", children: jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }, index));
|
|
21556
|
+
}) })), jsxs("div", { className: "ai-chat-input-wrapper", children: [enableFileUpload && (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileSelect, style: { display: 'none' }, multiple: true, accept: ALLOWED_EXTENSIONS.join(','), "aria-label": "File input" }), jsx("button", { className: "ai-chat-file-button", onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", children: jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("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" }) }) })] })), jsx("textarea", { ref: textareaRef, className: "ai-chat-input", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Message input" }), jsx("button", { className: `ai-chat-send-button ${canSend ? 'active' : ''}`, onClick: handleSend, disabled: disabled || !canSend, "aria-label": "Send message", children: jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M22 2L11 13" }), jsx("path", { d: "M22 2L15 22L11 13L2 9L22 2Z" })] }) })] })] }));
|
|
21567
21557
|
};
|
|
21568
21558
|
|
|
21569
|
-
|
|
21570
|
-
const LightbulbIcon = () => (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M9 18h6" }), jsx("path", { d: "M10 22h4" }), jsx("path", { d: "M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" })] }));
|
|
21559
|
+
const ArrowIcon = () => (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) }));
|
|
21571
21560
|
const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
|
|
21572
21561
|
if (!questions || questions.length === 0) {
|
|
21573
21562
|
return null;
|
|
@@ -21577,27 +21566,25 @@ const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
|
|
|
21577
21566
|
if (validQuestions.length === 0) {
|
|
21578
21567
|
return null;
|
|
21579
21568
|
}
|
|
21580
|
-
return (
|
|
21569
|
+
return (jsx("div", { className: "ai-chat-suggested-questions", children: jsx("div", { className: "ai-chat-suggested-questions-list", children: validQuestions.slice(0, 3).map((question, index) => (jsxs("button", { className: "ai-chat-suggested-question", onClick: () => onQuestionClick(question), type: "button", children: [jsx("span", { className: "ai-chat-suggested-question-text", children: question }), jsx("span", { className: "ai-chat-suggested-question-icon", children: jsx(ArrowIcon, {}) })] }, index))) }) }));
|
|
21581
21570
|
};
|
|
21582
21571
|
|
|
21572
|
+
const MinimizeIcon = () => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M5 12h14" }) }));
|
|
21583
21573
|
const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessage, onClose, onFeedback, }) => {
|
|
21584
21574
|
console.log('[ChatWindow] Rendering ChatWindow component');
|
|
21585
21575
|
const appearance = config?.appearance;
|
|
21586
21576
|
const behavior = config?.behavior;
|
|
21577
|
+
// Use simplified appearance fields
|
|
21587
21578
|
const size = appearance?.size || 'medium';
|
|
21588
|
-
|
|
21589
|
-
|
|
21590
|
-
const
|
|
21591
|
-
|
|
21592
|
-
|
|
21593
|
-
|
|
21594
|
-
|
|
21595
|
-
|
|
21596
|
-
|
|
21597
|
-
const headerTitle = themeConfig?.header?.title ?? appearance?.header?.title ?? appearance?.companyName ?? 'AI Assistant';
|
|
21598
|
-
const welcomeTitle = themeConfig?.chat?.welcomeTitle ?? 'Welcome!';
|
|
21599
|
-
const welcomeMessage = themeConfig?.chat?.welcomeMessage ?? appearance?.welcomeMessage ?? '👋 Hi there! How can I assist you today?';
|
|
21600
|
-
const inputPlaceholder = themeConfig?.footer?.inputPlaceholder ?? appearance?.placeholder ?? 'Ask me anything...';
|
|
21579
|
+
const headerTitle = appearance?.headerTitle || 'AI Assistant';
|
|
21580
|
+
const welcomeMessage = appearance?.welcomeMessage || '👋 Hi there! How can I assist you today?';
|
|
21581
|
+
const inputPlaceholder = appearance?.placeholder || 'Ask me anything...';
|
|
21582
|
+
console.log('[ChatWindow] Appearance values:', {
|
|
21583
|
+
size,
|
|
21584
|
+
headerTitle,
|
|
21585
|
+
welcomeMessage,
|
|
21586
|
+
inputPlaceholder,
|
|
21587
|
+
});
|
|
21601
21588
|
// Track if suggested questions should be shown
|
|
21602
21589
|
const [showSuggestedQuestions, setShowSuggestedQuestions] = useState(true);
|
|
21603
21590
|
// Hide suggested questions after first user message
|
|
@@ -21616,241 +21603,26 @@ const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessag
|
|
|
21616
21603
|
setShowSuggestedQuestions(false);
|
|
21617
21604
|
onSendMessage(question);
|
|
21618
21605
|
};
|
|
21619
|
-
|
|
21606
|
+
const hasMessages = messages.length > 0;
|
|
21607
|
+
return (jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxs("div", { className: "ai-chat-header", children: [jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsx(MinimizeIcon, {}) })] }), error && (jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining"] })), isLimitReached && (jsx("div", { className: "ai-chat-error", role: "alert", children: "Message limit reached. Please start a new conversation." })), jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeMessage: welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && !hasMessages && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload })] }));
|
|
21620
21608
|
};
|
|
21621
21609
|
|
|
21622
|
-
/**
|
|
21623
|
-
* Convert shadow size to CSS box-shadow value
|
|
21624
|
-
*/
|
|
21625
|
-
function getShadowValue(size) {
|
|
21626
|
-
const shadows = {
|
|
21627
|
-
'none': 'none',
|
|
21628
|
-
'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
21629
|
-
'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
21630
|
-
'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
21631
|
-
'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
21632
|
-
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
21633
|
-
};
|
|
21634
|
-
return shadows[size] || shadows.none;
|
|
21635
|
-
}
|
|
21636
21610
|
/**
|
|
21637
21611
|
* Apply appearance configuration as CSS custom properties
|
|
21638
|
-
*
|
|
21612
|
+
* Simplified to only handle flat appearance schema
|
|
21639
21613
|
*
|
|
21640
21614
|
* @param appearance - Widget appearance configuration
|
|
21641
|
-
* @param theme - Current theme ('light' or 'dark')
|
|
21615
|
+
* @param theme - Current theme ('light' or 'dark') - kept for compatibility but not used for theme selection
|
|
21642
21616
|
*/
|
|
21643
|
-
function applyAppearanceStyles(appearance
|
|
21617
|
+
function applyAppearanceStyles(appearance) {
|
|
21644
21618
|
const styles = {};
|
|
21645
|
-
//
|
|
21646
|
-
if (appearance.
|
|
21647
|
-
styles
|
|
21648
|
-
}
|
|
21649
|
-
// Select the correct theme configuration
|
|
21650
|
-
const themeConfig = theme === 'dark' ? appearance.darkMode : appearance.lightMode;
|
|
21651
|
-
// If theme config exists and has required properties, use it
|
|
21652
|
-
if (themeConfig && themeConfig.button) {
|
|
21653
|
-
// ========================================================================
|
|
21654
|
-
// BUTTON APPEARANCE
|
|
21655
|
-
// ========================================================================
|
|
21656
|
-
const btn = themeConfig.button;
|
|
21657
|
-
if (btn.color)
|
|
21658
|
-
styles['--button-color'] = btn.color;
|
|
21659
|
-
if (btn.opacity !== undefined)
|
|
21660
|
-
styles['--button-opacity'] = btn.opacity.toString();
|
|
21661
|
-
if (btn.size)
|
|
21662
|
-
styles['--button-size'] = `${btn.size}px`;
|
|
21663
|
-
if (btn.icon)
|
|
21664
|
-
styles['--button-icon'] = btn.icon;
|
|
21665
|
-
if (btn.iconColor)
|
|
21666
|
-
styles['--button-icon-color'] = btn.iconColor;
|
|
21667
|
-
if (btn.borderRadius !== undefined)
|
|
21668
|
-
styles['--button-border-radius'] = `${btn.borderRadius}px`;
|
|
21669
|
-
if (btn.borderWidth !== undefined)
|
|
21670
|
-
styles['--button-border-width'] = `${btn.borderWidth}px`;
|
|
21671
|
-
if (btn.borderColor)
|
|
21672
|
-
styles['--button-border-color'] = btn.borderColor;
|
|
21673
|
-
if (btn.borderOpacity !== undefined)
|
|
21674
|
-
styles['--button-border-opacity'] = btn.borderOpacity.toString();
|
|
21675
|
-
if (btn.backdropBlur !== undefined)
|
|
21676
|
-
styles['--button-backdrop-blur'] = `${btn.backdropBlur}px`;
|
|
21677
|
-
if (btn.shadow)
|
|
21678
|
-
styles['--button-shadow'] = getShadowValue(btn.shadow);
|
|
21679
|
-
// ========================================================================
|
|
21680
|
-
// CARD/WINDOW APPEARANCE
|
|
21681
|
-
// ========================================================================
|
|
21682
|
-
const card = themeConfig.card;
|
|
21683
|
-
if (card.backgroundColor)
|
|
21684
|
-
styles['--card-background'] = card.backgroundColor;
|
|
21685
|
-
if (card.opacity !== undefined)
|
|
21686
|
-
styles['--card-opacity'] = card.opacity.toString();
|
|
21687
|
-
if (card.borderRadius !== undefined)
|
|
21688
|
-
styles['--card-border-radius'] = `${card.borderRadius}px`;
|
|
21689
|
-
if (card.borderWidth !== undefined)
|
|
21690
|
-
styles['--card-border-width'] = `${card.borderWidth}px`;
|
|
21691
|
-
if (card.borderColor) {
|
|
21692
|
-
styles['--card-border-color'] = card.borderColor;
|
|
21693
|
-
// Create rgba border color with opacity for box-shadow
|
|
21694
|
-
if (card.borderOpacity !== undefined) {
|
|
21695
|
-
const opacity = card.borderOpacity;
|
|
21696
|
-
// Convert hex to rgba
|
|
21697
|
-
const hex = card.borderColor.replace('#', '');
|
|
21698
|
-
const r = parseInt(hex.substring(0, 2), 16);
|
|
21699
|
-
const g = parseInt(hex.substring(2, 4), 16);
|
|
21700
|
-
const b = parseInt(hex.substring(4, 6), 16);
|
|
21701
|
-
styles['--card-border-color-rgba'] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
21702
|
-
}
|
|
21703
|
-
}
|
|
21704
|
-
if (card.borderOpacity !== undefined)
|
|
21705
|
-
styles['--card-border-opacity'] = card.borderOpacity.toString();
|
|
21706
|
-
if (card.backdropBlur !== undefined)
|
|
21707
|
-
styles['--card-backdrop-blur'] = `${card.backdropBlur}px`;
|
|
21708
|
-
if (card.shadow)
|
|
21709
|
-
styles['--card-shadow'] = getShadowValue(card.shadow);
|
|
21710
|
-
// ========================================================================
|
|
21711
|
-
// HEADER APPEARANCE
|
|
21712
|
-
// ========================================================================
|
|
21713
|
-
const header = themeConfig.header;
|
|
21714
|
-
if (header.backgroundColor)
|
|
21715
|
-
styles['--header-background'] = header.backgroundColor;
|
|
21716
|
-
if (header.opacity !== undefined)
|
|
21717
|
-
styles['--header-opacity'] = header.opacity.toString();
|
|
21718
|
-
if (header.textColor)
|
|
21719
|
-
styles['--header-text-color'] = header.textColor;
|
|
21720
|
-
if (header.borderBottomWidth !== undefined)
|
|
21721
|
-
styles['--header-border-bottom-width'] = `${header.borderBottomWidth}px`;
|
|
21722
|
-
if (header.borderBottomColor)
|
|
21723
|
-
styles['--header-border-bottom-color'] = header.borderBottomColor;
|
|
21724
|
-
if (header.borderBottomOpacity !== undefined)
|
|
21725
|
-
styles['--header-border-bottom-opacity'] = header.borderBottomOpacity.toString();
|
|
21726
|
-
// ========================================================================
|
|
21727
|
-
// CHAT APPEARANCE
|
|
21728
|
-
// ========================================================================
|
|
21729
|
-
const chat = themeConfig.chat;
|
|
21730
|
-
if (chat.backgroundColor)
|
|
21731
|
-
styles['--chat-background'] = chat.backgroundColor;
|
|
21732
|
-
if (chat.opacity !== undefined)
|
|
21733
|
-
styles['--chat-opacity'] = chat.opacity.toString();
|
|
21734
|
-
// Welcome message
|
|
21735
|
-
if (chat.welcomeColor)
|
|
21736
|
-
styles['--welcome-color'] = chat.welcomeColor;
|
|
21737
|
-
// Message bubbles
|
|
21738
|
-
if (chat.enableBubbles) {
|
|
21739
|
-
if (chat.bubbleUserColor)
|
|
21740
|
-
styles['--bubble-user-color'] = chat.bubbleUserColor;
|
|
21741
|
-
if (chat.bubbleUserOpacity !== undefined)
|
|
21742
|
-
styles['--bubble-user-opacity'] = chat.bubbleUserOpacity.toString();
|
|
21743
|
-
if (chat.bubbleAssistantColor)
|
|
21744
|
-
styles['--bubble-assistant-color'] = chat.bubbleAssistantColor;
|
|
21745
|
-
if (chat.bubbleAssistantOpacity !== undefined)
|
|
21746
|
-
styles['--bubble-assistant-opacity'] = chat.bubbleAssistantOpacity.toString();
|
|
21747
|
-
if (chat.bubbleBorderWidth !== undefined)
|
|
21748
|
-
styles['--bubble-border-width'] = `${chat.bubbleBorderWidth}px`;
|
|
21749
|
-
if (chat.bubbleBorderColor)
|
|
21750
|
-
styles['--bubble-border-color'] = chat.bubbleBorderColor;
|
|
21751
|
-
if (chat.bubbleBorderOpacity !== undefined)
|
|
21752
|
-
styles['--bubble-border-opacity'] = chat.bubbleBorderOpacity.toString();
|
|
21753
|
-
}
|
|
21754
|
-
else {
|
|
21755
|
-
// Plain text mode
|
|
21756
|
-
if (chat.textColor)
|
|
21757
|
-
styles['--message-text-color'] = chat.textColor;
|
|
21758
|
-
}
|
|
21759
|
-
// ========================================================================
|
|
21760
|
-
// FOOTER APPEARANCE
|
|
21761
|
-
// ========================================================================
|
|
21762
|
-
const footer = themeConfig.footer;
|
|
21763
|
-
// Only if separate from chat
|
|
21764
|
-
if (footer.separateFromChat) {
|
|
21765
|
-
if (footer.backgroundColor)
|
|
21766
|
-
styles['--footer-background'] = footer.backgroundColor;
|
|
21767
|
-
if (footer.opacity !== undefined)
|
|
21768
|
-
styles['--footer-opacity'] = footer.opacity.toString();
|
|
21769
|
-
if (footer.borderTopWidth !== undefined)
|
|
21770
|
-
styles['--footer-border-top-width'] = `${footer.borderTopWidth}px`;
|
|
21771
|
-
if (footer.borderTopColor)
|
|
21772
|
-
styles['--footer-border-top-color'] = footer.borderTopColor;
|
|
21773
|
-
if (footer.borderTopOpacity !== undefined)
|
|
21774
|
-
styles['--footer-border-top-opacity'] = footer.borderTopOpacity.toString();
|
|
21775
|
-
}
|
|
21776
|
-
// Backdrop blur (only when floating)
|
|
21777
|
-
if (!footer.separateFromChat && footer.backdropBlur !== undefined) {
|
|
21778
|
-
styles['--footer-backdrop-blur'] = `${footer.backdropBlur}px`;
|
|
21779
|
-
}
|
|
21780
|
-
// Input field
|
|
21781
|
-
if (footer.inputBackgroundColor)
|
|
21782
|
-
styles['--input-background'] = footer.inputBackgroundColor;
|
|
21783
|
-
if (footer.inputBackgroundOpacity !== undefined)
|
|
21784
|
-
styles['--input-background-opacity'] = footer.inputBackgroundOpacity.toString();
|
|
21785
|
-
if (footer.inputBorderRadius !== undefined)
|
|
21786
|
-
styles['--input-border-radius'] = `${footer.inputBorderRadius}px`;
|
|
21787
|
-
if (footer.inputBorderWidth !== undefined)
|
|
21788
|
-
styles['--input-border-width'] = `${footer.inputBorderWidth}px`;
|
|
21789
|
-
if (footer.inputBorderColor)
|
|
21790
|
-
styles['--input-border-color'] = footer.inputBorderColor;
|
|
21791
|
-
if (footer.inputBorderOpacity !== undefined)
|
|
21792
|
-
styles['--input-border-opacity'] = footer.inputBorderOpacity.toString();
|
|
21793
|
-
if (footer.inputShadow)
|
|
21794
|
-
styles['--input-shadow'] = getShadowValue(footer.inputShadow);
|
|
21795
|
-
// Send button
|
|
21796
|
-
if (footer.buttonBackgroundColor)
|
|
21797
|
-
styles['--send-button-background'] = footer.buttonBackgroundColor;
|
|
21798
|
-
if (footer.buttonOpacity !== undefined)
|
|
21799
|
-
styles['--send-button-opacity'] = footer.buttonOpacity.toString();
|
|
21800
|
-
if (footer.buttonBorderRadius !== undefined)
|
|
21801
|
-
styles['--send-button-border-radius'] = `${footer.buttonBorderRadius}px`;
|
|
21802
|
-
if (footer.buttonBorderWidth !== undefined)
|
|
21803
|
-
styles['--send-button-border-width'] = `${footer.buttonBorderWidth}px`;
|
|
21804
|
-
if (footer.buttonBorderColor)
|
|
21805
|
-
styles['--send-button-border-color'] = footer.buttonBorderColor;
|
|
21806
|
-
if (footer.buttonBorderOpacity !== undefined)
|
|
21807
|
-
styles['--send-button-border-opacity'] = footer.buttonBorderOpacity.toString();
|
|
21808
|
-
// ========================================================================
|
|
21809
|
-
// HOVER STATES
|
|
21810
|
-
// ========================================================================
|
|
21811
|
-
const hover = themeConfig.hover;
|
|
21812
|
-
if (hover.buttonScale !== undefined)
|
|
21813
|
-
styles['--hover-button-scale'] = hover.buttonScale.toString();
|
|
21814
|
-
if (hover.buttonOpacity !== undefined)
|
|
21815
|
-
styles['--hover-button-opacity'] = hover.buttonOpacity.toString();
|
|
21816
|
-
if (hover.inputBorderColor)
|
|
21817
|
-
styles['--hover-input-border-color'] = hover.inputBorderColor;
|
|
21818
|
-
if (hover.sendButtonOpacity !== undefined)
|
|
21819
|
-
styles['--hover-send-button-opacity'] = hover.sendButtonOpacity.toString();
|
|
21820
|
-
if (hover.closeButtonOpacity !== undefined)
|
|
21821
|
-
styles['--hover-close-button-opacity'] = hover.closeButtonOpacity.toString();
|
|
21822
|
-
// ========================================================================
|
|
21823
|
-
// ACTIVE STATES
|
|
21824
|
-
// ========================================================================
|
|
21825
|
-
const active = themeConfig.active;
|
|
21826
|
-
if (active.inputBorderColor)
|
|
21827
|
-
styles['--active-input-border-color'] = active.inputBorderColor;
|
|
21828
|
-
if (active.inputShadow)
|
|
21829
|
-
styles['--active-input-shadow'] = active.inputShadow;
|
|
21830
|
-
}
|
|
21831
|
-
else {
|
|
21832
|
-
// Fallback to legacy fields if no theme config
|
|
21833
|
-
if (appearance.primaryColor)
|
|
21834
|
-
styles['--primary-color'] = appearance.primaryColor;
|
|
21835
|
-
if (appearance.borderRadius !== undefined)
|
|
21836
|
-
styles['--border-radius'] = `${appearance.borderRadius}px`;
|
|
21837
|
-
// Legacy button
|
|
21838
|
-
if (appearance.button) {
|
|
21839
|
-
const btn = appearance.button;
|
|
21840
|
-
if (btn.color)
|
|
21841
|
-
styles['--button-color'] = btn.color;
|
|
21842
|
-
if (btn.size)
|
|
21843
|
-
styles['--button-size'] = `${btn.size}px`;
|
|
21844
|
-
if (btn.borderRadius !== undefined)
|
|
21845
|
-
styles['--button-border-radius'] = `${btn.borderRadius}px`;
|
|
21846
|
-
if (btn.borderWidth !== undefined)
|
|
21847
|
-
styles['--button-border-width'] = `${btn.borderWidth}px`;
|
|
21848
|
-
if (btn.borderColor)
|
|
21849
|
-
styles['--button-border-color'] = btn.borderColor;
|
|
21850
|
-
if (btn.opacity !== undefined)
|
|
21851
|
-
styles['--button-opacity'] = btn.opacity.toString();
|
|
21852
|
-
}
|
|
21619
|
+
// Apply primary color
|
|
21620
|
+
if (appearance.primaryColor) {
|
|
21621
|
+
styles['--primary-color'] = appearance.primaryColor;
|
|
21853
21622
|
}
|
|
21623
|
+
// Note: All legacy theme system code (lightMode, darkMode, ThemeAppearanceConfig)
|
|
21624
|
+
// has been removed. The widget now uses a simplified flat appearance schema.
|
|
21625
|
+
// Theme-specific styling is handled by generateThemeStyles() using auto-detected theme.
|
|
21854
21626
|
return styles;
|
|
21855
21627
|
}
|
|
21856
21628
|
|
|
@@ -22212,19 +21984,23 @@ function detectTheme(element) {
|
|
|
22212
21984
|
* Create a MutationObserver to watch for theme changes
|
|
22213
21985
|
*/
|
|
22214
21986
|
function createThemeObserver(element, callback) {
|
|
21987
|
+
let lastTheme = detectTheme(element);
|
|
22215
21988
|
const observer = new MutationObserver(() => {
|
|
22216
21989
|
const theme = detectTheme(element);
|
|
22217
|
-
|
|
21990
|
+
if (theme !== lastTheme) {
|
|
21991
|
+
lastTheme = theme;
|
|
21992
|
+
callback(theme);
|
|
21993
|
+
}
|
|
22218
21994
|
});
|
|
22219
21995
|
// Observe body for class/style changes (common for theme switching)
|
|
22220
21996
|
observer.observe(document.body, {
|
|
22221
21997
|
attributes: true,
|
|
22222
|
-
attributeFilter: ['class', 'style', 'data-theme'],
|
|
21998
|
+
attributeFilter: ['class', 'style', 'data-theme', 'data-bs-theme'],
|
|
22223
21999
|
});
|
|
22224
22000
|
// Also observe html element
|
|
22225
22001
|
observer.observe(document.documentElement, {
|
|
22226
22002
|
attributes: true,
|
|
22227
|
-
attributeFilter: ['class', 'style', 'data-theme'],
|
|
22003
|
+
attributeFilter: ['class', 'style', 'data-theme', 'data-bs-theme'],
|
|
22228
22004
|
});
|
|
22229
22005
|
return observer;
|
|
22230
22006
|
}
|
|
@@ -22256,35 +22032,24 @@ function styleInject(css, ref) {
|
|
|
22256
22032
|
}
|
|
22257
22033
|
}
|
|
22258
22034
|
|
|
22259
|
-
var css_248z$1 = ".ai-chat-widget{--primary-color:#07f;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--user-message-bg:var(--primary-color);--user-message-text:#fff;--assistant-message-bg:#f3f4f6;--assistant-message-text:#374151;--input-bg:#fff;--input-border:#d1d5db;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--button-color:#07f;--button-size:56px;--button-border-radius:28px;--button-border-width:0px;--button-border-color:#07f;--button-opacity:1;--button-backdrop-blur:0px;--button-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--card-background:#fff;--card-border-radius:16px;--card-border-width:0px;--card-border-color:#e5e7eb;--card-opacity:1;--card-backdrop-blur:0px;--card-shadow:0 25px 50px -12px rgba(0,0,0,.25);--header-background:#07f;--header-text-color:#fff;--header-font-size:18px;--header-border-bottom-width:0px;--header-border-bottom-color:#e5e7eb;--header-opacity:1;--header-backdrop-blur:0px;--chat-background:#fff;--chat-opacity:1;--chat-backdrop-blur:0px;--welcome-font-size:16px;--welcome-color:#1f2937;--welcome-opacity:1;--bubble-user-color:#07f;--bubble-assistant-color:#f3f4f6;--bubble-border-radius:16px;--bubble-border-width:0px;--bubble-border-color:#e5e7eb;--bubble-opacity:1;--typing-animation-color:#f3f4f6;--typing-animation-opacity:1;--typing-animation-border-width:0px;--typing-animation-border-color:#e5e7eb;--typing-animation-border-radius:16px;--footer-background:#fff;--footer-border-top-width:1px;--footer-border-top-color:#e5e7eb;--footer-opacity:1;--footer-backdrop-blur:0px;--input-background:#fff;--input-border-radius:24px;--input-border-width:1.5px;--input-border-color:#d1d5db;--input-opacity:1;--input-shadow:0 1px 2px 0 rgba(0,0,0,.05);--send-button-background:#07f;--send-button-border-radius:20px;--send-button-border-width:0px;--send-button-border-color:#07f;--send-button-opacity:1;--hover-button-scale:1.05;--hover-button-opacity:0.9;--hover-input-border-color:#9ca3af;--hover-send-button-opacity:0.85;--hover-close-button-opacity:1;--active-input-border-color:#07f;--active-input-shadow:0 0 0 3px rgba(0,119,255,.1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.ai-chat-widget.dark{--background-color:#001d3d;--text-color:#f9fafb;--border-color:#374151;--assistant-message-bg:#036;--assistant-message-text:#e5e7eb;--input-bg:#002855;--input-border:#374151}.ai-chat-widget.dark .ai-chat-message.system .ai-chat-message-content{background-color:#78350f;color:#fef3c7}.ai-chat-widget.dark .ai-chat-message.tool .ai-chat-message-content{background-color:#1e3a8a;color:#dbeafe}.ai-chat-widget-container{font-size:14px;line-height:1.5;position:fixed;z-index:9999}.ai-chat-widget-container.bottom-right{bottom:20px;right:20px}.ai-chat-widget-container.bottom-left{bottom:20px;left:20px}.ai-chat-widget-container.top-right{right:20px;top:20px}.ai-chat-widget-container.top-left{left:20px;top:20px}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--button-backdrop-blur));-webkit-backdrop-filter:blur(var(--button-backdrop-blur));background-color:var(--button-color);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);box-shadow:var(--button-shadow);color:#fff;cursor:pointer;display:flex;height:var(--button-size);justify-content:center;opacity:var(--button-opacity);transition:all .3s cubic-bezier(.4,0,.2,1);width:var(--button-size)}.ai-chat-button:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);opacity:var(--hover-button-opacity);transform:scale(var(--hover-button-scale))}.ai-chat-button:active{transform:scale(.95)}.ai-chat-button-svg{height:50%;min-height:24px;min-width:24px;width:50%}.ai-chat-button-icon{font-size:1.5em;line-height:1}.ai-chat-window{border-radius:var(--card-border-radius);box-shadow:0 0 0 var(--card-border-width) var(--card-border-color-rgba,var(--card-border-color)),var(--card-shadow);display:flex;flex-direction:column;overflow:hidden;position:absolute}.ai-chat-window>*{position:relative;z-index:1}.ai-chat-window:before{backdrop-filter:blur(var(--card-backdrop-blur));-webkit-backdrop-filter:blur(var(--card-backdrop-blur));background-color:var(--card-background);border-radius:var(--card-border-radius);content:\"\";inset:0;opacity:var(--card-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-widget-container.bottom-right .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);right:0}.ai-chat-widget-container.bottom-left .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);left:0}.ai-chat-widget-container.top-right .ai-chat-window{right:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-widget-container.top-left .ai-chat-window{left:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-button{z-index:1}.ai-chat-window{z-index:2}.ai-chat-window.size-small{height:500px;width:380px}.ai-chat-window.size-medium{height:650px;width:440px}.ai-chat-window.size-large{height:750px;width:520px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--input-border)}.ai-chat-message{display:flex;flex-direction:column;gap:4px}.ai-chat-message.user{align-items:flex-end}.ai-chat-message.assistant{align-items:flex-start}.ai-chat-message.system{align-items:center}.ai-chat-message.tool{align-items:flex-start}.ai-chat-message-content{word-wrap:break-word;border:var(--bubble-border-width) solid var(--bubble-border-color);border-radius:var(--bubble-border-radius);font-size:15px;line-height:1.6;max-width:80%;opacity:var(--bubble-opacity);padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background-color:var(--bubble-user-color);border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--user-message-text)}.ai-chat-message.assistant .ai-chat-message-content{background-color:var(--bubble-assistant-color,#f3f4f6);border:1px solid var(--bubble-border-color,rgba(0,0,0,.08));border-radius:var(--bubble-border-radius,16px);border-bottom-left-radius:4px;box-shadow:none;color:var(--assistant-message-text);max-width:85%;padding:12px 16px}.ai-chat-message.assistant .ai-chat-message-content p{margin:0 0 12px}.ai-chat-message.assistant .ai-chat-message-content p:last-child{margin-bottom:0}.ai-chat-message.assistant .ai-chat-message-content ol,.ai-chat-message.assistant .ai-chat-message-content ul{margin:8px 0 12px;padding-left:24px}.ai-chat-message.assistant .ai-chat-message-content li{line-height:1.5;margin:6px 0}.ai-chat-message.assistant .ai-chat-message-content li::marker{color:var(--primary-color,#07f)}.ai-chat-message.assistant .ai-chat-message-content ol li::marker{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content strong{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content em{font-style:italic}.ai-chat-message.assistant .ai-chat-message-content code{background-color:rgba(0,0,0,.06);border-radius:4px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:.9em;padding:2px 6px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content code{background-color:hsla(0,0%,100%,.1)}.ai-chat-message.assistant .ai-chat-message-content pre{background-color:rgba(0,0,0,.06);border-radius:8px;margin:8px 0 12px;overflow-x:auto;padding:12px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content pre{background-color:hsla(0,0%,100%,.08)}.ai-chat-message.assistant .ai-chat-message-content pre code{background-color:transparent;border-radius:0;padding:0}.ai-chat-message.assistant .ai-chat-message-content blockquote{border-left:3px solid var(--primary-color,#07f);color:var(--text-muted,#6b7280);margin:8px 0 12px;padding:4px 0 4px 12px}.ai-chat-message.assistant .ai-chat-message-content a{color:var(--primary-color,#07f);text-decoration:underline}.ai-chat-message.assistant .ai-chat-message-content a:hover{opacity:.8}.ai-chat-message.assistant .ai-chat-message-content h1,.ai-chat-message.assistant .ai-chat-message-content h2,.ai-chat-message.assistant .ai-chat-message-content h3,.ai-chat-message.assistant .ai-chat-message-content h4,.ai-chat-message.assistant .ai-chat-message-content h5,.ai-chat-message.assistant .ai-chat-message-content h6{font-weight:600;line-height:1.3;margin:16px 0 8px}.ai-chat-message.assistant .ai-chat-message-content h1:first-child,.ai-chat-message.assistant .ai-chat-message-content h2:first-child,.ai-chat-message.assistant .ai-chat-message-content h3:first-child{margin-top:0}.ai-chat-message.assistant .ai-chat-message-content hr{border:none;border-top:1px solid var(--border-color,#e5e7eb);margin:12px 0}.ai-chat-message.system .ai-chat-message-content{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:12px;font-style:italic;max-width:90%;text-align:center}.ai-chat-message.tool .ai-chat-message-content{background-color:#dbeafe;border-bottom-left-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:13px}.ai-chat-tool-indicators{display:flex;gap:6px;margin-top:6px}.tool-indicator{align-items:center;background:#dbeafe;border-radius:50%;color:#1e40af;display:inline-flex;height:18px;justify-content:center;overflow:hidden;position:relative;width:18px}.tool-indicator .icon{font-size:12px;line-height:1;z-index:1}.tool-indicator.started:after{animation:ai-spin 1s linear infinite;border:2px solid rgba(30,64,175,.25);border-radius:50%;border-top-color:#1e40af;content:\"\";inset:0;position:absolute}@keyframes ai-spin{to{transform:rotate(1turn)}}.ai-chat-tool-message{align-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:20px;color:#059669;display:inline-flex;gap:8px;padding:8px 14px}.ai-chat-widget.dark .ai-chat-tool-message{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.25);color:#34d399}.tool-finished{align-items:center;display:inline-flex;font-size:14px;justify-content:center}.tool-finished .tool-icon{display:none}.tool-finished .tool-check{font-size:14px;font-weight:700}.tool-name{font-size:13px;font-weight:500}.ai-chat-message-timestamp{color:rgba(0,0,0,.6);filter:invert(1) grayscale(1) contrast(1.2);font-size:11px;mix-blend-mode:difference;padding:0 4px}.ai-chat-welcome{color:var(--welcome-color);opacity:var(--welcome-opacity);padding:16px 0;text-align:left}.ai-chat-welcome-title{color:var(--primary-color);font-size:calc(var(--welcome-font-size)*1.25);font-weight:600;letter-spacing:-.01em;margin-bottom:8px}.ai-chat-welcome-text{color:var(--assistant-message-text);font-size:var(--welcome-font-size);line-height:1.6}.ai-chat-typing{align-items:center;background-color:var(--assistant-message-bg);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:80px;padding:10px 14px}.ai-chat-typing-dot{animation:typingBounce 1.4s infinite;background-color:#9ca3af;border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.2s}.ai-chat-typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.ai-chat-file-button{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-color);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.ai-chat-file-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.ai-chat-file-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.ai-chat-file-item{align-items:center;background-color:rgba(0,0,0,.05);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.ai-chat-file-extension{background-color:var(--primary-color);border-radius:3px;color:#fff;display:inline-block;font-size:10px;font-weight:600;min-width:40px;padding:2px 6px;text-align:center;text-transform:uppercase}.ai-chat-file-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ai-chat-file-name{font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-file-size{color:var(--text-muted);font-size:10px;opacity:.7}.ai-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;opacity:.6;padding:0 4px;transition:opacity .2s}.ai-chat-file-remove:hover{opacity:1}.ai-chat-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ai-chat-message-attachment{align-items:center;background-color:rgba(0,0,0,.08);border-radius:4px;display:inline-flex;font-size:11px;gap:4px;padding:3px 8px}.ai-chat-attachment-icon{font-size:12px}.ai-chat-attachment-ext{background-color:var(--primary-color);border-radius:2px;color:#fff;display:inline-block;font-size:9px;font-weight:600;padding:1px 4px;text-transform:uppercase}.ai-chat-attachment-name{max-width:120px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-sources{background-color:rgba(0,0,0,.02);border-radius:6px;font-size:12px;margin-top:8px;overflow:hidden}.ai-chat-sources-toggle{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:6px;padding:8px 10px;text-align:left;transition:background-color .2s;width:100%}.ai-chat-sources-toggle:hover{background-color:rgba(0,0,0,.03)}.ai-chat-sources-icon{color:var(--text-muted);font-size:10px;transition:transform .2s}.ai-chat-sources-title{color:var(--text-color);flex:1;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.ai-chat-source-item{border-top:1px solid rgba(0,0,0,.05);color:#6b7280;display:flex;gap:8px;padding:8px 10px}.ai-chat-source-item:last-child{border-bottom:none}.ai-chat-source-number{color:var(--primary-color);flex-shrink:0;font-weight:600}.ai-chat-source-details{display:flex;flex:1;flex-direction:column;gap:4px}.ai-chat-source-score{color:#9ca3af;font-size:11px}.ai-chat-source-content{color:#6b7280;font-size:11px;font-style:italic;line-height:1.4}.ai-chat-source-metadata{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.ai-chat-source-meta-item{background-color:rgba(0,0,0,.05);border-radius:3px;color:#6b7280;font-size:10px;padding:2px 6px}.ai-chat-feedback{align-items:center;display:flex;gap:8px;margin-top:8px;min-height:32px}.ai-chat-feedback-button{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:16px;gap:4px;overflow:hidden;padding:6px 10px;position:relative;transition:all .2s ease}.ai-chat-feedback-button:hover:not(:disabled){background-color:rgba(0,0,0,.05);transform:scale(1.2)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.95)}.ai-chat-feedback-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-feedback-button.active{background-color:rgba(0,119,255,.1)}.ai-chat-feedback-submitted{align-items:center;animation:feedbackMorph .3s cubic-bezier(.34,1.56,.64,1);display:flex;gap:6px}.ai-chat-feedback-checkmark{animation:checkmarkPop .3s cubic-bezier(.34,1.56,.64,1);color:#10b981;font-size:16px;font-weight:700}.ai-chat-feedback-text{animation:textSlideIn .3s ease;color:#10b981;font-size:13px;font-weight:500}@keyframes feedbackMorph{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes checkmarkPop{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes textSlideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.ai-chat-error{align-items:flex-start;background-color:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:12px;color:#ef4444;display:flex;font-size:14px;font-weight:500;gap:10px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-error{background-color:rgba(239,68,68,.15);border-color:rgba(239,68,68,.25);color:#fca5a5}.ai-chat-error:before{align-items:center;background:rgba(239,68,68,.2);border-radius:50%;content:\"⚠\";display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:20px;justify-content:center;width:20px}.ai-chat-widget.dark .ai-chat-error:before{background:rgba(239,68,68,.25)}.ai-chat-warning{background-color:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:12px;color:#d97706;font-size:13px;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-warning{background-color:rgba(245,158,11,.15);border-color:rgba(245,158,11,.25);color:#fbbf24}.ai-chat-suggested-questions{margin-bottom:8px;padding:12px 16px}.ai-chat-suggested-questions-label{color:#6b7280;font-size:12px;font-weight:500;margin-bottom:8px}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:8px}.ai-chat-suggested-question{align-items:center;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.ai-chat-suggested-question:hover{background-color:#f3f4f6;border-color:var(--ai-chat-primary-color,#6366f1);box-shadow:0 2px 4px rgba(0,0,0,.05);transform:translateY(-1px)}.ai-chat-suggested-question:active{transform:translateY(0)}.ai-chat-suggested-question-icon{flex-shrink:0;font-size:16px}.ai-chat-suggested-question-text{flex:1;line-height:1.4}@media (max-width:480px){.ai-chat-window{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}.ai-chat-widget-container{bottom:20px!important;right:20px!important}.ai-chat-suggested-question{font-size:13px;padding:9px 10px}}.ai-chat-action-approval{background:linear-gradient(135deg,#07f,#001d3d);border-radius:16px;box-shadow:0 4px 12px rgba(0,119,255,.3);color:#fff;margin:16px;padding:16px}.ai-chat-action-approval-content{align-items:flex-start;display:flex;gap:12px;margin-bottom:16px}.ai-chat-action-approval-icon{align-items:center;background:hsla(0,0%,100%,.2);border-radius:8px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.ai-chat-action-approval-text{flex:1}.ai-chat-action-approval-title{font-size:15px;font-weight:600;margin-bottom:4px}.ai-chat-action-approval-description{font-size:13px;line-height:1.4;opacity:.95}.ai-chat-action-approval-buttons{display:flex;gap:8px;justify-content:flex-end}.ai-chat-action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.ai-chat-action-button:disabled{cursor:not-allowed;opacity:.6}.ai-chat-action-button-reject{background:hsla(0,0%,100%,.2);color:#fff}.ai-chat-action-button-reject:hover:not(:disabled){background:hsla(0,0%,100%,.3)}.ai-chat-action-button-approve{background:#fff;color:#07f}.ai-chat-action-button-approve:hover:not(:disabled){background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.ai-chat-action-spinner{animation:ai-chat-spin .6s linear infinite;border:2px solid rgba(0,119,255,.3);border-radius:50%;border-top-color:#07f;display:inline-block;height:14px;width:14px}@keyframes ai-chat-spin{to{transform:rotate(1turn)}}";
|
|
22035
|
+
var css_248z$1 = ".ai-chat-widget{--primary-color:#07f;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--user-message-bg:var(--primary-color);--user-message-text:#fff;--assistant-message-bg:#f3f4f6;--assistant-message-text:#374151;--input-bg:#fff;--input-border:#d1d5db;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--button-color:#07f;--button-size:56px;--button-border-radius:28px;--button-border-width:0px;--button-border-color:#07f;--button-opacity:1;--button-backdrop-blur:0px;--button-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--card-background:#fff;--card-border-radius:16px;--card-border-width:0px;--card-border-color:#e5e7eb;--card-opacity:1;--card-backdrop-blur:0px;--card-shadow:0 25px 50px -12px rgba(0,0,0,.25);--header-background:#07f;--header-text-color:#fff;--header-font-size:18px;--header-border-bottom-width:0px;--header-border-bottom-color:#e5e7eb;--header-opacity:1;--header-backdrop-blur:0px;--chat-background:#fff;--chat-opacity:1;--chat-backdrop-blur:0px;--welcome-font-size:16px;--welcome-color:#1f2937;--welcome-opacity:1;--bubble-user-color:#07f;--bubble-assistant-color:#f3f4f6;--bubble-border-radius:16px;--bubble-border-width:0px;--bubble-border-color:#e5e7eb;--bubble-opacity:1;--typing-animation-color:#f3f4f6;--typing-animation-opacity:1;--typing-animation-border-width:0px;--typing-animation-border-color:#e5e7eb;--typing-animation-border-radius:16px;--footer-background:#fff;--footer-border-top-width:1px;--footer-border-top-color:#e5e7eb;--footer-opacity:1;--footer-backdrop-blur:0px;--input-background:#fff;--input-border-radius:24px;--input-border-width:1.5px;--input-border-color:#d1d5db;--input-opacity:1;--input-shadow:0 1px 2px 0 rgba(0,0,0,.05);--send-button-background:#07f;--send-button-border-radius:20px;--send-button-border-width:0px;--send-button-border-color:#07f;--send-button-opacity:1;--hover-button-scale:1.05;--hover-button-opacity:0.9;--hover-input-border-color:#9ca3af;--hover-send-button-opacity:0.85;--hover-close-button-opacity:1;--active-input-border-color:#07f;--active-input-shadow:0 0 0 3px rgba(0,119,255,.1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.ai-chat-widget.dark{--background-color:#001d3d;--text-color:#f9fafb;--border-color:#374151;--assistant-message-bg:#036;--assistant-message-text:#e5e7eb;--input-bg:#002855;--input-border:#374151}.ai-chat-widget.dark .ai-chat-message.system .ai-chat-message-content{background-color:#78350f;color:#fef3c7}.ai-chat-widget.dark .ai-chat-message.tool .ai-chat-message-content{background-color:#1e3a8a;color:#dbeafe}.ai-chat-widget-container{font-size:14px;line-height:1.5;position:fixed;z-index:9999}.ai-chat-widget-container.bottom-right{bottom:20px;right:20px}.ai-chat-widget-container.bottom-left{bottom:20px;left:20px}.ai-chat-widget-container.top-right{right:20px;top:20px}.ai-chat-widget-container.top-left{left:20px;top:20px}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--button-backdrop-blur));-webkit-backdrop-filter:blur(var(--button-backdrop-blur));background-color:var(--button-color);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);box-shadow:var(--button-shadow);color:#fff;cursor:pointer;display:flex;height:var(--button-size);justify-content:center;opacity:var(--button-opacity);transition:all .3s cubic-bezier(.4,0,.2,1);width:var(--button-size)}.ai-chat-button:hover{opacity:.9}.ai-chat-button:active{opacity:.8}.ai-chat-button-svg{height:50%;min-height:24px;min-width:24px;width:50%}.ai-chat-button-icon{font-size:1.5em;line-height:1}.ai-chat-window{border-radius:var(--card-border-radius);box-shadow:0 0 0 var(--card-border-width) var(--card-border-color-rgba,var(--card-border-color)),var(--card-shadow);display:flex;flex-direction:column;overflow:hidden;position:absolute}.ai-chat-window>*{position:relative;z-index:1}.ai-chat-window:before{backdrop-filter:blur(var(--card-backdrop-blur));-webkit-backdrop-filter:blur(var(--card-backdrop-blur));background-color:var(--card-background);border-radius:var(--card-border-radius);content:\"\";inset:0;opacity:var(--card-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-widget-container.bottom-right .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);right:0}.ai-chat-widget-container.bottom-left .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);left:0}.ai-chat-widget-container.top-right .ai-chat-window{right:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-widget-container.top-left .ai-chat-window{left:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-button{z-index:1}.ai-chat-window{z-index:2}.ai-chat-window.size-small{height:500px;width:380px}.ai-chat-window.size-medium{height:650px;width:440px}.ai-chat-window.size-large{height:750px;width:520px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--input-border)}.ai-chat-message{display:flex;flex-direction:column;gap:4px}.ai-chat-message.user{align-items:flex-end}.ai-chat-message.assistant{align-items:flex-start}.ai-chat-message.system{align-items:center}.ai-chat-message.tool{align-items:flex-start}.ai-chat-message-content{word-wrap:break-word;border:var(--bubble-border-width) solid var(--bubble-border-color);border-radius:var(--bubble-border-radius);font-size:15px;line-height:1.6;max-width:80%;opacity:var(--bubble-opacity);padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background-color:var(--bubble-user-color);border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--user-message-text)}.ai-chat-message.assistant .ai-chat-message-content{background-color:var(--bubble-assistant-color,#f3f4f6);border:1px solid var(--bubble-border-color,rgba(0,0,0,.08));border-radius:var(--bubble-border-radius,16px);border-bottom-left-radius:4px;box-shadow:none;color:var(--assistant-message-text);max-width:85%;padding:12px 16px}.ai-chat-message.assistant .ai-chat-message-content p{margin:0 0 12px}.ai-chat-message.assistant .ai-chat-message-content p:last-child{margin-bottom:0}.ai-chat-message.assistant .ai-chat-message-content ol,.ai-chat-message.assistant .ai-chat-message-content ul{margin:8px 0 12px;padding-left:24px}.ai-chat-message.assistant .ai-chat-message-content li{line-height:1.5;margin:6px 0}.ai-chat-message.assistant .ai-chat-message-content li::marker{color:var(--primary-color,#07f)}.ai-chat-message.assistant .ai-chat-message-content ol li::marker{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content strong{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content em{font-style:italic}.ai-chat-message.assistant .ai-chat-message-content code{background-color:rgba(0,0,0,.06);border-radius:4px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:.9em;padding:2px 6px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content code{background-color:hsla(0,0%,100%,.1)}.ai-chat-message.assistant .ai-chat-message-content pre{background-color:rgba(0,0,0,.06);border-radius:8px;margin:8px 0 12px;overflow-x:auto;padding:12px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content pre{background-color:hsla(0,0%,100%,.08)}.ai-chat-message.assistant .ai-chat-message-content pre code{background-color:transparent;border-radius:0;padding:0}.ai-chat-message.assistant .ai-chat-message-content blockquote{border-left:3px solid var(--primary-color,#07f);color:var(--text-muted,#6b7280);margin:8px 0 12px;padding:4px 0 4px 12px}.ai-chat-message.assistant .ai-chat-message-content a{color:var(--primary-color,#07f);text-decoration:underline}.ai-chat-message.assistant .ai-chat-message-content a:hover{opacity:.8}.ai-chat-message.assistant .ai-chat-message-content h1,.ai-chat-message.assistant .ai-chat-message-content h2,.ai-chat-message.assistant .ai-chat-message-content h3,.ai-chat-message.assistant .ai-chat-message-content h4,.ai-chat-message.assistant .ai-chat-message-content h5,.ai-chat-message.assistant .ai-chat-message-content h6{font-weight:600;line-height:1.3;margin:16px 0 8px}.ai-chat-message.assistant .ai-chat-message-content h1:first-child,.ai-chat-message.assistant .ai-chat-message-content h2:first-child,.ai-chat-message.assistant .ai-chat-message-content h3:first-child{margin-top:0}.ai-chat-message.assistant .ai-chat-message-content hr{border:none;border-top:1px solid var(--border-color,#e5e7eb);margin:12px 0}.ai-chat-message.system .ai-chat-message-content{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:12px;font-style:italic;max-width:90%;text-align:center}.ai-chat-message.tool .ai-chat-message-content{background-color:#dbeafe;border-bottom-left-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:13px}.ai-chat-tool-indicators{display:flex;gap:6px;margin-top:6px}.tool-indicator{align-items:center;background:#dbeafe;border-radius:50%;color:#1e40af;display:inline-flex;height:18px;justify-content:center;overflow:hidden;position:relative;width:18px}.tool-indicator .icon{font-size:12px;line-height:1;z-index:1}.tool-indicator.started:after{animation:ai-spin 1s linear infinite;border:2px solid rgba(30,64,175,.25);border-radius:50%;border-top-color:#1e40af;content:\"\";inset:0;position:absolute}@keyframes ai-spin{to{transform:rotate(1turn)}}.ai-chat-tool-message{align-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:20px;color:#059669;display:inline-flex;gap:8px;padding:8px 14px}.ai-chat-widget.dark .ai-chat-tool-message{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.25);color:#34d399}.tool-finished{align-items:center;display:inline-flex;font-size:14px;justify-content:center}.tool-finished .tool-icon{display:none}.tool-finished .tool-check{font-size:14px;font-weight:700}.tool-name{font-size:13px;font-weight:500}.ai-chat-message-timestamp{color:rgba(0,0,0,.6);filter:invert(1) grayscale(1) contrast(1.2);mix-blend-mode:difference;padding:0 4px}.ai-chat-welcome{align-items:center;color:var(--welcome-color);display:flex;flex-direction:column;justify-content:center;min-height:200px;opacity:var(--welcome-opacity);padding:60px 32px 40px;text-align:center}.ai-chat-welcome-title{color:var(--primary-color);font-size:28px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}.ai-chat-welcome-text{color:var(--assistant-message-text);font-size:16px;line-height:1.6;max-width:280px;opacity:.7}.ai-chat-typing{align-items:center;background-color:var(--assistant-message-bg);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:80px;padding:10px 14px}.ai-chat-typing-dot{animation:typingBounce 1.4s infinite;background-color:#9ca3af;border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.2s}.ai-chat-typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.ai-chat-file-button{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-color);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.ai-chat-file-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.ai-chat-file-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.ai-chat-file-item{align-items:center;background-color:rgba(0,0,0,.05);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.ai-chat-file-extension{background-color:var(--primary-color);border-radius:3px;color:#fff;display:inline-block;font-size:10px;font-weight:600;min-width:40px;padding:2px 6px;text-align:center;text-transform:uppercase}.ai-chat-file-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ai-chat-file-name{font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-file-size{color:var(--text-muted);font-size:10px;opacity:.7}.ai-chat-file-remove{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;justify-content:center;opacity:.5;padding:4px;transition:opacity .15s ease}.ai-chat-file-remove:hover{opacity:1}.ai-chat-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ai-chat-message-attachment{align-items:center;background-color:rgba(0,0,0,.08);border-radius:4px;display:inline-flex;font-size:11px;gap:4px;padding:3px 8px}.ai-chat-attachment-icon{font-size:12px}.ai-chat-attachment-ext{background-color:var(--primary-color);border-radius:2px;color:#fff;display:inline-block;font-size:9px;font-weight:600;padding:1px 4px;text-transform:uppercase}.ai-chat-attachment-name{max-width:120px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-sources{background-color:rgba(0,0,0,.02);border-radius:6px;font-size:12px;margin-top:8px;overflow:hidden}.ai-chat-sources-toggle{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:6px;padding:8px 10px;text-align:left;transition:background-color .2s;width:100%}.ai-chat-sources-toggle:hover{background-color:rgba(0,0,0,.03)}.ai-chat-sources-icon{color:var(--text-muted);font-size:10px;transition:transform .2s}.ai-chat-sources-title{color:var(--text-color);flex:1;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.ai-chat-source-item{border-top:1px solid rgba(0,0,0,.05);color:#6b7280;display:flex;gap:8px;padding:8px 10px}.ai-chat-source-item:last-child{border-bottom:none}.ai-chat-source-number{color:var(--primary-color);flex-shrink:0;font-weight:600}.ai-chat-source-details{display:flex;flex:1;flex-direction:column;gap:4px}.ai-chat-source-score{color:#9ca3af;font-size:11px}.ai-chat-source-content{color:#6b7280;font-size:11px;font-style:italic;line-height:1.4}.ai-chat-source-metadata{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.ai-chat-source-meta-item{background-color:rgba(0,0,0,.05);border-radius:3px;color:#6b7280;font-size:10px;padding:2px 6px}.ai-chat-message-meta{align-items:center;display:inline-flex;gap:6px;height:20px}.ai-chat-message-timestamp{color:#71717a;font-size:11px;line-height:1}.ai-chat-feedback{gap:0}.ai-chat-feedback,.ai-chat-feedback-button{align-items:center;display:inline-flex;height:20px}.ai-chat-feedback-button{background:none!important;border:none;border-radius:0;color:#71717a;cursor:pointer;justify-content:center;padding:0 4px;transition:color .15s ease}.ai-chat-feedback-button:hover:not(:disabled){background:none!important;color:#52525b}.ai-chat-feedback-button:active:not(:disabled){opacity:.7}.ai-chat-feedback-button:disabled{cursor:not-allowed;opacity:.4}.ai-chat-feedback-button.active{background:none!important;color:var(--primary-color,#07f)}.ai-chat-feedback-submitted{align-items:center;animation:feedbackMorph .3s cubic-bezier(.34,1.56,.64,1);display:flex;gap:6px}.ai-chat-feedback-checkmark{animation:checkmarkPop .3s cubic-bezier(.34,1.56,.64,1);color:#10b981;font-size:16px;font-weight:700}.ai-chat-feedback-text{animation:textSlideIn .3s ease;color:#10b981;font-size:13px;font-weight:500}@keyframes feedbackMorph{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes checkmarkPop{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes textSlideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.ai-chat-error{align-items:flex-start;background-color:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:12px;color:#ef4444;display:flex;font-size:14px;font-weight:500;gap:10px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-error{background-color:rgba(239,68,68,.15);border-color:rgba(239,68,68,.25);color:#fca5a5}.ai-chat-error:before{align-items:center;background:rgba(239,68,68,.2);border-radius:50%;content:\"⚠\";display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:20px;justify-content:center;width:20px}.ai-chat-widget.dark .ai-chat-error:before{background:rgba(239,68,68,.25)}.ai-chat-warning{background-color:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:12px;color:#d97706;font-size:13px;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-warning{background-color:rgba(245,158,11,.15);border-color:rgba(245,158,11,.25);color:#fbbf24}.ai-chat-suggested-questions{bottom:80px;left:0;padding:0 20px 16px;position:absolute;right:0;z-index:5}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:8px}.ai-chat-suggested-question{align-items:center;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);color:#374151;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:12px;justify-content:space-between;padding:14px 16px;text-align:left;transition:all .15s ease;width:100%}.ai-chat-suggested-question:hover{background:#f9fafb;border-color:rgba(0,0,0,.12);box-shadow:0 2px 8px rgba(0,0,0,.06)}.ai-chat-suggested-question:active{transform:scale(.98)}.ai-chat-suggested-question-text{flex:1;line-height:1.4}.ai-chat-suggested-question-icon{color:var(--primary-color,#07f);flex-shrink:0;opacity:.7;transition:transform .15s ease,opacity .15s ease}.ai-chat-suggested-question:hover .ai-chat-suggested-question-icon{opacity:1;transform:translateX(3px)}@media (max-width:480px){.ai-chat-window{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}.ai-chat-widget-container{bottom:20px!important;right:20px!important}.ai-chat-suggested-question{font-size:13px;padding:9px 10px}}.ai-chat-action-approval{background:linear-gradient(135deg,#07f,#001d3d);border-radius:16px;box-shadow:0 4px 12px rgba(0,119,255,.3);color:#fff;margin:16px;padding:16px}.ai-chat-action-approval-content{align-items:flex-start;display:flex;gap:12px;margin-bottom:16px}.ai-chat-action-approval-icon{align-items:center;background:hsla(0,0%,100%,.2);border-radius:8px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.ai-chat-action-approval-text{flex:1}.ai-chat-action-approval-title{font-size:15px;font-weight:600;margin-bottom:4px}.ai-chat-action-approval-description{font-size:13px;line-height:1.4;opacity:.95}.ai-chat-action-approval-buttons{display:flex;gap:8px;justify-content:flex-end}.ai-chat-action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.ai-chat-action-button:disabled{cursor:not-allowed;opacity:.6}.ai-chat-action-button-reject{background:hsla(0,0%,100%,.2);color:#fff}.ai-chat-action-button-reject:hover:not(:disabled){background:hsla(0,0%,100%,.3)}.ai-chat-action-button-approve{background:#fff;color:#07f}.ai-chat-action-button-approve:hover:not(:disabled){background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.ai-chat-action-spinner{animation:ai-chat-spin .6s linear infinite;border:2px solid rgba(0,119,255,.3);border-radius:50%;border-top-color:#07f;display:inline-block;height:14px;width:14px}@keyframes ai-chat-spin{to{transform:rotate(1turn)}}";
|
|
22260
22036
|
styleInject(css_248z$1);
|
|
22261
22037
|
|
|
22262
|
-
var css_248z = ".ai-chat-widget{--glass-blur:20px;--glass-saturation:180%;--glass-opacity-light:0.72;--glass-opacity-dark:0.65;--glass-border-opacity:0.18;--shadow-glass:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08),inset 0 1px 0 hsla(0,0%,100%,.1);--shadow-button:0 4px 24px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.1);--shadow-elevated:0 24px 80px rgba(0,0,0,.2),0 8px 32px rgba(0,0,0,.12);--spring-bounce:cubic-bezier(0.34,1.56,0.64,1);--spring-smooth:cubic-bezier(0.4,0,0.2,1);--spring-snappy:cubic-bezier(0.2,0,0,1);--duration-fast:0.2s;--duration-normal:0.35s;--duration-slow:0.5s}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));background:linear-gradient(135deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,.1));background-color:var(--button-color);border:none;border-radius:50%;box-shadow:var(--shadow-button),inset 0 1px 1px hsla(0,0%,100%,.3),inset 0 -1px 1px rgba(0,0,0,.1);cursor:pointer;display:flex;height:var(--button-size,60px);justify-content:center;overflow:hidden;position:relative;transition:transform var(--duration-normal) var(--spring-bounce),box-shadow var(--duration-normal) var(--spring-smooth);width:var(--button-size,60px)}.ai-chat-button:before{background:linear-gradient(135deg,hsla(0,0%,100%,.4),transparent 50%,transparent);inset:0;opacity:.6;pointer-events:none}.ai-chat-button:after,.ai-chat-button:before{border-radius:50%;content:\"\";position:absolute}.ai-chat-button:after{background:radial-gradient(circle at center,hsla(0,0%,100%,.3) 0,transparent 70%);inset:-2px;opacity:0;transform:scale(.8);transition:opacity var(--duration-normal) var(--spring-smooth),transform var(--duration-normal) var(--spring-bounce)}.ai-chat-button:hover{box-shadow:0 8px 40px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.15),inset 0 1px 1px hsla(0,0%,100%,.4),inset 0 -1px 1px rgba(0,0,0,.1);transform:scale(1.08) translateY(-2px)}.ai-chat-button:hover:after{opacity:1;transform:scale(1)}.ai-chat-button:active{transform:scale(.95);transition-duration:.1s}.ai-chat-button-svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));height:26px;transition:transform var(--duration-normal) var(--spring-bounce);width:26px}.ai-chat-button:hover .ai-chat-button-svg{transform:scale(1.1)}.ai-chat-button.is-open .ai-chat-button-svg{transform:rotate(180deg)}.ai-chat-window{animation:windowOpen var(--duration-slow) var(--spring-bounce);backdrop-filter:blur(var(--card-backdrop-blur,24px)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--card-backdrop-blur,24px)) saturate(var(--glass-saturation));background:var(--card-background,hsla(0,0%,100%,.88));border:var(--card-border-width,1px) solid var(--card-border-color,rgba(0,0,0,.06));border-radius:var(--card-border-radius,28px);box-shadow:var(--card-shadow,0 25px 50px -12px rgba(0,0,0,.25));display:flex;flex-direction:column;overflow:hidden;position:absolute;transform-origin:bottom right}.ai-chat-widget.dark .ai-chat-window{background:var(--card-background,rgba(15,20,25,.92));border-color:var(--card-border-color,hsla(0,0%,100%,.06))}@keyframes windowOpen{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.ai-chat-window.closing{animation:windowClose var(--duration-normal) var(--spring-smooth) forwards}@keyframes windowClose{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(20px)}}.ai-chat-header{align-items:center;background:transparent;border-bottom:none;box-shadow:none;display:flex;justify-content:space-between;left:0;padding:16px 20px 12px;position:absolute;right:0;top:0;z-index:10}.ai-chat-header:before{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);content:\"\";height:70px;left:0;mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent);pointer-events:none;position:absolute;right:0;top:0;z-index:-1}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-title{font-size:18px;font-weight:700;letter-spacing:-.02em}.ai-chat-title,.ai-chat-widget.dark .ai-chat-title{color:var(--header-text-color,var(--primary-color,#07f))}.ai-chat-close-button{align-items:center;background:rgba(0,0,0,.05);border:none;border-radius:50%;color:#6b7280;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .2s ease;width:32px}.ai-chat-widget.dark .ai-chat-close-button{background:hsla(0,0%,100%,.08);color:#9ca3af}.ai-chat-close-button:hover{background:rgba(0,0,0,.08);transform:scale(1.05)}.ai-chat-widget.dark .ai-chat-close-button:hover{background:hsla(0,0%,100%,.12)}.ai-chat-close-button:active{transform:scale(.95)}.ai-chat-messages{-webkit-overflow-scrolling:touch;background:transparent;display:flex;flex:1;flex-direction:column;gap:12px;overflow-x:hidden;overflow-y:auto;padding:60px 20px 80px;position:relative;scroll-behavior:smooth}.ai-chat-messages::-webkit-scrollbar{width:4px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}.ai-chat-message{animation:messageSlideIn var(--duration-normal) var(--spring-bounce);display:flex;flex-direction:column;gap:4px}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.ai-chat-message-content{word-wrap:break-word;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.06),inset 0 1px 0 hsla(0,0%,100%,.1);font-size:15px;line-height:1.5;max-width:85%;padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background:linear-gradient(135deg,var(--bubble-user-color) 0,color-mix(in srgb,var(--bubble-user-color) 85%,#000) 100%);border-bottom-right-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.12),inset 0 1px 0 hsla(0,0%,100%,.2);color:var(--user-message-text,#fff);margin-left:auto}.ai-chat-message.assistant .ai-chat-message-content{background:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.05);border-bottom-left-radius:6px;color:var(--assistant-message-text,#1f2937)}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.08);color:#f0f0f0}.ai-chat-typing{align-items:center;animation:messageSlideIn var(--duration-normal) var(--spring-bounce);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.05);border-radius:20px;border-bottom-left-radius:6px;display:flex;gap:5px;max-width:70px;padding:14px 18px}.ai-chat-widget.dark .ai-chat-typing{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.08)}.ai-chat-typing-dot{animation:typingPulse 1.4s ease-in-out infinite;background:linear-gradient(135deg,var(--primary-color) 0,color-mix(in srgb,var(--primary-color) 70%,#000) 100%);border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.15s}.ai-chat-typing-dot:nth-child(3){animation-delay:.3s}@keyframes typingPulse{0%,60%,to{opacity:.4;transform:translateY(0) scale(1)}30%{opacity:1;transform:translateY(-6px) scale(1.1)}}.ai-chat-input-container{background:transparent;bottom:0;left:0;padding:0 20px 20px;position:absolute;right:0;z-index:10}.ai-chat-input-container:before{background:var(--card-background,#fff);bottom:0;content:\"\";height:calc(100% - 24px);left:0;position:absolute;right:0;z-index:-1}.ai-chat-widget.dark .ai-chat-input-container:before{background:var(--card-background,#1a1a2e)}.ai-chat-input-wrapper{align-items:center;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.04);display:flex;gap:0;padding:4px 4px 4px 16px;position:relative;z-index:5}.ai-chat-widget.dark .ai-chat-input-wrapper{background:#1a1f25;border-color:hsla(0,0%,100%,.15)}.ai-chat-input-wrapper:focus-within{border-color:var(--primary-color);box-shadow:inset 0 1px 3px rgba(0,0,0,.04),0 0 0 4px rgba(var(--primary-color-rgb,0,119,255),.15)}.ai-chat-input{background:transparent;border:none;color:var(--text-color);flex:1;font-family:inherit;font-size:14px;line-height:1.4;max-height:120px;min-height:20px;outline:none;padding:8px 0;resize:none}.ai-chat-input::placeholder{color:rgba(0,0,0,.4)}.ai-chat-widget.dark .ai-chat-input::placeholder{color:hsla(0,0%,100%,.4)}.ai-chat-send-button{align-items:center;background:linear-gradient(135deg,var(--send-button-background,var(--primary-color)) 0,color-mix(in srgb,var(--send-button-background,var(--primary-color)) 80%,#000) 100%);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.12);color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;padding:0;transition:all var(--duration-fast) var(--spring-bounce);width:32px}.ai-chat-send-button:hover:not(:disabled){box-shadow:0 6px 20px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.3);transform:scale(1.08)}.ai-chat-send-button:active:not(:disabled){transform:scale(.95)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.4;transform:none}.ai-chat-tool-message{align-items:center;animation:toolPulse 2s ease-in-out infinite;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(16,185,129,.08));border:1px solid rgba(16,185,129,.2);border-radius:16px;display:inline-flex;gap:10px;padding:10px 16px}@keyframes toolPulse{0%,to{box-shadow:0 0 0 0 rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}.tool-finished{align-items:center;animation:toolComplete .5s var(--spring-bounce);background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;color:#fff;display:inline-flex;height:28px;justify-content:center;position:relative;width:28px}@keyframes toolComplete{0%{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0deg)}}.tool-indicator{align-items:center;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.1));border-radius:50%;color:#3b82f6;display:inline-flex;height:24px;justify-content:center;position:relative;width:24px}.tool-indicator.started:after{animation:toolSpin .8s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#3b82f6;content:\"\";inset:-2px;position:absolute}@keyframes toolSpin{to{transform:rotate(1turn)}}.ai-chat-welcome{animation:welcomeFadeIn var(--duration-slow) var(--spring-smooth);padding:40px 24px;text-align:center}@keyframes welcomeFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ai-chat-welcome-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--primary-color) 0,color-mix(in srgb,var(--primary-color) 70%,#000) 100%);-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}.ai-chat-welcome-text{color:var(--text-color);font-size:15px;line-height:1.5;opacity:.7}.ai-chat-suggested-question{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.6);border:1px solid rgba(0,0,0,.06);border-radius:16px;color:var(--text-color);cursor:pointer;display:flex;font-size:14px;gap:10px;padding:12px 16px;text-align:left;transition:all var(--duration-fast) var(--spring-bounce);width:100%}.ai-chat-widget.dark .ai-chat-suggested-question{background:hsla(0,0%,100%,.08);border-color:hsla(0,0%,100%,.1)}.ai-chat-suggested-question:hover{background:rgba(var(--primary-color-rgb,0,119,255),.1);border-color:rgba(var(--primary-color-rgb,0,119,255),.3);transform:translateX(4px)}.ai-chat-suggested-question:active{transform:scale(.98)}.ai-chat-feedback-button{align-items:center;background:rgba(0,0,0,.04);border:none;border-radius:8px;cursor:pointer;display:flex;font-size:16px;gap:4px;padding:6px 10px;transition:all var(--duration-fast) var(--spring-bounce)}.ai-chat-feedback-button:hover:not(:disabled){background:rgba(0,0,0,.08);transform:scale(1.15)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.9)}.ai-chat-feedback-button.active{background:rgba(var(--primary-color-rgb,0,119,255),.15)}@media (max-width:480px){.ai-chat-window{animation:mobileSlideUp var(--duration-normal) var(--spring-smooth);border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}@keyframes mobileSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.ai-chat-header{padding-top:max(16px,env(safe-area-inset-top))}.ai-chat-input-container{padding-bottom:max(20px,env(safe-area-inset-bottom))}}";
|
|
22038
|
+
var css_248z = ".ai-chat-widget{--spring-bounce:cubic-bezier(0.34,1.56,0.64,1);--spring-smooth:cubic-bezier(0.4,0,0.2,1);--spring-snappy:cubic-bezier(0.2,0,0,1);--duration-fast:0.2s;--duration-normal:0.35s;--duration-slow:0.5s}.ai-chat-button{align-items:center;background:var(--button-color,var(--primary-color,#07f));border:none;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;display:flex;height:48px;justify-content:center;overflow:hidden;position:relative;transition:opacity .15s ease;width:48px}.ai-chat-button:hover{opacity:.9}.ai-chat-button:active{opacity:.8}.ai-chat-button-svg{height:20px;transition:transform .15s ease;width:20px}.ai-chat-button.is-open .ai-chat-button-svg{transform:rotate(0deg)}.ai-chat-window{animation:windowOpen var(--duration-slow) var(--spring-bounce);background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);display:flex;flex-direction:column;overflow:hidden;position:absolute;transform-origin:bottom right}.ai-chat-widget.dark .ai-chat-window{background:#18181b;border-color:#27272a}@keyframes windowOpen{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.ai-chat-window.closing{animation:windowClose var(--duration-normal) var(--spring-smooth) forwards}@keyframes windowClose{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(20px)}}.ai-chat-header{align-items:center;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:16px 20px;position:relative;z-index:10}.ai-chat-widget.dark .ai-chat-header{background:#18181b;border-bottom-color:#27272a}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-logo{border-radius:10px;height:36px;object-fit:cover;width:36px}.ai-chat-title{color:#18181b;font-size:15px;font-weight:600;letter-spacing:-.01em}.ai-chat-widget.dark .ai-chat-title{color:#fafafa}.ai-chat-close-button{align-items:center;background:transparent;border:none;border-radius:8px;color:#a1a1aa;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .15s ease;width:32px}.ai-chat-widget.dark .ai-chat-close-button{color:#71717a}.ai-chat-close-button:hover{background:#f4f4f5;color:#52525b}.ai-chat-widget.dark .ai-chat-close-button:hover{background:#27272a;color:#a1a1aa}.ai-chat-close-button:active{transform:scale(.95)}.ai-chat-messages{-webkit-overflow-scrolling:touch;background:#f4f4f5;display:flex;flex:1;flex-direction:column;gap:12px;overflow-x:hidden;overflow-y:auto;padding:16px 16px 90px;position:relative;scroll-behavior:smooth}.ai-chat-widget.dark .ai-chat-messages{background:#18181b}.ai-chat-messages::-webkit-scrollbar{width:4px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}.ai-chat-message{animation:messageSlideIn var(--duration-normal) var(--spring-bounce);display:flex;flex-direction:column;gap:6px}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.ai-chat-message-content{word-wrap:break-word;border-radius:12px;font-size:14px;line-height:1.5;max-width:85%;padding:8px 14px}.ai-chat-message.user .ai-chat-message-content{background:var(--bubble-user-color,var(--primary-color,#07f));border-bottom-right-radius:4px;color:#fff;margin-left:auto}.ai-chat-message.assistant .ai-chat-message-content{background:#fff;border:1px solid #e5e7eb;border-bottom-left-radius:4px;color:#374151}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content{background:#18181b;border-color:#27272a;color:#e4e4e7}.ai-chat-typing{align-items:center;animation:messageSlideIn var(--duration-normal) var(--spring-bounce);background:#fff;border:1px solid #e5e7eb;border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:64px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-typing{background:#18181b;border-color:#27272a}.ai-chat-typing-dot{animation:typingPulse 1.4s ease-in-out infinite;background:linear-gradient(135deg,var(--primary-color) 0,color-mix(in srgb,var(--primary-color) 70%,#000) 100%);border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.15s}.ai-chat-typing-dot:nth-child(3){animation-delay:.3s}@keyframes typingPulse{0%,60%,to{opacity:.4;transform:translateY(0) scale(1)}30%{opacity:1;transform:translateY(-6px) scale(1.1)}}.ai-chat-input-container{background:transparent;bottom:0;left:0;padding:0 16px 16px;position:absolute;right:0;z-index:10}.ai-chat-input-container:before{background:linear-gradient(0deg,#f4f4f5 80%,transparent);bottom:0;content:\"\";height:48px;left:0;pointer-events:none;position:absolute;right:0;z-index:-1}.ai-chat-widget.dark .ai-chat-input-container:before{background:linear-gradient(0deg,#18181b 80%,transparent)}.ai-chat-input-wrapper{align-items:center;background:#f4f4f5;border:1px solid #e5e7eb;border-radius:9999px;display:flex;gap:0;padding:4px 4px 4px 16px;position:relative;transition:all .15s ease;z-index:5}.ai-chat-widget.dark .ai-chat-input-wrapper{background:#27272a;border-color:#3f3f46}.ai-chat-input-wrapper:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb,0,119,255),.15)}.ai-chat-input{background:transparent;border:none;color:var(--text-color);flex:1;font-family:inherit;font-size:14px;line-height:1.4;max-height:100px;min-height:20px;outline:none;padding:8px 0;resize:none}.ai-chat-input::placeholder{color:rgba(0,0,0,.35)}.ai-chat-widget.dark .ai-chat-input::placeholder{color:hsla(0,0%,100%,.35)}.ai-chat-send-button{align-items:center;background:transparent;border:none;border-radius:8px;color:#a1a1aa;cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;padding:0;transition:all .15s ease;width:36px}.ai-chat-widget.dark .ai-chat-send-button{color:#71717a}.ai-chat-send-button.active{background:var(--primary-color,#07f);color:#fff}.ai-chat-send-button.active:hover:not(:disabled){opacity:.9}.ai-chat-send-button:active:not(:disabled){transform:scale(.95)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.4}.ai-chat-tool-message{align-items:center;animation:toolPulse 2s ease-in-out infinite;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(16,185,129,.08));border:1px solid rgba(16,185,129,.2);border-radius:16px;display:inline-flex;gap:10px;padding:10px 16px}@keyframes toolPulse{0%,to{box-shadow:0 0 0 0 rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}.tool-finished{align-items:center;animation:toolComplete .5s var(--spring-bounce);background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;color:#fff;display:inline-flex;height:28px;justify-content:center;position:relative;width:28px}@keyframes toolComplete{0%{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0deg)}}.tool-indicator{align-items:center;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.1));border-radius:50%;color:#3b82f6;display:inline-flex;height:24px;justify-content:center;position:relative;width:24px}.tool-indicator.started:after{animation:toolSpin .8s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#3b82f6;content:\"\";inset:-2px;position:absolute}@keyframes toolSpin{to{transform:rotate(1turn)}}.ai-chat-welcome{align-items:center;animation:welcomeFadeIn var(--duration-slow) var(--spring-smooth);display:flex;flex-direction:column;justify-content:center;min-height:200px;padding:60px 32px 40px;text-align:center}@keyframes welcomeFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.ai-chat-welcome-title{color:var(--primary-color);font-size:28px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}.ai-chat-welcome-text{color:var(--text-color);font-size:16px;line-height:1.6;max-width:280px;opacity:.6}.ai-chat-suggested-questions{bottom:76px;left:0;padding:0 16px 12px;position:absolute;right:0;z-index:5}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:6px}.ai-chat-suggested-question{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:10px;color:#374151;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:10px;justify-content:space-between;padding:10px 14px;text-align:left;transition:all .15s ease;width:100%}.ai-chat-widget.dark .ai-chat-suggested-question{background:#18181b;border-color:#27272a;color:#e4e4e7}.ai-chat-suggested-question:hover{background:#f4f4f5;border-color:#d4d4d8}.ai-chat-widget.dark .ai-chat-suggested-question:hover{background:#27272a;border-color:#3f3f46}.ai-chat-suggested-question:active{transform:scale(.98)}.ai-chat-suggested-question-text{flex:1;line-height:1.4}.ai-chat-suggested-question-icon{color:var(--primary-color,#07f);flex-shrink:0;opacity:.7;transition:transform .15s ease,opacity .15s ease}.ai-chat-suggested-question:hover .ai-chat-suggested-question-icon{opacity:1;transform:translateX(3px)}.ai-chat-feedback-button{align-items:center;background:rgba(0,0,0,.04);border:none;border-radius:8px;cursor:pointer;display:flex;font-size:16px;gap:4px;padding:6px 10px;transition:all var(--duration-fast) var(--spring-bounce)}.ai-chat-feedback-button:hover:not(:disabled){background:rgba(0,0,0,.08);transform:scale(1.15)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.9)}.ai-chat-feedback-button.active{background:rgba(var(--primary-color-rgb,0,119,255),.15)}@media (max-width:480px){.ai-chat-window{animation:mobileSlideUp var(--duration-normal) var(--spring-smooth);border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}@keyframes mobileSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.ai-chat-header{padding-top:max(16px,env(safe-area-inset-top))}.ai-chat-input-container{padding-bottom:max(20px,env(safe-area-inset-bottom))}}";
|
|
22263
22039
|
styleInject(css_248z);
|
|
22264
22040
|
|
|
22265
22041
|
// Icon components mapping
|
|
22266
22042
|
const iconComponents = {
|
|
22267
22043
|
FiMessageCircle: () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) })),
|
|
22268
|
-
FiMessageSquare: () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })),
|
|
22269
|
-
FiMail: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), jsx("polyline", { points: "22,6 12,13 2,6" })] })),
|
|
22270
|
-
FiPhone: () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) })),
|
|
22271
|
-
FiHelpCircle: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
|
|
22272
|
-
FiZap: () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })),
|
|
22273
|
-
FiSend: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] })),
|
|
22274
|
-
FiUser: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
|
|
22275
|
-
FiUsers: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "9", cy: "7", r: "4" }), jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
|
|
22276
|
-
FiHeadphones: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }), jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })] })),
|
|
22277
|
-
FiCpu: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", ry: "2" }), jsx("rect", { x: "9", y: "9", width: "6", height: "6" }), jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }), jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }), jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }), jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }), jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }), jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }), jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }), jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })] })),
|
|
22278
22044
|
FiChevronDown: () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) })),
|
|
22279
22045
|
};
|
|
22280
|
-
const ChatWidget = ({ widgetId,
|
|
22046
|
+
const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bottom-right', primaryColor, onOpen, onClose, onMessage, onError, }) => {
|
|
22281
22047
|
const [isOpen, setIsOpen] = useState(false);
|
|
22282
22048
|
const [autoDetectedTheme, setAutoDetectedTheme] = useState('light');
|
|
22283
22049
|
const widgetRef = useRef(null);
|
|
22284
22050
|
const containerRef = useRef(null);
|
|
22285
22051
|
const { messages, isLoading, isTyping, error, config, sendMessage, submitFeedback, } = useChat({
|
|
22286
22052
|
widgetId,
|
|
22287
|
-
apiKey,
|
|
22288
22053
|
apiUrl,
|
|
22289
22054
|
onMessage,
|
|
22290
22055
|
onError,
|
|
@@ -22319,7 +22084,6 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
22319
22084
|
console.log('[ChatWidget] Config loaded:', config ? 'YES' : 'NO');
|
|
22320
22085
|
if (config) {
|
|
22321
22086
|
console.log('[ChatWidget] Config details:', {
|
|
22322
|
-
theme: config.appearance?.theme,
|
|
22323
22087
|
accentColor: config.appearance?.primaryColor,
|
|
22324
22088
|
autoDetectedTheme,
|
|
22325
22089
|
});
|
|
@@ -22359,7 +22123,7 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
22359
22123
|
}, [isOpen, onClose]);
|
|
22360
22124
|
// Handle close on Escape key
|
|
22361
22125
|
useEffect(() => {
|
|
22362
|
-
if (!isOpen
|
|
22126
|
+
if (!isOpen)
|
|
22363
22127
|
return;
|
|
22364
22128
|
const handleEscapeKey = (event) => {
|
|
22365
22129
|
if (event.key === 'Escape') {
|
|
@@ -22369,16 +22133,10 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
22369
22133
|
};
|
|
22370
22134
|
document.addEventListener('keydown', handleEscapeKey);
|
|
22371
22135
|
return () => document.removeEventListener('keydown', handleEscapeKey);
|
|
22372
|
-
}, [isOpen,
|
|
22373
|
-
// Determine theme -
|
|
22136
|
+
}, [isOpen, onClose]);
|
|
22137
|
+
// Determine theme - always auto-detect from background
|
|
22374
22138
|
const appearanceConfig = config?.appearance;
|
|
22375
|
-
const
|
|
22376
|
-
// Use auto-detected theme, or explicit override
|
|
22377
|
-
const effectiveTheme = themeSetting === 'auto'
|
|
22378
|
-
? autoDetectedTheme
|
|
22379
|
-
: themeSetting === 'dark'
|
|
22380
|
-
? 'dark'
|
|
22381
|
-
: 'light';
|
|
22139
|
+
const effectiveTheme = autoDetectedTheme;
|
|
22382
22140
|
// Determine position (config takes priority over prop)
|
|
22383
22141
|
const effectivePosition = config?.appearance.position || position;
|
|
22384
22142
|
// Get accent color from config or prop
|
|
@@ -22387,17 +22145,15 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
22387
22145
|
const simpleAppearance = {
|
|
22388
22146
|
accentColor,
|
|
22389
22147
|
size: appearanceConfig?.size || 'small',
|
|
22390
|
-
|
|
22391
|
-
|
|
22392
|
-
|
|
22393
|
-
headerTitle: appearanceConfig?.lightMode?.header?.title,
|
|
22394
|
-
buttonIcon: appearanceConfig?.buttonIcon || appearanceConfig?.lightMode?.button?.icon,
|
|
22148
|
+
welcomeMessage: appearanceConfig?.welcomeMessage || '',
|
|
22149
|
+
placeholder: appearanceConfig?.placeholder || '',
|
|
22150
|
+
headerTitle: appearanceConfig?.headerTitle || '',
|
|
22395
22151
|
};
|
|
22396
22152
|
// Generate theme styles from accent color
|
|
22397
22153
|
const generatedStyles = generateThemeStyles(simpleAppearance, effectiveTheme);
|
|
22398
22154
|
// Also apply legacy styles for backward compatibility
|
|
22399
22155
|
const legacyStyles = appearanceConfig
|
|
22400
|
-
? applyAppearanceStyles(appearanceConfig
|
|
22156
|
+
? applyAppearanceStyles(appearanceConfig)
|
|
22401
22157
|
: {};
|
|
22402
22158
|
// Merge styles (generated takes priority for new simplified system)
|
|
22403
22159
|
const customStyles = {
|
|
@@ -22409,10 +22165,9 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
22409
22165
|
console.log('[ChatWidget] Theme info:', {
|
|
22410
22166
|
effectiveTheme,
|
|
22411
22167
|
autoDetectedTheme,
|
|
22412
|
-
themeSetting,
|
|
22413
22168
|
accentColor,
|
|
22414
22169
|
});
|
|
22415
|
-
}, [effectiveTheme, autoDetectedTheme,
|
|
22170
|
+
}, [effectiveTheme, autoDetectedTheme, accentColor]);
|
|
22416
22171
|
const handleToggle = () => {
|
|
22417
22172
|
const newState = !isOpen;
|
|
22418
22173
|
console.log('[ChatWidget] handleToggle called, setting isOpen to:', newState);
|
|
@@ -22434,24 +22189,8 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
22434
22189
|
}
|
|
22435
22190
|
console.log('[ChatWidget] Rendering widget', { isOpen, hasConfig: !!config });
|
|
22436
22191
|
// Get button icon based on state
|
|
22437
|
-
const
|
|
22438
|
-
|
|
22439
|
-
return iconComponents.FiChevronDown;
|
|
22440
|
-
}
|
|
22441
|
-
const themeConfig = effectiveTheme === 'dark'
|
|
22442
|
-
? appearanceConfig?.darkMode
|
|
22443
|
-
: appearanceConfig?.lightMode;
|
|
22444
|
-
const buttonIcon = themeConfig?.button?.icon || 'FiMessageCircle';
|
|
22445
|
-
return iconComponents[buttonIcon] || iconComponents.FiMessageCircle;
|
|
22446
|
-
};
|
|
22447
|
-
const buttonIconColor = (() => {
|
|
22448
|
-
const themeConfig = effectiveTheme === 'dark'
|
|
22449
|
-
? appearanceConfig?.darkMode
|
|
22450
|
-
: appearanceConfig?.lightMode;
|
|
22451
|
-
return themeConfig?.button?.iconColor || customStyles['--button-icon-color'] || '#ffffff';
|
|
22452
|
-
})();
|
|
22453
|
-
const IconComponent = getButtonIcon();
|
|
22454
|
-
return (jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", style: { color: buttonIconColor }, children: jsx("div", { className: "ai-chat-button-svg", children: jsx(IconComponent, {}) }) })] }) }));
|
|
22192
|
+
const IconComponent = isOpen ? iconComponents.FiChevronDown : iconComponents.FiMessageCircle;
|
|
22193
|
+
return (jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", children: jsx("div", { className: "ai-chat-button-svg", children: jsx(IconComponent, {}) }) })] }) }));
|
|
22455
22194
|
};
|
|
22456
22195
|
|
|
22457
22196
|
export { ApiError, ChatWidget, useChat };
|