@memori.ai/memori-react 8.10.1 → 8.11.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 +16 -0
- package/dist/components/MediaWidget/MediaItemWidget.js +40 -5
- package/dist/components/MediaWidget/MediaItemWidget.js.map +1 -1
- package/esm/components/MediaWidget/MediaItemWidget.js +40 -5
- package/esm/components/MediaWidget/MediaItemWidget.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Chat/__snapshots__/Chat.test.tsx.snap +6 -6
- package/src/components/MediaWidget/MediaItemWidget.stories.tsx +69 -0
- package/src/components/MediaWidget/MediaItemWidget.tsx +66 -18
- package/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap +10 -10
- package/src/components/MediaWidget/__snapshots__/MediaWidget.test.tsx.snap +2 -2
- package/src/components/layouts/FullBody/FullBody.stories.tsx +111 -0
- package/src/components/layouts/Totem/Totem.stories.tsx +132 -0
- package/src/components/layouts/ZoomedFullBody/ZoomedFullBody.stories.tsx +132 -0
- package/src/components/layouts/layouts.stories.tsx +54 -508
- package/src/index.stories.tsx +1 -326
|
@@ -50,6 +50,7 @@ export const RenderMediaItem = ({
|
|
|
50
50
|
}) => {
|
|
51
51
|
const [modalOpen, setModalOpen] = useState(false);
|
|
52
52
|
const [copyNotification, setCopyNotification] = useState(false);
|
|
53
|
+
const [imageError, setImageError] = useState(false);
|
|
53
54
|
|
|
54
55
|
const url = getResourceUrl({
|
|
55
56
|
resourceURI: item.url,
|
|
@@ -65,7 +66,41 @@ export const RenderMediaItem = ({
|
|
|
65
66
|
return customRenderer;
|
|
66
67
|
}
|
|
67
68
|
|
|
68
|
-
const isCodeSnippet = prismSyntaxLangs
|
|
69
|
+
const isCodeSnippet = prismSyntaxLangs
|
|
70
|
+
.map(l => l.mimeType)
|
|
71
|
+
.includes(item.mimeType);
|
|
72
|
+
const isImageRGB =
|
|
73
|
+
item.url?.startsWith('rgb(') || item.url?.startsWith('rgba(');
|
|
74
|
+
|
|
75
|
+
// Helper to validate if a string is a valid URL
|
|
76
|
+
const isValidUrl = (urlString: string | undefined): boolean => {
|
|
77
|
+
if (!urlString) return false;
|
|
78
|
+
try {
|
|
79
|
+
new URL(urlString);
|
|
80
|
+
return true;
|
|
81
|
+
} catch {
|
|
82
|
+
return false;
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// Helper to get valid image src
|
|
87
|
+
const getImageSrc = (): string | undefined => {
|
|
88
|
+
// If url is valid, use it
|
|
89
|
+
if (isValidUrl(url) || isValidUrl(item.url)) {
|
|
90
|
+
return url || item.url;
|
|
91
|
+
} else if (item.url?.startsWith('rgb(') || item.url?.startsWith('rgba(')) {
|
|
92
|
+
return item.url;
|
|
93
|
+
} else if (item.content) {
|
|
94
|
+
return `data:${item.mimeType};base64,${item.content}`;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Return undefined if no valid source
|
|
98
|
+
return undefined;
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
const imageSrc = getImageSrc();
|
|
102
|
+
const fallbackImage =
|
|
103
|
+
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2YwZjBmMCIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5JbWFnZSBub3QgYXZhaWxhYmxlPC90ZXh0Pjwvc3ZnPg==';
|
|
69
104
|
|
|
70
105
|
const renderMediaContent = (item: Medium) => {
|
|
71
106
|
switch (item.mimeType) {
|
|
@@ -89,15 +124,16 @@ export const RenderMediaItem = ({
|
|
|
89
124
|
</picture>
|
|
90
125
|
) : (
|
|
91
126
|
<picture className="memori-media-item--figure">
|
|
92
|
-
{!preview && (
|
|
127
|
+
{!preview && imageSrc && (
|
|
93
128
|
<source
|
|
94
|
-
srcSet={
|
|
129
|
+
srcSet={imageSrc}
|
|
95
130
|
type={item.mimeType}
|
|
96
131
|
/>
|
|
97
132
|
)}
|
|
98
133
|
<img
|
|
99
134
|
alt={item.title}
|
|
100
|
-
src=
|
|
135
|
+
src={imageError || !imageSrc ? fallbackImage : imageSrc}
|
|
136
|
+
onError={() => setImageError(true)}
|
|
101
137
|
/>
|
|
102
138
|
{item.title && (
|
|
103
139
|
<figcaption className="memori-media-item--figure-caption">
|
|
@@ -187,14 +223,21 @@ export const RenderMediaItem = ({
|
|
|
187
223
|
widthMd="90%"
|
|
188
224
|
>
|
|
189
225
|
<div className="memori-media-item-preview--content">
|
|
190
|
-
<Snippet
|
|
226
|
+
<Snippet medium={item} showCopyButton={true} />
|
|
191
227
|
</div>
|
|
192
228
|
</Modal>
|
|
193
229
|
</>
|
|
194
230
|
);
|
|
195
231
|
}
|
|
196
232
|
|
|
197
|
-
if (
|
|
233
|
+
if (
|
|
234
|
+
!item.url &&
|
|
235
|
+
item?.type === 'document' &&
|
|
236
|
+
item.content &&
|
|
237
|
+
!['image/jpeg', 'image/png', 'image/jpg', 'image/gif'].includes(
|
|
238
|
+
item.mimeType
|
|
239
|
+
)
|
|
240
|
+
) {
|
|
198
241
|
return (
|
|
199
242
|
<>
|
|
200
243
|
<a
|
|
@@ -254,9 +297,6 @@ export const RenderMediaItem = ({
|
|
|
254
297
|
);
|
|
255
298
|
}
|
|
256
299
|
|
|
257
|
-
const isImageRGB =
|
|
258
|
-
item.url?.startsWith('rgb(') || item.url?.startsWith('rgba(');
|
|
259
|
-
|
|
260
300
|
switch (item.mimeType) {
|
|
261
301
|
case 'image/jpeg':
|
|
262
302
|
case 'image/png':
|
|
@@ -271,7 +311,7 @@ export const RenderMediaItem = ({
|
|
|
271
311
|
) : (
|
|
272
312
|
<a
|
|
273
313
|
className="memori-media-item--link"
|
|
274
|
-
href={
|
|
314
|
+
href={imageSrc || '#'}
|
|
275
315
|
onClick={e => {
|
|
276
316
|
if (isChild) {
|
|
277
317
|
e.preventDefault();
|
|
@@ -280,6 +320,9 @@ export const RenderMediaItem = ({
|
|
|
280
320
|
e.preventDefault();
|
|
281
321
|
onClick(item.mediumID);
|
|
282
322
|
}
|
|
323
|
+
if (!imageSrc || imageError) {
|
|
324
|
+
e.preventDefault();
|
|
325
|
+
}
|
|
283
326
|
}}
|
|
284
327
|
target="_blank"
|
|
285
328
|
rel="noopener noreferrer"
|
|
@@ -529,7 +572,9 @@ const MediaItemWidget: React.FC<Props> = ({
|
|
|
529
572
|
baseURL={baseURL}
|
|
530
573
|
apiURL={apiURL}
|
|
531
574
|
onClick={mediumID => {
|
|
532
|
-
setOpenModalMedium(
|
|
575
|
+
setOpenModalMedium(
|
|
576
|
+
nonCodeDisplayMedia.find(m => m.mediumID === mediumID)
|
|
577
|
+
);
|
|
533
578
|
}}
|
|
534
579
|
item={{
|
|
535
580
|
...item,
|
|
@@ -569,7 +614,9 @@ const MediaItemWidget: React.FC<Props> = ({
|
|
|
569
614
|
baseURL={baseURL}
|
|
570
615
|
apiURL={apiURL}
|
|
571
616
|
onClick={mediumID => {
|
|
572
|
-
const foundMedium = codeSnippets.find(
|
|
617
|
+
const foundMedium = codeSnippets.find(
|
|
618
|
+
m => m.mediumID === mediumID
|
|
619
|
+
);
|
|
573
620
|
setOpenModalMedium(foundMedium);
|
|
574
621
|
}}
|
|
575
622
|
item={{
|
|
@@ -603,12 +650,13 @@ const MediaItemWidget: React.FC<Props> = ({
|
|
|
603
650
|
{prismSyntaxLangs
|
|
604
651
|
.map(l => l.mimeType)
|
|
605
652
|
.includes(openModalMedium.mimeType) ? (
|
|
606
|
-
<div
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
653
|
+
<div
|
|
654
|
+
style={{
|
|
655
|
+
minHeight: '100%',
|
|
656
|
+
background: 'none',
|
|
657
|
+
}}
|
|
658
|
+
className="memori-media-item-preview--content"
|
|
659
|
+
>
|
|
612
660
|
<Snippet preview={false} medium={openModalMedium} />
|
|
613
661
|
</div>
|
|
614
662
|
) : (
|
|
@@ -170,12 +170,12 @@ exports[`renders MediaItemWidget unchanged with img 1`] = `
|
|
|
170
170
|
class="memori-media-item--figure"
|
|
171
171
|
>
|
|
172
172
|
<source
|
|
173
|
-
srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2
|
|
173
|
+
srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
|
|
174
174
|
type="image/jpeg"
|
|
175
175
|
/>
|
|
176
176
|
<img
|
|
177
177
|
alt="Game Cover"
|
|
178
|
-
src="
|
|
178
|
+
src="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
|
|
179
179
|
/>
|
|
180
180
|
<figcaption
|
|
181
181
|
class="memori-media-item--figure-caption"
|
|
@@ -247,12 +247,12 @@ exports[`renders MediaItemWidget unchanged with img and sessionID 1`] = `
|
|
|
247
247
|
class="memori-media-item--figure"
|
|
248
248
|
>
|
|
249
249
|
<source
|
|
250
|
-
srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2
|
|
250
|
+
srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
|
|
251
251
|
type="image/jpeg"
|
|
252
252
|
/>
|
|
253
253
|
<img
|
|
254
254
|
alt="Game Cover"
|
|
255
|
-
src="
|
|
255
|
+
src="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
|
|
256
256
|
/>
|
|
257
257
|
<figcaption
|
|
258
258
|
class="memori-media-item--figure-caption"
|
|
@@ -624,12 +624,12 @@ exports[`renders MediaItemWidget with imgs in correct order (creation date) 1`]
|
|
|
624
624
|
class="memori-media-item--figure"
|
|
625
625
|
>
|
|
626
626
|
<source
|
|
627
|
-
srcset="https://memori.ai/past
|
|
627
|
+
srcset="https://memori.ai/past"
|
|
628
628
|
type="image/jpeg"
|
|
629
629
|
/>
|
|
630
630
|
<img
|
|
631
631
|
alt="Game Cover"
|
|
632
|
-
src="
|
|
632
|
+
src="https://memori.ai/past"
|
|
633
633
|
/>
|
|
634
634
|
<figcaption
|
|
635
635
|
class="memori-media-item--figure-caption"
|
|
@@ -688,12 +688,12 @@ exports[`renders MediaItemWidget with imgs in correct order (creation date) 1`]
|
|
|
688
688
|
class="memori-media-item--figure"
|
|
689
689
|
>
|
|
690
690
|
<source
|
|
691
|
-
srcset="https://memori.ai/medium
|
|
691
|
+
srcset="https://memori.ai/medium"
|
|
692
692
|
type="image/jpeg"
|
|
693
693
|
/>
|
|
694
694
|
<img
|
|
695
695
|
alt="Game Cover"
|
|
696
|
-
src="
|
|
696
|
+
src="https://memori.ai/medium"
|
|
697
697
|
/>
|
|
698
698
|
<figcaption
|
|
699
699
|
class="memori-media-item--figure-caption"
|
|
@@ -752,12 +752,12 @@ exports[`renders MediaItemWidget with imgs in correct order (creation date) 1`]
|
|
|
752
752
|
class="memori-media-item--figure"
|
|
753
753
|
>
|
|
754
754
|
<source
|
|
755
|
-
srcset="https://memori.ai/now
|
|
755
|
+
srcset="https://memori.ai/now"
|
|
756
756
|
type="image/jpeg"
|
|
757
757
|
/>
|
|
758
758
|
<img
|
|
759
759
|
alt="Game Cover"
|
|
760
|
-
src="
|
|
760
|
+
src="https://memori.ai/now"
|
|
761
761
|
/>
|
|
762
762
|
<figcaption
|
|
763
763
|
class="memori-media-item--figure-caption"
|
|
@@ -148,12 +148,12 @@ exports[`renders MediaWidget with media unchanged 1`] = `
|
|
|
148
148
|
class="memori-media-item--figure"
|
|
149
149
|
>
|
|
150
150
|
<source
|
|
151
|
-
srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2
|
|
151
|
+
srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
|
|
152
152
|
type="image/jpeg"
|
|
153
153
|
/>
|
|
154
154
|
<img
|
|
155
155
|
alt="Game Cover"
|
|
156
|
-
src="
|
|
156
|
+
src="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
|
|
157
157
|
/>
|
|
158
158
|
<figcaption
|
|
159
159
|
class="memori-media-item--figure-caption"
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Meta, Story } from '@storybook/react';
|
|
3
|
+
import { tenant } from '../../../mocks/data';
|
|
4
|
+
import { Props } from '../../MemoriWidget/MemoriWidget';
|
|
5
|
+
import Memori from '../../../index';
|
|
6
|
+
import I18nWrapper from '../../../I18nWrapper';
|
|
7
|
+
import { VisemeProvider } from '../../../context/visemeContext';
|
|
8
|
+
import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactContext';
|
|
9
|
+
|
|
10
|
+
const meta: Meta = {
|
|
11
|
+
title: 'General/Layouts/FullBody',
|
|
12
|
+
component: (args: Props) => <Memori {...args} engineURL="https://engine.memori.ai" apiURL="https://backend.memori.ai" baseURL="https://www.aisuru.com" />,
|
|
13
|
+
argTypes: {},
|
|
14
|
+
parameters: {
|
|
15
|
+
controls: { expanded: true },
|
|
16
|
+
layout: 'fullscreen',
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export default meta;
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
const Template: Story<Props> = args => (
|
|
24
|
+
<I18nWrapper>
|
|
25
|
+
<ArtifactProvider>
|
|
26
|
+
<VisemeProvider>
|
|
27
|
+
<Memori {...args} />
|
|
28
|
+
</VisemeProvider>
|
|
29
|
+
</ArtifactProvider>
|
|
30
|
+
</I18nWrapper>
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
const DefaultLayout = Template.bind({});
|
|
34
|
+
DefaultLayout.args = {
|
|
35
|
+
memoriName: 'Layout Storybook',
|
|
36
|
+
ownerUserName: 'andrea.patini',
|
|
37
|
+
memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
|
|
38
|
+
ownerUserID: '95753bbe-9e88-4799-ae35-dc060bc11c48',
|
|
39
|
+
tenantID: 'www.aisuru.com',
|
|
40
|
+
engineURL: 'https://engine.memori.ai/memori/v2',
|
|
41
|
+
apiURL: 'https://backend.memori.ai/api/v2',
|
|
42
|
+
baseURL: 'https://www.aisuru.com',
|
|
43
|
+
layout: 'FULL_CHAT',
|
|
44
|
+
uiLang: 'IT',
|
|
45
|
+
spokenLang: 'IT',
|
|
46
|
+
integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const baseIntegration = {
|
|
50
|
+
integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
|
|
51
|
+
memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
|
|
52
|
+
type: 'LANDING_EXPERIENCE',
|
|
53
|
+
state: 'NEW',
|
|
54
|
+
deviceEmails: null,
|
|
55
|
+
invocationText: null,
|
|
56
|
+
jobID: null,
|
|
57
|
+
publish: true,
|
|
58
|
+
creationTimestamp: '2022-06-13T14:44:52.833573Z',
|
|
59
|
+
lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export const FullBodyWithFullBodyAvatar = Template.bind({});
|
|
63
|
+
FullBodyWithFullBodyAvatar.args = {
|
|
64
|
+
...DefaultLayout.args,
|
|
65
|
+
avatar3DURL:
|
|
66
|
+
'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
|
|
67
|
+
integration: {
|
|
68
|
+
...baseIntegration,
|
|
69
|
+
customData: JSON.stringify({
|
|
70
|
+
textColor: '#000000',
|
|
71
|
+
buttonBgColor: '#007eb6',
|
|
72
|
+
buttonTextColor: '#ffffff',
|
|
73
|
+
blurBackground: true,
|
|
74
|
+
innerBgColor: 'light',
|
|
75
|
+
multilanguage: true,
|
|
76
|
+
avatar: 'readyplayerme-full',
|
|
77
|
+
avatarURL:
|
|
78
|
+
'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
|
|
79
|
+
name: 'Layout Storybook',
|
|
80
|
+
showShare: true,
|
|
81
|
+
}),
|
|
82
|
+
},
|
|
83
|
+
tenant,
|
|
84
|
+
layout: 'FULLPAGE',
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export const FullBodyWithHalfBodyAvatar = Template.bind({});
|
|
88
|
+
FullBodyWithHalfBodyAvatar.args = {
|
|
89
|
+
...DefaultLayout.args,
|
|
90
|
+
avatar3DURL:
|
|
91
|
+
'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
|
|
92
|
+
integration: {
|
|
93
|
+
...baseIntegration,
|
|
94
|
+
customData: JSON.stringify({
|
|
95
|
+
textColor: '#000000',
|
|
96
|
+
buttonBgColor: '#007eb6',
|
|
97
|
+
buttonTextColor: '#ffffff',
|
|
98
|
+
blurBackground: true,
|
|
99
|
+
innerBgColor: 'light',
|
|
100
|
+
multilanguage: true,
|
|
101
|
+
avatar: 'readyplayerme',
|
|
102
|
+
avatarURL:
|
|
103
|
+
'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
|
|
104
|
+
name: 'Layout Storybook',
|
|
105
|
+
showShare: true,
|
|
106
|
+
}),
|
|
107
|
+
},
|
|
108
|
+
tenant,
|
|
109
|
+
layout: 'FULLPAGE',
|
|
110
|
+
};
|
|
111
|
+
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Meta, Story } from '@storybook/react';
|
|
3
|
+
import { memori, tenant } from '../../../mocks/data';
|
|
4
|
+
import { Props } from '../../MemoriWidget/MemoriWidget';
|
|
5
|
+
import Memori from '../../../index';
|
|
6
|
+
import I18nWrapper from '../../../I18nWrapper';
|
|
7
|
+
import { VisemeProvider } from '../../../context/visemeContext';
|
|
8
|
+
import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactContext';
|
|
9
|
+
|
|
10
|
+
const meta: Meta = {
|
|
11
|
+
title: 'General/Layouts/Totem',
|
|
12
|
+
component: (args: Props) => <Memori {...args} engineURL="https://engine.memori.ai" apiURL="https://backend.memori.ai" baseURL="https://www.aisuru.com" />,
|
|
13
|
+
argTypes: {},
|
|
14
|
+
parameters: {
|
|
15
|
+
controls: { expanded: true },
|
|
16
|
+
layout: 'fullscreen',
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export default meta;
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
const Template: Story<Props> = args => (
|
|
24
|
+
<I18nWrapper>
|
|
25
|
+
<ArtifactProvider>
|
|
26
|
+
<VisemeProvider>
|
|
27
|
+
<Memori {...args} />
|
|
28
|
+
</VisemeProvider>
|
|
29
|
+
</ArtifactProvider>
|
|
30
|
+
</I18nWrapper>
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
const DefaultLayout = Template.bind({});
|
|
34
|
+
DefaultLayout.args = {
|
|
35
|
+
memoriName: 'Layout Storybook',
|
|
36
|
+
ownerUserName: 'andrea.patini',
|
|
37
|
+
memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
|
|
38
|
+
ownerUserID: '95753bbe-9e88-4799-ae35-dc060bc11c48',
|
|
39
|
+
tenantID: 'www.aisuru.com',
|
|
40
|
+
engineURL: 'https://engine.memori.ai/memori/v2',
|
|
41
|
+
apiURL: 'https://backend.memori.ai/api/v2',
|
|
42
|
+
baseURL: 'https://www.aisuru.com',
|
|
43
|
+
layout: 'FULL_CHAT',
|
|
44
|
+
uiLang: 'IT',
|
|
45
|
+
spokenLang: 'IT',
|
|
46
|
+
integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const baseIntegration = {
|
|
50
|
+
integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
|
|
51
|
+
memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
|
|
52
|
+
type: 'LANDING_EXPERIENCE',
|
|
53
|
+
state: 'NEW',
|
|
54
|
+
deviceEmails: null,
|
|
55
|
+
invocationText: null,
|
|
56
|
+
jobID: null,
|
|
57
|
+
publish: true,
|
|
58
|
+
creationTimestamp: '2022-06-13T14:44:52.833573Z',
|
|
59
|
+
lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export const TotemWithFullBodyAvatar = Template.bind({});
|
|
63
|
+
TotemWithFullBodyAvatar.args = {
|
|
64
|
+
...DefaultLayout.args,
|
|
65
|
+
avatar3DURL:
|
|
66
|
+
'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
|
|
67
|
+
integration: {
|
|
68
|
+
...baseIntegration,
|
|
69
|
+
customData: JSON.stringify({
|
|
70
|
+
textColor: '#000000',
|
|
71
|
+
buttonBgColor: '#007eb6',
|
|
72
|
+
buttonTextColor: '#ffffff',
|
|
73
|
+
blurBackground: true,
|
|
74
|
+
innerBgColor: 'light',
|
|
75
|
+
multilanguage: true,
|
|
76
|
+
avatar: 'readyplayerme-full',
|
|
77
|
+
avatarURL:
|
|
78
|
+
'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
|
|
79
|
+
name: 'Layout Storybook',
|
|
80
|
+
showShare: true,
|
|
81
|
+
}),
|
|
82
|
+
},
|
|
83
|
+
tenant,
|
|
84
|
+
layout: 'TOTEM',
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export const TotemWithHalfBodyAvatar = Template.bind({});
|
|
88
|
+
TotemWithHalfBodyAvatar.args = {
|
|
89
|
+
...DefaultLayout.args,
|
|
90
|
+
avatar3DURL:
|
|
91
|
+
'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
|
|
92
|
+
integration: {
|
|
93
|
+
...baseIntegration,
|
|
94
|
+
customData: JSON.stringify({
|
|
95
|
+
textColor: '#000000',
|
|
96
|
+
buttonBgColor: '#007eb6',
|
|
97
|
+
buttonTextColor: '#ffffff',
|
|
98
|
+
blurBackground: true,
|
|
99
|
+
innerBgColor: 'light',
|
|
100
|
+
multilanguage: true,
|
|
101
|
+
avatar: 'readyplayerme',
|
|
102
|
+
avatarURL:
|
|
103
|
+
'https://assets.memori.ai/api/v2/asset/acc38f4a-e4c3-4a21-9818-c3d1672820ea.glb#1762875973109',
|
|
104
|
+
name: 'Layout Storybook',
|
|
105
|
+
showShare: true,
|
|
106
|
+
}),
|
|
107
|
+
},
|
|
108
|
+
tenant,
|
|
109
|
+
layout: 'TOTEM',
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
export const TotemWithDefaultTotem = Template.bind({});
|
|
113
|
+
TotemWithDefaultTotem.args = {
|
|
114
|
+
...DefaultLayout.args,
|
|
115
|
+
integration: {
|
|
116
|
+
...baseIntegration,
|
|
117
|
+
customData: JSON.stringify({
|
|
118
|
+
textColor: '#000000',
|
|
119
|
+
buttonBgColor: '#007eb6',
|
|
120
|
+
buttonTextColor: '#ffffff',
|
|
121
|
+
blurBackground: true,
|
|
122
|
+
innerBgColor: 'light',
|
|
123
|
+
multilanguage: true,
|
|
124
|
+
avatar: 'default_totem',
|
|
125
|
+
name: 'Layout Storybook',
|
|
126
|
+
showShare: true,
|
|
127
|
+
}),
|
|
128
|
+
},
|
|
129
|
+
tenant,
|
|
130
|
+
layout: 'TOTEM',
|
|
131
|
+
};
|
|
132
|
+
|