@headwai/chat-bubble 8.2.0 → 8.3.0
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/CHANGELOG.md +8 -2
- package/README.md +164 -0
- package/dist-widget/chat-bubble.css +1 -1
- package/dist-widget/chat-bubble.js +71 -71
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,9 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [8.3.0] - 2026-01-22
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Speech Bubble Hint. A subtle way to catch the user's attention.
|
|
10
|
+
|
|
5
11
|
## [8.2.0] - 2026-01-21
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
### Added
|
|
8
14
|
|
|
9
15
|
- Capability to render html in disclaimer message and info message.
|
|
10
16
|
|
|
@@ -16,7 +22,7 @@ All notable changes to this project will be documented in this file.
|
|
|
16
22
|
|
|
17
23
|
## [8.0.1] - 2026-01-05
|
|
18
24
|
|
|
19
|
-
|
|
25
|
+
### Added
|
|
20
26
|
|
|
21
27
|
- Compatability with Open WebUI
|
|
22
28
|
- Open source relevant files
|
package/README.md
CHANGED
|
@@ -437,6 +437,165 @@ infoMessage: `<h4>How We Help</h4>
|
|
|
437
437
|
- **Disclaimer**: Legal/privacy notice shown once before first use (requires acceptance)
|
|
438
438
|
- **Info**: Helpful information accessible anytime via the info button in the chat header
|
|
439
439
|
|
|
440
|
+
### Speech Bubble Hint Configuration
|
|
441
|
+
|
|
442
|
+
The speech bubble hint is a helpful tooltip that appears next to the chat icon to encourage user interaction. It uses **session-based display logic** to provide an optimal user experience.
|
|
443
|
+
|
|
444
|
+
**Display Behavior:**
|
|
445
|
+
|
|
446
|
+
- ✅ **Appears**: On first page load in a new browser session, after browser restart, or when opening a new tab after closing all previous ones
|
|
447
|
+
- ❌ **Doesn't appear**: On page refresh, when chat is closed/reopened, or when navigating within the same session
|
|
448
|
+
|
|
449
|
+
This ensures the hint is helpful for new visitors without becoming repetitive for active users.
|
|
450
|
+
|
|
451
|
+
#### `speechBubbleHintMessage`
|
|
452
|
+
|
|
453
|
+
**Type:** `string` | **Default:** `'Click here if you need <strong>help</strong>!'`
|
|
454
|
+
The message displayed in the speech bubble hint that appears next to the chat icon. This hint automatically shows for a few seconds to encourage users to interact with the chat.
|
|
455
|
+
|
|
456
|
+
**HTML Support:** ✅ This field supports HTML formatting for rich text display.
|
|
457
|
+
|
|
458
|
+
```javascript
|
|
459
|
+
speechBubbleHintMessage: 'Need <strong>assistance</strong>? Click here!';
|
|
460
|
+
speechBubbleHintMessage: "Questions? <em>We're here to help!</em>";
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
#### `speechBubbleHintDuration`
|
|
464
|
+
|
|
465
|
+
**Type:** `number` | **Default:** `4000` (4 seconds)
|
|
466
|
+
Duration in milliseconds for how long the speech bubble hint is displayed before it automatically disappears.
|
|
467
|
+
|
|
468
|
+
```javascript
|
|
469
|
+
speechBubbleHintDuration: 5000; // Show for 5 seconds
|
|
470
|
+
speechBubbleHintDuration: 3000; // Show for 3 seconds
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
#### `enableSpeechBubbleHint`
|
|
474
|
+
|
|
475
|
+
**Type:** `boolean` | **Default:** `true`
|
|
476
|
+
Controls whether the speech bubble hint is displayed at all. Set to `false` to completely disable the hint feature.
|
|
477
|
+
|
|
478
|
+
```javascript
|
|
479
|
+
enableSpeechBubbleHint: false; // Disable speech bubble hint
|
|
480
|
+
enableSpeechBubbleHint: true; // Enable speech bubble hint (default)
|
|
481
|
+
```
|
|
482
|
+
|
|
483
|
+
#### `speechBubbleHintBackgroundColor`
|
|
484
|
+
|
|
485
|
+
**Type:** `string` | **Default:** `'#ffffff'` (white)
|
|
486
|
+
Background color for the speech bubble hint. Accepts any valid CSS color value.
|
|
487
|
+
|
|
488
|
+
```javascript
|
|
489
|
+
speechBubbleHintBackgroundColor: '#007bff'; // Blue background
|
|
490
|
+
speechBubbleHintBackgroundColor: '#28a745'; // Green background
|
|
491
|
+
speechBubbleHintBackgroundColor: '#ffc107'; // Yellow background
|
|
492
|
+
```
|
|
493
|
+
|
|
494
|
+
#### `speechBubbleHintTextColor`
|
|
495
|
+
|
|
496
|
+
**Type:** `string` | **Default:** `'#333333'` (dark gray)
|
|
497
|
+
Text color for the speech bubble hint content. Accepts any valid CSS color value.
|
|
498
|
+
|
|
499
|
+
```javascript
|
|
500
|
+
speechBubbleHintTextColor: '#ffffff'; // White text
|
|
501
|
+
speechBubbleHintTextColor: '#000000'; // Black text
|
|
502
|
+
speechBubbleHintTextColor: '#495057'; // Gray text
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
### Security and HTML Content
|
|
506
|
+
|
|
507
|
+
#### HTML Content Sanitization
|
|
508
|
+
|
|
509
|
+
All HTML content in `disclaimerTitle`, `disclaimerMessage`, `infoTitle`, and `infoMessage` is automatically sanitized using **DOMPurify**, the industry-standard HTML sanitization library, to prevent XSS (Cross-Site Scripting) attacks while preserving safe formatting.
|
|
510
|
+
|
|
511
|
+
**Why DOMPurify:**
|
|
512
|
+
|
|
513
|
+
- **Battle-tested**: Used by millions of websites and applications worldwide
|
|
514
|
+
- **Security expertise**: Maintained by security researchers who understand XSS attack vectors
|
|
515
|
+
- **Regular updates**: Continuously updated to protect against new threats
|
|
516
|
+
- **Performance**: Optimized for speed and efficiency
|
|
517
|
+
- **Comprehensive**: Handles edge cases and browser inconsistencies
|
|
518
|
+
|
|
519
|
+
**Allowed HTML Tags:**
|
|
520
|
+
|
|
521
|
+
**For Message Content** (`disclaimerMessage`, `infoMessage`):
|
|
522
|
+
|
|
523
|
+
- **Text formatting**: `<strong>`, `<b>`, `<em>`, `<i>`, `<u>`, `<code>`, `<span>`
|
|
524
|
+
- **Structure**: `<p>`, `<h1>` through `<h6>`, `<br>`, `<ul>`, `<ol>`, `<li>`, `<blockquote>`
|
|
525
|
+
- **Links**: `<a>` (with validated `href`, `title`, `target` attributes)
|
|
526
|
+
|
|
527
|
+
**For Titles** (`disclaimerTitle`, `infoTitle`):
|
|
528
|
+
|
|
529
|
+
- **Basic formatting only**: `<strong>`, `<b>`, `<em>`, `<i>`, `<code>`, `<span>`
|
|
530
|
+
- **No links or structural elements** for security and UI consistency
|
|
531
|
+
|
|
532
|
+
**Security Features:**
|
|
533
|
+
|
|
534
|
+
- **Automatic threat removal**: Dangerous tags like `<script>`, `<iframe>`, `<object>` are completely removed
|
|
535
|
+
- **Attribute sanitization**: Dangerous attributes like `onclick`, `onerror`, `style` are stripped
|
|
536
|
+
- **URL validation**: Links only allow `http://`, `https://`, `mailto:`, and relative URLs
|
|
537
|
+
- **Protocol blocking**: JavaScript URLs (`javascript:`) and data URLs (`data:`) are blocked
|
|
538
|
+
- **Link security**: External links automatically get `rel="noopener noreferrer"` for security
|
|
539
|
+
|
|
540
|
+
**Examples of Safe HTML Content:**
|
|
541
|
+
|
|
542
|
+
```javascript
|
|
543
|
+
// ✅ Safe and allowed content
|
|
544
|
+
disclaimerMessage: `<p>By using this service, you agree to:</p>
|
|
545
|
+
<ul>
|
|
546
|
+
<li><strong>Privacy:</strong> Your data is <em>protected</em></li>
|
|
547
|
+
<li>Use <code>secure connections</code> only</li>
|
|
548
|
+
<li>See our <a href="/terms" target="_blank">full terms</a></li>
|
|
549
|
+
</ul>
|
|
550
|
+
<blockquote>Your privacy is our priority</blockquote>`;
|
|
551
|
+
|
|
552
|
+
// ✅ Safe title formatting
|
|
553
|
+
disclaimerTitle: 'Terms of <strong>Service</strong>';
|
|
554
|
+
infoTitle: 'How This <em>Works</em>';
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
**Examples of Content That Gets Sanitized:**
|
|
558
|
+
|
|
559
|
+
```javascript
|
|
560
|
+
// ❌ Dangerous content (automatically removed/sanitized)
|
|
561
|
+
input: '<script>alert("XSS")</script>Terms of Service';
|
|
562
|
+
output: 'Terms of Service'; // Script tag completely removed
|
|
563
|
+
|
|
564
|
+
input: '<img src="x" onerror="alert(1)">Safe image';
|
|
565
|
+
output: '<img src="x">Safe image'; // onerror attribute stripped
|
|
566
|
+
|
|
567
|
+
input: '<a href="javascript:alert(1)">Click me</a>';
|
|
568
|
+
output: '<a>Click me</a>'; // Dangerous href removed
|
|
569
|
+
|
|
570
|
+
input: '<p onclick="malicious()">Click me</p>';
|
|
571
|
+
output: '<p>Click me</p>'; // onclick attribute stripped
|
|
572
|
+
```
|
|
573
|
+
|
|
574
|
+
**Testing Sanitization:**
|
|
575
|
+
|
|
576
|
+
To verify that your HTML content is properly sanitized, you can test with potentially dangerous input:
|
|
577
|
+
|
|
578
|
+
```javascript
|
|
579
|
+
// Test configuration with malicious content
|
|
580
|
+
window.HEADWAI_CHAT_BUBBLE_CONFIG = {
|
|
581
|
+
disclaimerTitle: '<script>alert("XSS")</script>Safe <strong>Title</strong>',
|
|
582
|
+
disclaimerMessage: `
|
|
583
|
+
<p>Safe content</p>
|
|
584
|
+
<img src="x" onerror="alert('XSS')">
|
|
585
|
+
<a href="javascript:void(0)">Dangerous link</a>
|
|
586
|
+
<a href="https://safe-site.com">Safe link</a>
|
|
587
|
+
`,
|
|
588
|
+
};
|
|
589
|
+
```
|
|
590
|
+
|
|
591
|
+
If sanitization is working correctly, no JavaScript alerts will appear, and only safe HTML will be rendered.
|
|
592
|
+
|
|
593
|
+
**Maintenance:**
|
|
594
|
+
|
|
595
|
+
- DOMPurify is automatically updated through npm updates
|
|
596
|
+
- The widget uses the latest version of DOMPurify for maximum security
|
|
597
|
+
- No manual maintenance of sanitization rules is required
|
|
598
|
+
|
|
440
599
|
### Security and HTML Content
|
|
441
600
|
|
|
442
601
|
#### HTML Content Sanitization
|
|
@@ -544,6 +703,11 @@ When using data attributes for multiple HeadwAI Chat Bubbles, convert camelCase
|
|
|
544
703
|
- `disclaimerMessage` → `data-chat-bubble-disclaimer-message`
|
|
545
704
|
- `infoTitle` → `data-chat-bubble-info-title`
|
|
546
705
|
- `infoMessage` → `data-chat-bubble-info-message`
|
|
706
|
+
- `speechBubbleHintMessage` → `data-chat-bubble-speech-bubble-hint-message`
|
|
707
|
+
- `speechBubbleHintDuration` → `data-chat-bubble-speech-bubble-hint-duration`
|
|
708
|
+
- `enableSpeechBubbleHint` → `data-chat-bubble-enable-speech-bubble-hint`
|
|
709
|
+
- `speechBubbleHintBackgroundColor` → `data-chat-bubble-speech-bubble-hint-background-color`
|
|
710
|
+
- `speechBubbleHintTextColor` → `data-chat-bubble-speech-bubble-hint-text-color`
|
|
547
711
|
|
|
548
712
|
## Troubleshooting
|
|
549
713
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{background:var(--chat-header-background, #667eea);color:#fff;padding:16px 20px;border-radius:12px 12px 0 0;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.chat-header-content.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:2em}.chat-header-icon.svelte-1nmjrnd.svelte-1nmjrnd{height:100%;max-height:3em;width:auto;object-fit:contain;flex-shrink:0}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{margin:0;font-weight:600;text-align:center;font-family:var(--font-family, inherit);font-size:calc(var(--font-size, 1em) * 1.2);flex:1;line-height:1.2;padding:.5rem 0}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;gap:4px;align-items:center;flex-shrink:0}.button-icon.svelte-1nmjrnd.svelte-1nmjrnd{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-1nmjrnd.svelte-1nmjrnd{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;height:100%;max-height:3.5em;width:auto;aspect-ratio:1;min-height:3em;min-width:3em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:#ffffff1a;transform:scale(1.05)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.95)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled{opacity:.5;cursor:not-allowed}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled:hover{background-color:transparent;transform:none}@media (max-width: 768px){.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{border-radius:0;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px));position:relative;z-index:1000}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{gap:2px}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{width:3.5em;height:3.5em;padding:2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:3.75em;min-height:3.75em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:transparent;transform:none}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.9);transition:all .1s ease}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{font-size:1.125em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}@media screen and (max-width: 768px){.chat-header-buttons.svelte-1nmjrnd button.svelte-1nmjrnd{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;cursor:pointer;pointer-events:auto;z-index:998;transition:transform .2s ease,box-shadow .2s ease}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:hover{transform:scale(1.1);box-shadow:0 6px 8px #00000026}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:active{transform:scale(.95);box-shadow:0 2px 4px #0000001a}.ai-assistant-icon.svelte-cw4sfs img.svelte-cw4sfs{width:65%;height:65%;object-fit:contain}@media (max-width: 768px){.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs{width:56px;height:56px;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px));-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:9998}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:hover{transform:none}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:active{transform:scale(.9);transition:transform .1s ease}}@media (max-width: 480px){.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs{width:64px;height:64px;min-width:44px;min-height:44px}}.chat-content.svelte-nmr4np{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-content.svelte-nmr4np deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-content.svelte-nmr4np deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@media (max-width: 768px){.chat-content.svelte-nmr4np{position:relative;min-height:0;flex:1 1 auto}.chat-content.svelte-nmr4np deep-chat{max-height:100%!important;overflow:hidden!important}.chat-content.svelte-nmr4np deep-chat [class*=input],.chat-content.svelte-nmr4np deep-chat [class*=text-input],.chat-content.svelte-nmr4np deep-chat input,.chat-content.svelte-nmr4np deep-chat textarea{position:relative!important;z-index:1000!important;margin-bottom:env(safe-area-inset-bottom,0px)!important;font-size:16px!important;-webkit-text-size-adjust:100%!important}.chat-content.svelte-nmr4np deep-chat [class*=messages],.chat-content.svelte-nmr4np deep-chat [class*=message-container]{padding-bottom:80px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}}@media screen and (max-width: 768px) and (max-height: 600px){.chat-content.svelte-nmr4np deep-chat{height:100%!important;max-height:none!important}}.message-content{font-size:var(--font-size, 1em);font-family:var(--font-family, inherit);line-height:1.5;color:#555}.message-content p{margin:0 0 .75em}.message-content p:last-child{margin-bottom:0}.message-content h1,.message-content h2,.message-content h3,.message-content h4,.message-content h5,.message-content h6{margin:1em 0 .5em;font-weight:600;font-family:var(--font-family, inherit);color:#333}.message-content h1:first-child,.message-content h2:first-child,.message-content h3:first-child,.message-content h4:first-child,.message-content h5:first-child,.message-content h6:first-child{margin-top:0}.message-content h1{font-size:1.5em}.message-content h2{font-size:1.3em}.message-content h3{font-size:1.2em}.message-content h4{font-size:1.1em}.message-content h5,.message-content h6{font-size:1em}.message-content ul,.message-content ol{margin:.5em 0;padding-left:1.25em}.message-content li{margin:.25em 0}.message-content a{color:var(--submit-button-color, #007bff);text-decoration:underline}.message-content a:hover{text-decoration:none}.message-content strong{font-weight:600}.message-content em{font-style:italic}.message-content code{background-color:#f5f5f5;padding:.125em .25em;border-radius:.25em;font-family:monospace;font-size:.9em}.message-content pre{background-color:#f5f5f5;padding:.75em;border-radius:.25em;overflow-x:auto;margin:.75em 0}.message-content pre code{background:none;padding:0}.message-content blockquote{margin:.75em 0;padding:.5em 1em;border-left:.25em solid var(--submit-button-color, #007bff);background-color:#f9f9f9;font-style:italic}.disclaimer-container.svelte-m07sue.svelte-m07sue{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:1000}.disclaimer-content.svelte-m07sue.svelte-m07sue{padding:24px;max-width:350px;text-align:left}.disclaimer-header.svelte-m07sue h3.svelte-m07sue{margin:0 0 16px;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;text-align:center}.disclaimer-body.svelte-m07sue.svelte-m07sue{margin-bottom:24px}.disclaimer-actions.svelte-m07sue.svelte-m07sue{display:flex;gap:12px;justify-content:center}.decline-button.svelte-m07sue.svelte-m07sue,.accept-button.svelte-m07sue.svelte-m07sue{padding:10px 20px;border:none;border-radius:6px;font-size:calc(var(--font-size, 1em) * 1.1);font-family:var(--font-family, inherit);font-weight:500;cursor:pointer;transition:background-color .2s ease;min-width:80px}.decline-button.svelte-m07sue.svelte-m07sue{background:#f5f5f5;color:#666}.decline-button.svelte-m07sue.svelte-m07sue:hover{background:#e8e8e8}.accept-button.svelte-m07sue.svelte-m07sue{background:var(--submit-button-color, #007bff);color:#fff}.accept-button.svelte-m07sue.svelte-m07sue:hover{opacity:.8}.accept-button.svelte-m07sue.svelte-m07sue:focus,.decline-button.svelte-m07sue.svelte-m07sue:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-overlay.svelte-1xufevn.svelte-1xufevn{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:svelte-1xufevn-fadeIn .2s ease-out}@keyframes svelte-1xufevn-fadeIn{0%{opacity:0}to{opacity:1}}.disclaimer-info-content.svelte-1xufevn.svelte-1xufevn{background:#fff;border-radius:12px;padding:24px;max-width:350px;max-height:80%;overflow-y:auto;position:relative;animation:svelte-1xufevn-slideInScale .3s ease-out;box-shadow:0 12px 40px #0003}@keyframes svelte-1xufevn-slideInScale{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.disclaimer-info-header.svelte-1xufevn.svelte-1xufevn{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.disclaimer-info-header.svelte-1xufevn h3.svelte-1xufevn{margin:0;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;flex:1;padding-right:12px}.close-info-button.svelte-1xufevn.svelte-1xufevn{background:none;border:none;color:#666;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.close-icon.svelte-1xufevn.svelte-1xufevn{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-1xufevn.svelte-1xufevn{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.close-info-button.svelte-1xufevn.svelte-1xufevn:hover{background-color:#f5f5f5;color:#333}.close-info-button.svelte-1xufevn.svelte-1xufevn:active{background-color:#e8e8e8;transform:scale(.95)}.close-info-button.svelte-1xufevn.svelte-1xufevn:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-body.svelte-1xufevn.svelte-1xufevn{color:#555}@media (max-width: 768px){.disclaimer-info-content.svelte-1xufevn.svelte-1xufevn{max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);margin:20px}.disclaimer-info-header.svelte-1xufevn h3.svelte-1xufevn{font-size:calc(var(--font-size, 1em) * 1.2)}.close-info-button.svelte-1xufevn.svelte-1xufevn{padding:8px;min-width:44px;min-height:44px}}html,body{margin:0;padding:0;width:100%;height:100%}main.svelte-rzw9x0{font-family:sans-serif;margin:0;padding:0;pointer-events:none}.chat-container.svelte-rzw9x0{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;pointer-events:auto;animation:svelte-rzw9x0-slideIn .3s ease-out;display:flex;flex-direction:column}@keyframes svelte-rzw9x0-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-rzw9x0{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);box-sizing:border-box;-webkit-text-size-adjust:100%;z-index:9999}@media (orientation: portrait){.chat-container.svelte-rzw9x0{min-height:100dvh;max-height:100dvh}}}
|
|
1
|
+
.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{background:var(--chat-header-background, #667eea);color:#fff;padding:16px 20px;border-radius:12px 12px 0 0;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.chat-header-content.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:2em}.chat-header-icon.svelte-1nmjrnd.svelte-1nmjrnd{height:100%;max-height:3em;width:auto;object-fit:contain;flex-shrink:0}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{margin:0;font-weight:600;text-align:center;font-family:var(--font-family, inherit);font-size:calc(var(--font-size, 1em) * 1.2);flex:1;line-height:1.2;padding:.5rem 0}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;gap:4px;align-items:center;flex-shrink:0}.button-icon.svelte-1nmjrnd.svelte-1nmjrnd{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-1nmjrnd.svelte-1nmjrnd{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;height:100%;max-height:3.5em;width:auto;aspect-ratio:1;min-height:3em;min-width:3em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:#ffffff1a;transform:scale(1.05)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.95)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled{opacity:.5;cursor:not-allowed}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled:hover{background-color:transparent;transform:none}@media (max-width: 768px){.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{border-radius:0;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px));position:relative;z-index:1000}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{gap:2px}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{width:3.5em;height:3.5em;padding:2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:3.75em;min-height:3.75em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:transparent;transform:none}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.9);transition:all .1s ease}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{font-size:1.125em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}@media screen and (max-width: 768px){.chat-header-buttons.svelte-1nmjrnd button.svelte-1nmjrnd{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}.ai-assistant-icon.svelte-496nns.svelte-496nns{position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease}.ai-assistant-icon.svelte-496nns.svelte-496nns:hover{transform:scale(1.1);box-shadow:0 6px 8px #00000026}.ai-assistant-icon.svelte-496nns.svelte-496nns:active{transform:scale(.95);box-shadow:0 2px 4px #0000001a}.ai-assistant-icon.svelte-496nns img.svelte-496nns{width:65%;height:65%;object-fit:contain}@media (max-width: 768px){.ai-assistant-icon.svelte-496nns.svelte-496nns{width:56px;height:56px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.ai-assistant-icon.svelte-496nns.svelte-496nns:hover{transform:none}.ai-assistant-icon.svelte-496nns.svelte-496nns:active{transform:scale(.9);transition:transform .1s ease}}@media (max-width: 480px){.ai-assistant-icon.svelte-496nns.svelte-496nns{width:48px;height:48px;min-width:44px;min-height:44px}}.chat-content.svelte-nmr4np{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-content.svelte-nmr4np deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-content.svelte-nmr4np deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@media (max-width: 768px){.chat-content.svelte-nmr4np{position:relative;min-height:0;flex:1 1 auto}.chat-content.svelte-nmr4np deep-chat{max-height:100%!important;overflow:hidden!important}.chat-content.svelte-nmr4np deep-chat [class*=input],.chat-content.svelte-nmr4np deep-chat [class*=text-input],.chat-content.svelte-nmr4np deep-chat input,.chat-content.svelte-nmr4np deep-chat textarea{position:relative!important;z-index:1000!important;margin-bottom:env(safe-area-inset-bottom,0px)!important;font-size:16px!important;-webkit-text-size-adjust:100%!important}.chat-content.svelte-nmr4np deep-chat [class*=messages],.chat-content.svelte-nmr4np deep-chat [class*=message-container]{padding-bottom:80px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}}@media screen and (max-width: 768px) and (max-height: 600px){.chat-content.svelte-nmr4np deep-chat{height:100%!important;max-height:none!important}}.message-content{font-size:var(--font-size, 1em);font-family:var(--font-family, inherit);line-height:1.5;color:#555}.message-content p{margin:0 0 .75em}.message-content p:last-child{margin-bottom:0}.message-content h1,.message-content h2,.message-content h3,.message-content h4,.message-content h5,.message-content h6{margin:1em 0 .5em;font-weight:600;font-family:var(--font-family, inherit);color:#333}.message-content h1:first-child,.message-content h2:first-child,.message-content h3:first-child,.message-content h4:first-child,.message-content h5:first-child,.message-content h6:first-child{margin-top:0}.message-content h1{font-size:1.5em}.message-content h2{font-size:1.3em}.message-content h3{font-size:1.2em}.message-content h4{font-size:1.1em}.message-content h5,.message-content h6{font-size:1em}.message-content ul,.message-content ol{margin:.5em 0;padding-left:1.25em}.message-content li{margin:.25em 0}.message-content a{color:var(--submit-button-color, #007bff);text-decoration:underline}.message-content a:hover{text-decoration:none}.message-content strong{font-weight:600}.message-content em{font-style:italic}.message-content code{background-color:#f5f5f5;padding:.125em .25em;border-radius:.25em;font-family:monospace;font-size:.9em}.message-content pre{background-color:#f5f5f5;padding:.75em;border-radius:.25em;overflow-x:auto;margin:.75em 0}.message-content pre code{background:none;padding:0}.message-content blockquote{margin:.75em 0;padding:.5em 1em;border-left:.25em solid var(--submit-button-color, #007bff);background-color:#f9f9f9;font-style:italic}.disclaimer-container.svelte-m07sue.svelte-m07sue{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:1000}.disclaimer-content.svelte-m07sue.svelte-m07sue{padding:24px;max-width:350px;text-align:left}.disclaimer-header.svelte-m07sue h3.svelte-m07sue{margin:0 0 16px;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;text-align:center}.disclaimer-body.svelte-m07sue.svelte-m07sue{margin-bottom:24px}.disclaimer-actions.svelte-m07sue.svelte-m07sue{display:flex;gap:12px;justify-content:center}.decline-button.svelte-m07sue.svelte-m07sue,.accept-button.svelte-m07sue.svelte-m07sue{padding:10px 20px;border:none;border-radius:6px;font-size:calc(var(--font-size, 1em) * 1.1);font-family:var(--font-family, inherit);font-weight:500;cursor:pointer;transition:background-color .2s ease;min-width:80px}.decline-button.svelte-m07sue.svelte-m07sue{background:#f5f5f5;color:#666}.decline-button.svelte-m07sue.svelte-m07sue:hover{background:#e8e8e8}.accept-button.svelte-m07sue.svelte-m07sue{background:var(--submit-button-color, #007bff);color:#fff}.accept-button.svelte-m07sue.svelte-m07sue:hover{opacity:.8}.accept-button.svelte-m07sue.svelte-m07sue:focus,.decline-button.svelte-m07sue.svelte-m07sue:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-overlay.svelte-1xufevn.svelte-1xufevn{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:svelte-1xufevn-fadeIn .2s ease-out}@keyframes svelte-1xufevn-fadeIn{0%{opacity:0}to{opacity:1}}.disclaimer-info-content.svelte-1xufevn.svelte-1xufevn{background:#fff;border-radius:12px;padding:24px;max-width:350px;max-height:80%;overflow-y:auto;position:relative;animation:svelte-1xufevn-slideInScale .3s ease-out;box-shadow:0 12px 40px #0003}@keyframes svelte-1xufevn-slideInScale{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.disclaimer-info-header.svelte-1xufevn.svelte-1xufevn{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.disclaimer-info-header.svelte-1xufevn h3.svelte-1xufevn{margin:0;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;flex:1;padding-right:12px}.close-info-button.svelte-1xufevn.svelte-1xufevn{background:none;border:none;color:#666;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.close-icon.svelte-1xufevn.svelte-1xufevn{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-1xufevn.svelte-1xufevn{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.close-info-button.svelte-1xufevn.svelte-1xufevn:hover{background-color:#f5f5f5;color:#333}.close-info-button.svelte-1xufevn.svelte-1xufevn:active{background-color:#e8e8e8;transform:scale(.95)}.close-info-button.svelte-1xufevn.svelte-1xufevn:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-body.svelte-1xufevn.svelte-1xufevn{color:#555}@media (max-width: 768px){.disclaimer-info-content.svelte-1xufevn.svelte-1xufevn{max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);margin:20px}.disclaimer-info-header.svelte-1xufevn h3.svelte-1xufevn{font-size:calc(var(--font-size, 1em) * 1.2)}.close-info-button.svelte-1xufevn.svelte-1xufevn{padding:8px;min-width:44px;min-height:44px}}.speech-bubble.svelte-s8ri2n{position:absolute;top:50%;right:calc(100% + 20px);transform:translateY(-50%);background:var(--bg-color, #ffffff);border-radius:12px;padding:12px 16px;box-shadow:0 4px 16px #00000026;min-width:180px;max-width:280px;width:max-content;z-index:1000;opacity:0;transform:translateY(-50%) translate(10px);transition:all .3s ease-out;pointer-events:none}.speech-bubble.visible.svelte-s8ri2n{opacity:1;transform:translateY(-50%) translate(0)}.speech-content.svelte-s8ri2n{font-size:var(--font-size, 14px);font-family:var(--font-family, inherit);color:var(--text-color, #333);line-height:1.4;text-align:left}.speech-content.svelte-s8ri2n p{margin:0 0 .5em}.speech-content.svelte-s8ri2n p:last-child{margin-bottom:0}.speech-content.svelte-s8ri2n strong{font-weight:600}.speech-content.svelte-s8ri2n em{font-style:italic}.speech-content.svelte-s8ri2n a{color:#007bff;text-decoration:none}.speech-content.svelte-s8ri2n a:hover{text-decoration:underline}.speech-tail.svelte-s8ri2n{position:absolute;top:50%;right:-6px;transform:translateY(-50%);width:0;height:0;border-left:6px solid var(--bg-color, #ffffff);border-top:6px solid transparent;border-bottom:6px solid transparent}@media (max-width: 768px){.speech-bubble.svelte-s8ri2n{right:calc(100% + 15px);min-width:140px;max-width:220px;padding:10px 12px}.speech-content.svelte-s8ri2n{font-size:calc(var(--font-size, 13px) * .9)}}@media (max-width: 480px){.speech-bubble.svelte-s8ri2n{min-width:120px;max-width:180px}}@media (max-width: 360px){.speech-bubble.svelte-s8ri2n{display:none}}html,body{margin:0;padding:0;width:100%;height:100%}main.svelte-silgh7{font-family:sans-serif;margin:0;padding:0;pointer-events:none}.chat-icon-container.svelte-silgh7{position:fixed;bottom:20px;right:20px;width:60px;height:60px;z-index:998;pointer-events:auto}@media (max-width: 768px){.chat-icon-container.svelte-silgh7{width:56px;height:56px;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px));z-index:9998}}@media (max-width: 480px){.chat-icon-container.svelte-silgh7{width:64px;height:64px}}.chat-container.svelte-silgh7{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;pointer-events:auto;animation:svelte-silgh7-slideIn .3s ease-out;display:flex;flex-direction:column}@keyframes svelte-silgh7-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-silgh7{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);box-sizing:border-box;-webkit-text-size-adjust:100%;z-index:9999}@media (orientation: portrait){.chat-container.svelte-silgh7{min-height:100dvh;max-height:100dvh}}}
|