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