@chatwidgetai/chat-widget 0.1.4 → 0.1.6

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