@memori.ai/memori-react 9.0.0-alpha.6 → 9.0.0-alpha.7

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.0-alpha.6";
+export declare const version = "9.0.0-alpha.7";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '9.0.0-alpha.6';
+export const version = '9.0.0-alpha.7';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0-alpha.7",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import {
   Button,
   FieldGroup,
@@ -18,6 +19,7 @@ export interface Props {
 }
 
 const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const [birthDate, setBirthDate] = useState<DateTime>();
@@ -72,6 +74,7 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
 
   return (
     <Modal
+      container={surfaceEl ?? undefined}
       open={visible}
       width="600px"
       widthMd="600px"

package/src/components/Auth/Auth.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal, Form } from '@memori.ai/ui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { Plus } from 'lucide-react';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
 export interface Props {
   pwdOrTokens: null | 'password' | 'tokens';
@@ -32,6 +33,7 @@ export const AuthWidget = ({
   openModal = false,
   withModal = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const {
     register,
@@ -198,6 +200,7 @@ export const AuthWidget = ({
 
   return withModal ? (
     <Modal
+      container={surfaceEl ?? undefined}
       open={openModal || showModal}
       title={t('auth.title') || 'Authentication'}
       closable={true}

package/src/components/Chat/Chat.tsx

@@ -30,6 +30,7 @@ import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
 import { FileText as DocumentIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Tooltip, Modal } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import {
   maxDocumentsPerMessage,
   maxDocumentContentLength,
@@ -186,6 +187,7 @@ const Chat: React.FC<Props> = ({
     useState<UsageBadgeModalState | null>(null);
   const chatWrapperRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const locale = (translateTo || memori.culture || 'it-IT').replace('_', '-');
 
   const llmUsageLabels = useMemo<LlmUsageLabels>(
@@ -625,6 +627,7 @@ const Chat: React.FC<Props> = ({
       )}
 
       <Modal
+        container={surfaceEl ?? undefined}
         open={!!activeUsageBadge}
         onClose={() => setActiveUsageBadge(null)}
         title={

package/src/components/ChatBubble/ChatBubble.tsx

@@ -36,6 +36,7 @@ import {
 import { Expandable, Modal } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { usePressTooltip } from '../../helpers/usePressTooltip';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 const ASSET_URL_PATTERN = /https?:\/\/\S*\/api\/v\d+\/asset\/\S+/gi;
 
 const sanitizeRawCopyText = (text: string) =>
@@ -122,6 +123,7 @@ const ChatBubble: React.FC<Props> = ({
   customMediaRenderer,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const lang = i18n.language || 'en';
   const generatedByAiTooltip = usePressTooltip();
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
@@ -834,6 +836,7 @@ const ChatBubble: React.FC<Props> = ({
       )}
 
       <Modal
+        container={surfaceEl ?? undefined}
         open={openFunctionCache}
         className="memori-chat--function-cache-modal"
         title={t('functionCache') || 'Function Cache'}

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -21,6 +21,7 @@ import { stripAllInternalTags } from '../../helpers/message';
 import debounce from 'lodash/debounce';
 import { Spin } from '@memori.ai/ui';
 import { SelectBox } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
 import ChatResumeDrawer from './ChatResumeDrawer';
@@ -440,6 +441,7 @@ const ChatHistoryDrawer = ({
   userLang,
   isMultilanguageEnabled = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
@@ -1136,6 +1138,7 @@ const ChatHistoryDrawer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       className="memori-chat-history-drawer"
       open={open}
       onClose={onClose}

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Modal } from '@memori.ai/ui';
 import cx from 'classnames';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
 export interface ContentPreviewModalProps {
   open: boolean;
@@ -25,10 +26,12 @@ const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
   children,
   className,
 }) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const width = 'min(90vw, 800px)';
 
   return (
     <Modal
+      container={surfaceEl ?? undefined}
       open={open}
       onClose={() => onClose()}
       width={width}

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -3,6 +3,7 @@ import {
   Tenant,
 } from '@memori.ai/memori-api-client/dist/types';
 import { Drawer } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { useTranslation } from 'react-i18next';
 import { getResourceUrl } from '../../helpers/media';
 
@@ -24,9 +25,11 @@ const ExpertsDrawer = ({
   onClose,
 }: Props) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={open}
       onClose={onClose}
       className="memori--experts-drawer"

package/src/components/KnownFacts/KnownFacts.tsx

@@ -23,6 +23,7 @@ import type {
 } from '@tanstack/react-table';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { Trash2 } from 'lucide-react';
 
 export interface Props {
@@ -45,6 +46,7 @@ const KnownFacts = ({
   initialKnownFacts = [],
   closeDrawer,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t, i18n } = useTranslation();
   const { add } = useAlertManager();
   const { getKnownFactsPaginated, deleteKnownFact } = apiClient.knownFacts;
@@ -168,6 +170,7 @@ const KnownFacts = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={visible}
       anchor="right"
       className="memori-known-facts-drawer"
@@ -180,6 +183,7 @@ const KnownFacts = ({
     >
         <div className="memori-known-facts-body">
           <Modal
+          container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
           open={bulkDeleteModalVisible}
           closable
@@ -316,6 +320,7 @@ const KnownFacts = ({
         />
 
         <Modal
+          container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
           open={deleteModalVisibleFor !== undefined}
           closable

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -11,6 +11,7 @@ import {
   Form,
 } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import cx from 'classnames';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { getErrori18nKey } from '../../helpers/error';
@@ -50,6 +51,7 @@ const LoginDrawer = ({
   __TEST__signup = false,
   __TEST__needMissingData = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t, i18n } = useTranslation();
   const { add } = useAlertManager();
   const lang = i18n.language === 'it' ? 'it' : 'en';
@@ -436,6 +438,7 @@ const LoginDrawer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={open}
       onClose={onClose}
       className={cx('memori--login-drawer', {

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css

@@ -17,16 +17,30 @@
     --artifact-drawer-radius-lg: var(--memori-radius-box);
 }
 
-/* Override drawer width for ArtifactDrawer */
-.memori-artifact-panel-drawer {
-    --memori-drawer--width-lg: 46%;
-    /* background-color: var(--memori-main-background); */
+/*
+ * Split-panel width for ArtifactDrawer.
+ * Must stay in sync with HiddenChat's sidebar shift (`right: 46%`).
+ * @memori.ai/ui Drawer uses `--memori-modal-size-*` (not the legacy
+ * `--memori-drawer--width-*` tokens), and size="md" maps to `--memori-modal-size-md`.
+ */
+.memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer {
+    --memori-modal-size-md: 46%;
+    width: 46%;
+    max-width: 100vw;
+}
+
+.memori-drawer--right.memori-artifact-panel-drawer-fullscreen {
+    --memori-modal-size-md: 100%;
+    width: 100% !important;
+    max-width: 100% !important;
 }
 
 /* Hide the Drawer backdrop so the chat remains fully visible on the left
    (applies to the mobile/legacy Drawer-overlay path) */
 body:has(.memori-artifact-panel-drawer) .memori-drawer__backdrop,
-body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop {
+body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
+.memori-widget:has(.memori-artifact-panel-drawer) .memori-drawer__backdrop,
+.memori-widget:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop {
     display: none !important;
 }
 

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx

@@ -7,6 +7,7 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Drawer } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../../../context/widgetSurfaceContext';
 import {
   X,
   Maximize,
@@ -31,6 +32,7 @@ const ArtifactDrawer: React.FC<{
    *  component falls back to the Drawer overlay regardless of this flag. */
   isLayoutColumn?: boolean;
 }> = ({ isChatLogPanel = false, isLayoutColumn = false }) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { state, closeArtifact, toggleFullscreen } = useArtifact();
   const { t } = useTranslation();
   const [isMobile, setIsMobile] = useState(false);
@@ -144,6 +146,7 @@ const ArtifactDrawer: React.FC<{
         // Mobile or legacy: floating Drawer overlay
         return (
           <Drawer
+            container={surfaceEl ?? undefined}
             open={state.isDrawerOpen}
             onClose={handleClose}
             anchor="right"
@@ -167,6 +170,7 @@ const ArtifactDrawer: React.FC<{
       state.isDrawerOpen,
       state.isFullscreen,
       isMobile,
+      surfaceEl,
     ]
   );
 

package/src/components/MemoriWidget/MemoriWidget.css

@@ -9,7 +9,8 @@
     box-sizing: border-box;
 }
 
-.memori-widget > .memori-spin {
+.memori-widget > .memori-spin,
+.memori-widget > .memori-widget__surface > .memori-spin {
     height: calc(100vh - 50px);
 }
 
@@ -17,7 +18,8 @@
     .memori-widget {
         overflow-y: hidden;
     }
-    .memori-widget > .memori-spin {
+    .memori-widget > .memori-spin,
+    .memori-widget > .memori-widget__surface > .memori-spin {
         height: calc(100vh - 100px);
     }
 }

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -44,6 +44,7 @@ import {
   createAlertOptions,
   MemoriUIProvider,
 } from '@memori.ai/ui';
+import { WidgetSurfaceProvider } from '../../context/widgetSurfaceContext';
 
 // Components
 import MemoriAuth from '../Auth/Auth';
@@ -633,6 +634,11 @@ const MemoriWidget = ({
   // UI primitives via `MemoriUIProvider`). `useRef` would not trigger a
   // re-render and would leave the value `null` on the first pass.
   const [widgetRootEl, setWidgetRootEl] = useState<HTMLDivElement | null>(null);
+  // Inner surface establishes `contain: layout` for Drawers/Modals. Kept separate
+  // from widgetRootEl so Floating UI menus can portal outside containment.
+  const [widgetSurfaceEl, setWidgetSurfaceEl] = useState<HTMLDivElement | null>(
+    null
+  );
   const [isDarkTheme, setIsDarkTheme] = useState(false);
   useEffect(() => {
     if (!widgetRootEl) return;
@@ -3679,9 +3685,12 @@ const MemoriWidget = ({
 
   // Resolve the widget theme once so both `data-theme` on the root and the
   // `MemoriUIProvider` (which stamps portaled popups) stay in sync.
+  // Prefer integration config; fall back to host dark mode when unset.
   const widgetTheme: 'light' | 'dark' | undefined =
     integrationConfig?.theme === 'light' || integrationConfig?.theme === 'dark'
       ? integrationConfig.theme
+      : isDarkTheme
+      ? 'dark'
       : undefined;
 
   return (
@@ -3717,24 +3726,28 @@ const MemoriWidget = ({
       style={{ height }}
     >
       <MemoriUIProvider container={widgetRootEl} theme={widgetTheme}>
-        <Layout
-          Header={Header}
-          headerProps={headerProps}
-          Avatar={Avatar}
-          avatarProps={avatarProps}
-          Chat={Chat}
-          chatProps={chatProps}
-          StartPanel={StartPanel}
-          startPanelProps={startPanelProps}
-          integrationStyle={integrationStyle}
-          integrationBackground={integrationBackground}
-          poweredBy={poweredBy}
-          autoStart={autoStart}
-          sessionId={sessionId}
-          hasUserActivatedSpeak={hasUserActivatedSpeak}
-          loading={loading}
-          avatar3dHidden={avatar3dHidden ?? integrationConfig?.avatar_3d_hidden}
-        />
+        <WidgetSurfaceProvider value={widgetSurfaceEl}>
+          <div ref={setWidgetSurfaceEl} className="memori-widget__surface">
+            <Layout
+              Header={Header}
+              headerProps={headerProps}
+              Avatar={Avatar}
+              avatarProps={avatarProps}
+              Chat={Chat}
+              chatProps={chatProps}
+              StartPanel={StartPanel}
+              startPanelProps={startPanelProps}
+              integrationStyle={integrationStyle}
+              integrationBackground={integrationBackground}
+              poweredBy={poweredBy}
+              autoStart={autoStart}
+              sessionId={sessionId}
+              hasUserActivatedSpeak={hasUserActivatedSpeak}
+              loading={loading}
+              avatar3dHidden={
+                avatar3dHidden ?? integrationConfig?.avatar_3d_hidden
+              }
+            />
 
         <ArtifactAPIBridge
           pushMessage={(message: Message) => {
@@ -4023,6 +4036,8 @@ const MemoriWidget = ({
             }}
           />
         )}
+          </div>
+        </WidgetSurfaceProvider>
       </MemoriUIProvider>
     </div>
   );

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,4 +1,5 @@
 import { Drawer, Checkbox, Button, Slider, Tooltip } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { useTranslation } from 'react-i18next';
 import { setLocalConfig } from '../../helpers/configuration';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
@@ -46,9 +47,11 @@ const SettingsDrawer = ({
   isAvatar3d,
 }: Props) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       className="memori-settings-drawer"
       open={open}
       onClose={onClose}

package/src/components/StartPanel/StartPanel.tsx

@@ -28,6 +28,7 @@ import CompletionProviderStatus, {
 } from '../CompletionProviderStatus/CompletionProviderStatus';
 import { Expandable } from '@memori.ai/ui';
 import { usePressTooltip } from '../../helpers/usePressTooltip';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
 /**
  * Sentinel values used as non-selectable section headers in the language
@@ -97,6 +98,7 @@ const StartPanel: React.FC<Props> = ({
   showFullDescriptionOnMobile = false,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const boardOfExpertsTooltip = usePressTooltip();
   const nsfwTooltip = usePressTooltip();
   const deepThoughtTooltip = usePressTooltip();
@@ -683,6 +685,7 @@ const StartPanel: React.FC<Props> = ({
           )}
       </div>
       <Modal
+        container={surfaceEl ?? undefined}
         open={isMobile && mobileInfoModal !== null}
         onClose={() => setMobileInfoModal(null)}
         title={

package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { officeNativeExtensions } from '../../../helpers/constants';
 import { isOfficeNativeFilename } from '../../../helpers/utils';
+import { useWidgetSurfaceEl } from '../../../context/widgetSurfaceContext';
 // Types
 type PreviewFile = {
   name: string;
@@ -80,6 +81,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   onValidatePayloadSize,
 }) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const { backend } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
   };
@@ -555,6 +557,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
       {/* Modal */}
       <Modal
+        container={surfaceEl ?? undefined}
         width="80%"
         widthMd="80%"
         open={!!selectedFile}

package/src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -8,6 +8,7 @@ import { Asset, Medium } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@memori.ai/ui';
 import { compressImage } from '../../../helpers/imageCompression';
+import { useWidgetSurfaceEl } from '../../../context/widgetSurfaceContext';
 
 // Types
 type PreviewFile = {
@@ -54,6 +55,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
   onValidateImageFile,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   // Client
   const { backend, dialog } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
@@ -483,6 +485,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
       {/* Upload Modal with Title Input */}
       <Modal
+        container={surfaceEl ?? undefined}
         open={showUploadModal && !!selectedFile}
         className="memori--modal-preview-file memori--upload-image-preview-modal"
         onClose={handleCancelUpload}

package/src/components/WhyThisAnswer/WhyThisAnswer.tsx

@@ -13,6 +13,7 @@ import {
 } from '@memori.ai/ui';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import Snippet from '../Snippet/Snippet';
 import MediaWidget from '../MediaWidget/MediaWidget';
 import { Card } from '@memori.ai/ui';
@@ -40,6 +41,7 @@ const WhyThisAnswer = ({
   client,
   _TEST_loading = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const searchMemory = client?.search.searchMemory;
@@ -97,6 +99,7 @@ const WhyThisAnswer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={visible}
       anchor="right"
       className="memori-whythisanswer-drawer"

package/src/components/layouts/WebsiteAssistant/WebsiteAssistant.tsx

@@ -62,6 +62,10 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
       <div
         className={`memori-website_assistant--${
           collapsed ? 'collapsed' : 'expanded'
+        }${
+          useSideArtifactChrome
+            ? ' memori-website_assistant--artifact-open'
+            : ''
         }`}
       >
         {!collapsed && (

package/src/components/layouts/WebsiteAssistant/__snapshots__/WebsiteAssistant.test.tsx.snap

@@ -12,56 +12,60 @@ exports[`renders WEBSITE_ASSISTANT layout unchanged 1`] = `
     style="height: 100vh;"
   >
     <div
-      class="memori-website_assistant--trigger"
+      class="memori-widget__surface"
     >
-      <button
-        aria-expanded="false"
-        aria-label="expand"
-        class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-website_assistant--trigger-button"
-        tabindex="0"
-        title="expand"
-        type="button"
+      <div
+        class="memori-website_assistant--trigger"
       >
-        <span
-          class="memori-button__content"
+        <button
+          aria-expanded="false"
+          aria-label="expand"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-website_assistant--trigger-button"
+          tabindex="0"
+          title="expand"
+          type="button"
         >
-          <div
-            class="memori-blob"
+          <span
+            class="memori-button__content"
           >
-            <figure>
-              <img
-                alt=""
-                role="presentation"
-                src="https://aisuru.com/images/aisuru/square_logo.png"
-              />
-            </figure>
-            <div
-              class="mainDiv"
-            />
-            <div
-              class="mainDiv"
-            />
             <div
-              class="mainDiv"
-            />
-            <div
-              class="mainDiv"
-            />
-            <div
-              class="mainDiv"
-            />
-          </div>
-        </span>
-      </button>
+              class="memori-blob"
+            >
+              <figure>
+                <img
+                  alt=""
+                  role="presentation"
+                  src="https://aisuru.com/images/aisuru/square_logo.png"
+                />
+              </figure>
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+            </div>
+          </span>
+        </button>
+      </div>
+      <div
+        class="memori-website_assistant--collapsed"
+      />
+      <audio
+        id="memori-audio"
+        src="https://aisuru.com/intro.mp3"
+        style="display: none;"
+      />
     </div>
-    <div
-      class="memori-website_assistant--collapsed"
-    />
-    <audio
-      id="memori-audio"
-      src="https://aisuru.com/intro.mp3"
-      style="display: none;"
-    />
   </div>
   <div
     aria-atomic="false"