@memori.ai/memori-react 9.0.0-alpha.24 → 9.0.0-alpha.25

package/src/components/layouts/HiddenChat.tsx

@@ -51,7 +51,7 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
       showShare: false,
       showLogin: false,
       showMessageConsumption: false,
-      showFullscreen: false,
+      showFullscreen: true,
       memori: {
         ...headerProps.memori,
         needsPosition: false,
@@ -84,8 +84,10 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
 
   // Use refs to store original sidebar properties to restore them later
   const originalSidebarStyles = useRef({
+    left: '',
     right: '',
     width: '',
+    maxWidth: '',
     backgroundColor: '',
   });
 
@@ -170,8 +172,10 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
     if (sidebarElement) {
       // Restore original styles
       const sidebar = sidebarElement as HTMLElement;
+      sidebar.style.left = originalSidebarStyles.current.left;
       sidebar.style.right = originalSidebarStyles.current.right;
       sidebar.style.width = originalSidebarStyles.current.width;
+      sidebar.style.maxWidth = originalSidebarStyles.current.maxWidth;
       sidebar.style.backgroundColor =
         originalSidebarStyles.current.backgroundColor;
 
@@ -190,14 +194,18 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
 
         // Store original styles before modifying
         originalSidebarStyles.current = {
+          left: sidebar.style.left,
           right: sidebar.style.right,
           width: sidebar.style.width,
+          maxWidth: sidebar.style.maxWidth,
           backgroundColor: sidebar.style.backgroundColor,
         };
 
         // Set styles for fullscreen — keep --memori-secondary-background via CSS, clear inline white
+        sidebar.style.left = '0';
         sidebar.style.right = '0';
         sidebar.style.width = '100%';
+        sidebar.style.maxWidth = 'none';
         sidebar.style.backgroundColor = '';
         sidebar.classList.add('memori-sidebar-fullscreen');
 

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { Spin, Button } from '@memori.ai/ui';
 import { LayoutProps } from '../../MemoriWidget/MemoriWidget';
 import Blob from '../../Blob/Blob';
@@ -8,6 +8,9 @@ import { useArtifact } from '../../MemoriArtifactSystem/context/ArtifactContext'
 import ArtifactDrawer from '../../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import { getResourceUrl } from '../../../helpers/media';
 
+const PANEL_SELECTOR = '.memori-website_assistant--expanded';
+const FULLSCREEN_CLASS = 'memori-website_assistant--fullscreen';
+
 const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
   Header,
   headerProps,
@@ -21,7 +24,7 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
   sessionId,
   hasUserActivatedSpeak,
   loading = false,
-  avatar3dHidden,
+  avatar3dHidden = true,
 }) => {
   const { t } = useTranslation();
   const { state: artifactState } = useArtifact();
@@ -29,6 +32,16 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
     artifactState.isDrawerOpen && !artifactState.isChatLogPanelPresentation;
   const [collapsed, _setCollapsed] = useState(true);
   const [expandedKey, setExpandedKey] = useState<string>();
+  const [fullScreen, setFullScreen] = useState(false);
+
+  const originalPanelStyles = useRef({
+    left: '',
+    right: '',
+    width: '',
+    maxWidth: '',
+    height: '',
+    backgroundColor: '',
+  });
 
   const stopAudio = useMemo(() => chatProps?.stopAudio, [chatProps?.stopAudio]);
 
@@ -54,9 +67,92 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
         })
     : undefined;
 
-  const setCollapsed = (collapsed: boolean) => {
-    _setCollapsed(collapsed);
-    setExpandedKey(collapsed ? undefined : new Date().toISOString());
+  const restoreFromFullscreen = () => {
+    const panelElement = document.querySelector(PANEL_SELECTOR);
+    if (panelElement) {
+      const panel = panelElement as HTMLElement;
+      panel.style.left = originalPanelStyles.current.left;
+      panel.style.right = originalPanelStyles.current.right;
+      panel.style.width = originalPanelStyles.current.width;
+      panel.style.maxWidth = originalPanelStyles.current.maxWidth;
+      panel.style.height = originalPanelStyles.current.height;
+      panel.style.backgroundColor = originalPanelStyles.current.backgroundColor;
+      panel.classList.remove(FULLSCREEN_CLASS);
+    }
+    setFullScreen(false);
+  };
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      if (!document.fullscreenElement && fullScreen) {
+        restoreFromFullscreen();
+      }
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [fullScreen]);
+
+  const handleFullscreenToggle = () => {
+    if (!document.fullscreenElement) {
+      const panelElement = document.querySelector(PANEL_SELECTOR);
+      if (panelElement) {
+        const panel = panelElement as HTMLElement;
+
+        originalPanelStyles.current = {
+          left: panel.style.left,
+          right: panel.style.right,
+          width: panel.style.width,
+          maxWidth: panel.style.maxWidth,
+          height: panel.style.height,
+          backgroundColor: panel.style.backgroundColor,
+        };
+
+        panel.style.left = '0';
+        panel.style.right = '0';
+        panel.style.width = '100%';
+        panel.style.maxWidth = 'none';
+        panel.style.height = '100%';
+        panel.style.backgroundColor = '';
+        panel.classList.add(FULLSCREEN_CLASS);
+
+        panel.requestFullscreen().catch(err => {
+          console.warn(
+            '[WebsiteAssistantLayout] Error enabling fullscreen:',
+            err
+          );
+        });
+      }
+      setFullScreen(true);
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen().catch(err => {
+          console.warn(
+            '[WebsiteAssistantLayout] Error exiting fullscreen:',
+            err
+          );
+        });
+      }
+      restoreFromFullscreen();
+    }
+  };
+
+  const setCollapsed = (nextCollapsed: boolean) => {
+    if (nextCollapsed && fullScreen) {
+      if (document.fullscreenElement) {
+        document.exitFullscreen().catch(err => {
+          console.warn(
+            '[WebsiteAssistantLayout] Error exiting fullscreen:',
+            err
+          );
+        });
+      }
+      restoreFromFullscreen();
+    }
+    _setCollapsed(nextCollapsed);
+    setExpandedKey(nextCollapsed ? undefined : new Date().toISOString());
     try {
       stopAudio?.();
     } catch (e) {
@@ -88,7 +184,7 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
           useSideArtifactChrome
             ? ' memori-website_assistant--artifact-open'
             : ''
-        }`}
+        }${fullScreen ? ` ${FULLSCREEN_CLASS}` : ''}`}
       >
         {!collapsed && (
           <>
@@ -127,6 +223,7 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
                       showSettings={false}
                       showReload={false}
                       showChatHistory={false}
+                      fullScreenHandler={handleFullscreenToggle}
                     />
                   )}
                   <button

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

@@ -10,73 +10,79 @@ exports[`renders WEBSITE_ASSISTANT layout unchanged 1`] = `
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
     data-theme="light"
-    style="height: 100vh;"
+    style="height: 100vh; --memori-z-index-base: 10000;"
   >
     <div
-      aria-atomic="false"
-      aria-label="Notifications"
-      aria-live="polite"
-      aria-relevant="additions text"
-      class="memori-alert-viewport memori-alert-viewport--top-end"
-      data-theme="light"
-      role="region"
-      style="z-index: 10002;"
-      tabindex="-1"
-    />
-    <div
-      class="memori-widget__surface"
+      class="memori-ui-provider"
+      data-memori-ui-provider=""
+      style="--memori-z-index-base: 10000;"
     >
       <div
-        class="memori-website_assistant--trigger"
+        aria-atomic="false"
+        aria-label="Notifications"
+        aria-live="polite"
+        aria-relevant="additions text"
+        class="memori-alert-viewport memori-alert-viewport--top-end"
+        data-theme="light"
+        role="region"
+        tabindex="-1"
+      />
+      <div
+        class="memori-widget__surface"
+        style="--memori-z-index-base: 10000;"
       >
-        <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>
   <div

package/src/components/layouts/WebsiteAssistant/website-assistant.css

@@ -9,7 +9,7 @@
 
 .memori-website_assistant--trigger {
     position: fixed;
-    z-index: 2147483647;
+    z-index: calc(var(--memori-z-index-base, 0) + 1800);
     right: 0px;
     bottom: 0px;
     display: flex;
@@ -199,6 +199,26 @@
     pointer-events: all;
 }
 
+/*
+ * Fullscreen: same approach as HiddenChat — class + inline styles expand the
+ * docked panel to the full window; browser Fullscreen API is requested on the panel.
+ */
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded.memori-website_assistant--fullscreen,
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded:fullscreen,
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded:-webkit-full-screen {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    max-width: none !important;
+    height: 100% !important;
+    padding: 0.5rem 0;
+    border-radius: 0 !important;
+    margin-bottom: 0;
+    box-shadow: none;
+}
+
 /*
  * Keep in sync with ArtifactDrawer split width (55% / --memori-modal-size-md override).
  * Same pairing as HiddenChat's `.memori-sidebar-toggle-artifact` → `right: 55%`.
@@ -208,6 +228,16 @@
     right: 55%;
 }
 
+/* Fullscreen must win over the artifact split offset */
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded.memori-website_assistant--fullscreen.memori-website_assistant--artifact-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded:fullscreen.memori-website_assistant--artifact-open,
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded:-webkit-full-screen.memori-website_assistant--artifact-open {
+    right: 0 !important;
+}
+
 /* Tablet */
 @media (min-width: 601px) {
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
@@ -309,9 +339,7 @@
     justify-content: center;
 }
 
-.memori-widget.memori-layout-website_assistant
-    .memori-conversation-footer
-    .memori-chat-inputs--ai-note {
+.memori-widget.memori-layout-website_assistant .memori-conversation-footer .memori-chat-inputs--ai-note {
     overflow: visible;
     flex: 1 1 100%;
     text-align: center;
@@ -319,9 +347,7 @@
     white-space: normal;
 }
 
-.memori-widget.memori--active.memori-layout-website_assistant
-    .memori-conversation-footer
-    .memori-chat-inputs--ai-note {
+.memori-widget.memori--active.memori-layout-website_assistant .memori-conversation-footer .memori-chat-inputs--ai-note {
     text-align: left;
 }
 
@@ -607,10 +633,8 @@
 }
 
 .memori-website_assistant-layout--controls .memori-chat--content--has-global-background,
-.memori-website_assistant-layout--controls
-    .memori-chat--history:has(.memori-chat--content--has-global-background),
-.memori-website_assistant-layout--controls
-    .memori-chat--wrapper:has(.memori-chat--content--has-global-background) {
+.memori-website_assistant-layout--controls .memori-chat--history:has(.memori-chat--content--has-global-background),
+.memori-website_assistant-layout--controls .memori-chat--wrapper:has(.memori-chat--content--has-global-background) {
     background: transparent;
 }
 
@@ -643,7 +667,7 @@
     }
 
     .memori-website_assistant-layout--controls .memori-chat--wrapper {
-        padding: 1rem;
+        padding: 0;
     }
 
     .memori-website_assistant-layout--controls .memori--start-panel {

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

@@ -10,7 +10,7 @@ exports[`renders Chat layout unchanged 1`] = `
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
     data-theme="light"
-    style="height: 100vh;"
+    style="height: 100vh; --memori-z-index-base: 0;"
   >
     <div
       aria-atomic="false"
@@ -20,11 +20,11 @@ exports[`renders Chat layout unchanged 1`] = `
       class="memori-alert-viewport memori-alert-viewport--top-end"
       data-theme="light"
       role="region"
-      style="z-index: 10002;"
       tabindex="-1"
     />
     <div
       class="memori-widget__surface"
+      style="--memori-z-index-base: 0;"
     >
       <style>
         @layer memori.overrides {
@@ -92,7 +92,7 @@ exports[`renders Chat layout unchanged 1`] = `
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-volume2"
+                              class="lucide lucide-volume2 lucide-volume-2"
                               fill="none"
                               height="20"
                               stroke="currentColor"
@@ -143,7 +143,7 @@ exports[`renders Chat layout unchanged 1`] = `
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-share2"
+                              class="lucide lucide-share2 lucide-share-2"
                               fill="none"
                               height="24"
                               stroke="currentColor"
@@ -376,6 +376,7 @@ exports[`renders Chat layout unchanged 1`] = `
                                     class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
                                   >
                                     <svg
+                                      aria-hidden="true"
                                       class="lucide lucide-eye memori--settings-section__icon"
                                       fill="none"
                                       height="24"
@@ -432,6 +433,7 @@ exports[`renders Chat layout unchanged 1`] = `
                                           class="memori-button__content"
                                         >
                                           <svg
+                                            aria-hidden="true"
                                             class="lucide lucide-info memori--settings-section__inline-info-icon"
                                             fill="none"
                                             height="24"
@@ -547,6 +549,7 @@ exports[`renders Chat layout unchanged 1`] = `
                                 class="memori-button__content"
                               >
                                 <svg
+                                  aria-hidden="true"
                                   class="lucide lucide-send icon"
                                   fill="none"
                                   height="24"

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

@@ -10,7 +10,7 @@ exports[`renders FullPage layout unchanged 1`] = `
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
     data-theme="light"
-    style="height: 100vh;"
+    style="height: 100vh; --memori-z-index-base: 0;"
   >
     <div
       aria-atomic="false"
@@ -20,11 +20,11 @@ exports[`renders FullPage layout unchanged 1`] = `
       class="memori-alert-viewport memori-alert-viewport--top-end"
       data-theme="light"
       role="region"
-      style="z-index: 10002;"
       tabindex="-1"
     />
     <div
       class="memori-widget__surface"
+      style="--memori-z-index-base: 0;"
     >
       <style>
         @layer memori.overrides {
@@ -92,7 +92,7 @@ exports[`renders FullPage layout unchanged 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="lucide lucide-volume2"
+                                class="lucide lucide-volume2 lucide-volume-2"
                                 fill="none"
                                 height="20"
                                 stroke="currentColor"
@@ -143,7 +143,7 @@ exports[`renders FullPage layout unchanged 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="lucide lucide-share2"
+                                class="lucide lucide-share2 lucide-share-2"
                                 fill="none"
                                 height="24"
                                 stroke="currentColor"
@@ -456,6 +456,7 @@ exports[`renders FullPage layout unchanged 1`] = `
                                   class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
                                 >
                                   <svg
+                                    aria-hidden="true"
                                     class="lucide lucide-eye memori--settings-section__icon"
                                     fill="none"
                                     height="24"
@@ -512,6 +513,7 @@ exports[`renders FullPage layout unchanged 1`] = `
                                         class="memori-button__content"
                                       >
                                         <svg
+                                          aria-hidden="true"
                                           class="lucide lucide-info memori--settings-section__inline-info-icon"
                                           fill="none"
                                           height="24"
@@ -745,7 +747,7 @@ exports[`renders FullPage layout with root css properties unchanged 1`] = `
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
     data-theme="light"
-    style="height: 100vh;"
+    style="height: 100vh; --memori-z-index-base: 0;"
   >
     <div
       aria-atomic="false"
@@ -755,11 +757,11 @@ exports[`renders FullPage layout with root css properties unchanged 1`] = `
       class="memori-alert-viewport memori-alert-viewport--top-end"
       data-theme="light"
       role="region"
-      style="z-index: 10002;"
       tabindex="-1"
     />
     <div
       class="memori-widget__surface"
+      style="--memori-z-index-base: 0;"
     >
       <style>
         @layer memori.overrides {
@@ -827,7 +829,7 @@ exports[`renders FullPage layout with root css properties unchanged 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="lucide lucide-volume2"
+                                class="lucide lucide-volume2 lucide-volume-2"
                                 fill="none"
                                 height="20"
                                 stroke="currentColor"
@@ -878,7 +880,7 @@ exports[`renders FullPage layout with root css properties unchanged 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="lucide lucide-share2"
+                                class="lucide lucide-share2 lucide-share-2"
                                 fill="none"
                                 height="24"
                                 stroke="currentColor"
@@ -1191,6 +1193,7 @@ exports[`renders FullPage layout with root css properties unchanged 1`] = `
                                   class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
                                 >
                                   <svg
+                                    aria-hidden="true"
                                     class="lucide lucide-eye memori--settings-section__icon"
                                     fill="none"
                                     height="24"
@@ -1247,6 +1250,7 @@ exports[`renders FullPage layout with root css properties unchanged 1`] = `
                                         class="memori-button__content"
                                       >
                                         <svg
+                                          aria-hidden="true"
                                           class="lucide lucide-info memori--settings-section__inline-info-icon"
                                           fill="none"
                                           height="24"

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

@@ -10,7 +10,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
     data-theme="light"
-    style="height: 100vh;"
+    style="height: 100vh; --memori-z-index-base: 0;"
   >
     <div
       aria-atomic="false"
@@ -20,11 +20,11 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
       class="memori-alert-viewport memori-alert-viewport--top-end"
       data-theme="light"
       role="region"
-      style="z-index: 10002;"
       tabindex="-1"
     />
     <div
       class="memori-widget__surface"
+      style="--memori-z-index-base: 0;"
     >
       <input
         class="memori-sidebar-toggle "
@@ -40,7 +40,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
         >
           <svg
             aria-label="expand"
-            class="lucide lucide-circle-help memori-icon"
+            class="lucide lucide-circle-question-mark memori-icon"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -117,7 +117,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                             >
                               <svg
                                 aria-hidden="true"
-                                class="lucide lucide-volume2"
+                                class="lucide lucide-volume2 lucide-volume-2"
                                 fill="none"
                                 height="20"
                                 stroke="currentColor"
@@ -347,6 +347,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                                   class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
                                 >
                                   <svg
+                                    aria-hidden="true"
                                     class="lucide lucide-eye memori--settings-section__icon"
                                     fill="none"
                                     height="24"
@@ -403,6 +404,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                                         class="memori-button__content"
                                       >
                                         <svg
+                                          aria-hidden="true"
                                           class="lucide lucide-info memori--settings-section__inline-info-icon"
                                           fill="none"
                                           height="24"
@@ -519,6 +521,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                                     class="memori-button__content"
                                   >
                                     <svg
+                                      aria-hidden="true"
                                       class="lucide lucide-send icon"
                                       fill="none"
                                       height="24"