@memori.ai/memori-react 8.44.0 → 8.45.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.
Files changed (126) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/components/MemoriWidget/MemoriWidget.d.ts +1 -0
  3. package/dist/components/MemoriWidget/MemoriWidget.js +59 -1
  4. package/dist/components/MemoriWidget/MemoriWidget.js.map +1 -1
  5. package/dist/helpers/nats/getNatsConfig.d.ts +1 -1
  6. package/dist/helpers/nats/getNatsConfig.js +2 -2
  7. package/dist/helpers/nats/getNatsConfig.js.map +1 -1
  8. package/dist/helpers/nats/useNats.d.ts +2 -1
  9. package/dist/helpers/nats/useNats.js +87 -20
  10. package/dist/helpers/nats/useNats.js.map +1 -1
  11. package/dist/helpers/nats/useNatsSession.d.ts +6 -1
  12. package/dist/helpers/nats/useNatsSession.js +49 -8
  13. package/dist/helpers/nats/useNatsSession.js.map +1 -1
  14. package/dist/version.d.ts +1 -1
  15. package/dist/version.js +1 -1
  16. package/esm/components/MemoriWidget/MemoriWidget.d.ts +1 -0
  17. package/esm/components/MemoriWidget/MemoriWidget.js +57 -1
  18. package/esm/components/MemoriWidget/MemoriWidget.js.map +1 -1
  19. package/esm/helpers/nats/getNatsConfig.d.ts +1 -1
  20. package/esm/helpers/nats/getNatsConfig.js +2 -2
  21. package/esm/helpers/nats/getNatsConfig.js.map +1 -1
  22. package/esm/helpers/nats/useNats.d.ts +2 -1
  23. package/esm/helpers/nats/useNats.js +87 -20
  24. package/esm/helpers/nats/useNats.js.map +1 -1
  25. package/esm/helpers/nats/useNatsSession.d.ts +6 -1
  26. package/esm/helpers/nats/useNatsSession.js +48 -8
  27. package/esm/helpers/nats/useNatsSession.js.map +1 -1
  28. package/esm/version.d.ts +1 -1
  29. package/esm/version.js +1 -1
  30. package/package.json +1 -1
  31. package/src/components/MemoriWidget/MemoriWidget.tsx +65 -1
  32. package/src/helpers/nats/getNatsConfig.ts +8 -3
  33. package/src/helpers/nats/useNats.test.tsx +81 -0
  34. package/src/helpers/nats/useNats.ts +109 -29
  35. package/src/helpers/nats/useNatsSession.test.ts +16 -0
  36. package/src/helpers/nats/useNatsSession.ts +79 -13
  37. package/src/version.ts +1 -1
  38. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.css +0 -372
  39. package/dist/components/DrawerFooter/DrawerFooter.css +0 -62
  40. package/dist/components/IconButton/IconButton.css +0 -144
  41. package/dist/components/MobileSessionPanel/MobileSessionPanel.css +0 -459
  42. package/dist/components/PositionPopover/PositionPopover.css +0 -219
  43. package/dist/components/layouts/WebsiteAssistant/website-assistant.css +0 -806
  44. package/dist/components/layouts/fullpage.css +0 -522
  45. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.css +0 -372
  46. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.d.ts +0 -36
  47. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.js +0 -113
  48. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.js.map +0 -1
  49. package/esm/components/DrawerFooter/DrawerFooter.css +0 -62
  50. package/esm/components/DrawerFooter/DrawerFooter.d.ts +0 -12
  51. package/esm/components/DrawerFooter/DrawerFooter.js +0 -8
  52. package/esm/components/DrawerFooter/DrawerFooter.js.map +0 -1
  53. package/esm/components/IconButton/IconButton.css +0 -144
  54. package/esm/components/IconButton/IconButton.d.ts +0 -9
  55. package/esm/components/IconButton/IconButton.js +0 -33
  56. package/esm/components/IconButton/IconButton.js.map +0 -1
  57. package/esm/components/MobileSessionPanel/MobileSessionPanel.css +0 -459
  58. package/esm/components/MobileSessionPanel/MobileSessionPanel.d.ts +0 -65
  59. package/esm/components/MobileSessionPanel/MobileSessionPanel.js +0 -291
  60. package/esm/components/MobileSessionPanel/MobileSessionPanel.js.map +0 -1
  61. package/esm/components/PositionPopover/PositionPopover.css +0 -219
  62. package/esm/components/PositionPopover/PositionPopover.d.ts +0 -22
  63. package/esm/components/PositionPopover/PositionPopover.js +0 -190
  64. package/esm/components/PositionPopover/PositionPopover.js.map +0 -1
  65. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.d.ts +0 -4
  66. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.js +0 -61
  67. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.js.map +0 -1
  68. package/esm/components/layouts/WebsiteAssistant/website-assistant.css +0 -806
  69. package/esm/components/layouts/fullpage.css +0 -522
  70. package/esm/context/widgetSurfaceContext.d.ts +0 -3
  71. package/esm/context/widgetSurfaceContext.js +0 -7
  72. package/esm/context/widgetSurfaceContext.js.map +0 -1
  73. package/esm/helpers/positionPopover.d.ts +0 -1
  74. package/esm/helpers/positionPopover.js +0 -4
  75. package/esm/helpers/positionPopover.js.map +0 -1
  76. package/esm/helpers/tts/muteSpeaker.d.ts +0 -13
  77. package/esm/helpers/tts/muteSpeaker.js +0 -21
  78. package/esm/helpers/tts/muteSpeaker.js.map +0 -1
  79. package/esm/helpers/usePressTooltip.d.ts +0 -13
  80. package/esm/helpers/usePressTooltip.js +0 -20
  81. package/esm/helpers/usePressTooltip.js.map +0 -1
  82. package/esm/icons/FacebookIcon.d.ts +0 -3
  83. package/esm/icons/FacebookIcon.js +0 -4
  84. package/esm/icons/FacebookIcon.js.map +0 -1
  85. package/esm/icons/LinkedinIcon.d.ts +0 -3
  86. package/esm/icons/LinkedinIcon.js +0 -4
  87. package/esm/icons/LinkedinIcon.js.map +0 -1
  88. package/esm/icons/MemoriIcon.d.ts +0 -3
  89. package/esm/icons/MemoriIcon.js +0 -6
  90. package/esm/icons/MemoriIcon.js.map +0 -1
  91. package/esm/icons/TelegramIcon.d.ts +0 -3
  92. package/esm/icons/TelegramIcon.js +0 -4
  93. package/esm/icons/TelegramIcon.js.map +0 -1
  94. package/esm/icons/TwitterIcon.d.ts +0 -3
  95. package/esm/icons/TwitterIcon.js +0 -4
  96. package/esm/icons/TwitterIcon.js.map +0 -1
  97. package/esm/icons/WhatsappIcon.d.ts +0 -3
  98. package/esm/icons/WhatsappIcon.js +0 -4
  99. package/esm/icons/WhatsappIcon.js.map +0 -1
  100. package/esm/icons/artifacts/DocumentIcon.d.ts +0 -3
  101. package/esm/icons/artifacts/DocumentIcon.js +0 -4
  102. package/esm/icons/artifacts/DocumentIcon.js.map +0 -1
  103. package/esm/icons/artifacts/HtmlIcon.d.ts +0 -3
  104. package/esm/icons/artifacts/HtmlIcon.js +0 -4
  105. package/esm/icons/artifacts/HtmlIcon.js.map +0 -1
  106. package/esm/icons/artifacts/JavascriptIcon.d.ts +0 -3
  107. package/esm/icons/artifacts/JavascriptIcon.js +0 -4
  108. package/esm/icons/artifacts/JavascriptIcon.js.map +0 -1
  109. package/esm/icons/artifacts/MarkdownIcon.d.ts +0 -3
  110. package/esm/icons/artifacts/MarkdownIcon.js +0 -4
  111. package/esm/icons/artifacts/MarkdownIcon.js.map +0 -1
  112. package/esm/icons/artifacts/PythonIcon.d.ts +0 -3
  113. package/esm/icons/artifacts/PythonIcon.js +0 -4
  114. package/esm/icons/artifacts/PythonIcon.js.map +0 -1
  115. package/esm/icons/artifacts/SvgIcon.d.ts +0 -3
  116. package/esm/icons/artifacts/SvgIcon.js +0 -4
  117. package/esm/icons/artifacts/SvgIcon.js.map +0 -1
  118. package/esm/icons/artifacts/XmlIcon.d.ts +0 -3
  119. package/esm/icons/artifacts/XmlIcon.js +0 -4
  120. package/esm/icons/artifacts/XmlIcon.js.map +0 -1
  121. package/esm/icons/artifacts/cssIcon.d.ts +0 -3
  122. package/esm/icons/artifacts/cssIcon.js +0 -4
  123. package/esm/icons/artifacts/cssIcon.js.map +0 -1
  124. package/esm/testUtils.d.ts +0 -5
  125. package/esm/testUtils.js +0 -15
  126. package/esm/testUtils.js.map +0 -1
@@ -1,806 +0,0 @@
1
- /* ============================================
2
- MOBILE-FIRST WEBSITE ASSISTANT LAYOUT
3
- Enhanced UI/UX with modern design patterns
4
- ============================================ */
5
-
6
- /* ============================================
7
- TRIGGER BUTTON (Mobile First)
8
- ============================================ */
9
-
10
- .memori-website_assistant--trigger {
11
- position: fixed;
12
- z-index: 2147483647;
13
- right: 0px;
14
- bottom: 0px;
15
- display: flex;
16
- opacity: 1;
17
- pointer-events: all;
18
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
19
- visibility: visible;
20
- }
21
-
22
- .memori-website_assistant--trigger-button .memori-blob .mainDiv {
23
- width: 64px !important;
24
- height: 64px !important;
25
- box-shadow: 0 0 0.5em 0.2em rgba(0, 0, 0, 0.15) inset, 0 0 0.15em 0 rgba(255, 255, 255, 0.9),
26
- 0 2px 8px rgba(130, 70, 175, 0.2);
27
- transition: all 0.3s ease;
28
- }
29
-
30
- .memori-website_assistant--trigger-button .memori-blob,
31
- .memori-website_assistant--trigger-button .memori-blob .mainDiv,
32
- .memori-website_assistant--trigger-button .memori-blob figure {
33
- pointer-events: none;
34
- touch-action: none;
35
- }
36
-
37
- .memori-website_assistant--trigger-button:hover .memori-blob .mainDiv {
38
- box-shadow: 0 0 0.6em 0.25em rgba(0, 0, 0, 0.1) inset, 0 0 0.2em 0 rgba(255, 255, 255, 0.95),
39
- 0 4px 16px rgba(130, 70, 175, 0.3);
40
- }
41
-
42
- .memori-website_assistant--trigger:hover {
43
- transform: scale(1.05);
44
- }
45
-
46
- .memori-website_assistant--trigger:active {
47
- transform: scale(0.95);
48
- }
49
-
50
- .memori-website_assistant--trigger-button {
51
- position: relative;
52
- width: 64px;
53
- height: 64px;
54
- padding: 0;
55
- border: none !important;
56
- border-radius: 50%;
57
- -webkit-backdrop-filter: blur(10px);
58
- backdrop-filter: blur(10px);
59
- box-shadow: none !important;
60
- cursor: pointer;
61
- transform: translate(-12px, -12px);
62
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
63
- }
64
-
65
- .memori-website_assistant--trigger-button:active {
66
- transform: translateY(0) scale(0.95);
67
- }
68
-
69
- .memori-website_assistant--trigger-button .memori-blob {
70
- position: relative !important;
71
- display: block;
72
- width: 100%;
73
- height: 100%;
74
- margin: 0;
75
- }
76
-
77
- .memori-website_assistant--trigger-button .memori-blob figure {
78
- width: 85%;
79
- border-radius: 0;
80
- opacity: 1;
81
- transition: transform 0.3s ease;
82
- }
83
-
84
- /* Tablet and up */
85
- @media (min-width: 601px) {
86
- .memori-website_assistant--trigger-button {
87
- width: 80px;
88
- height: 80px;
89
- }
90
-
91
- .memori-website_assistant--trigger-button .memori-blob .mainDiv {
92
- width: 80px !important;
93
- height: 80px !important;
94
- }
95
- }
96
-
97
- /* Desktop */
98
- @media (min-width: 1024px) {
99
- .memori-website_assistant--trigger-button {
100
- width: 96px !important;
101
- height: 96px !important;
102
- }
103
-
104
- .memori-website_assistant--trigger-button .memori-blob .mainDiv {
105
- width: 96px !important;
106
- height: 96px !important;
107
- }
108
- }
109
-
110
- /* ============================================
111
- CLOSE BUTTON
112
- Matches HiddenChat header close (bordered icon control)
113
- ============================================ */
114
-
115
- .memori-website_assistant--close-button {
116
- display: inline-flex;
117
- width: 2.5rem;
118
- min-width: 2.5rem;
119
- height: 2.5rem;
120
- min-height: 2.5rem;
121
- align-items: center;
122
- justify-content: center;
123
- padding: 0;
124
- border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
125
- border-radius: var(--memori-radius-box, 0.5rem);
126
- margin: 0;
127
- background: transparent;
128
- color: var(--memori-text-color, #111827);
129
- cursor: pointer;
130
- line-height: 1;
131
- transition: background-color 0.15s ease, border-color 0.15s ease;
132
- }
133
-
134
- .memori-website_assistant--close-button:hover {
135
- background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
136
- }
137
-
138
- .memori-website_assistant--close-button .memori-icon-close {
139
- width: 1.125rem;
140
- height: 1.125rem;
141
- fill: none;
142
- stroke: currentColor;
143
- }
144
-
145
- /* ============================================
146
- MAIN CONTAINER (Mobile First)
147
- ============================================ */
148
-
149
- .memori-widget.memori-layout-website_assistant {
150
- position: relative;
151
- font-size: var(--memori-text-size-small);
152
- }
153
-
154
- /*
155
- * Login and Position drawers are portaled to body by Headless UI.
156
- * When layout is WEBSITE_ASSISTANT we pass drawerClassName so they sit above the fixed panel.
157
- */
158
- .memori-drawer.memori-drawer--above-website-assistant,
159
- .memori-drawer.memori-drawer--above-website-assistant .memori-drawer--backdrop,
160
- .memori-drawer.memori-drawer--above-website-assistant .memori-drawer--container {
161
- z-index: 2147483000;
162
- }
163
-
164
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
165
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
166
- position: fixed;
167
- right: 0;
168
- bottom: 0;
169
- overflow: hidden;
170
- width: 100vw;
171
- max-width: 100vw;
172
- border-radius: var(--memori-radius-box) var(--memori-radius-box) 0 0;
173
- -webkit-backdrop-filter: blur(20px);
174
- backdrop-filter: blur(20px);
175
- box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08);
176
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
177
- }
178
-
179
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed {
180
- overflow: visible;
181
- height: 0;
182
- opacity: 0;
183
- pointer-events: none;
184
- }
185
-
186
- /* Ensure trigger button is always visible even when container is collapsed */
187
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed .memori-website_assistant--trigger {
188
- opacity: 1;
189
- pointer-events: all;
190
- visibility: visible;
191
- }
192
-
193
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
194
- height: min(85vh, calc(100vh - var(--memori-spacing-5xl)));
195
- padding: 0.5rem 0rem;
196
- margin-bottom: 0;
197
- background: var(--memori-secondary-background);
198
- opacity: 1;
199
- pointer-events: all;
200
- }
201
-
202
- /*
203
- * Keep in sync with ArtifactDrawer split width (55% / --memori-modal-size-md override).
204
- * Same pairing as HiddenChat's `.memori-sidebar-toggle-artifact` → `right: 55%`.
205
- */
206
- .memori-widget.memori-layout-website_assistant
207
- .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
208
- right: 55%;
209
- }
210
-
211
- /* Tablet */
212
- @media (min-width: 601px) {
213
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
214
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
215
- right: 0;
216
- width: 90vw;
217
- max-width: 480px;
218
- border-radius: var(--memori-radius-box) 0 0 0;
219
- }
220
-
221
- .memori-widget.memori-layout-website_assistant
222
- .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
223
- right: 55%;
224
- }
225
-
226
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
227
- height: min(75vh, calc(100vh - var(--memori-spacing-5xl)));
228
- }
229
- }
230
-
231
- /* Desktop */
232
- @media (min-width: 1024px) {
233
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
234
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
235
- width: 480px;
236
- border-radius: var(--memori-radius-box) 0 0 0;
237
- }
238
-
239
- .memori-widget.memori-layout-website_assistant
240
- .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
241
- right: 55%;
242
- }
243
-
244
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
245
- height: 100vh;
246
- border-radius: 0;
247
- margin-bottom: 0;
248
- }
249
- }
250
-
251
- /* ============================================
252
- ANIMATIONS
253
- ============================================ */
254
-
255
- @keyframes showup {
256
- 0% {
257
- opacity: 0;
258
- transform: translateY(20px) scale(0.95);
259
- }
260
- 100% {
261
- opacity: 1;
262
- transform: translateY(0) scale(1);
263
- }
264
- }
265
-
266
- @keyframes slideUp {
267
- from {
268
- opacity: 0;
269
- transform: translateY(100%);
270
- }
271
- to {
272
- opacity: 1;
273
- transform: translateY(0);
274
- }
275
- }
276
-
277
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout {
278
- animation: showup 0.4s cubic-bezier(0.4, 0, 0.2, 1);
279
- }
280
-
281
- /* ============================================
282
- LAYOUT STRUCTURE
283
- ============================================ */
284
-
285
- .memori-widget .memori-spin.memori-website_assistant-layout {
286
- position: relative;
287
- display: flex;
288
- height: 100%;
289
- flex-direction: column;
290
- }
291
-
292
- .memori-widget.memori-layout-website_assistant .memori--global-background {
293
- background: none;
294
- }
295
-
296
- /* Powered-by is not shown in WEBSITE_ASSISTANT; AI disclaimer wraps under the input. */
297
- .memori-website_assistant-layout .memori--powered-by,
298
- .memori-widget.memori-layout-website_assistant .memori--powered-by {
299
- display: none !important;
300
- }
301
-
302
- /* Never show chat history control in this layout */
303
- .memori-widget.memori-layout-website_assistant .memori-header--chat-history-button {
304
- display: none !important;
305
- }
306
-
307
- .memori-widget.memori-layout-website_assistant .memori-conversation-footer {
308
- flex-wrap: wrap;
309
- justify-content: center;
310
- }
311
-
312
- .memori-widget.memori-layout-website_assistant
313
- .memori-conversation-footer
314
- .memori-chat-inputs--ai-note {
315
- overflow: visible;
316
- flex: 1 1 100%;
317
- text-align: center;
318
- text-overflow: unset;
319
- white-space: normal;
320
- }
321
-
322
- .memori-widget.memori--active.memori-layout-website_assistant
323
- .memori-conversation-footer
324
- .memori-chat-inputs--ai-note {
325
- text-align: left;
326
- }
327
-
328
- /* ============================================
329
- HEADER
330
- ============================================ */
331
-
332
- .memori-website_assistant-layout--header {
333
- position: absolute;
334
- z-index: 1000;
335
- top: 0.75rem;
336
- right: 0.75rem;
337
- padding: 0.5rem;
338
- border-radius: var(--memori-radius-box);
339
- background: var(--memori-secondary-background);
340
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
341
- text-align: right;
342
- }
343
-
344
- .memori-website_assistant-layout--header-hidden {
345
- display: none;
346
- }
347
-
348
- .memori-website_assistant-layout .memori-header {
349
- z-index: 1000;
350
- display: inline-flex;
351
- width: auto;
352
- height: auto;
353
- flex-direction: row;
354
- padding: 0;
355
- gap: 0.35rem;
356
- }
357
-
358
- /* Less specific first (no-descending-specificity): single .memori-header--button */
359
- .memori-website_assistant-layout .memori-header .memori-header--button,
360
- .memori-website_assistant-layout .memori-header .memori-share-button {
361
- margin-top: 0;
362
- margin-right: 0;
363
- margin-left: 0;
364
- }
365
-
366
- /* More specific: adjacent sibling (must come after general .memori-header--button rules) */
367
- .memori-website_assistant-layout .memori-header .memori-header--button + .memori-header--button {
368
- margin-top: 0;
369
- margin-right: 0;
370
- margin-left: 0;
371
- }
372
-
373
- .memori-website_assistant-layout--header-row {
374
- position: relative;
375
- z-index: 1001;
376
- display: flex;
377
- width: 100%;
378
- flex-shrink: 0;
379
- align-items: center;
380
- justify-content: space-between;
381
- padding: 0.75rem 1rem;
382
- border-bottom: 1px solid var(--memori-border-color);
383
- background: var(--memori-secondary-background);
384
- gap: 0.75rem;
385
- }
386
-
387
- .memori-website_assistant-layout--header-actions {
388
- display: inline-flex;
389
- flex: 0 0 auto;
390
- align-items: center;
391
- margin-left: auto;
392
- gap: 0.35rem;
393
- }
394
-
395
- .memori-website_assistant-layout .memori-chat-layout--brand {
396
- display: flex;
397
- overflow: hidden;
398
- min-width: 0;
399
- flex: 1 1 auto;
400
- align-items: center;
401
- gap: 0.75rem;
402
- }
403
-
404
- .memori-website_assistant-layout .memori-chat-layout--brand-avatar {
405
- width: 40px;
406
- height: 40px;
407
- flex-shrink: 0;
408
- border: 1px solid rgba(0, 0, 0, 0.06);
409
- border-radius: 50%;
410
- object-fit: cover;
411
- }
412
-
413
- .memori-website_assistant-layout .memori-chat-layout--brand-text {
414
- display: flex;
415
- min-width: 0;
416
- flex: 1 1 auto;
417
- flex-direction: column;
418
- align-items: flex-start;
419
- gap: 0.125rem;
420
- }
421
-
422
- .memori-website_assistant-layout .memori-chat-layout--brand-name {
423
- display: block;
424
- overflow: hidden;
425
- width: 100%;
426
- min-width: 0;
427
- max-width: 100%;
428
- color: var(--memori-text-color, #111);
429
- font-size: 1rem;
430
- font-weight: 600;
431
- line-height: 1.2;
432
- text-overflow: ellipsis;
433
- white-space: nowrap;
434
- }
435
-
436
- @media (max-width: 480px) {
437
- .memori-website_assistant-layout .memori-chat-layout--brand {
438
- min-width: 0;
439
- max-width: calc(100% - 6.5rem);
440
- flex: 1 1 auto;
441
- }
442
- }
443
-
444
- /* Position dropdown below the trigger so it does not cover the share button */
445
- .memori-widget.memori-layout-website_assistant .memori-share-button .memori-share-button--overlay {
446
- z-index: 1002;
447
- top: 100%;
448
- margin-top: 0.5rem;
449
- }
450
-
451
- .memori-widget.memori-layout-website_assistant .memori-header--button--fullscreen {
452
- display: none;
453
- }
454
-
455
- /* ============================================
456
- AVATAR SECTION
457
- ============================================ */
458
-
459
- .memori-website_assistant-layout--avatar {
460
- position: relative;
461
- overflow: hidden;
462
- min-height: 0;
463
- max-height: 35vh;
464
- flex: 1;
465
- /* Prevent avatar/blob from growing unbounded and overlapping header/controls */
466
- contain: layout style;
467
- }
468
-
469
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper {
470
- position: absolute;
471
- z-index: 0;
472
- top: 0;
473
- left: 0;
474
- overflow: hidden;
475
- width: 100%;
476
- height: 100%;
477
- }
478
-
479
- .memori-website_assistant-layout--avatar .memori--blob-container {
480
- display: block;
481
- }
482
-
483
- .memori-website_assistant-layout--avatar .memori-blob {
484
- z-index: 2;
485
- }
486
-
487
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader {
488
- display: flex;
489
- width: 100%;
490
- height: 100%;
491
- align-items: center;
492
- justify-content: center;
493
- transform: none !important;
494
- }
495
-
496
- .memori-layout-website_assistant .memori--avatar-wrapper > div {
497
- overflow: visible !important;
498
- width: auto !important;
499
- height: 100%;
500
- border-radius: 0;
501
- }
502
-
503
- .memori-layout-website_assistant .memori--avatar-wrapper > div canvas + div {
504
- position: absolute !important;
505
- width: 100%;
506
- height: 100%;
507
- transform: none !important;
508
- }
509
-
510
- .memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div,
511
- .memori-layout-website_assistant.memori--avatar-avatar-configurator .memori--avatar-wrapper > div {
512
- transform: scale(1.7) translate(0px, 10vh);
513
- }
514
-
515
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper canvas {
516
- width: auto !important;
517
- max-width: 100%;
518
- height: 100%;
519
- object-fit: contain;
520
- }
521
-
522
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
523
- text-align: center;
524
- }
525
-
526
- .memori-layout-website_assistant.memori--avatar-readyplayerme
527
- .memori-website_assistant--trigger-button
528
- .memori-blob
529
- figure {
530
- width: 100%;
531
- }
532
-
533
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
534
- background: none;
535
- }
536
-
537
- /* ============================================
538
- CONTROLS SECTION
539
- ============================================ */
540
-
541
- .memori-website_assistant-layout--controls {
542
- position: relative;
543
- z-index: 5;
544
- display: flex;
545
- min-height: 0;
546
- flex: 1;
547
- flex-direction: column;
548
- padding: 1rem;
549
- padding-bottom: 0;
550
- background-color: var(--memori-secondary-background);
551
- }
552
-
553
- .memori-website_assistant-layout--controls .memori-chat--history,
554
- .memori-website_assistant-layout--controls .memori-chat--content {
555
- background: var(--memori-secondary-background);
556
- }
557
-
558
- .memori-website_assistant-layout--controls .memori-chat--history {
559
- padding: 0;
560
- /* margin-top: var(--memori-spacing-3xl); */
561
- -webkit-backdrop-filter: none;
562
- backdrop-filter: none;
563
- }
564
-
565
- .memori-website_assistant-layout--controls .memori-chat--content {
566
- padding: 0;
567
- }
568
-
569
- .memori-website_assistant-layout--controls .memori-chat--bubble-initial + .memori-chat--bubble-container {
570
- margin-top: auto;
571
- }
572
-
573
- .memori-website_assistant-layout--controls .memori-chat--content .memori-chat--bubble-container:first-of-type {
574
- margin-top: auto;
575
- }
576
-
577
- .memori-website_assistant-layout--controls .memori--start-panel,
578
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
579
- width: 100%;
580
- max-width: 100%;
581
- padding: 0;
582
- margin: auto;
583
- }
584
-
585
- .memori-website_assistant-layout--controls .memori--start-panel {
586
- flex: 1;
587
- align-content: center;
588
- align-self: center;
589
- padding: 1rem;
590
- border: 0px;
591
- border-radius: var(--memori-radius-box);
592
- margin: 0.75rem;
593
- margin-bottom: var(--memori-spacing-2xl) !important;
594
- box-shadow: none !important;
595
- }
596
-
597
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
598
- display: flex;
599
- min-height: 0;
600
- flex: 1;
601
- flex-direction: column;
602
- padding: 0.75rem;
603
- padding-bottom: 0;
604
- border: 0px !important;
605
- background: var(--memori-secondary-background);
606
- box-shadow: none !important;
607
- }
608
-
609
- .memori-website_assistant-layout--controls .memori-chat--content--has-global-background,
610
- .memori-website_assistant-layout--controls
611
- .memori-chat--history:has(.memori-chat--content--has-global-background),
612
- .memori-website_assistant-layout--controls
613
- .memori-chat--wrapper:has(.memori-chat--content--has-global-background) {
614
- background: transparent;
615
- }
616
-
617
- /* Input bar styles (dark compact pill) live in ChatInputs.css.
618
- Anchor the bar at the bottom of the assistant panel. */
619
- .memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat--wrapper {
620
- display: flex;
621
- min-height: 0;
622
- flex: 1;
623
- flex-direction: column;
624
- }
625
-
626
- .memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat--history {
627
- min-height: 0;
628
- flex: 1 1 auto;
629
- margin-bottom: 0;
630
- }
631
-
632
- .memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat-inputs-wrapper {
633
- width: 100%;
634
- flex-shrink: 0;
635
- margin-bottom: 0;
636
- }
637
-
638
- /* Tablet and up */
639
- @media (min-width: 601px) {
640
- .memori-website_assistant-layout--controls .memori--start-panel,
641
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
642
- max-width: 100%;
643
- }
644
-
645
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
646
- padding: 1rem;
647
- }
648
-
649
- .memori-website_assistant-layout--controls .memori--start-panel {
650
- padding: 1.5rem;
651
- margin: 0 auto;
652
- }
653
- }
654
-
655
- /* Desktop */
656
- @media (min-width: 1024px) {
657
- .memori-website_assistant-layout--controls .memori--start-panel,
658
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
659
- max-width: 800px;
660
- }
661
- }
662
-
663
- /* ============================================
664
- CHAT STYLING
665
- ============================================ */
666
-
667
- .memori-website_assistant-layout .memori-chat--cover {
668
- display: none;
669
- }
670
-
671
- .memori-website_assistant-layout .memori--cover {
672
- padding: 0;
673
- background: none;
674
- }
675
-
676
- .memori-website_assistant-layout .memori-chat--bubble,
677
- .memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble {
678
- animation: showup 0.3s ease-out;
679
- opacity: 1;
680
- transition: all 0.2s ease-in-out;
681
- }
682
-
683
- .memori-website_assistant-layout .memori-chat--bubble:hover,
684
- .memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble:hover {
685
- opacity: 1;
686
- transform: translateY(-1px);
687
- }
688
-
689
- .memori-website_assistant-layout .memori-chat--bubble p,
690
- .memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble p {
691
- opacity: 1;
692
- }
693
-
694
- /* ============================================
695
- OTHER ELEMENTS
696
- ============================================ */
697
-
698
- .memori-website_assistant-layout .memori--avatar-toggle {
699
- display: none;
700
- width: 100%;
701
- justify-content: center;
702
- }
703
-
704
- .memori-website_assistant-layout .memori--title,
705
- .memori-website_assistant-layout .memori--description,
706
- .memori-website_assistant-layout .memori--needsPosition {
707
- color: var(--memori-text-color);
708
- }
709
-
710
- .memori-website_assistant-layout .memori--global-background-image {
711
- background: none;
712
- }
713
-
714
- .memori-website_assistant-layout .memori--description-text,
715
- .memori-website_assistant-layout .memori--translation-toggle {
716
- display: none;
717
- }
718
-
719
- /* ============================================
720
- RESPONSIVE ADJUSTMENTS
721
- ============================================ */
722
-
723
- @media (max-width: 480px) {
724
- .memori-website_assistant-layout .memori-send-on-enter-menu {
725
- display: none;
726
- }
727
-
728
- .memori-website_assistant-layout .memori-header--button-settings {
729
- display: none;
730
- }
731
-
732
- .memori-website_assistant-layout--controls {
733
- padding: 0.75rem;
734
- }
735
-
736
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
737
- padding: 0.5rem;
738
- }
739
-
740
- .memori-website_assistant-layout--controls .memori--start-panel {
741
- padding: 1rem;
742
- margin: 0.5rem;
743
- }
744
- }
745
-
746
- /* After controls .memori--start-panel rules (no-descending-specificity: 3-class selector wins over 2-class) */
747
- .memori-widget.memori-layout-website_assistant .memori--start-panel {
748
- border: none;
749
- }
750
-
751
- @media (max-width: 768px) {
752
- .memori-website_assistant--trigger-button {
753
- width: 80px !important;
754
- height: 80px !important;
755
- -webkit-backdrop-filter: blur(12px);
756
- backdrop-filter: blur(12px);
757
- background: rgba(255, 255, 255, 0.25);
758
- }
759
-
760
- /* Keep blob container as positioning context and centered in button */
761
- .memori-website_assistant--trigger-button .memori-blob {
762
- position: relative !important;
763
- top: 0 !important;
764
- display: flex;
765
- align-items: center;
766
- justify-content: center;
767
- }
768
-
769
- /* Center .mainDiv in button: use percentage translate so blob aligns with button (override Blob.css mobile pixel offsets) */
770
- .memori-website_assistant--trigger-button .memori-blob .mainDiv {
771
- top: 50% !important;
772
- left: 50% !important;
773
- --memori-blob-x: -50%;
774
- --memori-blob-y: -50%;
775
- }
776
- }
777
-
778
- /* ============================================
779
- ACCESSIBILITY & PERFORMANCE
780
- ============================================ */
781
-
782
- @media (prefers-reduced-motion: reduce) {
783
- .memori-website_assistant--trigger,
784
- .memori-website_assistant--trigger-button,
785
- .memori-website_assistant--close-button,
786
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
787
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded,
788
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout,
789
- .memori-website_assistant-layout .memori-chat--bubble {
790
- animation: none !important;
791
- transition: none !important;
792
- }
793
- }
794
-
795
- /* Touch device optimizations */
796
- @media (hover: none) and (pointer: coarse) {
797
- .memori-website_assistant--trigger-button {
798
- width: 80px;
799
- height: 80px;
800
- }
801
-
802
- .memori-website_assistant--trigger-button .memori-blob .mainDiv {
803
- width: 72px !important;
804
- height: 72px !important;
805
- }
806
- }