@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/src/components/layouts/FullPage.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Spin } from '@memori.ai/ui';
+import { Spin } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import { useTranslation } from 'react-i18next';
 import {
   Expand,
@@ -58,7 +59,9 @@ const FullPageLayout: React.FC<LayoutProps> = ({
   const tenant = headerProps?.tenant;
   const baseUrl = headerProps?.baseUrl;
   const loggedUser =
-    headerProps?.loginToken && headerProps?.user ? headerProps.user : undefined;
+    headerProps?.loginToken && headerProps?.user?.userID
+      ? headerProps.user
+      : undefined;
   const enrichedUser = loggedUser as
     | (typeof loggedUser & {
         name?: string;
@@ -77,6 +80,38 @@ const FullPageLayout: 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;
 
@@ -157,6 +192,10 @@ const FullPageLayout: React.FC<LayoutProps> = ({
       isMobile &&
       !!headerProps.loginToken &&
       headerProps.showChatHistory !== false;
+    const showFullscreenInPanel =
+      !isMobile && headerProps.showFullscreen !== false;
+    const showShareInPanel = headerProps.showShare !== false;
+    const showLocationInPanel = !!headerProps.memori?.needsPosition;
     const historyBlock = showChatHistoryInPanel
       ? [
           {
@@ -175,39 +214,55 @@ const FullPageLayout: React.FC<LayoutProps> = ({
       : [];
     return [
       ...historyBlock,
-      {
-        key: 'fullscreen',
-        icon: <Expand size={18} />,
-        title: t('fullscreenEnter') || 'Full screen',
-        subtitle: t('widget.expandToImmersive') || 'Expand to immersive view',
-        onClick: () => {
-          handleMobileFullscreen();
-          setMobileSheetOpen(false);
-        },
-      },
-      {
-        key: 'share',
-        icon: <Share2 size={18} />,
-        title: t('widget.share') || 'Share chat',
-        subtitle:
-          t('widget.mobileSession.copyLinkOrDownload') ||
-          'Copy link or download',
-        view: 'share' as const,
-      },
-      {
-        key: 'location',
-        icon: <MapPin size={18} />,
-        title:
-          t('widget.mobileSession.locationTracking') || 'Location tracking',
-        subtitle:
-          headerProps.position?.placeName ||
-          t('widget.mobileSession.currentlyOff') ||
-          'Currently off',
-        view: 'location' as const,
-        trailing: (
-          <span className="memori-mobile-session-panel--chevron">{'>'}</span>
-        ),
-      },
+      ...(showFullscreenInPanel
+        ? [
+            {
+              key: 'fullscreen',
+              icon: <Expand size={18} />,
+              title: t('fullscreenEnter') || 'Full screen',
+              subtitle:
+                t('widget.expandToImmersive') || 'Expand to immersive view',
+              onClick: () => {
+                handleMobileFullscreen();
+                setMobileSheetOpen(false);
+              },
+            },
+          ]
+        : []),
+      ...(showShareInPanel
+        ? [
+            {
+              key: 'share',
+              icon: <Share2 size={18} />,
+              title: t('widget.share') || 'Share chat',
+              subtitle:
+                t('widget.mobileSession.copyLinkOrDownload') ||
+                'Copy link or download',
+              view: 'share' as const,
+            },
+          ]
+        : []),
+      ...(showLocationInPanel
+        ? [
+            {
+              key: 'location',
+              icon: <MapPin size={18} />,
+              title:
+                t('widget.mobileSession.locationTracking') ||
+                'Location tracking',
+              subtitle:
+                headerProps.position?.placeName ||
+                t('widget.mobileSession.currentlyOff') ||
+                'Currently off',
+              view: 'location' as const,
+              trailing: (
+                <span className="memori-mobile-session-panel--chevron">
+                  {'>'}
+                </span>
+              ),
+            },
+          ]
+        : []),
     ];
   }, [headerProps, isMobile, isSessionStarted, t, handleMobileFullscreen]);
   return (
@@ -216,7 +271,7 @@ const FullPageLayout: React.FC<LayoutProps> = ({
       {integrationBackground}
 
       <Spin spinning={loading}>
-        {poweredBy}
+        {useSideArtifactChrome && poweredBy}
 
         {Header && headerProps && mobileHeaderProps && (
           <div className="memori-fullpage-top-header">
@@ -228,11 +283,9 @@ const FullPageLayout: React.FC<LayoutProps> = ({
                     buttonVariant="outline"
                     extraActions={
                       isMobile ? (
-                        <Button
-                          variant="outline"
-                          className={`memori-chat-layout--overflow-trigger ${
-                            mobileSheetOpen ? 'memori-button--active' : ''
-                          }`}
+                        <IconButton
+                          className="memori-chat-layout--overflow-trigger"
+                          active={mobileSheetOpen}
                           aria-label={t('widget.moreActions') || 'More actions'}
                           icon={<EllipsisVertical />}
                           onClick={() =>
@@ -307,8 +360,15 @@ const FullPageLayout: React.FC<LayoutProps> = ({
             }
             knownFactsDisabled={!isSessionStarted}
             showSessionInfo={isSessionStarted}
+            showKnownFacts={
+              !!headerProps.memori?.enableDeepThought &&
+              !!headerProps.loginToken &&
+              !!headerProps.user?.pAndCUAccepted
+            }
+            showMessageConsumption={!!headerProps.showMessageConsumption}
             history={headerProps.history ?? []}
             isLoggedIn={!!loggedUser}
+            showLogin={!!headerProps.showLogin}
             loginLabel={t('login.login') || 'Log in'}
             onLogin={() => {
               headerProps.setShowLoginDrawer(true);
@@ -321,6 +381,8 @@ const FullPageLayout: React.FC<LayoutProps> = ({
             }}
             onLocationEnable={handleEnableLocation}
             onLocationDisable={handleDisableLocation}
+            venue={headerProps.position}
+            setVenue={headerProps.setVenue}
             logoutLabel={t('login.logout') || 'Log out'}
             onLogout={() => {
               handleMobileLogout();
@@ -329,40 +391,73 @@ const FullPageLayout: 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} {...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>
         </div>
       </Spin>