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