@chatwidgetai/chat-widget 0.1.4 → 0.1.6
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 +39834 -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 +6 -0
- 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/FeedbackButtons.d.ts +1 -0
- package/dist/components/FeedbackButtons.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 -1
- 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.esm.js +503 -82
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +503 -82
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/umd.d.ts +0 -1
- package/dist/umd.d.ts.map +1 -1
- package/dist/utils/autoThemeDetector.d.ts +27 -0
- package/dist/utils/autoThemeDetector.d.ts.map +1 -0
- package/dist/utils/colorUtils.d.ts +91 -0
- package/dist/utils/colorUtils.d.ts.map +1 -0
- package/dist/utils/generateThemeStyles.d.ts +23 -0
- package/dist/utils/generateThemeStyles.d.ts.map +1 -0
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -6,6 +6,9 @@ var react = require('react');
|
|
|
6
6
|
/**
|
|
7
7
|
* API Client for Widget Communication
|
|
8
8
|
* Handles all HTTP requests to the widget API
|
|
9
|
+
*
|
|
10
|
+
* Note: No API key required - widget ID acts as the access token.
|
|
11
|
+
* The widget ID should be kept confidential by the site owner.
|
|
9
12
|
*/
|
|
10
13
|
class ApiError extends Error {
|
|
11
14
|
constructor(message, status, options) {
|
|
@@ -90,7 +93,6 @@ class WidgetApiClient {
|
|
|
90
93
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/config`, {
|
|
91
94
|
method: 'GET',
|
|
92
95
|
headers: {
|
|
93
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
94
96
|
'Content-Type': 'application/json',
|
|
95
97
|
},
|
|
96
98
|
});
|
|
@@ -113,9 +115,6 @@ class WidgetApiClient {
|
|
|
113
115
|
const query = params.toString() ? `?${params.toString()}` : '';
|
|
114
116
|
const response = await fetch(`${baseUrl}${query}`, {
|
|
115
117
|
method: 'GET',
|
|
116
|
-
headers: {
|
|
117
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
118
|
-
},
|
|
119
118
|
});
|
|
120
119
|
if (!response.ok) {
|
|
121
120
|
throw await buildApiError(response, 'Failed to load conversation');
|
|
@@ -131,9 +130,6 @@ class WidgetApiClient {
|
|
|
131
130
|
formData.append('conversationId', conversationId);
|
|
132
131
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/upload`, {
|
|
133
132
|
method: 'POST',
|
|
134
|
-
headers: {
|
|
135
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
136
|
-
},
|
|
137
133
|
body: formData,
|
|
138
134
|
});
|
|
139
135
|
if (!response.ok) {
|
|
@@ -150,7 +146,6 @@ class WidgetApiClient {
|
|
|
150
146
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/chat`, {
|
|
151
147
|
method: 'POST',
|
|
152
148
|
headers: {
|
|
153
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
154
149
|
'Content-Type': 'application/json',
|
|
155
150
|
},
|
|
156
151
|
body: JSON.stringify({
|
|
@@ -173,7 +168,6 @@ class WidgetApiClient {
|
|
|
173
168
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/agent`, {
|
|
174
169
|
method: 'POST',
|
|
175
170
|
headers: {
|
|
176
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
177
171
|
'Content-Type': 'application/json',
|
|
178
172
|
},
|
|
179
173
|
body: JSON.stringify({
|
|
@@ -208,7 +202,6 @@ class WidgetApiClient {
|
|
|
208
202
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/feedback`, {
|
|
209
203
|
method: 'POST',
|
|
210
204
|
headers: {
|
|
211
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
212
205
|
'Content-Type': 'application/json',
|
|
213
206
|
},
|
|
214
207
|
body: JSON.stringify({
|
|
@@ -235,7 +228,6 @@ class WidgetApiClient {
|
|
|
235
228
|
const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/validate`, {
|
|
236
229
|
method: 'POST',
|
|
237
230
|
headers: {
|
|
238
|
-
'Authorization': `Bearer ${this.config.apiKey}`,
|
|
239
231
|
'Content-Type': 'application/json',
|
|
240
232
|
},
|
|
241
233
|
body: JSON.stringify({
|
|
@@ -404,7 +396,7 @@ function deriveErrorInfo(error) {
|
|
|
404
396
|
return { message: 'Something went wrong. Please try again.' };
|
|
405
397
|
}
|
|
406
398
|
function useChat(options) {
|
|
407
|
-
const { widgetId,
|
|
399
|
+
const { widgetId, apiUrl, onMessage, onError, } = options;
|
|
408
400
|
const [state, setState] = react.useState({
|
|
409
401
|
messages: [],
|
|
410
402
|
isOpen: false,
|
|
@@ -414,7 +406,7 @@ function useChat(options) {
|
|
|
414
406
|
conversationId: '', // Will be set after loading conversation
|
|
415
407
|
config: null,
|
|
416
408
|
});
|
|
417
|
-
const apiClient = react.useRef(new WidgetApiClient({ widgetId,
|
|
409
|
+
const apiClient = react.useRef(new WidgetApiClient({ widgetId, apiUrl }));
|
|
418
410
|
// Load configuration on mount and hydrate with existing conversation if available
|
|
419
411
|
react.useEffect(() => {
|
|
420
412
|
let isMounted = true;
|
|
@@ -473,7 +465,7 @@ function useChat(options) {
|
|
|
473
465
|
console.log('[useChat] Effect cleanup, unmounting component');
|
|
474
466
|
isMounted = false;
|
|
475
467
|
};
|
|
476
|
-
}, [widgetId,
|
|
468
|
+
}, [widgetId, apiUrl, onError]);
|
|
477
469
|
// Save conversation when messages change
|
|
478
470
|
react.useEffect(() => {
|
|
479
471
|
const persistConversation = state.config?.behavior.persistConversation ?? true;
|
|
@@ -21367,6 +21359,10 @@ function defaultUrlTransform(value) {
|
|
|
21367
21359
|
return ''
|
|
21368
21360
|
}
|
|
21369
21361
|
|
|
21362
|
+
// SVG Icon components
|
|
21363
|
+
const ThumbsUpIcon = () => (jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.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" }) }));
|
|
21364
|
+
const ThumbsDownIcon = () => (jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.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" }) }));
|
|
21365
|
+
const CheckIcon = () => (jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
21370
21366
|
const FeedbackButtons = ({ messageId, currentFeedback, onFeedback, }) => {
|
|
21371
21367
|
const [isSubmitting, setIsSubmitting] = react.useState(false);
|
|
21372
21368
|
const [submitted, setSubmitted] = react.useState(false);
|
|
@@ -21387,9 +21383,9 @@ const FeedbackButtons = ({ messageId, currentFeedback, onFeedback, }) => {
|
|
|
21387
21383
|
}
|
|
21388
21384
|
};
|
|
21389
21385
|
if (submitted) {
|
|
21390
|
-
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback ai-chat-feedback-submitted", children: [jsxRuntime.jsx("span", { className: "ai-chat-feedback-checkmark", children:
|
|
21386
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback ai-chat-feedback-submitted", children: [jsxRuntime.jsx("span", { className: "ai-chat-feedback-checkmark", children: jsxRuntime.jsx(CheckIcon, {}) }), jsxRuntime.jsx("span", { className: "ai-chat-feedback-text", children: "Thanks for feedback" })] }));
|
|
21391
21387
|
}
|
|
21392
|
-
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback", children: [jsxRuntime.jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'positive' ? 'active' : ''}`, onClick: () => handleFeedback('positive'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Helpful", title: "This was helpful", children:
|
|
21388
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback", children: [jsxRuntime.jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'positive' ? 'active' : ''}`, onClick: () => handleFeedback('positive'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Helpful", title: "This was helpful", children: jsxRuntime.jsx(ThumbsUpIcon, {}) }), jsxRuntime.jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'negative' ? 'active' : ''}`, onClick: () => handleFeedback('negative'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Not helpful", title: "This was not helpful", children: jsxRuntime.jsx(ThumbsDownIcon, {}) })] }));
|
|
21393
21389
|
};
|
|
21394
21390
|
|
|
21395
21391
|
const Sources = ({ sources, displayMode = 'with-score' }) => {
|
|
@@ -21423,10 +21419,21 @@ const Message = ({ message, showTimestamp = true, enableFeedback = true, showSou
|
|
|
21423
21419
|
// Only render assistant bubble if there's textual content
|
|
21424
21420
|
return jsxRuntime.jsx(Markdown, { children: aiContent });
|
|
21425
21421
|
};
|
|
21422
|
+
const formatToolName = (name) => {
|
|
21423
|
+
// Remove common prefixes like "action_" or "tool_"
|
|
21424
|
+
let formatted = name.replace(/^(action_|tool_)/, '');
|
|
21425
|
+
// Convert snake_case to Title Case
|
|
21426
|
+
formatted = formatted
|
|
21427
|
+
.split('_')
|
|
21428
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
21429
|
+
.join(' ');
|
|
21430
|
+
return formatted;
|
|
21431
|
+
};
|
|
21426
21432
|
const renderTool = () => {
|
|
21427
21433
|
const tool = message.message;
|
|
21428
|
-
const
|
|
21429
|
-
|
|
21434
|
+
const rawToolName = (toolCallNameById && toolCallNameById[tool.tool_call_id]) || 'Tool';
|
|
21435
|
+
const displayName = formatToolName(rawToolName);
|
|
21436
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-tool-message", title: rawToolName, children: [jsxRuntime.jsx("span", { className: "tool-finished", children: jsxRuntime.jsx("span", { className: "tool-check", children: "\u2713" }) }), jsxRuntime.jsx("span", { className: "tool-name", children: displayName })] }));
|
|
21430
21437
|
};
|
|
21431
21438
|
// If assistant message has no content (e.g., only started a tool), render nothing at all
|
|
21432
21439
|
if (isAssistant && !aiHasContent) {
|
|
@@ -21435,7 +21442,7 @@ const Message = ({ message, showTimestamp = true, enableFeedback = true, showSou
|
|
|
21435
21442
|
const showTimestampForThis = showTimestamp && !isTool && !(isAssistant && !aiHasContent);
|
|
21436
21443
|
return (jsxRuntime.jsxs("div", { className: `ai-chat-message ${messageClass}`, children: [isTool ? (
|
|
21437
21444
|
// Render tool call completion as a standalone, non-bubble event
|
|
21438
|
-
renderTool()) : (jsxRuntime.jsx("div", { className: "ai-chat-message-content", children: isAssistant ? (renderAssistant()) : isSystem ? (jsxRuntime.jsxs("div", { className: "ai-chat-system-message", children: [jsxRuntime.jsx("span", { className: "system-icon", children: "\u2139\uFE0F" }), message.message.content] })) : (userMessage) })), showTimestampForThis && (jsxRuntime.
|
|
21445
|
+
renderTool()) : (jsxRuntime.jsx("div", { className: "ai-chat-message-content", children: isAssistant ? (renderAssistant()) : isSystem ? (jsxRuntime.jsxs("div", { className: "ai-chat-system-message", children: [jsxRuntime.jsx("span", { className: "system-icon", children: "\u2139\uFE0F" }), message.message.content] })) : (userMessage) })), showTimestampForThis && (jsxRuntime.jsxs("div", { className: "ai-chat-message-meta", children: [jsxRuntime.jsx("span", { className: "ai-chat-message-timestamp", children: formatTime(message.timestamp) }), isAssistant && aiHasContent && enableFeedback && onFeedback && (jsxRuntime.jsx(FeedbackButtons, { messageId: message.id, currentFeedback: message.feedback, onFeedback: onFeedback }))] })), isAssistant && aiHasContent && showSources && message.sources && message.sources.length > 0 && (jsxRuntime.jsx(Sources, { sources: message.sources, displayMode: sourceDisplayMode }))] }));
|
|
21439
21446
|
};
|
|
21440
21447
|
|
|
21441
21448
|
const TypingIndicator = () => {
|
|
@@ -21546,13 +21553,14 @@ const MessageInput = ({ onSend, placeholder = 'Type your message...', disabled =
|
|
|
21546
21553
|
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
|
21547
21554
|
}
|
|
21548
21555
|
};
|
|
21549
|
-
|
|
21556
|
+
const canSend = value.trim() || selectedFiles.length > 0;
|
|
21550
21557
|
return (jsxRuntime.jsxs("div", { className: `ai-chat-input-container ${separateFromChat ? 'separate' : 'integrated'}`, children: [selectedFiles.length > 0 && (jsxRuntime.jsx("div", { className: "ai-chat-file-list", children: selectedFiles.map((file, index) => {
|
|
21551
21558
|
const ext = getFileExtension(file.name);
|
|
21552
|
-
return (jsxRuntime.jsxs("div", { className: "ai-chat-file-item", children: [jsxRuntime.jsx("span", { className: "ai-chat-file-extension", children: ext }), jsxRuntime.jsxs("div", { className: "ai-chat-file-info", children: [jsxRuntime.jsx("span", { className: "ai-chat-file-name", children: file.name }), jsxRuntime.jsx("span", { className: "ai-chat-file-size", children: formatFileSize(file.size) })] }), jsxRuntime.jsx("button", { className: "ai-chat-file-remove", onClick: () => handleRemoveFile(index), "aria-label": "Remove file", children: "
|
|
21553
|
-
}) })), jsxRuntime.jsxs("div", { className: "ai-chat-input-wrapper", children: [enableFileUpload && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileSelect, style: { display: 'none' }, multiple: true, accept: ALLOWED_EXTENSIONS.join(','), "aria-label": "File input" }), jsxRuntime.jsx("button", { className: "ai-chat-file-button", onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", children: jsxRuntime.jsx("svg", { width: "
|
|
21559
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-file-item", children: [jsxRuntime.jsx("span", { className: "ai-chat-file-extension", children: ext }), jsxRuntime.jsxs("div", { className: "ai-chat-file-info", children: [jsxRuntime.jsx("span", { className: "ai-chat-file-name", children: file.name }), jsxRuntime.jsx("span", { className: "ai-chat-file-size", children: formatFileSize(file.size) })] }), jsxRuntime.jsx("button", { className: "ai-chat-file-remove", onClick: () => handleRemoveFile(index), "aria-label": "Remove file", children: jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }, index));
|
|
21560
|
+
}) })), jsxRuntime.jsxs("div", { className: "ai-chat-input-wrapper", children: [enableFileUpload && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileSelect, style: { display: 'none' }, multiple: true, accept: ALLOWED_EXTENSIONS.join(','), "aria-label": "File input" }), jsxRuntime.jsx("button", { className: "ai-chat-file-button", onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", children: jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.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" }) }) })] })), jsxRuntime.jsx("textarea", { ref: textareaRef, className: "ai-chat-input", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Message input" }), jsxRuntime.jsx("button", { className: `ai-chat-send-button ${canSend ? 'active' : ''}`, onClick: handleSend, disabled: disabled || !canSend, "aria-label": "Send message", children: jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M22 2L11 13" }), jsxRuntime.jsx("path", { d: "M22 2L15 22L11 13L2 9L22 2Z" })] }) })] })] }));
|
|
21554
21561
|
};
|
|
21555
21562
|
|
|
21563
|
+
const ArrowIcon = () => (jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) }));
|
|
21556
21564
|
const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
|
|
21557
21565
|
if (!questions || questions.length === 0) {
|
|
21558
21566
|
return null;
|
|
@@ -21562,9 +21570,10 @@ const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
|
|
|
21562
21570
|
if (validQuestions.length === 0) {
|
|
21563
21571
|
return null;
|
|
21564
21572
|
}
|
|
21565
|
-
return (jsxRuntime.
|
|
21573
|
+
return (jsxRuntime.jsx("div", { className: "ai-chat-suggested-questions", children: jsxRuntime.jsx("div", { className: "ai-chat-suggested-questions-list", children: validQuestions.slice(0, 3).map((question, index) => (jsxRuntime.jsxs("button", { className: "ai-chat-suggested-question", onClick: () => onQuestionClick(question), type: "button", children: [jsxRuntime.jsx("span", { className: "ai-chat-suggested-question-text", children: question }), jsxRuntime.jsx("span", { className: "ai-chat-suggested-question-icon", children: jsxRuntime.jsx(ArrowIcon, {}) })] }, index))) }) }));
|
|
21566
21574
|
};
|
|
21567
21575
|
|
|
21576
|
+
const MinimizeIcon = () => (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M5 12h14" }) }));
|
|
21568
21577
|
const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessage, onClose, onFeedback, }) => {
|
|
21569
21578
|
console.log('[ChatWindow] Rendering ChatWindow component');
|
|
21570
21579
|
const appearance = config?.appearance;
|
|
@@ -21601,7 +21610,8 @@ const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessag
|
|
|
21601
21610
|
setShowSuggestedQuestions(false);
|
|
21602
21611
|
onSendMessage(question);
|
|
21603
21612
|
};
|
|
21604
|
-
|
|
21613
|
+
const hasMessages = messages.length > 0;
|
|
21614
|
+
return (jsxRuntime.jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsxRuntime.jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsxRuntime.jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsxRuntime.jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsxRuntime.jsx(MinimizeIcon, {}) })] }), error && (jsxRuntime.jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxRuntime.jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining"] })), isLimitReached && (jsxRuntime.jsx("div", { className: "ai-chat-error", role: "alert", children: "Message limit reached. Please start a new conversation." })), jsxRuntime.jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeTitle: welcomeTitle, welcomeMessage: welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && !hasMessages && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsxRuntime.jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsxRuntime.jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload, separateFromChat: themeConfig?.footer?.separateFromChat })] }));
|
|
21605
21615
|
};
|
|
21606
21616
|
|
|
21607
21617
|
/**
|
|
@@ -21839,11 +21849,386 @@ function applyAppearanceStyles(appearance, theme = 'light') {
|
|
|
21839
21849
|
return styles;
|
|
21840
21850
|
}
|
|
21841
21851
|
|
|
21852
|
+
/**
|
|
21853
|
+
* Color Utilities for Widget Theme System
|
|
21854
|
+
* Handles color manipulation and auto light/dark detection
|
|
21855
|
+
*/
|
|
21856
|
+
/**
|
|
21857
|
+
* Parse hex color to RGB values
|
|
21858
|
+
*/
|
|
21859
|
+
function hexToRgb(hex) {
|
|
21860
|
+
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
21861
|
+
return result
|
|
21862
|
+
? {
|
|
21863
|
+
r: parseInt(result[1], 16),
|
|
21864
|
+
g: parseInt(result[2], 16),
|
|
21865
|
+
b: parseInt(result[3], 16),
|
|
21866
|
+
}
|
|
21867
|
+
: null;
|
|
21868
|
+
}
|
|
21869
|
+
/**
|
|
21870
|
+
* Convert RGB to hex
|
|
21871
|
+
*/
|
|
21872
|
+
function rgbToHex(r, g, b) {
|
|
21873
|
+
return '#' + [r, g, b].map(x => {
|
|
21874
|
+
const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
|
|
21875
|
+
return hex.length === 1 ? '0' + hex : hex;
|
|
21876
|
+
}).join('');
|
|
21877
|
+
}
|
|
21878
|
+
/**
|
|
21879
|
+
* Calculate relative luminance of a color (0-1)
|
|
21880
|
+
* Used to determine if a color is light or dark
|
|
21881
|
+
*/
|
|
21882
|
+
function getLuminance(hex) {
|
|
21883
|
+
const rgb = hexToRgb(hex);
|
|
21884
|
+
if (!rgb)
|
|
21885
|
+
return 0.5;
|
|
21886
|
+
const { r, g, b } = rgb;
|
|
21887
|
+
const [rs, gs, bs] = [r, g, b].map(c => {
|
|
21888
|
+
c = c / 255;
|
|
21889
|
+
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
21890
|
+
});
|
|
21891
|
+
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
21892
|
+
}
|
|
21893
|
+
/**
|
|
21894
|
+
* Determine if a color is considered "light" (luminance > 0.5)
|
|
21895
|
+
*/
|
|
21896
|
+
function isLightColor(hex) {
|
|
21897
|
+
return getLuminance(hex) > 0.5;
|
|
21898
|
+
}
|
|
21899
|
+
/**
|
|
21900
|
+
* Lighten a color by a percentage
|
|
21901
|
+
*/
|
|
21902
|
+
function lighten(hex, percent) {
|
|
21903
|
+
const rgb = hexToRgb(hex);
|
|
21904
|
+
if (!rgb)
|
|
21905
|
+
return hex;
|
|
21906
|
+
const { r, g, b } = rgb;
|
|
21907
|
+
const amount = 255 * (percent / 100);
|
|
21908
|
+
return rgbToHex(r + amount, g + amount, b + amount);
|
|
21909
|
+
}
|
|
21910
|
+
/**
|
|
21911
|
+
* Darken a color by a percentage
|
|
21912
|
+
*/
|
|
21913
|
+
function darken(hex, percent) {
|
|
21914
|
+
const rgb = hexToRgb(hex);
|
|
21915
|
+
if (!rgb)
|
|
21916
|
+
return hex;
|
|
21917
|
+
const { r, g, b } = rgb;
|
|
21918
|
+
const factor = 1 - (percent / 100);
|
|
21919
|
+
return rgbToHex(r * factor, g * factor, b * factor);
|
|
21920
|
+
}
|
|
21921
|
+
/**
|
|
21922
|
+
* Create a color with alpha transparency
|
|
21923
|
+
*/
|
|
21924
|
+
function withAlpha(hex, alpha) {
|
|
21925
|
+
const rgb = hexToRgb(hex);
|
|
21926
|
+
if (!rgb)
|
|
21927
|
+
return hex;
|
|
21928
|
+
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
|
|
21929
|
+
}
|
|
21930
|
+
/**
|
|
21931
|
+
* Get contrasting text color (black or white) for a background
|
|
21932
|
+
*/
|
|
21933
|
+
function getContrastText(backgroundColor) {
|
|
21934
|
+
return isLightColor(backgroundColor) ? '#1f2937' : '#ffffff';
|
|
21935
|
+
}
|
|
21936
|
+
/**
|
|
21937
|
+
* Generate a complete color palette from an accent color for light mode
|
|
21938
|
+
*/
|
|
21939
|
+
function generateLightPalette(accentColor) {
|
|
21940
|
+
return {
|
|
21941
|
+
// Accent variations
|
|
21942
|
+
accent: accentColor,
|
|
21943
|
+
accentHover: darken(accentColor, 10),
|
|
21944
|
+
accentSubtle: withAlpha(accentColor, 0.1),
|
|
21945
|
+
// Backgrounds
|
|
21946
|
+
background: '#ffffff',
|
|
21947
|
+
backgroundSubtle: '#f9fafb',
|
|
21948
|
+
backgroundMuted: '#f3f4f6',
|
|
21949
|
+
// Text
|
|
21950
|
+
text: '#1f2937',
|
|
21951
|
+
textMuted: '#6b7280',
|
|
21952
|
+
textSubtle: '#9ca3af',
|
|
21953
|
+
// Borders
|
|
21954
|
+
border: '#e5e7eb',
|
|
21955
|
+
borderSubtle: '#f3f4f6',
|
|
21956
|
+
// Message bubbles
|
|
21957
|
+
userBubble: accentColor,
|
|
21958
|
+
userBubbleText: getContrastText(accentColor),
|
|
21959
|
+
assistantBubble: '#f3f4f6',
|
|
21960
|
+
assistantBubbleText: '#1f2937',
|
|
21961
|
+
// Input
|
|
21962
|
+
inputBackground: '#ffffff',
|
|
21963
|
+
inputBorder: '#d1d5db',
|
|
21964
|
+
inputBorderFocus: accentColor,
|
|
21965
|
+
// Shadow
|
|
21966
|
+
shadow: 'rgba(0, 0, 0, 0.1)',
|
|
21967
|
+
};
|
|
21968
|
+
}
|
|
21969
|
+
/**
|
|
21970
|
+
* Generate a complete color palette from an accent color for dark mode
|
|
21971
|
+
*/
|
|
21972
|
+
function generateDarkPalette(accentColor) {
|
|
21973
|
+
// Lighten accent for better visibility on dark backgrounds
|
|
21974
|
+
const adjustedAccent = isLightColor(accentColor) ? accentColor : lighten(accentColor, 15);
|
|
21975
|
+
return {
|
|
21976
|
+
// Accent variations
|
|
21977
|
+
accent: adjustedAccent,
|
|
21978
|
+
accentHover: lighten(adjustedAccent, 10),
|
|
21979
|
+
accentSubtle: withAlpha(adjustedAccent, 0.15),
|
|
21980
|
+
// Backgrounds
|
|
21981
|
+
background: '#1a1a2e',
|
|
21982
|
+
backgroundSubtle: '#16213e',
|
|
21983
|
+
backgroundMuted: '#0f3460',
|
|
21984
|
+
// Text
|
|
21985
|
+
text: '#f9fafb',
|
|
21986
|
+
textMuted: '#d1d5db',
|
|
21987
|
+
textSubtle: '#9ca3af',
|
|
21988
|
+
// Borders
|
|
21989
|
+
border: '#374151',
|
|
21990
|
+
borderSubtle: '#1f2937',
|
|
21991
|
+
// Message bubbles
|
|
21992
|
+
userBubble: adjustedAccent,
|
|
21993
|
+
userBubbleText: getContrastText(adjustedAccent),
|
|
21994
|
+
assistantBubble: '#0f3460',
|
|
21995
|
+
assistantBubbleText: '#f9fafb',
|
|
21996
|
+
// Input
|
|
21997
|
+
inputBackground: '#16213e',
|
|
21998
|
+
inputBorder: '#374151',
|
|
21999
|
+
inputBorderFocus: adjustedAccent,
|
|
22000
|
+
// Shadow
|
|
22001
|
+
shadow: 'rgba(0, 0, 0, 0.3)',
|
|
22002
|
+
};
|
|
22003
|
+
}
|
|
22004
|
+
|
|
22005
|
+
/**
|
|
22006
|
+
* Generate Theme Styles
|
|
22007
|
+
* Creates CSS custom properties from accent color and theme mode
|
|
22008
|
+
*/
|
|
22009
|
+
/**
|
|
22010
|
+
* Generate all CSS custom properties for the widget
|
|
22011
|
+
*/
|
|
22012
|
+
function generateThemeStyles(appearance, theme) {
|
|
22013
|
+
const palette = theme === 'dark'
|
|
22014
|
+
? generateDarkPalette(appearance.accentColor)
|
|
22015
|
+
: generateLightPalette(appearance.accentColor);
|
|
22016
|
+
// Liquid glass design - frosted glass with transparency
|
|
22017
|
+
const isLight = theme === 'light';
|
|
22018
|
+
return {
|
|
22019
|
+
// ========================================================================
|
|
22020
|
+
// BUTTON (FAB) - Liquid Glass Style
|
|
22021
|
+
// ========================================================================
|
|
22022
|
+
'--button-color': palette.accent,
|
|
22023
|
+
'--button-opacity': '1',
|
|
22024
|
+
'--button-size': '56px',
|
|
22025
|
+
'--button-icon-color': palette.userBubbleText,
|
|
22026
|
+
'--button-border-radius': '50%',
|
|
22027
|
+
'--button-border-width': '0px',
|
|
22028
|
+
'--button-border-color': palette.accent,
|
|
22029
|
+
'--button-border-opacity': '1',
|
|
22030
|
+
'--button-backdrop-blur': '20px',
|
|
22031
|
+
'--button-shadow': `0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1)`,
|
|
22032
|
+
// ========================================================================
|
|
22033
|
+
// CARD/WINDOW - Frosted Glass
|
|
22034
|
+
// ========================================================================
|
|
22035
|
+
'--card-background': isLight ? 'rgba(255, 255, 255, 0.88)' : 'rgba(15, 20, 25, 0.92)',
|
|
22036
|
+
'--card-opacity': '1',
|
|
22037
|
+
'--card-border-radius': '28px',
|
|
22038
|
+
'--card-border-width': '1px',
|
|
22039
|
+
'--card-border-color': isLight ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.06)',
|
|
22040
|
+
'--card-border-color-rgba': isLight ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.06)',
|
|
22041
|
+
'--card-border-opacity': '1',
|
|
22042
|
+
'--card-backdrop-blur': '24px',
|
|
22043
|
+
'--card-shadow': isLight
|
|
22044
|
+
? '0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05)'
|
|
22045
|
+
: '0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)',
|
|
22046
|
+
// ========================================================================
|
|
22047
|
+
// HEADER - Transparent with pure blur (no color)
|
|
22048
|
+
// ========================================================================
|
|
22049
|
+
'--header-background': 'transparent',
|
|
22050
|
+
'--header-opacity': '1',
|
|
22051
|
+
'--header-text-color': palette.accent,
|
|
22052
|
+
'--header-border-bottom-width': '0px',
|
|
22053
|
+
'--header-border-bottom-color': 'transparent',
|
|
22054
|
+
'--header-border-bottom-opacity': '0',
|
|
22055
|
+
'--header-backdrop-blur': '16px',
|
|
22056
|
+
// ========================================================================
|
|
22057
|
+
// CHAT AREA - Transparent
|
|
22058
|
+
// ========================================================================
|
|
22059
|
+
'--chat-background': 'transparent',
|
|
22060
|
+
'--chat-opacity': '1',
|
|
22061
|
+
'--welcome-color': palette.text,
|
|
22062
|
+
'--message-text-color': palette.text,
|
|
22063
|
+
// ========================================================================
|
|
22064
|
+
// MESSAGE BUBBLES - Glass style
|
|
22065
|
+
// ========================================================================
|
|
22066
|
+
'--bubble-user-color': palette.userBubble,
|
|
22067
|
+
'--bubble-user-opacity': '1',
|
|
22068
|
+
'--user-message-text': palette.userBubbleText,
|
|
22069
|
+
'--bubble-assistant-color': isLight ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.1)',
|
|
22070
|
+
'--bubble-assistant-opacity': '1',
|
|
22071
|
+
'--assistant-message-text': isLight ? palette.text : '#f0f0f0',
|
|
22072
|
+
'--bubble-border-radius': '20px',
|
|
22073
|
+
'--bubble-border-width': isLight ? '1px' : '1px',
|
|
22074
|
+
'--bubble-border-color': isLight ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)',
|
|
22075
|
+
'--bubble-border-opacity': '1',
|
|
22076
|
+
'--bubble-opacity': '1',
|
|
22077
|
+
// ========================================================================
|
|
22078
|
+
// FOOTER/INPUT - Glass style
|
|
22079
|
+
// ========================================================================
|
|
22080
|
+
'--footer-background': isLight ? 'rgba(255, 255, 255, 0.85)' : 'rgba(30, 30, 40, 0.8)',
|
|
22081
|
+
'--footer-opacity': '1',
|
|
22082
|
+
'--footer-border-top-width': '1px',
|
|
22083
|
+
'--footer-border-top-color': isLight ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.08)',
|
|
22084
|
+
'--footer-border-top-opacity': '1',
|
|
22085
|
+
'--footer-backdrop-blur': '20px',
|
|
22086
|
+
'--input-background': isLight ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.08)',
|
|
22087
|
+
'--input-background-opacity': '1',
|
|
22088
|
+
'--input-border-radius': '28px',
|
|
22089
|
+
'--input-border-width': '1.5px',
|
|
22090
|
+
'--input-border-color': isLight ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.1)',
|
|
22091
|
+
'--input-border-opacity': '1',
|
|
22092
|
+
'--input-shadow': `inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04)`,
|
|
22093
|
+
'--send-button-background': palette.accent,
|
|
22094
|
+
'--send-button-opacity': '1',
|
|
22095
|
+
'--send-button-border-radius': '50%',
|
|
22096
|
+
'--send-button-border-width': '0px',
|
|
22097
|
+
'--send-button-border-color': palette.accent,
|
|
22098
|
+
'--send-button-border-opacity': '1',
|
|
22099
|
+
// ========================================================================
|
|
22100
|
+
// HOVER STATES
|
|
22101
|
+
// ========================================================================
|
|
22102
|
+
'--hover-button-scale': '1.08',
|
|
22103
|
+
'--hover-button-opacity': '1',
|
|
22104
|
+
'--hover-input-border-color': palette.accent,
|
|
22105
|
+
'--hover-send-button-opacity': '1',
|
|
22106
|
+
'--hover-close-button-opacity': '1',
|
|
22107
|
+
// ========================================================================
|
|
22108
|
+
// ACTIVE STATES
|
|
22109
|
+
// ========================================================================
|
|
22110
|
+
'--active-input-border-color': palette.accent,
|
|
22111
|
+
'--active-input-shadow': `0 0 0 4px ${withAlpha(palette.accent, 0.15)}`,
|
|
22112
|
+
// ========================================================================
|
|
22113
|
+
// GENERAL
|
|
22114
|
+
// ========================================================================
|
|
22115
|
+
'--primary-color': palette.accent,
|
|
22116
|
+
'--background-color': palette.background,
|
|
22117
|
+
'--text-color': palette.text,
|
|
22118
|
+
'--border-color': palette.border,
|
|
22119
|
+
// ========================================================================
|
|
22120
|
+
// GLASS EFFECTS
|
|
22121
|
+
// ========================================================================
|
|
22122
|
+
'--glass-blur': '20px',
|
|
22123
|
+
'--glass-saturation': '180%',
|
|
22124
|
+
};
|
|
22125
|
+
}
|
|
22126
|
+
|
|
22127
|
+
/**
|
|
22128
|
+
* Auto Theme Detector
|
|
22129
|
+
* Detects whether the widget should use light or dark mode
|
|
22130
|
+
* based on the background behind it
|
|
22131
|
+
*/
|
|
22132
|
+
/**
|
|
22133
|
+
* Sample the background color behind an element
|
|
22134
|
+
* Uses multiple sampling points for accuracy
|
|
22135
|
+
*/
|
|
22136
|
+
function sampleBackgroundColor(element) {
|
|
22137
|
+
const rect = element.getBoundingClientRect();
|
|
22138
|
+
const centerX = rect.left + rect.width / 2;
|
|
22139
|
+
const centerY = rect.top + rect.height / 2;
|
|
22140
|
+
// Try to get the element behind our widget
|
|
22141
|
+
// Temporarily hide the element to sample what's behind
|
|
22142
|
+
const originalVisibility = element.style.visibility;
|
|
22143
|
+
element.style.visibility = 'hidden';
|
|
22144
|
+
// Sample the center point
|
|
22145
|
+
const elementBehind = document.elementFromPoint(centerX, centerY);
|
|
22146
|
+
// Restore visibility
|
|
22147
|
+
element.style.visibility = originalVisibility;
|
|
22148
|
+
if (!elementBehind) {
|
|
22149
|
+
return '#ffffff'; // Default to white
|
|
22150
|
+
}
|
|
22151
|
+
// Get computed background color
|
|
22152
|
+
const computedStyle = window.getComputedStyle(elementBehind);
|
|
22153
|
+
let bgColor = computedStyle.backgroundColor;
|
|
22154
|
+
// If transparent, walk up the DOM tree
|
|
22155
|
+
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
|
|
22156
|
+
let parent = elementBehind.parentElement;
|
|
22157
|
+
while (parent) {
|
|
22158
|
+
const parentStyle = window.getComputedStyle(parent);
|
|
22159
|
+
bgColor = parentStyle.backgroundColor;
|
|
22160
|
+
if (bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
|
|
22161
|
+
break;
|
|
22162
|
+
}
|
|
22163
|
+
parent = parent.parentElement;
|
|
22164
|
+
}
|
|
22165
|
+
}
|
|
22166
|
+
// If still transparent, check body/html
|
|
22167
|
+
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
|
|
22168
|
+
const bodyStyle = window.getComputedStyle(document.body);
|
|
22169
|
+
bgColor = bodyStyle.backgroundColor;
|
|
22170
|
+
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
|
|
22171
|
+
return '#ffffff'; // Default to white
|
|
22172
|
+
}
|
|
22173
|
+
}
|
|
22174
|
+
return rgbaToHex(bgColor);
|
|
22175
|
+
}
|
|
22176
|
+
/**
|
|
22177
|
+
* Convert rgba/rgb string to hex
|
|
22178
|
+
*/
|
|
22179
|
+
function rgbaToHex(rgba) {
|
|
22180
|
+
// Handle rgb(r, g, b) or rgba(r, g, b, a)
|
|
22181
|
+
const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
|
22182
|
+
if (!match)
|
|
22183
|
+
return '#ffffff';
|
|
22184
|
+
const r = parseInt(match[1]);
|
|
22185
|
+
const g = parseInt(match[2]);
|
|
22186
|
+
const b = parseInt(match[3]);
|
|
22187
|
+
return '#' + [r, g, b].map(x => {
|
|
22188
|
+
const hex = x.toString(16);
|
|
22189
|
+
return hex.length === 1 ? '0' + hex : hex;
|
|
22190
|
+
}).join('');
|
|
22191
|
+
}
|
|
22192
|
+
/**
|
|
22193
|
+
* Determine if the background is dark
|
|
22194
|
+
*/
|
|
22195
|
+
function isBackgroundDark(backgroundColor) {
|
|
22196
|
+
const luminance = getLuminance(backgroundColor);
|
|
22197
|
+
return luminance < 0.5;
|
|
22198
|
+
}
|
|
22199
|
+
/**
|
|
22200
|
+
* Auto-detect theme based on background
|
|
22201
|
+
*/
|
|
22202
|
+
function detectTheme(element) {
|
|
22203
|
+
const bgColor = sampleBackgroundColor(element);
|
|
22204
|
+
return isBackgroundDark(bgColor) ? 'dark' : 'light';
|
|
22205
|
+
}
|
|
22206
|
+
/**
|
|
22207
|
+
* Create a MutationObserver to watch for theme changes
|
|
22208
|
+
*/
|
|
22209
|
+
function createThemeObserver(element, callback) {
|
|
22210
|
+
const observer = new MutationObserver(() => {
|
|
22211
|
+
const theme = detectTheme(element);
|
|
22212
|
+
callback(theme);
|
|
22213
|
+
});
|
|
22214
|
+
// Observe body for class/style changes (common for theme switching)
|
|
22215
|
+
observer.observe(document.body, {
|
|
22216
|
+
attributes: true,
|
|
22217
|
+
attributeFilter: ['class', 'style', 'data-theme'],
|
|
22218
|
+
});
|
|
22219
|
+
// Also observe html element
|
|
22220
|
+
observer.observe(document.documentElement, {
|
|
22221
|
+
attributes: true,
|
|
22222
|
+
attributeFilter: ['class', 'style', 'data-theme'],
|
|
22223
|
+
});
|
|
22224
|
+
return observer;
|
|
22225
|
+
}
|
|
22226
|
+
|
|
21842
22227
|
function styleInject(css, ref) {
|
|
21843
22228
|
if ( ref === void 0 ) ref = {};
|
|
21844
22229
|
var insertAt = ref.insertAt;
|
|
21845
22230
|
|
|
21846
|
-
if (typeof document === 'undefined') { return; }
|
|
22231
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
21847
22232
|
|
|
21848
22233
|
var head = document.head || document.getElementsByTagName('head')[0];
|
|
21849
22234
|
var style = document.createElement('style');
|
|
@@ -21866,7 +22251,10 @@ function styleInject(css, ref) {
|
|
|
21866
22251
|
}
|
|
21867
22252
|
}
|
|
21868
22253
|
|
|
21869
|
-
var css_248z = ".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:0;right:0}.ai-chat-widget-container.bottom-left .ai-chat-window{bottom:0;left:0}.ai-chat-widget-container.top-right .ai-chat-window{right:0;top:0}.ai-chat-widget-container.top-left .ai-chat-window{left:0;top:0}.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-header{align-items:center;border-bottom:var(--header-border-bottom-width) solid var(--header-border-bottom-color);box-shadow:0 2px 8px rgba(0,0,0,.1);color:var(--header-text-color);display:flex;justify-content:space-between;padding:20px;position:relative}.ai-chat-header:before{backdrop-filter:blur(var(--header-backdrop-blur));-webkit-backdrop-filter:blur(var(--header-backdrop-blur));background-color:var(--header-background);content:\"\";inset:0;opacity:var(--header-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-header>*{position:relative;z-index:1}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-title{color:var(--header-text-color);font-size:var(--header-font-size);font-weight:600;letter-spacing:-.01em}.ai-chat-close-button{align-items:center;background:none;border:none;border-radius:8px;color:var(--header-text-color);cursor:pointer;display:flex;justify-content:center;opacity:.9;padding:8px;transition:all .2s ease}.ai-chat-close-button:hover{background-color:hsla(0,0%,100%,.15);opacity:var(--hover-close-button-opacity);transform:scale(1.05)}.ai-chat-messages{background-color:var(--chat-background);display:flex;flex:1;flex-direction:column;gap:16px;overflow-x:hidden;overflow-y:auto;padding:20px;position:relative}.ai-chat-window:has(.ai-chat-input-container.integrated) .ai-chat-messages{padding-bottom:100px}.ai-chat-messages:before{backdrop-filter:blur(var(--chat-backdrop-blur));-webkit-backdrop-filter:blur(var(--chat-backdrop-blur));background-color:var(--chat-background);bottom:0;content:\"\";left:0;opacity:var(--chat-opacity);pointer-events:none;position:absolute;right:0;top:0;z-index:0}.ai-chat-messages>*{position:relative;z-index:1}.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{animation:slideIn .2s ease-out;display:flex;flex-direction:column;gap:4px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.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);border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--assistant-message-text)}.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{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 8px rgba(16,185,129,.08);color:#065f46;gap:10px;padding:6px 12px}.ai-chat-tool-message,.tool-finished{align-items:center;display:inline-flex}.tool-finished{background:rgba(16,185,129,.12);border-radius:50%;color:#059669;height:22px;justify-content:center;position:relative;width:22px}.tool-finished .tool-icon{font-size:14px}.tool-finished .tool-check{align-items:center;background:#10b981;border-radius:50%;bottom:-3px;box-shadow:0 1px 2px rgba(0,0,0,.12);color:#fff;display:inline-flex;font-size:10px;height:14px;justify-content:center;position:absolute;right:-3px;width:14px}.tool-name{font-size:12px;font-weight:600}.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:48px 24px;text-align:center}.ai-chat-welcome-title{color:var(--welcome-color);font-size:calc(var(--welcome-font-size)*1.5);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}.ai-chat-welcome-text{color:var(--welcome-color);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-input-container{padding:20px;position:relative}.ai-chat-input-container.separate{border-top:var(--footer-border-top-width) solid var(--footer-border-top-color)}.ai-chat-input-container.integrated{bottom:0;left:0;padding-bottom:calc(20px + var(--card-border-width));position:absolute;right:0;z-index:10}.ai-chat-input-container.separate:before{backdrop-filter:blur(var(--footer-backdrop-blur));-webkit-backdrop-filter:blur(var(--footer-backdrop-blur));background-color:var(--footer-background);content:\"\";inset:0;opacity:var(--footer-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-input-container>*{position:relative;z-index:1}.ai-chat-input-wrapper{align-items:center;background-color:var(--input-background);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);display:flex;gap:0;opacity:var(--input-opacity);padding:6px 6px 6px 16px;transition:all .2s ease}.ai-chat-input-wrapper:hover{border-color:var(--hover-input-border-color)}.ai-chat-input-wrapper:focus-within{border-color:var(--active-input-border-color);box-shadow:var(--active-input-shadow)}.ai-chat-input{background-color:transparent;border:none;border-radius:0;color:var(--text-color);flex:1;font-family:inherit;font-size:15px;max-height:120px;min-height:40px;outline:none;padding:10px 0;resize:none}.ai-chat-input::placeholder{color:#9ca3af}.ai-chat-send-button{align-items:center;background-color:var(--send-button-background);border:var(--send-button-border-width) solid var(--send-button-border-color);border-radius:var(--send-button-border-radius);color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-weight:500;height:40px;justify-content:center;min-width:40px;opacity:var(--send-button-opacity);padding:0;transition:all .2s ease;width:40px}.ai-chat-send-button:hover:not(:disabled){opacity:var(--hover-send-button-opacity);transform:scale(1.05)}.ai-chat-send-button:active:not(:disabled){transform:scale(.98)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.5}.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:#fee2e2;border-left:4px solid #dc2626;border-radius:8px;color:#991b1b;display:flex;font-size:14px;font-weight:500;gap:8px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-error:before{content:\"⚠️\";flex-shrink:0;font-size:16px}.ai-chat-warning{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:13px;margin:8px 16px;padding:12px}.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)}}";
|
|
22254
|
+
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)}}";
|
|
22255
|
+
styleInject(css_248z$1);
|
|
22256
|
+
|
|
22257
|
+
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))}}";
|
|
21870
22258
|
styleInject(css_248z);
|
|
21871
22259
|
|
|
21872
22260
|
// Icon components mapping
|
|
@@ -21882,32 +22270,55 @@ const iconComponents = {
|
|
|
21882
22270
|
FiUsers: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }), jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
|
|
21883
22271
|
FiHeadphones: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }), jsxRuntime.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" })] })),
|
|
21884
22272
|
FiCpu: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", ry: "2" }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6" }), jsxRuntime.jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }), jsxRuntime.jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }), jsxRuntime.jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }), jsxRuntime.jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }), jsxRuntime.jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }), jsxRuntime.jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }), jsxRuntime.jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }), jsxRuntime.jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })] })),
|
|
22273
|
+
FiChevronDown: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) })),
|
|
21885
22274
|
};
|
|
21886
|
-
const ChatWidget = ({ widgetId,
|
|
22275
|
+
const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bottom-right', theme: themeOverride, primaryColor, onOpen, onClose, onMessage, onError, }) => {
|
|
21887
22276
|
const [isOpen, setIsOpen] = react.useState(false);
|
|
22277
|
+
const [autoDetectedTheme, setAutoDetectedTheme] = react.useState('light');
|
|
21888
22278
|
const widgetRef = react.useRef(null);
|
|
22279
|
+
const containerRef = react.useRef(null);
|
|
21889
22280
|
const { messages, isLoading, isTyping, error, config, sendMessage, submitFeedback, } = useChat({
|
|
21890
22281
|
widgetId,
|
|
21891
|
-
apiKey,
|
|
21892
22282
|
apiUrl,
|
|
21893
22283
|
onMessage,
|
|
21894
22284
|
onError,
|
|
21895
22285
|
});
|
|
22286
|
+
// Auto-detect theme from background
|
|
22287
|
+
react.useEffect(() => {
|
|
22288
|
+
if (!containerRef.current)
|
|
22289
|
+
return;
|
|
22290
|
+
// Initial detection
|
|
22291
|
+
const detected = detectTheme(containerRef.current);
|
|
22292
|
+
setAutoDetectedTheme(detected);
|
|
22293
|
+
// Watch for theme changes on the page
|
|
22294
|
+
const observer = createThemeObserver(containerRef.current, (newTheme) => {
|
|
22295
|
+
setAutoDetectedTheme(newTheme);
|
|
22296
|
+
});
|
|
22297
|
+
// Also listen for system preference changes
|
|
22298
|
+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
22299
|
+
const handleMediaChange = () => {
|
|
22300
|
+
if (containerRef.current) {
|
|
22301
|
+
const detected = detectTheme(containerRef.current);
|
|
22302
|
+
setAutoDetectedTheme(detected);
|
|
22303
|
+
}
|
|
22304
|
+
};
|
|
22305
|
+
mediaQuery.addEventListener('change', handleMediaChange);
|
|
22306
|
+
return () => {
|
|
22307
|
+
observer.disconnect();
|
|
22308
|
+
mediaQuery.removeEventListener('change', handleMediaChange);
|
|
22309
|
+
};
|
|
22310
|
+
}, [config]);
|
|
21896
22311
|
// Debug logging
|
|
21897
22312
|
react.useEffect(() => {
|
|
21898
22313
|
console.log('[ChatWidget] Config loaded:', config ? 'YES' : 'NO');
|
|
21899
22314
|
if (config) {
|
|
21900
22315
|
console.log('[ChatWidget] Config details:', {
|
|
21901
22316
|
theme: config.appearance?.theme,
|
|
21902
|
-
|
|
21903
|
-
|
|
21904
|
-
hasDarkMode: !!config.appearance?.darkMode,
|
|
22317
|
+
accentColor: config.appearance?.primaryColor,
|
|
22318
|
+
autoDetectedTheme,
|
|
21905
22319
|
});
|
|
21906
22320
|
}
|
|
21907
|
-
}, [config]);
|
|
21908
|
-
react.useEffect(() => {
|
|
21909
|
-
console.log('[ChatWidget] isOpen changed:', isOpen);
|
|
21910
|
-
}, [isOpen]);
|
|
22321
|
+
}, [config, autoDetectedTheme]);
|
|
21911
22322
|
// Handle auto-open
|
|
21912
22323
|
react.useEffect(() => {
|
|
21913
22324
|
if (config?.behavior.autoOpen) {
|
|
@@ -21920,26 +22331,26 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
21920
22331
|
}
|
|
21921
22332
|
return undefined;
|
|
21922
22333
|
}, [config, onOpen]);
|
|
21923
|
-
// Handle close on outside click
|
|
22334
|
+
// Handle close on outside click - always enabled for better UX
|
|
21924
22335
|
react.useEffect(() => {
|
|
21925
|
-
if (!isOpen
|
|
22336
|
+
if (!isOpen)
|
|
21926
22337
|
return;
|
|
21927
22338
|
const handleClickOutside = (event) => {
|
|
22339
|
+
// Check if click is outside the widget container
|
|
21928
22340
|
if (widgetRef.current && !widgetRef.current.contains(event.target)) {
|
|
21929
|
-
console.log('[ChatWidget] Closing due to outside click');
|
|
21930
22341
|
setIsOpen(false);
|
|
21931
22342
|
onClose?.();
|
|
21932
22343
|
}
|
|
21933
22344
|
};
|
|
21934
|
-
//
|
|
22345
|
+
// Small delay to prevent immediate close on open
|
|
21935
22346
|
const timer = setTimeout(() => {
|
|
21936
22347
|
document.addEventListener('mousedown', handleClickOutside);
|
|
21937
|
-
},
|
|
22348
|
+
}, 150);
|
|
21938
22349
|
return () => {
|
|
21939
22350
|
clearTimeout(timer);
|
|
21940
22351
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
21941
22352
|
};
|
|
21942
|
-
}, [isOpen,
|
|
22353
|
+
}, [isOpen, onClose]);
|
|
21943
22354
|
// Handle close on Escape key
|
|
21944
22355
|
react.useEffect(() => {
|
|
21945
22356
|
if (!isOpen || !config?.appearance.closeOnEscape)
|
|
@@ -21953,48 +22364,49 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
21953
22364
|
document.addEventListener('keydown', handleEscapeKey);
|
|
21954
22365
|
return () => document.removeEventListener('keydown', handleEscapeKey);
|
|
21955
22366
|
}, [isOpen, config, onClose]);
|
|
21956
|
-
// Determine theme
|
|
22367
|
+
// Determine theme - simplified: always auto-detect unless explicitly overridden
|
|
21957
22368
|
const appearanceConfig = config?.appearance;
|
|
21958
|
-
const themeSetting = themeOverride || appearanceConfig?.theme || '
|
|
21959
|
-
|
|
21960
|
-
|
|
21961
|
-
|
|
21962
|
-
|
|
21963
|
-
|
|
21964
|
-
|
|
21965
|
-
? 'light' // Force light mode if dark mode is disabled
|
|
21966
|
-
: themeSetting === 'auto'
|
|
21967
|
-
? (systemPrefersDark ? 'dark' : 'light')
|
|
21968
|
-
: themeSetting === 'dark'
|
|
21969
|
-
? 'dark'
|
|
21970
|
-
: 'light';
|
|
22369
|
+
const themeSetting = themeOverride || appearanceConfig?.theme || 'auto';
|
|
22370
|
+
// Use auto-detected theme, or explicit override
|
|
22371
|
+
const effectiveTheme = themeSetting === 'auto'
|
|
22372
|
+
? autoDetectedTheme
|
|
22373
|
+
: themeSetting === 'dark'
|
|
22374
|
+
? 'dark'
|
|
22375
|
+
: 'light';
|
|
21971
22376
|
// Determine position (config takes priority over prop)
|
|
21972
22377
|
const effectivePosition = config?.appearance.position || position;
|
|
21973
|
-
//
|
|
21974
|
-
|
|
21975
|
-
|
|
22378
|
+
// Get accent color from config or prop
|
|
22379
|
+
const accentColor = primaryColor || appearanceConfig?.primaryColor || '#0077FF';
|
|
22380
|
+
// Generate styles using simplified theme system
|
|
22381
|
+
const simpleAppearance = {
|
|
22382
|
+
accentColor,
|
|
22383
|
+
size: appearanceConfig?.size || 'small',
|
|
22384
|
+
welcomeTitle: appearanceConfig?.lightMode?.chat?.welcomeTitle,
|
|
22385
|
+
welcomeMessage: appearanceConfig?.welcomeMessage || appearanceConfig?.lightMode?.chat?.welcomeMessage,
|
|
22386
|
+
placeholder: appearanceConfig?.placeholder || appearanceConfig?.lightMode?.footer?.inputPlaceholder,
|
|
22387
|
+
headerTitle: appearanceConfig?.lightMode?.header?.title,
|
|
22388
|
+
buttonIcon: appearanceConfig?.buttonIcon || appearanceConfig?.lightMode?.button?.icon,
|
|
22389
|
+
};
|
|
22390
|
+
// Generate theme styles from accent color
|
|
22391
|
+
const generatedStyles = generateThemeStyles(simpleAppearance, effectiveTheme);
|
|
22392
|
+
// Also apply legacy styles for backward compatibility
|
|
22393
|
+
const legacyStyles = appearanceConfig
|
|
21976
22394
|
? applyAppearanceStyles(appearanceConfig, effectiveTheme)
|
|
21977
22395
|
: {};
|
|
21978
|
-
//
|
|
21979
|
-
|
|
21980
|
-
|
|
21981
|
-
|
|
22396
|
+
// Merge styles (generated takes priority for new simplified system)
|
|
22397
|
+
const customStyles = {
|
|
22398
|
+
...legacyStyles,
|
|
22399
|
+
...generatedStyles,
|
|
22400
|
+
};
|
|
21982
22401
|
// Debug logging for theme and styles
|
|
21983
22402
|
react.useEffect(() => {
|
|
21984
22403
|
console.log('[ChatWidget] Theme info:', {
|
|
21985
22404
|
effectiveTheme,
|
|
21986
|
-
|
|
22405
|
+
autoDetectedTheme,
|
|
21987
22406
|
themeSetting,
|
|
21988
|
-
|
|
21989
|
-
hasCustomStyles: Object.keys(customStyles).length > 0,
|
|
21990
|
-
buttonColor: customStyles['--button-color'],
|
|
21991
|
-
buttonSize: customStyles['--button-size'],
|
|
21992
|
-
cardBackground: customStyles['--card-background'],
|
|
21993
|
-
cardOpacity: customStyles['--card-opacity'],
|
|
21994
|
-
cardBorderRadius: customStyles['--card-border-radius'],
|
|
22407
|
+
accentColor,
|
|
21995
22408
|
});
|
|
21996
|
-
|
|
21997
|
-
}, [effectiveTheme, customStyles]);
|
|
22409
|
+
}, [effectiveTheme, autoDetectedTheme, themeSetting, accentColor]);
|
|
21998
22410
|
const handleToggle = () => {
|
|
21999
22411
|
const newState = !isOpen;
|
|
22000
22412
|
console.log('[ChatWidget] handleToggle called, setting isOpen to:', newState);
|
|
@@ -22015,16 +22427,25 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
22015
22427
|
return null;
|
|
22016
22428
|
}
|
|
22017
22429
|
console.log('[ChatWidget] Rendering widget', { isOpen, hasConfig: !!config });
|
|
22018
|
-
|
|
22019
|
-
|
|
22020
|
-
|
|
22021
|
-
|
|
22022
|
-
|
|
22023
|
-
|
|
22024
|
-
|
|
22025
|
-
|
|
22026
|
-
|
|
22027
|
-
|
|
22430
|
+
// Get button icon based on state
|
|
22431
|
+
const getButtonIcon = () => {
|
|
22432
|
+
if (isOpen) {
|
|
22433
|
+
return iconComponents.FiChevronDown;
|
|
22434
|
+
}
|
|
22435
|
+
const themeConfig = effectiveTheme === 'dark'
|
|
22436
|
+
? appearanceConfig?.darkMode
|
|
22437
|
+
: appearanceConfig?.lightMode;
|
|
22438
|
+
const buttonIcon = themeConfig?.button?.icon || 'FiMessageCircle';
|
|
22439
|
+
return iconComponents[buttonIcon] || iconComponents.FiMessageCircle;
|
|
22440
|
+
};
|
|
22441
|
+
const buttonIconColor = (() => {
|
|
22442
|
+
const themeConfig = effectiveTheme === 'dark'
|
|
22443
|
+
? appearanceConfig?.darkMode
|
|
22444
|
+
: appearanceConfig?.lightMode;
|
|
22445
|
+
return themeConfig?.button?.iconColor || customStyles['--button-icon-color'] || '#ffffff';
|
|
22446
|
+
})();
|
|
22447
|
+
const IconComponent = getButtonIcon();
|
|
22448
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntime.jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsxRuntime.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsxRuntime.jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", style: { color: buttonIconColor }, children: jsxRuntime.jsx("div", { className: "ai-chat-button-svg", children: jsxRuntime.jsx(IconComponent, {}) }) })] }) }));
|
|
22028
22449
|
};
|
|
22029
22450
|
|
|
22030
22451
|
exports.ApiError = ApiError;
|