@headwai/chat-bubble 6.7.0 → 6.7.2-rc.submit-button-design.45b3a3a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -2
- package/dist-widget/chat-bubble.css +1 -1
- package/dist-widget/chat-bubble.js +87 -80
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -222,8 +222,9 @@ locale: 'de-DE'; // Force German interface
|
|
|
222
222
|
```
|
|
223
223
|
|
|
224
224
|
**Supported Languages:**
|
|
225
|
+
|
|
225
226
|
- `'en-GB'` - English (United Kingdom) - Default
|
|
226
|
-
- `'de-DE'` - German (Germany)
|
|
227
|
+
- `'de-DE'` - German (Germany)
|
|
227
228
|
- `'de-AT'` - German (Austria)
|
|
228
229
|
|
|
229
230
|
If your browser is set to German (de-DE, de-AT, or just "de"), the widget will automatically display German text. For all other languages, it falls back to English.
|
|
@@ -269,7 +270,13 @@ aiMessageTextColor: '#333333';
|
|
|
269
270
|
#### `faviconBackgroundColor`
|
|
270
271
|
|
|
271
272
|
**Type:** `string` | **Default:** `'#667eea'`
|
|
272
|
-
|
|
273
|
+
Primary color used throughout the chat interface. This color is applied to:
|
|
274
|
+
|
|
275
|
+
- The chat bubble icon background
|
|
276
|
+
- The chat header background
|
|
277
|
+
- The submit button background
|
|
278
|
+
|
|
279
|
+
This provides a consistent color theme across the entire chat widget.
|
|
273
280
|
|
|
274
281
|
```javascript
|
|
275
282
|
faviconBackgroundColor: '#667eea';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.chat-header.svelte-
|
|
1
|
+
.chat-header.svelte-1rricw0.svelte-1rricw0{color:#fff;padding:16px 20px;border-radius:12px 12px 0 0;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.chat-header-content.svelte-1rricw0.svelte-1rricw0{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:2em}.chat-header-icon.svelte-1rricw0.svelte-1rricw0{height:100%;max-height:2em;width:auto;object-fit:contain;flex-shrink:0}.chat-title.svelte-1rricw0.svelte-1rricw0{margin:0;font-weight:600;text-align:center;font-family:inherit;flex:1;line-height:1.2;padding:.5rem 0}.chat-header-buttons.svelte-1rricw0.svelte-1rricw0{display:flex;gap:4px;align-items:center;flex-shrink:0}.chat-new-button.svelte-1rricw0.svelte-1rricw0,.chat-download-button.svelte-1rricw0.svelte-1rricw0,.chat-close-button.svelte-1rricw0.svelte-1rricw0{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-1rricw0.svelte-1rricw0:hover,.chat-download-button.svelte-1rricw0.svelte-1rricw0:hover,.chat-close-button.svelte-1rricw0.svelte-1rricw0:hover{background-color:#ffffff1a;transform:scale(1.05)}.chat-new-button.svelte-1rricw0.svelte-1rricw0:active,.chat-download-button.svelte-1rricw0.svelte-1rricw0:active,.chat-close-button.svelte-1rricw0.svelte-1rricw0:active{background-color:#fff3;transform:scale(.95)}.chat-new-button.svelte-1rricw0.svelte-1rricw0:focus,.chat-download-button.svelte-1rricw0.svelte-1rricw0:focus,.chat-close-button.svelte-1rricw0.svelte-1rricw0:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.chat-download-button.svelte-1rricw0.svelte-1rricw0:disabled{opacity:.5;cursor:not-allowed}.chat-download-button.svelte-1rricw0.svelte-1rricw0:disabled:hover{background-color:transparent;transform:none}@media (max-width: 768px){.chat-header.svelte-1rricw0.svelte-1rricw0{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-1rricw0.svelte-1rricw0{gap:2px}.chat-new-button.svelte-1rricw0.svelte-1rricw0,.chat-download-button.svelte-1rricw0.svelte-1rricw0,.chat-close-button.svelte-1rricw0.svelte-1rricw0{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-1rricw0.svelte-1rricw0:hover,.chat-download-button.svelte-1rricw0.svelte-1rricw0:hover,.chat-close-button.svelte-1rricw0.svelte-1rricw0:hover{background-color:transparent;transform:none}.chat-new-button.svelte-1rricw0.svelte-1rricw0:active,.chat-download-button.svelte-1rricw0.svelte-1rricw0:active,.chat-close-button.svelte-1rricw0.svelte-1rricw0:active{background-color:#fff3;transform:scale(.9);transition:all .1s ease}.chat-title.svelte-1rricw0.svelte-1rricw0{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-1rricw0 button.svelte-1rricw0{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}.ai-assistant-icon.svelte-1qxp0ze.svelte-1qxp0ze{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-1qxp0ze.svelte-1qxp0ze:hover{transform:scale(1.1);box-shadow:0 6px 8px #00000026}.ai-assistant-icon.svelte-1qxp0ze.svelte-1qxp0ze:active{transform:scale(.95);box-shadow:0 2px 4px #0000001a}.ai-assistant-icon.svelte-1qxp0ze img.svelte-1qxp0ze{width:75%;height:75%;object-fit:contain}@media (max-width: 768px){.ai-assistant-icon.svelte-1qxp0ze.svelte-1qxp0ze{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-1qxp0ze.svelte-1qxp0ze:hover{transform:none}.ai-assistant-icon.svelte-1qxp0ze.svelte-1qxp0ze:active{transform:scale(.9);transition:transform .1s ease}}@media (max-width: 480px){.ai-assistant-icon.svelte-1qxp0ze.svelte-1qxp0ze{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}}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}}}
|