@memori.ai/memori-react 9.0.0-alpha.0 → 9.0.0-alpha.10

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"

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

@@ -27,10 +27,6 @@
     transition: all 0.3s ease;
 }
 
-.memori-widget.memori-layout-website_assistant .memori-chat-inputs-wrapper {
-    margin-bottom: var(--memori-spacing-xl);
-}
-
 .memori-website_assistant--trigger-button .memori-blob,
 .memori-website_assistant--trigger-button .memori-blob .mainDiv,
 .memori-website_assistant--trigger-button .memori-blob figure {
@@ -113,30 +109,37 @@
 
 /* ============================================
    CLOSE BUTTON
+   Matches HiddenChat header close (bordered icon control)
    ============================================ */
 
-.memori-website_assistant--close-button-wrapper {
-    position: relative;
-    z-index: 1001;
-    flex-shrink: 0;
-    transition: transform 0.2s ease;
+.memori-website_assistant--close-button {
+    display: inline-flex;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    border-radius: var(--memori-radius-box, 0.5rem);
+    margin: 0;
+    background: transparent;
+    color: var(--memori-text-color, #111827);
+    cursor: pointer;
+    line-height: 1;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.memori-website_assistant--close-button-wrapper:hover {
-    transform: scale(1.1);
+.memori-website_assistant--close-button:hover {
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
 }
 
-.memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-    width: 44px !important;
-    min-width: 44px !important;
-    height: 44px !important;
-    min-height: 44px !important;
-    padding: 0.75rem;
-    border: none;
-    background-color: var(--memori-main-background);
-    box-shadow: none;
-    color: var(--memori-text-color);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+.memori-website_assistant--close-button .memori-icon-close {
+    width: 1.125rem;
+    height: 1.125rem;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* ============================================
@@ -191,10 +194,20 @@
     height: min(85vh, calc(100vh - var(--memori-spacing-5xl)));
     padding: 0.5rem 0rem;
     margin-bottom: 0;
+    background: var(--memori-secondary-background);
     opacity: 1;
     pointer-events: all;
 }
 
+/*
+ * Keep in sync with ArtifactDrawer split width (46% / --memori-modal-size-md override).
+ * Same pairing as HiddenChat's `.memori-sidebar-toggle-artifact` → `right: 46%`.
+ */
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+    right: 46%;
+}
+
 /* Tablet */
 @media (min-width: 601px) {
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
@@ -205,6 +218,11 @@
         border-radius: var(--memori-radius-box) 0 0 0;
     }
 
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+        right: 46%;
+    }
+
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
         height: min(75vh, calc(100vh - var(--memori-spacing-5xl)));
     }
@@ -214,12 +232,15 @@
 @media (min-width: 1024px) {
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-        width: 30vw;
-        min-width: 400px;
-        max-width: 480px;
+        width: 480px;
         border-radius: var(--memori-radius-box) 0 0 0;
     }
 
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+        right: 46%;
+    }
+
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
         height: 100vh;
         border-radius: 0;
@@ -272,30 +293,22 @@
     background: none;
 }
 
+/* Powered-by sits as a static footer under the input on --memori-secondary-background */
 .memori-website_assistant-layout .memori--powered-by {
+    position: relative;
+    z-index: 5;
+    top: auto;
     right: auto;
-    left: 50%;
+    bottom: auto;
+    left: auto;
+    width: 100%;
+    flex-shrink: 0;
     justify-content: center;
+    padding: 0.5rem 1rem 0.75rem;
+    border-radius: 0;
+    margin: 0;
+    background: var(--memori-secondary-background);
     text-align: center;
-    transform: translateX(-50%);
-}
-
-.memori-widget.memori-layout-website_assistant.memori--avatar-readyplayerme
-    .memori-website_assistant-layout
-    .memori--powered-by,
-.memori-widget.memori-layout-website_assistant.memori--avatar-readyplayerme-full
-    .memori-website_assistant-layout
-    .memori--powered-by,
-.memori-widget.memori-layout-website_assistant.memori--avatar-customglb
-    .memori-website_assistant-layout
-    .memori--powered-by,
-.memori-widget.memori-layout-website_assistant.memori--avatar-customrpm
-    .memori-website_assistant-layout
-    .memori--powered-by {
-    right: auto;
-    left: 1rem;
-    justify-content: flex-start;
-    text-align: left;
     transform: none;
 }
 
@@ -310,6 +323,7 @@
     right: 0.75rem;
     padding: 0.5rem;
     border-radius: var(--memori-radius-box);
+    background: var(--memori-secondary-background);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     text-align: right;
 }
@@ -344,14 +358,74 @@
 }
 
 .memori-website_assistant-layout--header-row {
-    position: absolute;
+    position: relative;
     z-index: 1001;
-    top: 0.75rem;
-    right: 0.75rem;
     display: flex;
+    width: 100%;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--memori-border-color);
+    background: var(--memori-secondary-background);
+    gap: 0.75rem;
+}
+
+.memori-website_assistant-layout--header-actions {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-left: auto;
+    gap: 0.35rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
     align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.75rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-avatar {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-text {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-name {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    color: var(--memori-text-color, #111);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (max-width: 480px) {
+    .memori-website_assistant-layout .memori-chat-layout--brand {
+        min-width: 0;
+        max-width: calc(100% - 6.5rem);
+        flex: 1 1 auto;
+    }
 }
 
 /* Position dropdown below the trigger so it does not cover the share button */
@@ -420,7 +494,8 @@
     transform: none !important;
 }
 
-.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div {
+.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div,
+.memori-layout-website_assistant.memori--avatar-avatar-configurator .memori--avatar-wrapper > div {
     transform: scale(1.7) translate(0px, 10vh);
 }
 
@@ -458,6 +533,7 @@
     flex: 1;
     flex-direction: column;
     padding: 1rem;
+    padding-bottom: 0;
     background-color: var(--memori-secondary-background);
 }
 
@@ -468,7 +544,7 @@
 
 .memori-website_assistant-layout--controls .memori-chat--history {
     padding: 0;
-    margin-top: var(--memori-spacing-3xl);
+    /* margin-top: var(--memori-spacing-3xl); */
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
 }
@@ -511,10 +587,41 @@
     flex: 1;
     flex-direction: column;
     padding: 0.75rem;
+    padding-bottom: 0;
     border: 0px !important;
+    background: var(--memori-secondary-background);
     box-shadow: none !important;
 }
 
+.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) {
+    background: transparent;
+}
+
+/* Input bar styles (dark compact pill) live in ChatInputs.css.
+   Anchor the bar at the bottom of the assistant panel. */
+.memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat--wrapper {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+.memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat--history {
+    min-height: 0;
+    flex: 1 1 auto;
+    margin-bottom: 0;
+}
+
+.memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat-inputs-wrapper {
+    width: 100%;
+    flex-shrink: 0;
+    margin-bottom: 0;
+}
+
 /* Tablet and up */
 @media (min-width: 601px) {
     .memori-website_assistant-layout--controls .memori--start-panel,
@@ -662,7 +769,7 @@
 @media (prefers-reduced-motion: reduce) {
     .memori-website_assistant--trigger,
     .memori-website_assistant--trigger-button,
-    .memori-website_assistant--close-button-wrapper,
+    .memori-website_assistant--close-button,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout,
@@ -683,10 +790,4 @@
         width: 72px !important;
         height: 72px !important;
     }
-
-    .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-        width: 48px;
-        height: 48px;
-        padding: 0.875rem;
-    }
 }

package/src/components/layouts/ZoomedFullBody.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Spin } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
+import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import {
   Expand,
   MapPin,
@@ -76,6 +77,38 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
   const loggedUserInitial = loggedUserDisplayName.charAt(0).toUpperCase();
   const isSessionStarted = Boolean(sessionId && hasUserActivatedSpeak);
 
+  // Agent status indicator above the avatar, bound to the real conversation state.
+  const agentStatus = useMemo(() => {
+    if (chatProps?.isPlayingAudio) {
+      return {
+        key: 'speaking' as const,
+        label: t('widget.agentStatusSpeaking', { defaultValue: 'sta parlando' }),
+      };
+    }
+    if (chatProps?.memoriTyping) {
+      return {
+        key: 'processing' as const,
+        label: t('widget.agentStatusProcessing', {
+          defaultValue: 'in elaborazione',
+        }),
+      };
+    }
+    if (chatProps?.listening) {
+      return {
+        key: 'listening' as const,
+        label: t('widget.agentStatusListening', {
+          defaultValue: 'in ascolto',
+        }),
+      };
+    }
+    return null;
+  }, [
+    chatProps?.isPlayingAudio,
+    chatProps?.memoriTyping,
+    chatProps?.listening,
+    t,
+  ]);
+
   const handleMobileFullscreen = useCallback(() => {
     if (!isFullscreenAllowedOnDevice()) return;
 
@@ -214,7 +247,9 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
       {integrationStyle}
       {integrationBackground}
 
-      <Spin className="memori-spin--zoomed-full-body" spinning={loading}>
+      <Spin spinning={loading}>
+        {useSideArtifactChrome && poweredBy}
+
         {Header && headerProps && mobileHeaderProps && (
           <div className="memori-fullpage-top-header">
             <div className="memori-chat-layout--header">
@@ -318,6 +353,8 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
             }}
             onLocationEnable={handleEnableLocation}
             onLocationDisable={handleDisableLocation}
+            venue={headerProps.position}
+            setVenue={headerProps.setVenue}
             logoutLabel={t('login.logout') || 'Log out'}
             onLogout={() => {
               handleMobileLogout();
@@ -325,43 +362,74 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
             }}
           />
         )}
-        <div className="memori--grid">
-          {!useSideArtifactChrome && (
+        {/* Content row: grid (avatar+chat) + artifact column as full-height siblings */}
+        <div className="memori-fullpage-content-row">
+          <div className="memori--grid">
+            {/* Avatar column — hidden via CSS when artifact is open */}
             <div className="memori--grid-column memori--grid-column-left">
+              {isSessionStarted && agentStatus && (
+                <div
+                  className="memori-fullpage-agent-status"
+                  role="status"
+                  aria-live="polite"
+                >
+                  <span
+                    className={`memori-fullpage-agent-status--dot memori-fullpage-agent-status--dot-${agentStatus.key}`}
+                    aria-hidden="true"
+                  />
+                  <span className="memori-fullpage-agent-status--label">
+                    {agentStatus.label}
+                  </span>
+                </div>
+              )}
+
               {Avatar && avatarProps && (
                 <Avatar chatProps={chatProps} isZoomed {...avatarProps} />
               )}
 
               <div id="extension" />
             </div>
-          )}
+
+            {/* Chat column — flex:1, shrinks naturally when artifact column grows */}
+            <div className="memori-chat-layout--main">
+              <div
+                className={
+                  state.isFullscreen
+                    ? `memori-chat-layout-controls-hide`
+                    : `memori-chat-layout--controls`
+                }
+              >
+                {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+                  <Chat
+                    {...chatProps}
+                    footerBrand={poweredBy}
+                    showAiGeneratedNote
+                  />
+                ) : startPanelProps ? (
+                  <div className="memori-conversation-column">
+                    <StartPanel {...startPanelProps} />
+                    {poweredBy ? (
+                      <div className="memori-conversation-footer">
+                        <span aria-hidden />
+                        {poweredBy}
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          {/* Artifact column — outside the padded grid, spans full content height */}
           <div
-            className={`memori-chat-layout--main ${
-              hasArtifact && !state.isChatLogPanelPresentation
-                ? 'memori-chat-layout--main-with-artifact'
-                : ''
+            className={`memori--grid-column-artifact${
+              useSideArtifactChrome ? ' memori--grid-column-artifact--open' : ''
             }`}
           >
-            <div
-              className={
-                state.isFullscreen
-                  ? `memori-chat-layout-controls-hide`
-                  : `memori-chat-layout--controls ${
-                      useSideArtifactChrome
-                        ? 'memori-chat-layout--controls-with-artifact'
-                        : ''
-                    }`
-              }
-            >
-              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                <Chat {...chatProps} />
-              ) : startPanelProps ? (
-                <StartPanel {...startPanelProps} />
-              ) : null}
-            </div>
+            {useSideArtifactChrome && (
+              <ArtifactDrawer isLayoutColumn />
+            )}
           </div>
-
-          {poweredBy}
         </div>
       </Spin>
     </>