@chatwidgetai/chat-widget 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ChatWidget.d.ts +6 -0
- package/dist/components/ChatWidget.d.ts.map +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/SuggestedQuestions.d.ts +1 -0
- package/dist/components/SuggestedQuestions.d.ts.map +1 -1
- package/dist/index.esm.js +524 -70
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +524 -70
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/applyAppearanceStyles.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 +1 -1
package/dist/index.js
CHANGED
|
@@ -2464,7 +2464,7 @@ function requireCjs$1 () {
|
|
|
2464
2464
|
};
|
|
2465
2465
|
Object.defineProperty(cjs$1, "__esModule", { value: true });
|
|
2466
2466
|
cjs$1.default = StyleToObject;
|
|
2467
|
-
|
|
2467
|
+
var inline_style_parser_1 = __importDefault(requireInlineStyleParser());
|
|
2468
2468
|
/**
|
|
2469
2469
|
* Parses inline style to object.
|
|
2470
2470
|
*
|
|
@@ -2480,17 +2480,17 @@ function requireCjs$1 () {
|
|
|
2480
2480
|
* ```
|
|
2481
2481
|
*/
|
|
2482
2482
|
function StyleToObject(style, iterator) {
|
|
2483
|
-
|
|
2483
|
+
var styleObject = null;
|
|
2484
2484
|
if (!style || typeof style !== 'string') {
|
|
2485
2485
|
return styleObject;
|
|
2486
2486
|
}
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
declarations.forEach((declaration)
|
|
2487
|
+
var declarations = (0, inline_style_parser_1.default)(style);
|
|
2488
|
+
var hasIterator = typeof iterator === 'function';
|
|
2489
|
+
declarations.forEach(function (declaration) {
|
|
2490
2490
|
if (declaration.type !== 'declaration') {
|
|
2491
2491
|
return;
|
|
2492
2492
|
}
|
|
2493
|
-
|
|
2493
|
+
var property = declaration.property, value = declaration.value;
|
|
2494
2494
|
if (hasIterator) {
|
|
2495
2495
|
iterator(property, value, declaration);
|
|
2496
2496
|
}
|
|
@@ -17531,7 +17531,8 @@ function footer(state) {
|
|
|
17531
17531
|
}
|
|
17532
17532
|
|
|
17533
17533
|
/**
|
|
17534
|
-
* @
|
|
17534
|
+
* @typedef {import('unist').Node} Node
|
|
17535
|
+
* @typedef {import('unist').Parent} Parent
|
|
17535
17536
|
*/
|
|
17536
17537
|
|
|
17537
17538
|
|
|
@@ -17579,11 +17580,7 @@ const convert =
|
|
|
17579
17580
|
}
|
|
17580
17581
|
|
|
17581
17582
|
if (typeof test === 'object') {
|
|
17582
|
-
return Array.isArray(test)
|
|
17583
|
-
? anyFactory(test)
|
|
17584
|
-
: // Cast because `ReadonlyArray` goes into the above but `isArray`
|
|
17585
|
-
// narrows to `Array`.
|
|
17586
|
-
propertiesFactory(/** @type {Props} */ (test))
|
|
17583
|
+
return Array.isArray(test) ? anyFactory(test) : propsFactory(test)
|
|
17587
17584
|
}
|
|
17588
17585
|
|
|
17589
17586
|
if (typeof test === 'string') {
|
|
@@ -17630,7 +17627,7 @@ function anyFactory(tests) {
|
|
|
17630
17627
|
* @param {Props} check
|
|
17631
17628
|
* @returns {Check}
|
|
17632
17629
|
*/
|
|
17633
|
-
function
|
|
17630
|
+
function propsFactory(check) {
|
|
17634
17631
|
const checkAsRecord = /** @type {Record<string, unknown>} */ (check);
|
|
17635
17632
|
|
|
17636
17633
|
return castFactory(all)
|
|
@@ -17719,7 +17716,8 @@ function color(d) {
|
|
|
17719
17716
|
}
|
|
17720
17717
|
|
|
17721
17718
|
/**
|
|
17722
|
-
* @
|
|
17719
|
+
* @typedef {import('unist').Node} UnistNode
|
|
17720
|
+
* @typedef {import('unist').Parent} UnistParent
|
|
17723
17721
|
*/
|
|
17724
17722
|
|
|
17725
17723
|
|
|
@@ -17822,9 +17820,9 @@ function visitParents(tree, test, visitor, reverse) {
|
|
|
17822
17820
|
typeof value.tagName === 'string'
|
|
17823
17821
|
? value.tagName
|
|
17824
17822
|
: // `xast`
|
|
17825
|
-
|
|
17826
|
-
|
|
17827
|
-
|
|
17823
|
+
typeof value.name === 'string'
|
|
17824
|
+
? value.name
|
|
17825
|
+
: undefined;
|
|
17828
17826
|
|
|
17829
17827
|
Object.defineProperty(visit, 'name', {
|
|
17830
17828
|
value:
|
|
@@ -21369,6 +21367,10 @@ function defaultUrlTransform(value) {
|
|
|
21369
21367
|
return ''
|
|
21370
21368
|
}
|
|
21371
21369
|
|
|
21370
|
+
// SVG Icon components
|
|
21371
|
+
const ThumbsUpIcon = () => (jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) }));
|
|
21372
|
+
const ThumbsDownIcon = () => (jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" }) }));
|
|
21373
|
+
const CheckIcon = () => (jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
21372
21374
|
const FeedbackButtons = ({ messageId, currentFeedback, onFeedback, }) => {
|
|
21373
21375
|
const [isSubmitting, setIsSubmitting] = react.useState(false);
|
|
21374
21376
|
const [submitted, setSubmitted] = react.useState(false);
|
|
@@ -21389,9 +21391,9 @@ const FeedbackButtons = ({ messageId, currentFeedback, onFeedback, }) => {
|
|
|
21389
21391
|
}
|
|
21390
21392
|
};
|
|
21391
21393
|
if (submitted) {
|
|
21392
|
-
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback ai-chat-feedback-submitted", children: [jsxRuntime.jsx("span", { className: "ai-chat-feedback-checkmark", children:
|
|
21394
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback ai-chat-feedback-submitted", children: [jsxRuntime.jsx("span", { className: "ai-chat-feedback-checkmark", children: jsxRuntime.jsx(CheckIcon, {}) }), jsxRuntime.jsx("span", { className: "ai-chat-feedback-text", children: "Thanks for feedback" })] }));
|
|
21393
21395
|
}
|
|
21394
|
-
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback", children: [jsxRuntime.jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'positive' ? 'active' : ''}`, onClick: () => handleFeedback('positive'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Helpful", title: "This was helpful", children:
|
|
21396
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-feedback", children: [jsxRuntime.jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'positive' ? 'active' : ''}`, onClick: () => handleFeedback('positive'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Helpful", title: "This was helpful", children: jsxRuntime.jsx(ThumbsUpIcon, {}) }), jsxRuntime.jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'negative' ? 'active' : ''}`, onClick: () => handleFeedback('negative'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Not helpful", title: "This was not helpful", children: jsxRuntime.jsx(ThumbsDownIcon, {}) })] }));
|
|
21395
21397
|
};
|
|
21396
21398
|
|
|
21397
21399
|
const Sources = ({ sources, displayMode = 'with-score' }) => {
|
|
@@ -21425,10 +21427,21 @@ const Message = ({ message, showTimestamp = true, enableFeedback = true, showSou
|
|
|
21425
21427
|
// Only render assistant bubble if there's textual content
|
|
21426
21428
|
return jsxRuntime.jsx(Markdown, { children: aiContent });
|
|
21427
21429
|
};
|
|
21430
|
+
const formatToolName = (name) => {
|
|
21431
|
+
// Remove common prefixes like "action_" or "tool_"
|
|
21432
|
+
let formatted = name.replace(/^(action_|tool_)/, '');
|
|
21433
|
+
// Convert snake_case to Title Case
|
|
21434
|
+
formatted = formatted
|
|
21435
|
+
.split('_')
|
|
21436
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
21437
|
+
.join(' ');
|
|
21438
|
+
return formatted;
|
|
21439
|
+
};
|
|
21428
21440
|
const renderTool = () => {
|
|
21429
21441
|
const tool = message.message;
|
|
21430
|
-
const
|
|
21431
|
-
|
|
21442
|
+
const rawToolName = (toolCallNameById && toolCallNameById[tool.tool_call_id]) || 'Tool';
|
|
21443
|
+
const displayName = formatToolName(rawToolName);
|
|
21444
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-tool-message", title: rawToolName, children: [jsxRuntime.jsx("span", { className: "tool-finished", children: jsxRuntime.jsx("span", { className: "tool-check", children: "\u2713" }) }), jsxRuntime.jsx("span", { className: "tool-name", children: displayName })] }));
|
|
21432
21445
|
};
|
|
21433
21446
|
// If assistant message has no content (e.g., only started a tool), render nothing at all
|
|
21434
21447
|
if (isAssistant && !aiHasContent) {
|
|
@@ -21555,6 +21568,8 @@ const MessageInput = ({ onSend, placeholder = 'Type your message...', disabled =
|
|
|
21555
21568
|
}) })), jsxRuntime.jsxs("div", { className: "ai-chat-input-wrapper", children: [enableFileUpload && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileSelect, style: { display: 'none' }, multiple: true, accept: ALLOWED_EXTENSIONS.join(','), "aria-label": "File input" }), jsxRuntime.jsx("button", { className: "ai-chat-file-button", onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", children: jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) })] })), jsxRuntime.jsx("textarea", { ref: textareaRef, className: "ai-chat-input", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Message input" }), jsxRuntime.jsx("button", { className: "ai-chat-send-button", onClick: handleSend, disabled: disabled || (!value.trim() && selectedFiles.length === 0), "aria-label": "Send message", children: jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsxRuntime.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] })] }));
|
|
21556
21569
|
};
|
|
21557
21570
|
|
|
21571
|
+
// SVG Icon component
|
|
21572
|
+
const LightbulbIcon = () => (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M9 18h6" }), jsxRuntime.jsx("path", { d: "M10 22h4" }), jsxRuntime.jsx("path", { d: "M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" })] }));
|
|
21558
21573
|
const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
|
|
21559
21574
|
if (!questions || questions.length === 0) {
|
|
21560
21575
|
return null;
|
|
@@ -21564,7 +21579,7 @@ const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
|
|
|
21564
21579
|
if (validQuestions.length === 0) {
|
|
21565
21580
|
return null;
|
|
21566
21581
|
}
|
|
21567
|
-
return (jsxRuntime.jsxs("div", { className: "ai-chat-suggested-questions", children: [jsxRuntime.jsx("div", { className: "ai-chat-suggested-questions-label", children: "Suggested questions:" }), jsxRuntime.jsx("div", { className: "ai-chat-suggested-questions-list", children: validQuestions.map((question, index) => (jsxRuntime.jsxs("button", { className: "ai-chat-suggested-question", onClick: () => onQuestionClick(question), type: "button", children: [jsxRuntime.jsx("span", { className: "ai-chat-suggested-question-icon", children:
|
|
21582
|
+
return (jsxRuntime.jsxs("div", { className: "ai-chat-suggested-questions", children: [jsxRuntime.jsx("div", { className: "ai-chat-suggested-questions-label", children: "Suggested questions:" }), jsxRuntime.jsx("div", { className: "ai-chat-suggested-questions-list", children: validQuestions.map((question, index) => (jsxRuntime.jsxs("button", { className: "ai-chat-suggested-question", onClick: () => onQuestionClick(question), type: "button", children: [jsxRuntime.jsx("span", { className: "ai-chat-suggested-question-icon", children: jsxRuntime.jsx(LightbulbIcon, {}) }), jsxRuntime.jsx("span", { className: "ai-chat-suggested-question-text", children: question })] }, index))) })] }));
|
|
21568
21583
|
};
|
|
21569
21584
|
|
|
21570
21585
|
const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessage, onClose, onFeedback, }) => {
|
|
@@ -21603,7 +21618,7 @@ const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessag
|
|
|
21603
21618
|
setShowSuggestedQuestions(false);
|
|
21604
21619
|
onSendMessage(question);
|
|
21605
21620
|
};
|
|
21606
|
-
return (jsxRuntime.jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsxRuntime.jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsxRuntime.jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsxRuntime.jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "
|
|
21621
|
+
return (jsxRuntime.jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsxRuntime.jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsxRuntime.jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsxRuntime.jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }) })] }), error && (jsxRuntime.jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxRuntime.jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining in this session"] })), isLimitReached && (jsxRuntime.jsxs("div", { className: "ai-chat-error", role: "alert", children: ["Message limit reached (", maxMessages, " messages per session). Please start a new conversation."] })), jsxRuntime.jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeTitle: welcomeTitle, welcomeMessage: welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsxRuntime.jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsxRuntime.jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload, separateFromChat: themeConfig?.footer?.separateFromChat })] }));
|
|
21607
21622
|
};
|
|
21608
21623
|
|
|
21609
21624
|
/**
|
|
@@ -21647,6 +21662,10 @@ function applyAppearanceStyles(appearance, theme = 'light') {
|
|
|
21647
21662
|
styles['--button-opacity'] = btn.opacity.toString();
|
|
21648
21663
|
if (btn.size)
|
|
21649
21664
|
styles['--button-size'] = `${btn.size}px`;
|
|
21665
|
+
if (btn.icon)
|
|
21666
|
+
styles['--button-icon'] = btn.icon;
|
|
21667
|
+
if (btn.iconColor)
|
|
21668
|
+
styles['--button-icon-color'] = btn.iconColor;
|
|
21650
21669
|
if (btn.borderRadius !== undefined)
|
|
21651
21670
|
styles['--button-border-radius'] = `${btn.borderRadius}px`;
|
|
21652
21671
|
if (btn.borderWidth !== undefined)
|
|
@@ -21837,11 +21856,386 @@ function applyAppearanceStyles(appearance, theme = 'light') {
|
|
|
21837
21856
|
return styles;
|
|
21838
21857
|
}
|
|
21839
21858
|
|
|
21859
|
+
/**
|
|
21860
|
+
* Color Utilities for Widget Theme System
|
|
21861
|
+
* Handles color manipulation and auto light/dark detection
|
|
21862
|
+
*/
|
|
21863
|
+
/**
|
|
21864
|
+
* Parse hex color to RGB values
|
|
21865
|
+
*/
|
|
21866
|
+
function hexToRgb(hex) {
|
|
21867
|
+
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
21868
|
+
return result
|
|
21869
|
+
? {
|
|
21870
|
+
r: parseInt(result[1], 16),
|
|
21871
|
+
g: parseInt(result[2], 16),
|
|
21872
|
+
b: parseInt(result[3], 16),
|
|
21873
|
+
}
|
|
21874
|
+
: null;
|
|
21875
|
+
}
|
|
21876
|
+
/**
|
|
21877
|
+
* Convert RGB to hex
|
|
21878
|
+
*/
|
|
21879
|
+
function rgbToHex(r, g, b) {
|
|
21880
|
+
return '#' + [r, g, b].map(x => {
|
|
21881
|
+
const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
|
|
21882
|
+
return hex.length === 1 ? '0' + hex : hex;
|
|
21883
|
+
}).join('');
|
|
21884
|
+
}
|
|
21885
|
+
/**
|
|
21886
|
+
* Calculate relative luminance of a color (0-1)
|
|
21887
|
+
* Used to determine if a color is light or dark
|
|
21888
|
+
*/
|
|
21889
|
+
function getLuminance(hex) {
|
|
21890
|
+
const rgb = hexToRgb(hex);
|
|
21891
|
+
if (!rgb)
|
|
21892
|
+
return 0.5;
|
|
21893
|
+
const { r, g, b } = rgb;
|
|
21894
|
+
const [rs, gs, bs] = [r, g, b].map(c => {
|
|
21895
|
+
c = c / 255;
|
|
21896
|
+
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
21897
|
+
});
|
|
21898
|
+
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
21899
|
+
}
|
|
21900
|
+
/**
|
|
21901
|
+
* Determine if a color is considered "light" (luminance > 0.5)
|
|
21902
|
+
*/
|
|
21903
|
+
function isLightColor(hex) {
|
|
21904
|
+
return getLuminance(hex) > 0.5;
|
|
21905
|
+
}
|
|
21906
|
+
/**
|
|
21907
|
+
* Lighten a color by a percentage
|
|
21908
|
+
*/
|
|
21909
|
+
function lighten(hex, percent) {
|
|
21910
|
+
const rgb = hexToRgb(hex);
|
|
21911
|
+
if (!rgb)
|
|
21912
|
+
return hex;
|
|
21913
|
+
const { r, g, b } = rgb;
|
|
21914
|
+
const amount = 255 * (percent / 100);
|
|
21915
|
+
return rgbToHex(r + amount, g + amount, b + amount);
|
|
21916
|
+
}
|
|
21917
|
+
/**
|
|
21918
|
+
* Darken a color by a percentage
|
|
21919
|
+
*/
|
|
21920
|
+
function darken(hex, percent) {
|
|
21921
|
+
const rgb = hexToRgb(hex);
|
|
21922
|
+
if (!rgb)
|
|
21923
|
+
return hex;
|
|
21924
|
+
const { r, g, b } = rgb;
|
|
21925
|
+
const factor = 1 - (percent / 100);
|
|
21926
|
+
return rgbToHex(r * factor, g * factor, b * factor);
|
|
21927
|
+
}
|
|
21928
|
+
/**
|
|
21929
|
+
* Create a color with alpha transparency
|
|
21930
|
+
*/
|
|
21931
|
+
function withAlpha(hex, alpha) {
|
|
21932
|
+
const rgb = hexToRgb(hex);
|
|
21933
|
+
if (!rgb)
|
|
21934
|
+
return hex;
|
|
21935
|
+
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
|
|
21936
|
+
}
|
|
21937
|
+
/**
|
|
21938
|
+
* Get contrasting text color (black or white) for a background
|
|
21939
|
+
*/
|
|
21940
|
+
function getContrastText(backgroundColor) {
|
|
21941
|
+
return isLightColor(backgroundColor) ? '#1f2937' : '#ffffff';
|
|
21942
|
+
}
|
|
21943
|
+
/**
|
|
21944
|
+
* Generate a complete color palette from an accent color for light mode
|
|
21945
|
+
*/
|
|
21946
|
+
function generateLightPalette(accentColor) {
|
|
21947
|
+
return {
|
|
21948
|
+
// Accent variations
|
|
21949
|
+
accent: accentColor,
|
|
21950
|
+
accentHover: darken(accentColor, 10),
|
|
21951
|
+
accentSubtle: withAlpha(accentColor, 0.1),
|
|
21952
|
+
// Backgrounds
|
|
21953
|
+
background: '#ffffff',
|
|
21954
|
+
backgroundSubtle: '#f9fafb',
|
|
21955
|
+
backgroundMuted: '#f3f4f6',
|
|
21956
|
+
// Text
|
|
21957
|
+
text: '#1f2937',
|
|
21958
|
+
textMuted: '#6b7280',
|
|
21959
|
+
textSubtle: '#9ca3af',
|
|
21960
|
+
// Borders
|
|
21961
|
+
border: '#e5e7eb',
|
|
21962
|
+
borderSubtle: '#f3f4f6',
|
|
21963
|
+
// Message bubbles
|
|
21964
|
+
userBubble: accentColor,
|
|
21965
|
+
userBubbleText: getContrastText(accentColor),
|
|
21966
|
+
assistantBubble: '#f3f4f6',
|
|
21967
|
+
assistantBubbleText: '#1f2937',
|
|
21968
|
+
// Input
|
|
21969
|
+
inputBackground: '#ffffff',
|
|
21970
|
+
inputBorder: '#d1d5db',
|
|
21971
|
+
inputBorderFocus: accentColor,
|
|
21972
|
+
// Shadow
|
|
21973
|
+
shadow: 'rgba(0, 0, 0, 0.1)',
|
|
21974
|
+
};
|
|
21975
|
+
}
|
|
21976
|
+
/**
|
|
21977
|
+
* Generate a complete color palette from an accent color for dark mode
|
|
21978
|
+
*/
|
|
21979
|
+
function generateDarkPalette(accentColor) {
|
|
21980
|
+
// Lighten accent for better visibility on dark backgrounds
|
|
21981
|
+
const adjustedAccent = isLightColor(accentColor) ? accentColor : lighten(accentColor, 15);
|
|
21982
|
+
return {
|
|
21983
|
+
// Accent variations
|
|
21984
|
+
accent: adjustedAccent,
|
|
21985
|
+
accentHover: lighten(adjustedAccent, 10),
|
|
21986
|
+
accentSubtle: withAlpha(adjustedAccent, 0.15),
|
|
21987
|
+
// Backgrounds
|
|
21988
|
+
background: '#1a1a2e',
|
|
21989
|
+
backgroundSubtle: '#16213e',
|
|
21990
|
+
backgroundMuted: '#0f3460',
|
|
21991
|
+
// Text
|
|
21992
|
+
text: '#f9fafb',
|
|
21993
|
+
textMuted: '#d1d5db',
|
|
21994
|
+
textSubtle: '#9ca3af',
|
|
21995
|
+
// Borders
|
|
21996
|
+
border: '#374151',
|
|
21997
|
+
borderSubtle: '#1f2937',
|
|
21998
|
+
// Message bubbles
|
|
21999
|
+
userBubble: adjustedAccent,
|
|
22000
|
+
userBubbleText: getContrastText(adjustedAccent),
|
|
22001
|
+
assistantBubble: '#0f3460',
|
|
22002
|
+
assistantBubbleText: '#f9fafb',
|
|
22003
|
+
// Input
|
|
22004
|
+
inputBackground: '#16213e',
|
|
22005
|
+
inputBorder: '#374151',
|
|
22006
|
+
inputBorderFocus: adjustedAccent,
|
|
22007
|
+
// Shadow
|
|
22008
|
+
shadow: 'rgba(0, 0, 0, 0.3)',
|
|
22009
|
+
};
|
|
22010
|
+
}
|
|
22011
|
+
|
|
22012
|
+
/**
|
|
22013
|
+
* Generate Theme Styles
|
|
22014
|
+
* Creates CSS custom properties from accent color and theme mode
|
|
22015
|
+
*/
|
|
22016
|
+
/**
|
|
22017
|
+
* Generate all CSS custom properties for the widget
|
|
22018
|
+
*/
|
|
22019
|
+
function generateThemeStyles(appearance, theme) {
|
|
22020
|
+
const palette = theme === 'dark'
|
|
22021
|
+
? generateDarkPalette(appearance.accentColor)
|
|
22022
|
+
: generateLightPalette(appearance.accentColor);
|
|
22023
|
+
// Liquid glass design - frosted glass with transparency
|
|
22024
|
+
const isLight = theme === 'light';
|
|
22025
|
+
return {
|
|
22026
|
+
// ========================================================================
|
|
22027
|
+
// BUTTON (FAB) - Liquid Glass Style
|
|
22028
|
+
// ========================================================================
|
|
22029
|
+
'--button-color': palette.accent,
|
|
22030
|
+
'--button-opacity': '1',
|
|
22031
|
+
'--button-size': '56px',
|
|
22032
|
+
'--button-icon-color': palette.userBubbleText,
|
|
22033
|
+
'--button-border-radius': '50%',
|
|
22034
|
+
'--button-border-width': '0px',
|
|
22035
|
+
'--button-border-color': palette.accent,
|
|
22036
|
+
'--button-border-opacity': '1',
|
|
22037
|
+
'--button-backdrop-blur': '20px',
|
|
22038
|
+
'--button-shadow': `0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1)`,
|
|
22039
|
+
// ========================================================================
|
|
22040
|
+
// CARD/WINDOW - Frosted Glass
|
|
22041
|
+
// ========================================================================
|
|
22042
|
+
'--card-background': isLight ? 'rgba(255, 255, 255, 0.88)' : 'rgba(15, 20, 25, 0.92)',
|
|
22043
|
+
'--card-opacity': '1',
|
|
22044
|
+
'--card-border-radius': '28px',
|
|
22045
|
+
'--card-border-width': '1px',
|
|
22046
|
+
'--card-border-color': isLight ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.06)',
|
|
22047
|
+
'--card-border-color-rgba': isLight ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.06)',
|
|
22048
|
+
'--card-border-opacity': '1',
|
|
22049
|
+
'--card-backdrop-blur': '24px',
|
|
22050
|
+
'--card-shadow': isLight
|
|
22051
|
+
? '0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05)'
|
|
22052
|
+
: '0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)',
|
|
22053
|
+
// ========================================================================
|
|
22054
|
+
// HEADER - Transparent with pure blur (no color)
|
|
22055
|
+
// ========================================================================
|
|
22056
|
+
'--header-background': 'transparent',
|
|
22057
|
+
'--header-opacity': '1',
|
|
22058
|
+
'--header-text-color': palette.accent,
|
|
22059
|
+
'--header-border-bottom-width': '0px',
|
|
22060
|
+
'--header-border-bottom-color': 'transparent',
|
|
22061
|
+
'--header-border-bottom-opacity': '0',
|
|
22062
|
+
'--header-backdrop-blur': '16px',
|
|
22063
|
+
// ========================================================================
|
|
22064
|
+
// CHAT AREA - Transparent
|
|
22065
|
+
// ========================================================================
|
|
22066
|
+
'--chat-background': 'transparent',
|
|
22067
|
+
'--chat-opacity': '1',
|
|
22068
|
+
'--welcome-color': palette.text,
|
|
22069
|
+
'--message-text-color': palette.text,
|
|
22070
|
+
// ========================================================================
|
|
22071
|
+
// MESSAGE BUBBLES - Glass style
|
|
22072
|
+
// ========================================================================
|
|
22073
|
+
'--bubble-user-color': palette.userBubble,
|
|
22074
|
+
'--bubble-user-opacity': '1',
|
|
22075
|
+
'--user-message-text': palette.userBubbleText,
|
|
22076
|
+
'--bubble-assistant-color': isLight ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.1)',
|
|
22077
|
+
'--bubble-assistant-opacity': '1',
|
|
22078
|
+
'--assistant-message-text': isLight ? palette.text : '#f0f0f0',
|
|
22079
|
+
'--bubble-border-radius': '20px',
|
|
22080
|
+
'--bubble-border-width': isLight ? '1px' : '1px',
|
|
22081
|
+
'--bubble-border-color': isLight ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)',
|
|
22082
|
+
'--bubble-border-opacity': '1',
|
|
22083
|
+
'--bubble-opacity': '1',
|
|
22084
|
+
// ========================================================================
|
|
22085
|
+
// FOOTER/INPUT - Glass style
|
|
22086
|
+
// ========================================================================
|
|
22087
|
+
'--footer-background': isLight ? 'rgba(255, 255, 255, 0.85)' : 'rgba(30, 30, 40, 0.8)',
|
|
22088
|
+
'--footer-opacity': '1',
|
|
22089
|
+
'--footer-border-top-width': '1px',
|
|
22090
|
+
'--footer-border-top-color': isLight ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.08)',
|
|
22091
|
+
'--footer-border-top-opacity': '1',
|
|
22092
|
+
'--footer-backdrop-blur': '20px',
|
|
22093
|
+
'--input-background': isLight ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.08)',
|
|
22094
|
+
'--input-background-opacity': '1',
|
|
22095
|
+
'--input-border-radius': '28px',
|
|
22096
|
+
'--input-border-width': '1.5px',
|
|
22097
|
+
'--input-border-color': isLight ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.1)',
|
|
22098
|
+
'--input-border-opacity': '1',
|
|
22099
|
+
'--input-shadow': `inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04)`,
|
|
22100
|
+
'--send-button-background': palette.accent,
|
|
22101
|
+
'--send-button-opacity': '1',
|
|
22102
|
+
'--send-button-border-radius': '50%',
|
|
22103
|
+
'--send-button-border-width': '0px',
|
|
22104
|
+
'--send-button-border-color': palette.accent,
|
|
22105
|
+
'--send-button-border-opacity': '1',
|
|
22106
|
+
// ========================================================================
|
|
22107
|
+
// HOVER STATES
|
|
22108
|
+
// ========================================================================
|
|
22109
|
+
'--hover-button-scale': '1.08',
|
|
22110
|
+
'--hover-button-opacity': '1',
|
|
22111
|
+
'--hover-input-border-color': palette.accent,
|
|
22112
|
+
'--hover-send-button-opacity': '1',
|
|
22113
|
+
'--hover-close-button-opacity': '1',
|
|
22114
|
+
// ========================================================================
|
|
22115
|
+
// ACTIVE STATES
|
|
22116
|
+
// ========================================================================
|
|
22117
|
+
'--active-input-border-color': palette.accent,
|
|
22118
|
+
'--active-input-shadow': `0 0 0 4px ${withAlpha(palette.accent, 0.15)}`,
|
|
22119
|
+
// ========================================================================
|
|
22120
|
+
// GENERAL
|
|
22121
|
+
// ========================================================================
|
|
22122
|
+
'--primary-color': palette.accent,
|
|
22123
|
+
'--background-color': palette.background,
|
|
22124
|
+
'--text-color': palette.text,
|
|
22125
|
+
'--border-color': palette.border,
|
|
22126
|
+
// ========================================================================
|
|
22127
|
+
// GLASS EFFECTS
|
|
22128
|
+
// ========================================================================
|
|
22129
|
+
'--glass-blur': '20px',
|
|
22130
|
+
'--glass-saturation': '180%',
|
|
22131
|
+
};
|
|
22132
|
+
}
|
|
22133
|
+
|
|
22134
|
+
/**
|
|
22135
|
+
* Auto Theme Detector
|
|
22136
|
+
* Detects whether the widget should use light or dark mode
|
|
22137
|
+
* based on the background behind it
|
|
22138
|
+
*/
|
|
22139
|
+
/**
|
|
22140
|
+
* Sample the background color behind an element
|
|
22141
|
+
* Uses multiple sampling points for accuracy
|
|
22142
|
+
*/
|
|
22143
|
+
function sampleBackgroundColor(element) {
|
|
22144
|
+
const rect = element.getBoundingClientRect();
|
|
22145
|
+
const centerX = rect.left + rect.width / 2;
|
|
22146
|
+
const centerY = rect.top + rect.height / 2;
|
|
22147
|
+
// Try to get the element behind our widget
|
|
22148
|
+
// Temporarily hide the element to sample what's behind
|
|
22149
|
+
const originalVisibility = element.style.visibility;
|
|
22150
|
+
element.style.visibility = 'hidden';
|
|
22151
|
+
// Sample the center point
|
|
22152
|
+
const elementBehind = document.elementFromPoint(centerX, centerY);
|
|
22153
|
+
// Restore visibility
|
|
22154
|
+
element.style.visibility = originalVisibility;
|
|
22155
|
+
if (!elementBehind) {
|
|
22156
|
+
return '#ffffff'; // Default to white
|
|
22157
|
+
}
|
|
22158
|
+
// Get computed background color
|
|
22159
|
+
const computedStyle = window.getComputedStyle(elementBehind);
|
|
22160
|
+
let bgColor = computedStyle.backgroundColor;
|
|
22161
|
+
// If transparent, walk up the DOM tree
|
|
22162
|
+
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
|
|
22163
|
+
let parent = elementBehind.parentElement;
|
|
22164
|
+
while (parent) {
|
|
22165
|
+
const parentStyle = window.getComputedStyle(parent);
|
|
22166
|
+
bgColor = parentStyle.backgroundColor;
|
|
22167
|
+
if (bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
|
|
22168
|
+
break;
|
|
22169
|
+
}
|
|
22170
|
+
parent = parent.parentElement;
|
|
22171
|
+
}
|
|
22172
|
+
}
|
|
22173
|
+
// If still transparent, check body/html
|
|
22174
|
+
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
|
|
22175
|
+
const bodyStyle = window.getComputedStyle(document.body);
|
|
22176
|
+
bgColor = bodyStyle.backgroundColor;
|
|
22177
|
+
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
|
|
22178
|
+
return '#ffffff'; // Default to white
|
|
22179
|
+
}
|
|
22180
|
+
}
|
|
22181
|
+
return rgbaToHex(bgColor);
|
|
22182
|
+
}
|
|
22183
|
+
/**
|
|
22184
|
+
* Convert rgba/rgb string to hex
|
|
22185
|
+
*/
|
|
22186
|
+
function rgbaToHex(rgba) {
|
|
22187
|
+
// Handle rgb(r, g, b) or rgba(r, g, b, a)
|
|
22188
|
+
const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
|
22189
|
+
if (!match)
|
|
22190
|
+
return '#ffffff';
|
|
22191
|
+
const r = parseInt(match[1]);
|
|
22192
|
+
const g = parseInt(match[2]);
|
|
22193
|
+
const b = parseInt(match[3]);
|
|
22194
|
+
return '#' + [r, g, b].map(x => {
|
|
22195
|
+
const hex = x.toString(16);
|
|
22196
|
+
return hex.length === 1 ? '0' + hex : hex;
|
|
22197
|
+
}).join('');
|
|
22198
|
+
}
|
|
22199
|
+
/**
|
|
22200
|
+
* Determine if the background is dark
|
|
22201
|
+
*/
|
|
22202
|
+
function isBackgroundDark(backgroundColor) {
|
|
22203
|
+
const luminance = getLuminance(backgroundColor);
|
|
22204
|
+
return luminance < 0.5;
|
|
22205
|
+
}
|
|
22206
|
+
/**
|
|
22207
|
+
* Auto-detect theme based on background
|
|
22208
|
+
*/
|
|
22209
|
+
function detectTheme(element) {
|
|
22210
|
+
const bgColor = sampleBackgroundColor(element);
|
|
22211
|
+
return isBackgroundDark(bgColor) ? 'dark' : 'light';
|
|
22212
|
+
}
|
|
22213
|
+
/**
|
|
22214
|
+
* Create a MutationObserver to watch for theme changes
|
|
22215
|
+
*/
|
|
22216
|
+
function createThemeObserver(element, callback) {
|
|
22217
|
+
const observer = new MutationObserver(() => {
|
|
22218
|
+
const theme = detectTheme(element);
|
|
22219
|
+
callback(theme);
|
|
22220
|
+
});
|
|
22221
|
+
// Observe body for class/style changes (common for theme switching)
|
|
22222
|
+
observer.observe(document.body, {
|
|
22223
|
+
attributes: true,
|
|
22224
|
+
attributeFilter: ['class', 'style', 'data-theme'],
|
|
22225
|
+
});
|
|
22226
|
+
// Also observe html element
|
|
22227
|
+
observer.observe(document.documentElement, {
|
|
22228
|
+
attributes: true,
|
|
22229
|
+
attributeFilter: ['class', 'style', 'data-theme'],
|
|
22230
|
+
});
|
|
22231
|
+
return observer;
|
|
22232
|
+
}
|
|
22233
|
+
|
|
21840
22234
|
function styleInject(css, ref) {
|
|
21841
22235
|
if ( ref === void 0 ) ref = {};
|
|
21842
22236
|
var insertAt = ref.insertAt;
|
|
21843
22237
|
|
|
21844
|
-
if (typeof document === 'undefined') { return; }
|
|
22238
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
21845
22239
|
|
|
21846
22240
|
var head = document.head || document.getElementsByTagName('head')[0];
|
|
21847
22241
|
var style = document.createElement('style');
|
|
@@ -21864,12 +22258,32 @@ function styleInject(css, ref) {
|
|
|
21864
22258
|
}
|
|
21865
22259
|
}
|
|
21866
22260
|
|
|
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)}}";
|
|
22261
|
+
var css_248z$1 = ".ai-chat-widget{--primary-color:#07f;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--user-message-bg:var(--primary-color);--user-message-text:#fff;--assistant-message-bg:#f3f4f6;--assistant-message-text:#374151;--input-bg:#fff;--input-border:#d1d5db;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--button-color:#07f;--button-size:56px;--button-border-radius:28px;--button-border-width:0px;--button-border-color:#07f;--button-opacity:1;--button-backdrop-blur:0px;--button-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--card-background:#fff;--card-border-radius:16px;--card-border-width:0px;--card-border-color:#e5e7eb;--card-opacity:1;--card-backdrop-blur:0px;--card-shadow:0 25px 50px -12px rgba(0,0,0,.25);--header-background:#07f;--header-text-color:#fff;--header-font-size:18px;--header-border-bottom-width:0px;--header-border-bottom-color:#e5e7eb;--header-opacity:1;--header-backdrop-blur:0px;--chat-background:#fff;--chat-opacity:1;--chat-backdrop-blur:0px;--welcome-font-size:16px;--welcome-color:#1f2937;--welcome-opacity:1;--bubble-user-color:#07f;--bubble-assistant-color:#f3f4f6;--bubble-border-radius:16px;--bubble-border-width:0px;--bubble-border-color:#e5e7eb;--bubble-opacity:1;--typing-animation-color:#f3f4f6;--typing-animation-opacity:1;--typing-animation-border-width:0px;--typing-animation-border-color:#e5e7eb;--typing-animation-border-radius:16px;--footer-background:#fff;--footer-border-top-width:1px;--footer-border-top-color:#e5e7eb;--footer-opacity:1;--footer-backdrop-blur:0px;--input-background:#fff;--input-border-radius:24px;--input-border-width:1.5px;--input-border-color:#d1d5db;--input-opacity:1;--input-shadow:0 1px 2px 0 rgba(0,0,0,.05);--send-button-background:#07f;--send-button-border-radius:20px;--send-button-border-width:0px;--send-button-border-color:#07f;--send-button-opacity:1;--hover-button-scale:1.05;--hover-button-opacity:0.9;--hover-input-border-color:#9ca3af;--hover-send-button-opacity:0.85;--hover-close-button-opacity:1;--active-input-border-color:#07f;--active-input-shadow:0 0 0 3px rgba(0,119,255,.1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.ai-chat-widget.dark{--background-color:#001d3d;--text-color:#f9fafb;--border-color:#374151;--assistant-message-bg:#036;--assistant-message-text:#e5e7eb;--input-bg:#002855;--input-border:#374151}.ai-chat-widget.dark .ai-chat-message.system .ai-chat-message-content{background-color:#78350f;color:#fef3c7}.ai-chat-widget.dark .ai-chat-message.tool .ai-chat-message-content{background-color:#1e3a8a;color:#dbeafe}.ai-chat-widget-container{font-size:14px;line-height:1.5;position:fixed;z-index:9999}.ai-chat-widget-container.bottom-right{bottom:20px;right:20px}.ai-chat-widget-container.bottom-left{bottom:20px;left:20px}.ai-chat-widget-container.top-right{right:20px;top:20px}.ai-chat-widget-container.top-left{left:20px;top:20px}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--button-backdrop-blur));-webkit-backdrop-filter:blur(var(--button-backdrop-blur));background-color:var(--button-color);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);box-shadow:var(--button-shadow);color:#fff;cursor:pointer;display:flex;height:var(--button-size);justify-content:center;opacity:var(--button-opacity);transition:all .3s cubic-bezier(.4,0,.2,1);width:var(--button-size)}.ai-chat-button:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);opacity:var(--hover-button-opacity);transform:scale(var(--hover-button-scale))}.ai-chat-button:active{transform:scale(.95)}.ai-chat-button-svg{height:50%;min-height:24px;min-width:24px;width:50%}.ai-chat-button-icon{font-size:1.5em;line-height:1}.ai-chat-window{border-radius:var(--card-border-radius);box-shadow:0 0 0 var(--card-border-width) var(--card-border-color-rgba,var(--card-border-color)),var(--card-shadow);display:flex;flex-direction:column;overflow:hidden;position:absolute}.ai-chat-window>*{position:relative;z-index:1}.ai-chat-window:before{backdrop-filter:blur(var(--card-backdrop-blur));-webkit-backdrop-filter:blur(var(--card-backdrop-blur));background-color:var(--card-background);border-radius:var(--card-border-radius);content:\"\";inset:0;opacity:var(--card-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-widget-container.bottom-right .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);right:0}.ai-chat-widget-container.bottom-left .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);left:0}.ai-chat-widget-container.top-right .ai-chat-window{right:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-widget-container.top-left .ai-chat-window{left:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-button{z-index:1}.ai-chat-window{z-index:2}.ai-chat-window.size-small{height:500px;width:380px}.ai-chat-window.size-medium{height:650px;width:440px}.ai-chat-window.size-large{height:750px;width:520px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--input-border)}.ai-chat-message{display:flex;flex-direction:column;gap:4px}.ai-chat-message.user{align-items:flex-end}.ai-chat-message.assistant{align-items:flex-start}.ai-chat-message.system{align-items:center}.ai-chat-message.tool{align-items:flex-start}.ai-chat-message-content{word-wrap:break-word;border:var(--bubble-border-width) solid var(--bubble-border-color);border-radius:var(--bubble-border-radius);font-size:15px;line-height:1.6;max-width:80%;opacity:var(--bubble-opacity);padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background-color:var(--bubble-user-color);border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--user-message-text)}.ai-chat-message.assistant .ai-chat-message-content{background-color:var(--bubble-assistant-color,#f3f4f6);border:1px solid var(--bubble-border-color,rgba(0,0,0,.08));border-radius:var(--bubble-border-radius,16px);border-bottom-left-radius:4px;box-shadow:none;color:var(--assistant-message-text);max-width:85%;padding:12px 16px}.ai-chat-message.assistant .ai-chat-message-content p{margin:0 0 12px}.ai-chat-message.assistant .ai-chat-message-content p:last-child{margin-bottom:0}.ai-chat-message.assistant .ai-chat-message-content ol,.ai-chat-message.assistant .ai-chat-message-content ul{margin:8px 0 12px;padding-left:24px}.ai-chat-message.assistant .ai-chat-message-content li{line-height:1.5;margin:6px 0}.ai-chat-message.assistant .ai-chat-message-content li::marker{color:var(--primary-color,#07f)}.ai-chat-message.assistant .ai-chat-message-content ol li::marker{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content strong{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content em{font-style:italic}.ai-chat-message.assistant .ai-chat-message-content code{background-color:rgba(0,0,0,.06);border-radius:4px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:.9em;padding:2px 6px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content code{background-color:hsla(0,0%,100%,.1)}.ai-chat-message.assistant .ai-chat-message-content pre{background-color:rgba(0,0,0,.06);border-radius:8px;margin:8px 0 12px;overflow-x:auto;padding:12px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content pre{background-color:hsla(0,0%,100%,.08)}.ai-chat-message.assistant .ai-chat-message-content pre code{background-color:transparent;border-radius:0;padding:0}.ai-chat-message.assistant .ai-chat-message-content blockquote{border-left:3px solid var(--primary-color,#07f);color:var(--text-muted,#6b7280);margin:8px 0 12px;padding:4px 0 4px 12px}.ai-chat-message.assistant .ai-chat-message-content a{color:var(--primary-color,#07f);text-decoration:underline}.ai-chat-message.assistant .ai-chat-message-content a:hover{opacity:.8}.ai-chat-message.assistant .ai-chat-message-content h1,.ai-chat-message.assistant .ai-chat-message-content h2,.ai-chat-message.assistant .ai-chat-message-content h3,.ai-chat-message.assistant .ai-chat-message-content h4,.ai-chat-message.assistant .ai-chat-message-content h5,.ai-chat-message.assistant .ai-chat-message-content h6{font-weight:600;line-height:1.3;margin:16px 0 8px}.ai-chat-message.assistant .ai-chat-message-content h1:first-child,.ai-chat-message.assistant .ai-chat-message-content h2:first-child,.ai-chat-message.assistant .ai-chat-message-content h3:first-child{margin-top:0}.ai-chat-message.assistant .ai-chat-message-content hr{border:none;border-top:1px solid var(--border-color,#e5e7eb);margin:12px 0}.ai-chat-message.system .ai-chat-message-content{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:12px;font-style:italic;max-width:90%;text-align:center}.ai-chat-message.tool .ai-chat-message-content{background-color:#dbeafe;border-bottom-left-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:13px}.ai-chat-tool-indicators{display:flex;gap:6px;margin-top:6px}.tool-indicator{align-items:center;background:#dbeafe;border-radius:50%;color:#1e40af;display:inline-flex;height:18px;justify-content:center;overflow:hidden;position:relative;width:18px}.tool-indicator .icon{font-size:12px;line-height:1;z-index:1}.tool-indicator.started:after{animation:ai-spin 1s linear infinite;border:2px solid rgba(30,64,175,.25);border-radius:50%;border-top-color:#1e40af;content:\"\";inset:0;position:absolute}@keyframes ai-spin{to{transform:rotate(1turn)}}.ai-chat-tool-message{align-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:20px;color:#059669;display:inline-flex;gap:8px;padding:8px 14px}.ai-chat-widget.dark .ai-chat-tool-message{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.25);color:#34d399}.tool-finished{align-items:center;display:inline-flex;font-size:14px;justify-content:center}.tool-finished .tool-icon{display:none}.tool-finished .tool-check{font-size:14px;font-weight:700}.tool-name{font-size:13px;font-weight:500}.ai-chat-message-timestamp{color:rgba(0,0,0,.6);filter:invert(1) grayscale(1) contrast(1.2);font-size:11px;mix-blend-mode:difference;padding:0 4px}.ai-chat-welcome{color:var(--welcome-color);opacity:var(--welcome-opacity);padding:16px 0;text-align:left}.ai-chat-welcome-title{color:var(--primary-color);font-size:calc(var(--welcome-font-size)*1.25);font-weight:600;letter-spacing:-.01em;margin-bottom:8px}.ai-chat-welcome-text{color:var(--assistant-message-text);font-size:var(--welcome-font-size);line-height:1.6}.ai-chat-typing{align-items:center;background-color:var(--assistant-message-bg);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:80px;padding:10px 14px}.ai-chat-typing-dot{animation:typingBounce 1.4s infinite;background-color:#9ca3af;border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.2s}.ai-chat-typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.ai-chat-file-button{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-color);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.ai-chat-file-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.ai-chat-file-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.ai-chat-file-item{align-items:center;background-color:rgba(0,0,0,.05);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.ai-chat-file-extension{background-color:var(--primary-color);border-radius:3px;color:#fff;display:inline-block;font-size:10px;font-weight:600;min-width:40px;padding:2px 6px;text-align:center;text-transform:uppercase}.ai-chat-file-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ai-chat-file-name{font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-file-size{color:var(--text-muted);font-size:10px;opacity:.7}.ai-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;opacity:.6;padding:0 4px;transition:opacity .2s}.ai-chat-file-remove:hover{opacity:1}.ai-chat-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ai-chat-message-attachment{align-items:center;background-color:rgba(0,0,0,.08);border-radius:4px;display:inline-flex;font-size:11px;gap:4px;padding:3px 8px}.ai-chat-attachment-icon{font-size:12px}.ai-chat-attachment-ext{background-color:var(--primary-color);border-radius:2px;color:#fff;display:inline-block;font-size:9px;font-weight:600;padding:1px 4px;text-transform:uppercase}.ai-chat-attachment-name{max-width:120px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-sources{background-color:rgba(0,0,0,.02);border-radius:6px;font-size:12px;margin-top:8px;overflow:hidden}.ai-chat-sources-toggle{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:6px;padding:8px 10px;text-align:left;transition:background-color .2s;width:100%}.ai-chat-sources-toggle:hover{background-color:rgba(0,0,0,.03)}.ai-chat-sources-icon{color:var(--text-muted);font-size:10px;transition:transform .2s}.ai-chat-sources-title{color:var(--text-color);flex:1;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.ai-chat-source-item{border-top:1px solid rgba(0,0,0,.05);color:#6b7280;display:flex;gap:8px;padding:8px 10px}.ai-chat-source-item:last-child{border-bottom:none}.ai-chat-source-number{color:var(--primary-color);flex-shrink:0;font-weight:600}.ai-chat-source-details{display:flex;flex:1;flex-direction:column;gap:4px}.ai-chat-source-score{color:#9ca3af;font-size:11px}.ai-chat-source-content{color:#6b7280;font-size:11px;font-style:italic;line-height:1.4}.ai-chat-source-metadata{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.ai-chat-source-meta-item{background-color:rgba(0,0,0,.05);border-radius:3px;color:#6b7280;font-size:10px;padding:2px 6px}.ai-chat-feedback{align-items:center;display:flex;gap:8px;margin-top:8px;min-height:32px}.ai-chat-feedback-button{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:16px;gap:4px;overflow:hidden;padding:6px 10px;position:relative;transition:all .2s ease}.ai-chat-feedback-button:hover:not(:disabled){background-color:rgba(0,0,0,.05);transform:scale(1.2)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.95)}.ai-chat-feedback-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-feedback-button.active{background-color:rgba(0,119,255,.1)}.ai-chat-feedback-submitted{align-items:center;animation:feedbackMorph .3s cubic-bezier(.34,1.56,.64,1);display:flex;gap:6px}.ai-chat-feedback-checkmark{animation:checkmarkPop .3s cubic-bezier(.34,1.56,.64,1);color:#10b981;font-size:16px;font-weight:700}.ai-chat-feedback-text{animation:textSlideIn .3s ease;color:#10b981;font-size:13px;font-weight:500}@keyframes feedbackMorph{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes checkmarkPop{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes textSlideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.ai-chat-error{align-items:flex-start;background-color:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:12px;color:#ef4444;display:flex;font-size:14px;font-weight:500;gap:10px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-error{background-color:rgba(239,68,68,.15);border-color:rgba(239,68,68,.25);color:#fca5a5}.ai-chat-error:before{align-items:center;background:rgba(239,68,68,.2);border-radius:50%;content:\"⚠\";display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:20px;justify-content:center;width:20px}.ai-chat-widget.dark .ai-chat-error:before{background:rgba(239,68,68,.25)}.ai-chat-warning{background-color:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:12px;color:#d97706;font-size:13px;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-warning{background-color:rgba(245,158,11,.15);border-color:rgba(245,158,11,.25);color:#fbbf24}.ai-chat-suggested-questions{margin-bottom:8px;padding:12px 16px}.ai-chat-suggested-questions-label{color:#6b7280;font-size:12px;font-weight:500;margin-bottom:8px}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:8px}.ai-chat-suggested-question{align-items:center;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.ai-chat-suggested-question:hover{background-color:#f3f4f6;border-color:var(--ai-chat-primary-color,#6366f1);box-shadow:0 2px 4px rgba(0,0,0,.05);transform:translateY(-1px)}.ai-chat-suggested-question:active{transform:translateY(0)}.ai-chat-suggested-question-icon{flex-shrink:0;font-size:16px}.ai-chat-suggested-question-text{flex:1;line-height:1.4}@media (max-width:480px){.ai-chat-window{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}.ai-chat-widget-container{bottom:20px!important;right:20px!important}.ai-chat-suggested-question{font-size:13px;padding:9px 10px}}.ai-chat-action-approval{background:linear-gradient(135deg,#07f,#001d3d);border-radius:16px;box-shadow:0 4px 12px rgba(0,119,255,.3);color:#fff;margin:16px;padding:16px}.ai-chat-action-approval-content{align-items:flex-start;display:flex;gap:12px;margin-bottom:16px}.ai-chat-action-approval-icon{align-items:center;background:hsla(0,0%,100%,.2);border-radius:8px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.ai-chat-action-approval-text{flex:1}.ai-chat-action-approval-title{font-size:15px;font-weight:600;margin-bottom:4px}.ai-chat-action-approval-description{font-size:13px;line-height:1.4;opacity:.95}.ai-chat-action-approval-buttons{display:flex;gap:8px;justify-content:flex-end}.ai-chat-action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.ai-chat-action-button:disabled{cursor:not-allowed;opacity:.6}.ai-chat-action-button-reject{background:hsla(0,0%,100%,.2);color:#fff}.ai-chat-action-button-reject:hover:not(:disabled){background:hsla(0,0%,100%,.3)}.ai-chat-action-button-approve{background:#fff;color:#07f}.ai-chat-action-button-approve:hover:not(:disabled){background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.ai-chat-action-spinner{animation:ai-chat-spin .6s linear infinite;border:2px solid rgba(0,119,255,.3);border-radius:50%;border-top-color:#07f;display:inline-block;height:14px;width:14px}@keyframes ai-chat-spin{to{transform:rotate(1turn)}}";
|
|
22262
|
+
styleInject(css_248z$1);
|
|
22263
|
+
|
|
22264
|
+
var css_248z = ".ai-chat-widget{--glass-blur:20px;--glass-saturation:180%;--glass-opacity-light:0.72;--glass-opacity-dark:0.65;--glass-border-opacity:0.18;--shadow-glass:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08),inset 0 1px 0 hsla(0,0%,100%,.1);--shadow-button:0 4px 24px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.1);--shadow-elevated:0 24px 80px rgba(0,0,0,.2),0 8px 32px rgba(0,0,0,.12);--spring-bounce:cubic-bezier(0.34,1.56,0.64,1);--spring-smooth:cubic-bezier(0.4,0,0.2,1);--spring-snappy:cubic-bezier(0.2,0,0,1);--duration-fast:0.2s;--duration-normal:0.35s;--duration-slow:0.5s}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));background:linear-gradient(135deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,.1));background-color:var(--button-color);border:none;border-radius:50%;box-shadow:var(--shadow-button),inset 0 1px 1px hsla(0,0%,100%,.3),inset 0 -1px 1px rgba(0,0,0,.1);cursor:pointer;display:flex;height:var(--button-size,60px);justify-content:center;overflow:hidden;position:relative;transition:transform var(--duration-normal) var(--spring-bounce),box-shadow var(--duration-normal) var(--spring-smooth);width:var(--button-size,60px)}.ai-chat-button:before{background:linear-gradient(135deg,hsla(0,0%,100%,.4),transparent 50%,transparent);inset:0;opacity:.6;pointer-events:none}.ai-chat-button:after,.ai-chat-button:before{border-radius:50%;content:\"\";position:absolute}.ai-chat-button:after{background:radial-gradient(circle at center,hsla(0,0%,100%,.3) 0,transparent 70%);inset:-2px;opacity:0;transform:scale(.8);transition:opacity var(--duration-normal) var(--spring-smooth),transform var(--duration-normal) var(--spring-bounce)}.ai-chat-button:hover{box-shadow:0 8px 40px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.15),inset 0 1px 1px hsla(0,0%,100%,.4),inset 0 -1px 1px rgba(0,0,0,.1);transform:scale(1.08) translateY(-2px)}.ai-chat-button:hover:after{opacity:1;transform:scale(1)}.ai-chat-button:active{transform:scale(.95);transition-duration:.1s}.ai-chat-button-svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));height:26px;transition:transform var(--duration-normal) var(--spring-bounce);width:26px}.ai-chat-button:hover .ai-chat-button-svg{transform:scale(1.1)}.ai-chat-button.is-open .ai-chat-button-svg{transform:rotate(180deg)}.ai-chat-window{animation:windowOpen var(--duration-slow) var(--spring-bounce);backdrop-filter:blur(var(--card-backdrop-blur,24px)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--card-backdrop-blur,24px)) saturate(var(--glass-saturation));background:var(--card-background,hsla(0,0%,100%,.88));border:var(--card-border-width,1px) solid var(--card-border-color,rgba(0,0,0,.06));border-radius:var(--card-border-radius,28px);box-shadow:var(--card-shadow,0 25px 50px -12px rgba(0,0,0,.25));display:flex;flex-direction:column;overflow:hidden;position:absolute;transform-origin:bottom right}.ai-chat-widget.dark .ai-chat-window{background:var(--card-background,rgba(15,20,25,.92));border-color:var(--card-border-color,hsla(0,0%,100%,.06))}@keyframes windowOpen{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.ai-chat-window.closing{animation:windowClose var(--duration-normal) var(--spring-smooth) forwards}@keyframes windowClose{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(20px)}}.ai-chat-header{align-items:center;background:transparent;border-bottom:none;box-shadow:none;display:flex;justify-content:space-between;left:0;padding:16px 20px 12px;position:absolute;right:0;top:0;z-index:10}.ai-chat-header:before{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);content:\"\";height:70px;left:0;mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent);pointer-events:none;position:absolute;right:0;top:0;z-index:-1}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-title{font-size:18px;font-weight:700;letter-spacing:-.02em}.ai-chat-title,.ai-chat-widget.dark .ai-chat-title{color:var(--header-text-color,var(--primary-color,#07f))}.ai-chat-close-button{align-items:center;background:rgba(0,0,0,.05);border:none;border-radius:50%;color:#6b7280;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .2s ease;width:32px}.ai-chat-widget.dark .ai-chat-close-button{background:hsla(0,0%,100%,.08);color:#9ca3af}.ai-chat-close-button:hover{background:rgba(0,0,0,.08);transform:scale(1.05)}.ai-chat-widget.dark .ai-chat-close-button:hover{background:hsla(0,0%,100%,.12)}.ai-chat-close-button:active{transform:scale(.95)}.ai-chat-messages{-webkit-overflow-scrolling:touch;background:transparent;display:flex;flex:1;flex-direction:column;gap:12px;overflow-x:hidden;overflow-y:auto;padding:60px 20px 80px;position:relative;scroll-behavior:smooth}.ai-chat-messages::-webkit-scrollbar{width:4px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}.ai-chat-message{animation:messageSlideIn var(--duration-normal) var(--spring-bounce);display:flex;flex-direction:column;gap:4px}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.ai-chat-message-content{word-wrap:break-word;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.06),inset 0 1px 0 hsla(0,0%,100%,.1);font-size:15px;line-height:1.5;max-width:85%;padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background:linear-gradient(135deg,var(--bubble-user-color) 0,color-mix(in srgb,var(--bubble-user-color) 85%,#000) 100%);border-bottom-right-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.12),inset 0 1px 0 hsla(0,0%,100%,.2);color:var(--user-message-text,#fff);margin-left:auto}.ai-chat-message.assistant .ai-chat-message-content{background:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.05);border-bottom-left-radius:6px;color:var(--assistant-message-text,#1f2937)}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.08);color:#f0f0f0}.ai-chat-typing{align-items:center;animation:messageSlideIn var(--duration-normal) var(--spring-bounce);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.05);border-radius:20px;border-bottom-left-radius:6px;display:flex;gap:5px;max-width:70px;padding:14px 18px}.ai-chat-widget.dark .ai-chat-typing{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.08)}.ai-chat-typing-dot{animation:typingPulse 1.4s ease-in-out infinite;background:linear-gradient(135deg,var(--primary-color) 0,color-mix(in srgb,var(--primary-color) 70%,#000) 100%);border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.15s}.ai-chat-typing-dot:nth-child(3){animation-delay:.3s}@keyframes typingPulse{0%,60%,to{opacity:.4;transform:translateY(0) scale(1)}30%{opacity:1;transform:translateY(-6px) scale(1.1)}}.ai-chat-input-container{background:transparent;bottom:0;left:0;padding:0 20px 20px;position:absolute;right:0;z-index:10}.ai-chat-input-container:before{background:var(--card-background,#fff);bottom:0;content:\"\";height:calc(100% - 24px);left:0;position:absolute;right:0;z-index:-1}.ai-chat-widget.dark .ai-chat-input-container:before{background:var(--card-background,#1a1a2e)}.ai-chat-input-wrapper{align-items:center;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.04);display:flex;gap:0;padding:4px 4px 4px 16px;position:relative;z-index:5}.ai-chat-widget.dark .ai-chat-input-wrapper{background:#1a1f25;border-color:hsla(0,0%,100%,.15)}.ai-chat-input-wrapper:focus-within{border-color:var(--primary-color);box-shadow:inset 0 1px 3px rgba(0,0,0,.04),0 0 0 4px rgba(var(--primary-color-rgb,0,119,255),.15)}.ai-chat-input{background:transparent;border:none;color:var(--text-color);flex:1;font-family:inherit;font-size:14px;line-height:1.4;max-height:120px;min-height:20px;outline:none;padding:8px 0;resize:none}.ai-chat-input::placeholder{color:rgba(0,0,0,.4)}.ai-chat-widget.dark .ai-chat-input::placeholder{color:hsla(0,0%,100%,.4)}.ai-chat-send-button{align-items:center;background:linear-gradient(135deg,var(--send-button-background,var(--primary-color)) 0,color-mix(in srgb,var(--send-button-background,var(--primary-color)) 80%,#000) 100%);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.12);color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;padding:0;transition:all var(--duration-fast) var(--spring-bounce);width:32px}.ai-chat-send-button:hover:not(:disabled){box-shadow:0 6px 20px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.3);transform:scale(1.08)}.ai-chat-send-button:active:not(:disabled){transform:scale(.95)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.4;transform:none}.ai-chat-tool-message{align-items:center;animation:toolPulse 2s ease-in-out infinite;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(16,185,129,.08));border:1px solid rgba(16,185,129,.2);border-radius:16px;display:inline-flex;gap:10px;padding:10px 16px}@keyframes toolPulse{0%,to{box-shadow:0 0 0 0 rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}.tool-finished{align-items:center;animation:toolComplete .5s var(--spring-bounce);background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;color:#fff;display:inline-flex;height:28px;justify-content:center;position:relative;width:28px}@keyframes toolComplete{0%{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0deg)}}.tool-indicator{align-items:center;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.1));border-radius:50%;color:#3b82f6;display:inline-flex;height:24px;justify-content:center;position:relative;width:24px}.tool-indicator.started:after{animation:toolSpin .8s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#3b82f6;content:\"\";inset:-2px;position:absolute}@keyframes toolSpin{to{transform:rotate(1turn)}}.ai-chat-welcome{animation:welcomeFadeIn var(--duration-slow) var(--spring-smooth);padding:40px 24px;text-align:center}@keyframes welcomeFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ai-chat-welcome-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--primary-color) 0,color-mix(in srgb,var(--primary-color) 70%,#000) 100%);-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}.ai-chat-welcome-text{color:var(--text-color);font-size:15px;line-height:1.5;opacity:.7}.ai-chat-suggested-question{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.6);border:1px solid rgba(0,0,0,.06);border-radius:16px;color:var(--text-color);cursor:pointer;display:flex;font-size:14px;gap:10px;padding:12px 16px;text-align:left;transition:all var(--duration-fast) var(--spring-bounce);width:100%}.ai-chat-widget.dark .ai-chat-suggested-question{background:hsla(0,0%,100%,.08);border-color:hsla(0,0%,100%,.1)}.ai-chat-suggested-question:hover{background:rgba(var(--primary-color-rgb,0,119,255),.1);border-color:rgba(var(--primary-color-rgb,0,119,255),.3);transform:translateX(4px)}.ai-chat-suggested-question:active{transform:scale(.98)}.ai-chat-feedback-button{align-items:center;background:rgba(0,0,0,.04);border:none;border-radius:8px;cursor:pointer;display:flex;font-size:16px;gap:4px;padding:6px 10px;transition:all var(--duration-fast) var(--spring-bounce)}.ai-chat-feedback-button:hover:not(:disabled){background:rgba(0,0,0,.08);transform:scale(1.15)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.9)}.ai-chat-feedback-button.active{background:rgba(var(--primary-color-rgb,0,119,255),.15)}@media (max-width:480px){.ai-chat-window{animation:mobileSlideUp var(--duration-normal) var(--spring-smooth);border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}@keyframes mobileSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.ai-chat-header{padding-top:max(16px,env(safe-area-inset-top))}.ai-chat-input-container{padding-bottom:max(20px,env(safe-area-inset-bottom))}}";
|
|
21868
22265
|
styleInject(css_248z);
|
|
21869
22266
|
|
|
22267
|
+
// Icon components mapping
|
|
22268
|
+
const iconComponents = {
|
|
22269
|
+
FiMessageCircle: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) })),
|
|
22270
|
+
FiMessageSquare: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })),
|
|
22271
|
+
FiMail: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), jsxRuntime.jsx("polyline", { points: "22,6 12,13 2,6" })] })),
|
|
22272
|
+
FiPhone: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) })),
|
|
22273
|
+
FiHelpCircle: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
|
|
22274
|
+
FiZap: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })),
|
|
22275
|
+
FiSend: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsxRuntime.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] })),
|
|
22276
|
+
FiUser: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
|
|
22277
|
+
FiUsers: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }), jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
|
|
22278
|
+
FiHeadphones: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }), jsxRuntime.jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })] })),
|
|
22279
|
+
FiCpu: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", ry: "2" }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6" }), jsxRuntime.jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }), jsxRuntime.jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }), jsxRuntime.jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }), jsxRuntime.jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }), jsxRuntime.jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }), jsxRuntime.jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }), jsxRuntime.jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }), jsxRuntime.jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })] })),
|
|
22280
|
+
FiChevronDown: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) })),
|
|
22281
|
+
};
|
|
21870
22282
|
const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, position = 'bottom-right', theme: themeOverride, primaryColor, onOpen, onClose, onMessage, onError, }) => {
|
|
21871
22283
|
const [isOpen, setIsOpen] = react.useState(false);
|
|
22284
|
+
const [autoDetectedTheme, setAutoDetectedTheme] = react.useState('light');
|
|
21872
22285
|
const widgetRef = react.useRef(null);
|
|
22286
|
+
const containerRef = react.useRef(null);
|
|
21873
22287
|
const { messages, isLoading, isTyping, error, config, sendMessage, submitFeedback, } = useChat({
|
|
21874
22288
|
widgetId,
|
|
21875
22289
|
apiKey,
|
|
@@ -21877,21 +22291,42 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
21877
22291
|
onMessage,
|
|
21878
22292
|
onError,
|
|
21879
22293
|
});
|
|
22294
|
+
// Auto-detect theme from background
|
|
22295
|
+
react.useEffect(() => {
|
|
22296
|
+
if (!containerRef.current)
|
|
22297
|
+
return;
|
|
22298
|
+
// Initial detection
|
|
22299
|
+
const detected = detectTheme(containerRef.current);
|
|
22300
|
+
setAutoDetectedTheme(detected);
|
|
22301
|
+
// Watch for theme changes on the page
|
|
22302
|
+
const observer = createThemeObserver(containerRef.current, (newTheme) => {
|
|
22303
|
+
setAutoDetectedTheme(newTheme);
|
|
22304
|
+
});
|
|
22305
|
+
// Also listen for system preference changes
|
|
22306
|
+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
22307
|
+
const handleMediaChange = () => {
|
|
22308
|
+
if (containerRef.current) {
|
|
22309
|
+
const detected = detectTheme(containerRef.current);
|
|
22310
|
+
setAutoDetectedTheme(detected);
|
|
22311
|
+
}
|
|
22312
|
+
};
|
|
22313
|
+
mediaQuery.addEventListener('change', handleMediaChange);
|
|
22314
|
+
return () => {
|
|
22315
|
+
observer.disconnect();
|
|
22316
|
+
mediaQuery.removeEventListener('change', handleMediaChange);
|
|
22317
|
+
};
|
|
22318
|
+
}, [config]);
|
|
21880
22319
|
// Debug logging
|
|
21881
22320
|
react.useEffect(() => {
|
|
21882
22321
|
console.log('[ChatWidget] Config loaded:', config ? 'YES' : 'NO');
|
|
21883
22322
|
if (config) {
|
|
21884
22323
|
console.log('[ChatWidget] Config details:', {
|
|
21885
22324
|
theme: config.appearance?.theme,
|
|
21886
|
-
|
|
21887
|
-
|
|
21888
|
-
hasDarkMode: !!config.appearance?.darkMode,
|
|
22325
|
+
accentColor: config.appearance?.primaryColor,
|
|
22326
|
+
autoDetectedTheme,
|
|
21889
22327
|
});
|
|
21890
22328
|
}
|
|
21891
|
-
}, [config]);
|
|
21892
|
-
react.useEffect(() => {
|
|
21893
|
-
console.log('[ChatWidget] isOpen changed:', isOpen);
|
|
21894
|
-
}, [isOpen]);
|
|
22329
|
+
}, [config, autoDetectedTheme]);
|
|
21895
22330
|
// Handle auto-open
|
|
21896
22331
|
react.useEffect(() => {
|
|
21897
22332
|
if (config?.behavior.autoOpen) {
|
|
@@ -21904,26 +22339,26 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
21904
22339
|
}
|
|
21905
22340
|
return undefined;
|
|
21906
22341
|
}, [config, onOpen]);
|
|
21907
|
-
// Handle close on outside click
|
|
22342
|
+
// Handle close on outside click - always enabled for better UX
|
|
21908
22343
|
react.useEffect(() => {
|
|
21909
|
-
if (!isOpen
|
|
22344
|
+
if (!isOpen)
|
|
21910
22345
|
return;
|
|
21911
22346
|
const handleClickOutside = (event) => {
|
|
22347
|
+
// Check if click is outside the widget container
|
|
21912
22348
|
if (widgetRef.current && !widgetRef.current.contains(event.target)) {
|
|
21913
|
-
console.log('[ChatWidget] Closing due to outside click');
|
|
21914
22349
|
setIsOpen(false);
|
|
21915
22350
|
onClose?.();
|
|
21916
22351
|
}
|
|
21917
22352
|
};
|
|
21918
|
-
//
|
|
22353
|
+
// Small delay to prevent immediate close on open
|
|
21919
22354
|
const timer = setTimeout(() => {
|
|
21920
22355
|
document.addEventListener('mousedown', handleClickOutside);
|
|
21921
|
-
},
|
|
22356
|
+
}, 150);
|
|
21922
22357
|
return () => {
|
|
21923
22358
|
clearTimeout(timer);
|
|
21924
22359
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
21925
22360
|
};
|
|
21926
|
-
}, [isOpen,
|
|
22361
|
+
}, [isOpen, onClose]);
|
|
21927
22362
|
// Handle close on Escape key
|
|
21928
22363
|
react.useEffect(() => {
|
|
21929
22364
|
if (!isOpen || !config?.appearance.closeOnEscape)
|
|
@@ -21937,48 +22372,49 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
21937
22372
|
document.addEventListener('keydown', handleEscapeKey);
|
|
21938
22373
|
return () => document.removeEventListener('keydown', handleEscapeKey);
|
|
21939
22374
|
}, [isOpen, config, onClose]);
|
|
21940
|
-
// Determine theme
|
|
22375
|
+
// Determine theme - simplified: always auto-detect unless explicitly overridden
|
|
21941
22376
|
const appearanceConfig = config?.appearance;
|
|
21942
|
-
const themeSetting = themeOverride || appearanceConfig?.theme || '
|
|
21943
|
-
|
|
21944
|
-
|
|
21945
|
-
|
|
21946
|
-
|
|
21947
|
-
|
|
21948
|
-
|
|
21949
|
-
? 'light' // Force light mode if dark mode is disabled
|
|
21950
|
-
: themeSetting === 'auto'
|
|
21951
|
-
? (systemPrefersDark ? 'dark' : 'light')
|
|
21952
|
-
: themeSetting === 'dark'
|
|
21953
|
-
? 'dark'
|
|
21954
|
-
: 'light';
|
|
22377
|
+
const themeSetting = themeOverride || appearanceConfig?.theme || 'auto';
|
|
22378
|
+
// Use auto-detected theme, or explicit override
|
|
22379
|
+
const effectiveTheme = themeSetting === 'auto'
|
|
22380
|
+
? autoDetectedTheme
|
|
22381
|
+
: themeSetting === 'dark'
|
|
22382
|
+
? 'dark'
|
|
22383
|
+
: 'light';
|
|
21955
22384
|
// Determine position (config takes priority over prop)
|
|
21956
22385
|
const effectivePosition = config?.appearance.position || position;
|
|
21957
|
-
//
|
|
21958
|
-
|
|
21959
|
-
|
|
22386
|
+
// Get accent color from config or prop
|
|
22387
|
+
const accentColor = primaryColor || appearanceConfig?.primaryColor || '#0077FF';
|
|
22388
|
+
// Generate styles using simplified theme system
|
|
22389
|
+
const simpleAppearance = {
|
|
22390
|
+
accentColor,
|
|
22391
|
+
size: appearanceConfig?.size || 'small',
|
|
22392
|
+
welcomeTitle: appearanceConfig?.lightMode?.chat?.welcomeTitle,
|
|
22393
|
+
welcomeMessage: appearanceConfig?.welcomeMessage || appearanceConfig?.lightMode?.chat?.welcomeMessage,
|
|
22394
|
+
placeholder: appearanceConfig?.placeholder || appearanceConfig?.lightMode?.footer?.inputPlaceholder,
|
|
22395
|
+
headerTitle: appearanceConfig?.lightMode?.header?.title,
|
|
22396
|
+
buttonIcon: appearanceConfig?.buttonIcon || appearanceConfig?.lightMode?.button?.icon,
|
|
22397
|
+
};
|
|
22398
|
+
// Generate theme styles from accent color
|
|
22399
|
+
const generatedStyles = generateThemeStyles(simpleAppearance, effectiveTheme);
|
|
22400
|
+
// Also apply legacy styles for backward compatibility
|
|
22401
|
+
const legacyStyles = appearanceConfig
|
|
21960
22402
|
? applyAppearanceStyles(appearanceConfig, effectiveTheme)
|
|
21961
22403
|
: {};
|
|
21962
|
-
//
|
|
21963
|
-
|
|
21964
|
-
|
|
21965
|
-
|
|
22404
|
+
// Merge styles (generated takes priority for new simplified system)
|
|
22405
|
+
const customStyles = {
|
|
22406
|
+
...legacyStyles,
|
|
22407
|
+
...generatedStyles,
|
|
22408
|
+
};
|
|
21966
22409
|
// Debug logging for theme and styles
|
|
21967
22410
|
react.useEffect(() => {
|
|
21968
22411
|
console.log('[ChatWidget] Theme info:', {
|
|
21969
22412
|
effectiveTheme,
|
|
21970
|
-
|
|
22413
|
+
autoDetectedTheme,
|
|
21971
22414
|
themeSetting,
|
|
21972
|
-
|
|
21973
|
-
hasCustomStyles: Object.keys(customStyles).length > 0,
|
|
21974
|
-
buttonColor: customStyles['--button-color'],
|
|
21975
|
-
buttonSize: customStyles['--button-size'],
|
|
21976
|
-
cardBackground: customStyles['--card-background'],
|
|
21977
|
-
cardOpacity: customStyles['--card-opacity'],
|
|
21978
|
-
cardBorderRadius: customStyles['--card-border-radius'],
|
|
22415
|
+
accentColor,
|
|
21979
22416
|
});
|
|
21980
|
-
|
|
21981
|
-
}, [effectiveTheme, customStyles]);
|
|
22417
|
+
}, [effectiveTheme, autoDetectedTheme, themeSetting, accentColor]);
|
|
21982
22418
|
const handleToggle = () => {
|
|
21983
22419
|
const newState = !isOpen;
|
|
21984
22420
|
console.log('[ChatWidget] handleToggle called, setting isOpen to:', newState);
|
|
@@ -21999,7 +22435,25 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
|
|
|
21999
22435
|
return null;
|
|
22000
22436
|
}
|
|
22001
22437
|
console.log('[ChatWidget] Rendering widget', { isOpen, hasConfig: !!config });
|
|
22002
|
-
|
|
22438
|
+
// Get button icon based on state
|
|
22439
|
+
const getButtonIcon = () => {
|
|
22440
|
+
if (isOpen) {
|
|
22441
|
+
return iconComponents.FiChevronDown;
|
|
22442
|
+
}
|
|
22443
|
+
const themeConfig = effectiveTheme === 'dark'
|
|
22444
|
+
? appearanceConfig?.darkMode
|
|
22445
|
+
: appearanceConfig?.lightMode;
|
|
22446
|
+
const buttonIcon = themeConfig?.button?.icon || 'FiMessageCircle';
|
|
22447
|
+
return iconComponents[buttonIcon] || iconComponents.FiMessageCircle;
|
|
22448
|
+
};
|
|
22449
|
+
const buttonIconColor = (() => {
|
|
22450
|
+
const themeConfig = effectiveTheme === 'dark'
|
|
22451
|
+
? appearanceConfig?.darkMode
|
|
22452
|
+
: appearanceConfig?.lightMode;
|
|
22453
|
+
return themeConfig?.button?.iconColor || customStyles['--button-icon-color'] || '#ffffff';
|
|
22454
|
+
})();
|
|
22455
|
+
const IconComponent = getButtonIcon();
|
|
22456
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntime.jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsxRuntime.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsxRuntime.jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", style: { color: buttonIconColor }, children: jsxRuntime.jsx("div", { className: "ai-chat-button-svg", children: jsxRuntime.jsx(IconComponent, {}) }) })] }) }));
|
|
22003
22457
|
};
|
|
22004
22458
|
|
|
22005
22459
|
exports.ApiError = ApiError;
|