diff --git a/README.md b/README.md index 8979a9a8..e3a6ce72 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ const App = () => ( | `defaultSpeakerActive` | | `boolean` | `true` | Default value for the speaker activation | | `disableTextEnteredEvents` | | `boolean` | `false` | Disable MemoriTextEntered events listeners for `typeMessage` functions, useful to avoid issues with multiple widgets in page. | | `AZURE_COGNITIVE_SERVICES_TTS_KEY` | | `string` | | Azure Cognitive Services TTS key, used to generate the audio of the Memori and for STT recognition | -| `layout` | | `string` | | Layout of the Memori, can be "FULLPAGE" (default), "CHAT", "WEBSITE_ASSISTANT" or "TOTEM", see [below](#layouts) | +| `layout` | | `string` | | Layout of the Memori, can be "FULLPAGE" (default), "CHAT", "WEBSITE_ASSISTANT", "TOTEM" or "HIDDEN LAYOUT", see [below](#layouts) | | `customLayout` | | `React.FC` | | Custom layout component, see [below](#custom-layout) | | `customMediaRenderer` | | `(mimeType: string) => JSX.Element \| null` | | Custom media renderer, see [below](#custom-media-renderer) | | `additionalSettings` | | `JSX.Element` | | Custom JSX or component to render within the settings drawer | @@ -99,7 +99,7 @@ const App = () => ( ### Layouts -The Memori can be displayed in three different layouts: `FULLPAGE`, `CHAT`, `WEBSITE_ASSISTANT` and `TOTEM`. +The Memori can be displayed in five different layouts: `FULLPAGE`, `CHAT`, `WEBSITE_ASSISTANT`,`TOTEM`, `HIDDEN_CHAT` and `ZOOMED_AVATAR`. If you don't specify a layout, the default one is `FULLPAGE`. #### FULLPAGE @@ -118,6 +118,15 @@ If you don't specify a layout, the default one is `FULLPAGE`. Website assistant layout +#### HIDDEN_CHAT + +Hidden Chat + +#### ZOOMED_AVATAR + +Zoomed Avatar + + #### Custom layout You can override the default layout by passing a custom layout component to the `customLayout` prop. diff --git a/docs/hidden-chat.png b/docs/hidden-chat.png new file mode 100644 index 00000000..00b8eb12 Binary files /dev/null and b/docs/hidden-chat.png differ diff --git a/docs/zoomed-avatar.png b/docs/zoomed-avatar.png new file mode 100644 index 00000000..a0d3d0be Binary files /dev/null and b/docs/zoomed-avatar.png differ diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 397039ca..9b460b3f 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -31,6 +31,7 @@ export interface Props { baseUrl?: string; apiUrl?: string; animation?: string; + isZoomed?: boolean; } const Avatar: React.FC = ({ @@ -47,6 +48,7 @@ const Avatar: React.FC = ({ baseUrl, apiUrl, animation, + isZoomed = false, }) => { const { t } = useTranslation(); const [isClient, setIsClient] = useState(false); @@ -73,12 +75,12 @@ const Avatar: React.FC = ({ return undefined; }; - // Render the avatar, if the avatar is a user avatar, the avatar is rendered, if the avatar is a default avatar, the avatar is rendered const renderAvatar = () => { if ( (integrationConfig?.avatar === 'readyplayerme' || integrationConfig?.avatar === 'readyplayerme-full' || - integrationConfig?.avatar === 'customglb') && + integrationConfig?.avatar === 'customglb' || + integrationConfig?.avatar === 'customrpm') && integrationConfig?.avatarURL ) { return ( @@ -133,6 +135,7 @@ const Avatar: React.FC = ({ speaking={isPlayingAudio} loading={loading} style={getAvatarStyle()} + isZoomed={isZoomed} /> ); @@ -177,8 +180,8 @@ const Avatar: React.FC = ({ }; } return { - width: '600px', - height: '600px', + width: '100%', + height: '100%', backgroundColor: 'none', }; }; diff --git a/src/components/Avatar/AvatarView/AvatarView.stories.tsx b/src/components/Avatar/AvatarView/AvatarView.stories.tsx index 7b32c05c..f796f991 100644 --- a/src/components/Avatar/AvatarView/AvatarView.stories.tsx +++ b/src/components/Avatar/AvatarView/AvatarView.stories.tsx @@ -100,6 +100,7 @@ Default.args = { 'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png', }; + export const EyeBlink = Template.bind({}); EyeBlink.args = { eyeBlink: true, @@ -157,6 +158,20 @@ Fullbody.args = { halfBody: false, }; +export const FullbodyZoomed = Template.bind({}); +FullbodyZoomed.args = { + sex: 'MALE', + eyeBlink: true, + headMovement: true, + rotateAvatar: true, + speaking: false, + isZoomed: true, + url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb', + fallbackImg: + 'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png', + halfBody: false, +}; + export const FullbodyAnimatedIdle = Template.bind({}); FullbodyAnimatedIdle.args = { sex: 'MALE', diff --git a/src/components/Avatar/AvatarView/components/fullbodyAvatar.tsx b/src/components/Avatar/AvatarView/components/fullbodyAvatar.tsx index e479fab9..1700cc4f 100644 --- a/src/components/Avatar/AvatarView/components/fullbodyAvatar.tsx +++ b/src/components/Avatar/AvatarView/components/fullbodyAvatar.tsx @@ -30,10 +30,12 @@ export interface FullbodyAvatarProps { timeScale: number; loading?: boolean; speaking?: boolean; + isZoomed?: boolean; } const AVATAR_POSITION = new Vector3(0, -1, 0); const AVATAR_ROTATION = new Euler(0.175, 0, 0); +const AVATAR_POSITION_ZOOMED = new Vector3(0, -1.53, 0); const ANIMATION_URLS = { MALE: 'https://assets.memori.ai/api/v2/asset/5de7456f-0cd8-4e29-95a7-0cd0045a5325.glb', FEMALE: @@ -46,7 +48,8 @@ export default function FullbodyAvatar({ onLoaded, currentBaseAction, additiveActions, - timeScale + timeScale, + isZoomed, }: FullbodyAvatarProps) { const { scene } = useGLTF(url); const { animations } = useGLTF(ANIMATION_URLS[sex]); @@ -87,21 +90,6 @@ export default function FullbodyAvatar({ }; }, [currentBaseAction, timeScale]); - - - - // useEffect(() => { - // if (speaking && actions['Talk 1'] && actions['Talk 2']) { - // const talk1 = actions['Talk 1'].getClip(); - // const talk2 = actions['Talk 2'].getClip(); - // const talk = new AnimationClip( - // 'Talk', - // talk1.duration + talk2.duration, - // ); - // mixer.clipAction(talk, scene).play(); - // } - // }, [speaking]); - // Additive actions useEyeBlink(additiveActions.blink.weight > 0, nodes); useMouthSpeaking(additiveActions.speak.weight > 0, nodes); @@ -113,7 +101,10 @@ export default function FullbodyAvatar({ }); return ( - + ); diff --git a/src/components/Avatar/AvatarView/index.tsx b/src/components/Avatar/AvatarView/index.tsx index 0e651601..ea5430c7 100644 --- a/src/components/Avatar/AvatarView/index.tsx +++ b/src/components/Avatar/AvatarView/index.tsx @@ -33,6 +33,7 @@ export interface Props { loading?: boolean; animation?: string; showControls?: boolean; + isZoomed?: boolean; } const baseActions: Record = { @@ -49,8 +50,9 @@ const baseActions: Record = { const defaultStyles = { halfBody: { - width: '250px', - height: '250px', + width: '100%', + height: '100%', + minHeight: '500px', // Ensure minimum height backgroundColor: 'white', borderRadius: '100%', }, @@ -62,12 +64,18 @@ const defaultStyles = { }; /* Animation Control Panel */ -const getCameraSettings = (halfBody: boolean) => +const getCameraSettings = (halfBody: boolean, isZoomed?: boolean) => halfBody ? { fov: 40, position: [0, 0, 0.6], } + : !halfBody && isZoomed + ? { + // Zoomed in + fov: 44, + position: [0,0,1.25], + } : { fov: 40, position: [0, 0.0000175, 3] }; const getLightingComponent = () => @@ -99,6 +107,7 @@ const AvatarComponent = ({ timeScale: number; loading?: boolean; animation?: string; + isZoomed?: boolean; }) => halfBody ? : ; @@ -112,6 +121,7 @@ const AvatarView = ({ headMovement, speaking, halfBody, + isZoomed, }: Props & { halfBody: boolean }) => { const [currentBaseAction, setCurrentBaseAction] = useState({ action: animation || 'Idle', @@ -209,6 +219,7 @@ const AvatarView = ({ currentBaseAction={currentBaseAction} timeScale={timeScale} animation={animation} + isZoomed={isZoomed} /> ); @@ -228,13 +239,14 @@ export default function ContainerAvatarView({ loading, animation, showControls = false, + isZoomed, }: Props) { return ( }> {getLightingComponent()} @@ -249,6 +261,7 @@ export default function ContainerAvatarView({ loading={loading} animation={animation} showControls={showControls} + isZoomed={isZoomed} /> diff --git a/src/components/MemoriWidget/MemoriWidget.tsx b/src/components/MemoriWidget/MemoriWidget.tsx index cbce40ef..ea3f24c2 100644 --- a/src/components/MemoriWidget/MemoriWidget.tsx +++ b/src/components/MemoriWidget/MemoriWidget.tsx @@ -77,6 +77,8 @@ import { import { anonTag, uiLanguages } from '../../helpers/constants'; import { getErrori18nKey } from '../../helpers/error'; import { getCredits } from '../../helpers/credits'; +import HiddenChatLayout from '../layouts/HiddenChat'; +import ZoomedFullBodyLayout from '../layouts/ZoomedFullBody'; // Widget utilities and helpers const getMemoriState = (integrationId?: string): object | null => { @@ -333,7 +335,7 @@ export interface Props { memoriLang?: string; multilingual?: boolean; integration?: Integration; - layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM' | 'CHAT' | 'WEBSITE_ASSISTANT'; + layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM' | 'CHAT' | 'WEBSITE_ASSISTANT' | 'HIDDEN_CHAT' | 'ZOOMED_FULL_BODY'; customLayout?: React.FC; showShare?: boolean; showCopyButton?: boolean; @@ -3134,6 +3136,10 @@ const MemoriWidget = ({ ? FullPageLayout : selectedLayout === 'WEBSITE_ASSISTANT' ? WebsiteAssistantLayout + : selectedLayout === 'HIDDEN_CHAT' + ? HiddenChatLayout + : selectedLayout === 'ZOOMED_FULL_BODY' + ? ZoomedFullBodyLayout : FullPageLayout; return ( diff --git a/src/components/StartPanel/StartPanel.tsx b/src/components/StartPanel/StartPanel.tsx index 98829189..5bbab56d 100644 --- a/src/components/StartPanel/StartPanel.tsx +++ b/src/components/StartPanel/StartPanel.tsx @@ -269,7 +269,7 @@ const StartPanel: React.FC = ({ diff --git a/src/components/layouts/HiddenChat.tsx b/src/components/layouts/HiddenChat.tsx new file mode 100644 index 00000000..dc7dccfd --- /dev/null +++ b/src/components/layouts/HiddenChat.tsx @@ -0,0 +1,107 @@ +import React, { useState, useMemo, useEffect } from 'react'; +import Spin from '../ui/Spin'; +import { LayoutProps } from '../MemoriWidget/MemoriWidget'; +import { useTranslation } from 'react-i18next'; +import QuestionHelp from '../icons/QuestionHelp'; +import Close from '../icons/Close'; + +const HiddenChatLayout: React.FC = ({ + Header, + headerProps, + Chat, + chatProps, + startPanelProps, + sessionId, + hasUserActivatedSpeak, +}) => { + const [isOpen, setIsOpen] = useState(false); + + const initChat = () => { + try { + window.speechSynthesis.speak( + new SpeechSynthesisUtterance('') + ); + } catch (e) { + console.error(e); + } + if (startPanelProps && startPanelProps?.initializeTTS) + startPanelProps?.initializeTTS(); + if (startPanelProps && startPanelProps?.onClickStart) + startPanelProps?.onClickStart(); + }; + + useEffect(() => { + const mainDiv = document.body; + if (mainDiv) { + if (isOpen) { + console.log('open'); + mainDiv.style.width = 'calc(100% - 300px)'; + mainDiv.style.marginRight = '300px'; + mainDiv.style.transition = 'all 0.5s'; + } else { + mainDiv.style.width = '100%'; + mainDiv.style.marginLeft = '0'; + } + } + }, [isOpen]); + + const handleSidebarToggle = () => { + setIsOpen(!isOpen); + initChat(); + }; + + return ( + <> + +
+ + +
+ + ); +}; + +export default HiddenChatLayout; \ No newline at end of file diff --git a/src/components/layouts/ZoomedFullBody.tsx b/src/components/layouts/ZoomedFullBody.tsx new file mode 100644 index 00000000..cf848421 --- /dev/null +++ b/src/components/layouts/ZoomedFullBody.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import Spin from '../ui/Spin'; +import { LayoutProps } from '../MemoriWidget/MemoriWidget'; + +const FullPageLayout: React.FC = ({ + Header, + headerProps, + Avatar, + avatarProps, + Chat, + chatProps, + StartPanel, + startPanelProps, + integrationStyle, + integrationBackground, + ChangeMode, + changeModeProps, + sessionId, + hasUserActivatedSpeak, + showInstruct = false, + loading = false, + poweredBy, +}) => ( + <> + {integrationStyle} + {integrationBackground} + + + {showInstruct && ChangeMode && changeModeProps && ( + + )} + + {Header && headerProps &&
} + +
+
+ {Avatar && avatarProps && } + +
+
+
+ {sessionId && hasUserActivatedSpeak && Chat && chatProps ? ( + + ) : startPanelProps ? ( + + ) : null} +
+ + {poweredBy} +
+ + +); + +export default FullPageLayout; diff --git a/src/components/layouts/hidden-chat.css b/src/components/layouts/hidden-chat.css new file mode 100644 index 00000000..52ccd370 --- /dev/null +++ b/src/components/layouts/hidden-chat.css @@ -0,0 +1,183 @@ +.sidebar-container { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + height: 100%; +} + +.sidebar-toggle { + display: none; +} + +.sidebar-toggle-label { + position: absolute; + top: 50%; + right: 0; + display: flex; + width: auto; + height: 80px; + align-items: center; + justify-content: center; + padding: 10px 5px; + background-color: var(--memori-primary); + color: white; + cursor: pointer; + font-size: 18px; + font-weight: bold; + text-orientation: mixed; + transform: translateY(-50%); + transition: all 0.3s ease-in-out; + writing-mode: vertical-rl; +} + +.open-label { + border-radius: 5px 0 0 5px; +} + +.close-label { + right: 350px; + border-radius: 0 5px 5px 0; + opacity: 0; + pointer-events: none; + transform: rotate(180deg); +} + +.sidebar { + position: fixed; + z-index: 1000; + top: 0; + right: -350px; + width: 350px; + height: 100%; + background-color: white; + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); + transition: right 0.3s ease-in-out; +} + +.sidebar-content h2 { + margin-bottom: 20px; + color: var(--memori-primary); + font-size: 24px; + font-weight: bold; +} + +.sidebar-content ul { + padding: 0; + list-style-type: none; +} + +.sidebar-content li { + margin-bottom: 10px; +} + +.sidebar-content a { + display: flex; + align-items: center; + color: #4b5563; + text-decoration: none; + transition: color 0.2s ease-in-out; +} + +.sidebar-content a:hover { + color: var(--memori-primary); +} + +.sidebar-content svg { + width: 20px; + height: 20px; + margin-right: 10px; +} + +.sidebar-toggle:checked ~ .sidebar-container .sidebar { + right: 0; +} + +.sidebar-toggle:checked ~ .sidebar-container .open-label { + opacity: 0; + pointer-events: none; + transform: translateY(-50%) translateX(350px); +} + +.loading { + display: flex; + height: 100%; + align-items: center; + justify-content: center; +} + + +.sidebar-content { + position: absolute; + top: -10px; + width: 100%; + padding: 20px; +} + +.sidebar-toggle:checked ~ .sidebar-container .close-label { + opacity: 1; + pointer-events: auto; +} + +.memori-hidden-chat-layout--controls { + display: flex; + height: 90%; + margin-top: 50px; +} + +.memori-hidden-chat-layout-header--layout { + display: flex; + width: 100%; + align-items: center; + justify-content: flex-end; + padding: 10px; + margin: 0; + background-color: white; + color: white; +} + +.memori-hidden-chat-layout-header--layout > button, .memori-hidden-chat-layout-header--layout > div > button { + display: flex; + width: 38px; + height: 38px; + align-items: center; + justify-content: center; + border-radius: 50%; + aspect-ratio: 1; + background-color: var(--memori-primary); + cursor: pointer; + transition: background-color 0.3s ease-in-out; +} + +.memori-button--icon > svg { + margin: 0; +} + +.icon,.icon-close { + width: 25px; + height: 25px; +} + +.icon-close{ + fill: white; +} + + +@media (max-width: 768px) { + .sidebar-container { + display: none; + } + + .sidebar { + right: -100%; + width: 100%; + } + + .sidebar-toggle:checked ~ .sidebar-container .open-label { + transform: translateY(-50%) translateX(100%); + } + + .close-label { + right: 100%; + } +} diff --git a/src/components/layouts/layouts.stories.tsx b/src/components/layouts/layouts.stories.tsx index b86b50cc..8daea0b9 100644 --- a/src/components/layouts/layouts.stories.tsx +++ b/src/components/layouts/layouts.stories.tsx @@ -197,8 +197,20 @@ ChatOnly.args = { layout: 'CHAT', }; -export const Totem = Template.bind({}); -Totem.args = { + +export const Custom = Template.bind({}); +Custom.args = { + uiLang: 'it', + showShare: true, + showSettings: true, + memori, + tenant, + layout: 'FULLPAGE', + customLayout: CustomLayout, +}; + +export const WebsiteAssistant = Template.bind({}); +WebsiteAssistant.args = { uiLang: 'it', showShare: true, showSettings: true, @@ -303,25 +315,127 @@ Totem.args = { }), }, tenant, - layout: 'TOTEM', + layout: 'WEBSITE_ASSISTANT', }; -export const Custom = Template.bind({}); -Custom.args = { +export const HiddenChat = Template.bind({}); +HiddenChat.args = { uiLang: 'it', showShare: true, showSettings: true, - memori, - tenant, - layout: 'FULLPAGE', - customLayout: CustomLayout, + // memori, + // tenant, + memori: { + memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21', + name: 'Nicola', + password: null, + recoveryTokens: null, + newPassword: null, + ownerUserID: null, + ownerUserName: 'nzambello', + ownerTenantName: 'aisuru.com', + memoriConfigurationID: 'fd10bb42-98d9-4c08-8e02-2b08bd4e4975', + description: + 'Sono Nicola Zambello, sviluppatore e attivista per un web etico e sostenibile', + completionDescription: null, + engineMemoriID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b', + isOwner: false, + isGiver: false, + isReceiver: false, + giverTag: null, + giverPIN: null, + privacyType: 'PUBLIC', + secretToken: null, + minimumNumberOfRecoveryTokens: null, + totalNumberOfRecoveryTokens: null, + sentInvitations: [], + receivedInvitations: [], + integrations: [ + { + integrationID: '62de8c99-0ac2-4cbe-bd95-a39ad7dc6b32', + memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21', + type: 'LANDING_EXPERIENCE', + state: 'NEW', + deviceEmails: null, + invocationText: null, + jobID: null, + customData: + '{"textColor":"#000000","buttonBgColor":"#007eb6","buttonTextColor":"#ffffff","globalBackground":"https://assets.memori.ai/api/v2/asset/cade3b9c-0437-4342-b2bd-8db9c2a3a20e.png","blurBackground":true,"innerBgColor":"light","multilanguage":true,"avatar":"readyplayerme","avatarURL":"https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb#1681736752156","name":"Pagina pubblica","contextVars":"ANIMALE:CANE","personTag":"☠️","personPIN":"666666","personName":"Pirata","showShare":true,"avatarFullBodyURL":"https://models.readyplayer.me/63b55751f17e295642bf07a2.glb"}', + resources: [], + publish: true, + creationTimestamp: '2022-06-13T14:44:52.833573Z', + lastChangeTimestamp: '2022-06-13T14:44:52.833573Z', + }, + ], + avatarURL: + 'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png', + coverURL: + 'https://assets.memori.ai/api/v2/asset/e9bb9f6d-8f34-45ab-af9e-6d630d9a51a8.png', + avatar3DURL: + 'https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb', + avatarOriginal3DURL: + 'https://d1a370nemizbjq.cloudfront.net/c7c80a1d-deda-4fe1-96c6-fabad0771aa2.glb', + needsPosition: false, + voiceType: 'MALE', + culture: 'it-IT', + categories: [ + 'biografico', + 'tecnologia', + 'web', + 'open-source', + 'green', + 'privacy', + ], + exposed: true, + disableR2R3Loop: null, + disableR4Loop: null, + disableR5Loop: null, + enableCompletions: true, + completionModel: null, + chainingMemoriID: null, + chainingBaseURL: null, + chainingPassword: null, + contentQualityIndex: 210.8, + contentQualityIndexTimestamp: '2023-04-17T00:01:32.194744Z', + publishedInTheMetaverse: true, + metaverseEnvironment: 'apartment', + blockedUntil: null, + creationTimestamp: '2022-06-13T14:21:55.793034Z', + lastChangeTimestamp: '2023-04-15T08:15:36.403546Z', + }, + integration: { + integrationID: '62de8c99-0ac2-4cbe-bd95-a39ad7dc6b32', + memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21', + type: 'LANDING_EXPERIENCE', + state: 'NEW', + deviceEmails: null, + invocationText: null, + jobID: null, + publish: true, + creationTimestamp: '2022-06-13T14:44:52.833573Z', + lastChangeTimestamp: '2022-06-13T14:44:52.833573Z', + customData: JSON.stringify({ + ...JSON.parse( + '{"textColor":"#000000","buttonBgColor":"#007eb6","buttonTextColor":"#ffffff","globalBackground":"https://assets.memori.ai/api/v2/asset/cade3b9c-0437-4342-b2bd-8db9c2a3a20e.png","blurBackground":true,"innerBgColor":"light","multilanguage":true,"avatar":"readyplayerme","avatarURL":"https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb#1681736752156","name":"Pagina pubblica","contextVars":"ANIMALE:CANE","personTag":"☠️","personPIN":"666666","personName":"Pirata","showShare":true,"avatarFullBodyURL":"https://models.readyplayer.me/63b55751f17e295642bf07a2.glb"}' + ), + avatar: 'readyplayerme-full', + avatarURL: + 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#' + + // 'https://models.readyplayer.me/63b558263858282637c54115.glb#' + + new Date(Date.now()).getTime(), + }), + }, + layout: 'HIDDEN_CHAT', }; -export const WebsiteAssistant = Template.bind({}); -WebsiteAssistant.args = { + +export const ZoomedFullBody = Template.bind({}); +ZoomedFullBody.args = { uiLang: 'it', showShare: true, showSettings: true, + // memori, + // tenant, memori: { memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21', name: 'Nicola', @@ -422,6 +536,5 @@ WebsiteAssistant.args = { new Date(Date.now()).getTime(), }), }, - tenant, - layout: 'WEBSITE_ASSISTANT', + layout: 'ZOOMED_FULL_BODY', }; diff --git a/src/index.tsx b/src/index.tsx index 7ea1dc0a..4b21bcfa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -321,6 +321,8 @@ Memori.propTypes = { 'TOTEM', 'WEBSITE_ASSISTANT', 'CHAT', + 'HIDDEN_CHAT', + 'ZOOMED_FULL_BODY' ]), customLayout: PropTypes.any, showShare: PropTypes.bool, diff --git a/src/styles.css b/src/styles.css index 361e1d5e..8df84b2c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -48,6 +48,7 @@ @import url('https://fonts.bunny.net/css?family=lexend-deca:200,400,700'); +@import url('./components/layouts/hidden-chat.css'); @import url('./components/layouts/totem.css'); @import url('./components/layouts/website-assistant.css'); @import url('./components/layouts/chat.css');