@myned-ai/avatar-chat-widget 0.4.0 → 0.5.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/README.md
CHANGED
|
@@ -23,8 +23,7 @@ Add directly to any HTML page or website builder:
|
|
|
23
23
|
AvatarChat.init({
|
|
24
24
|
container: '#avatar-chat',
|
|
25
25
|
serverUrl: 'wss://your-backend-server.com/ws',
|
|
26
|
-
position: 'bottom-right'
|
|
27
|
-
theme: 'light'
|
|
26
|
+
position: 'bottom-right'
|
|
28
27
|
});
|
|
29
28
|
</script>
|
|
30
29
|
```
|
|
@@ -63,7 +62,6 @@ chat.destroy(); // Cleanup
|
|
|
63
62
|
| `container` | `string \| HTMLElement` | **required** | CSS selector or DOM element |
|
|
64
63
|
| `serverUrl` | `string` | **required** | WebSocket server URL (ws:// or wss://) |
|
|
65
64
|
| `position` | `string` | `'bottom-right'` | `bottom-right`, `bottom-left`, `top-right`, `top-left`, `inline` |
|
|
66
|
-
| `theme` | `string` | `'light'` | `light`, `dark`, `auto` (follows system preference) |
|
|
67
65
|
| `startCollapsed` | `boolean` | `true` | Start minimized as bubble |
|
|
68
66
|
| `width` | `number` | `380` | Widget width (200-2000px) |
|
|
69
67
|
| `height` | `number` | `550` | Widget height (300-2000px) |
|
|
@@ -5207,6 +5207,16 @@ const WIDGET_STYLES = `
|
|
|
5207
5207
|
object-fit: cover;
|
|
5208
5208
|
}
|
|
5209
5209
|
|
|
5210
|
+
.avatar-fallback-icon {
|
|
5211
|
+
width: 100%;
|
|
5212
|
+
height: 100%;
|
|
5213
|
+
display: flex;
|
|
5214
|
+
align-items: center;
|
|
5215
|
+
justify-content: center;
|
|
5216
|
+
background: linear-gradient(135deg, #4B4ACF 0%, #2E3A87 100%);
|
|
5217
|
+
color: white;
|
|
5218
|
+
}
|
|
5219
|
+
|
|
5210
5220
|
.bubble-avatar-preview .status-dot {
|
|
5211
5221
|
position: absolute;
|
|
5212
5222
|
bottom: 0;
|
|
@@ -5424,14 +5434,14 @@ const WIDGET_STYLES = `
|
|
|
5424
5434
|
bottom: 110px; /* Similar position to subtitles, above input */
|
|
5425
5435
|
width: 95%;
|
|
5426
5436
|
max-width: none;
|
|
5427
|
-
gap:
|
|
5428
|
-
padding:
|
|
5437
|
+
gap: 6px;
|
|
5438
|
+
padding: 4px;
|
|
5429
5439
|
}
|
|
5430
5440
|
|
|
5431
5441
|
:host(:not(.collapsed)) [data-drawer-state="avatar-focus"] .avatar-suggestions .suggestion-chip {
|
|
5432
|
-
padding: 12px
|
|
5433
|
-
font-size:
|
|
5434
|
-
border-radius:
|
|
5442
|
+
padding: 8px 12px;
|
|
5443
|
+
font-size: 13px;
|
|
5444
|
+
border-radius: 16px;
|
|
5435
5445
|
}
|
|
5436
5446
|
|
|
5437
5447
|
/* Mist overlay on mobile - covers lower portion without reaching avatar's face */
|
|
@@ -5699,7 +5709,13 @@ const BUBBLE_TEMPLATE = `
|
|
|
5699
5709
|
</div>
|
|
5700
5710
|
<div class="chat-bubble" id="chatBubble" role="button" aria-label="Open chat" tabindex="0">
|
|
5701
5711
|
<div class="bubble-avatar-preview">
|
|
5702
|
-
<img src="./asset/avatar.gif" class="avatar-face-img" alt="Nyx Avatar" />
|
|
5712
|
+
<img src="./asset/avatar.gif" class="avatar-face-img" alt="Nyx Avatar" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
|
5713
|
+
<div class="avatar-fallback-icon" style="display:none;">
|
|
5714
|
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
5715
|
+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
5716
|
+
<circle cx="12" cy="7" r="4"></circle>
|
|
5717
|
+
</svg>
|
|
5718
|
+
</div>
|
|
5703
5719
|
<div class="status-dot"></div>
|
|
5704
5720
|
</div>
|
|
5705
5721
|
</div>
|