@memori.ai/memori-react 9.0.0-alpha.1 → 9.0.0-alpha.12

package/src/components/layouts/Chat.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Spin } from '@memori.ai/ui';
+import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import { useTranslation } from 'react-i18next';
 import {
   Expand,
@@ -60,6 +61,8 @@ const ChatLayout: React.FC<LayoutProps> = ({
     return () => mediaQuery.removeEventListener('change', update);
   }, []);
 
+  const globalBackground = chatProps?.globalBackground;
+
   const memori = headerProps?.memori;
   const tenant = headerProps?.tenant;
   const baseUrl = headerProps?.baseUrl;
@@ -225,35 +228,29 @@ const ChatLayout: React.FC<LayoutProps> = ({
       {integrationBackground}
 
       <Spin spinning={loading} className="memori-chat-layout">
-        {poweredBy}
-
         <div id="extension" />
 
         <div
-          className={`memori-chat-layout--main ${
-            useSideArtifactChrome
-              ? 'memori-chat-layout--main-with-artifact'
-              : ''
+          className={`memori-chat-layout--main${
+            globalBackground ? ' memori-chat-layout--main--has-background' : ''
           }`}
+          style={
+            globalBackground
+              ? ({
+                  ['--memori-chat-global-background' as string]: `url(${globalBackground})`,
+                } as React.CSSProperties)
+              : undefined
+          }
         >
+          {/* Chat column — flex:1, shrinks when artifact column grows */}
           <div
             className={
               state.isFullscreen
                 ? `memori-chat-layout-controls-hide`
-                : `memori-chat-layout--controls ${
-                    useSideArtifactChrome
-                      ? 'memori-chat-layout--controls-with-artifact'
-                      : ''
-                  }`
+                : `memori-chat-layout--controls`
             }
           >
-            <div
-              className={`memori-chat-layout--header ${
-                useSideArtifactChrome
-                  ? 'memori-chat-layout--header-with-artifact'
-                  : ''
-              }`}
-            >
+            <div className="memori-chat-layout--header">
               {Header && headerProps && mobileHeaderProps && (
                 <div className="memori-fullpage-header-row">
                     <Header
@@ -281,94 +278,97 @@ const ChatLayout: React.FC<LayoutProps> = ({
               )}
             </div>
 
+            {headerProps && (
+              <MobileSessionPanel
+                open={mobileSheetOpen}
+                presentation="popover"
+                onClose={() => setMobileSheetOpen(false)}
+                title={t('widget.mobileSession.session') || 'Session'}
+                loginToken={headerProps.loginToken}
+                user={headerProps.user}
+                apiClient={headerProps.apiClient}
+                userName={loggedUserDisplayName}
+                userEmail={loggedUser?.eMail}
+                userInitial={loggedUserInitial}
+                avatarURL={loggedUser?.avatarURL}
+                birthDate={loggedUser?.birthDate}
+                actions={mobileSessionActions}
+                knownFactsPageTitle={t('knownFacts.title') || 'Known facts'}
+                sharePageTitle={t('widget.share') || 'Share'}
+                locationPageTitle={
+                  t('widget.mobileSession.locationTracking') ||
+                  'Location tracking'
+                }
+                backLabel={t('back') || 'Back'}
+                locationStatusLabel={
+                  t('widget.mobileSession.locationStatus') || 'Status'
+                }
+                locationPlace={headerProps.position?.placeName}
+                locationUnknownLabel={
+                  t('write_and_speak.unknownPosition') || 'Unknown position'
+                }
+                locationEnableLabel={
+                  t('widget.shareLocation') || 'Share location'
+                }
+                locationDisableLabel={
+                  t('widget.mobileSession.disableLocationSharing') ||
+                  'Disable location sharing'
+                }
+                knownFactsDescription={
+                  t('knownFacts.description', {
+                    memoriName: memori?.name || '',
+                  }) || ''
+                }
+                knownFactsCtaLabel={
+                  t('widget.mobileSession.openKnownFacts') ||
+                  'Open full known facts'
+                }
+                knownFactsCountLabel={
+                  (t('widget.mobileSession.knownFactsMessages', {
+                    count: headerProps.history?.length || 0,
+                  }) as string) || ''
+                }
+                shareContent={
+                  <ShareButton
+                    tenant={headerProps?.tenant}
+                    memori={headerProps?.memori}
+                    sessionID={headerProps?.sessionID}
+                    title={headerProps?.memori?.name}
+                    baseUrl={headerProps?.baseUrl}
+                    align="left"
+                    history={headerProps?.history}
+                    renderMode="inline"
+                  />
+                }
+                knownFactsDisabled={!isSessionStarted}
+                showSessionInfo={isSessionStarted}
+                history={headerProps.history ?? []}
+                isLoggedIn={!!loggedUser}
+                loginLabel={t('login.login') || 'Log in'}
+                onLogin={() => {
+                  headerProps.setShowLoginDrawer(true);
+                  setMobileSheetOpen(false);
+                }}
+                onKnownFactsOpen={() => {
+                  if (!isSessionStarted) return;
+                  headerProps.setShowKnownFactsDrawer(true);
+                  setMobileSheetOpen(false);
+                }}
+                onLocationEnable={handleEnableLocation}
+                onLocationDisable={handleDisableLocation}
+                venue={headerProps.position}
+                setVenue={headerProps.setVenue}
+                logoutLabel={t('login.logout') || 'Log out'}
+                onLogout={() => {
+                  handleMobileLogout();
+                  setMobileSheetOpen(false);
+                }}
+              />
+            )}
+            <div className="memori-conversation-column">
             <div className="memori-chat-layout--body">
-              {headerProps && (
-                <MobileSessionPanel
-                  open={mobileSheetOpen}
-                  presentation="popover"
-                  onClose={() => setMobileSheetOpen(false)}
-                  title={t('widget.mobileSession.session') || 'Session'}
-                  loginToken={headerProps.loginToken}
-                  user={headerProps.user}
-                  apiClient={headerProps.apiClient}
-                  userName={loggedUserDisplayName}
-                  userEmail={loggedUser?.eMail}
-                  userInitial={loggedUserInitial}
-                  avatarURL={loggedUser?.avatarURL}
-                  birthDate={loggedUser?.birthDate}
-                  actions={mobileSessionActions}
-                  knownFactsPageTitle={t('knownFacts.title') || 'Known facts'}
-                  sharePageTitle={t('widget.share') || 'Share'}
-                  locationPageTitle={
-                    t('widget.mobileSession.locationTracking') ||
-                    'Location tracking'
-                  }
-                  backLabel={t('back') || 'Back'}
-                  locationStatusLabel={
-                    t('widget.mobileSession.locationStatus') || 'Status'
-                  }
-                  locationPlace={headerProps.position?.placeName}
-                  locationUnknownLabel={
-                    t('write_and_speak.unknownPosition') || 'Unknown position'
-                  }
-                  locationEnableLabel={
-                    t('widget.shareLocation') || 'Share location'
-                  }
-                  locationDisableLabel={
-                    t('widget.mobileSession.disableLocationSharing') ||
-                    'Disable location sharing'
-                  }
-                  knownFactsDescription={
-                    t('knownFacts.description', {
-                      memoriName: memori?.name || '',
-                    }) || ''
-                  }
-                  knownFactsCtaLabel={
-                    t('widget.mobileSession.openKnownFacts') ||
-                    'Open full known facts'
-                  }
-                  knownFactsCountLabel={
-                    (t('widget.mobileSession.knownFactsMessages', {
-                      count: headerProps.history?.length || 0,
-                    }) as string) || ''
-                  }
-                  shareContent={
-                    <ShareButton
-                      tenant={headerProps?.tenant}
-                      memori={headerProps?.memori}
-                      sessionID={headerProps?.sessionID}
-                      title={headerProps?.memori?.name}
-                      baseUrl={headerProps?.baseUrl}
-                      align="left"
-                      history={headerProps?.history}
-                      renderMode="inline"
-                    />
-                  }
-                  knownFactsDisabled={!isSessionStarted}
-                  showSessionInfo={isSessionStarted}
-                  history={headerProps.history ?? []}
-                  isLoggedIn={!!loggedUser}
-                  loginLabel={t('login.login') || 'Log in'}
-                  onLogin={() => {
-                    headerProps.setShowLoginDrawer(true);
-                    setMobileSheetOpen(false);
-                  }}
-                  onKnownFactsOpen={() => {
-                    if (!isSessionStarted) return;
-                    headerProps.setShowKnownFactsDrawer(true);
-                    setMobileSheetOpen(false);
-                  }}
-                  onLocationEnable={handleEnableLocation}
-                  onLocationDisable={handleDisableLocation}
-                  logoutLabel={t('login.logout') || 'Log out'}
-                  onLogout={() => {
-                    handleMobileLogout();
-                    setMobileSheetOpen(false);
-                  }}
-                />
-              )}
               {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                <Chat {...chatProps} />
+                <Chat {...chatProps} showInputs={false} />
               ) : startPanelProps ? (
                 <div
                   className="memori-chat-layout--start-shell"
@@ -377,50 +377,62 @@ const ChatLayout: React.FC<LayoutProps> = ({
                   <div className="memori-chat-layout--start-panel-wrap">
                     <StartPanel {...startPanelProps} />
                   </div>
-                  {Chat && chatProps && chatProps.showInputs !== false && (
-                    <div className="memori-chat-layout--prechat-inputs">
-                      <ChatInputs
-                        userMessage={chatProps.userMessage}
-                        onChangeUserMessage={chatProps.onChangeUserMessage}
-                        dialogState={chatProps.dialogState}
-                        instruct={chatProps.instruct}
-                        authToken={chatProps.authToken}
-                        sendMessage={chatProps.sendMessage}
-                        isTyping={chatProps.memoriTyping}
-                        microphoneMode={chatProps.microphoneMode}
-                        sendOnEnter={chatProps.sendOnEnter}
-                        setSendOnEnter={chatProps.setSendOnEnter}
-                        client={chatProps.client}
-                        sessionID={chatProps.sessionID}
-                        showUpload={chatProps.showUpload}
-                        attachmentsMenuOpen={chatProps.attachmentsMenuOpen}
-                        setAttachmentsMenuOpen={
-                          chatProps.setAttachmentsMenuOpen
-                        }
-                        onTextareaFocus={() => {
-                          chatProps.stopListening?.();
-                        }}
-                        onTextareaBlur={() => {}}
-                        onTextareaExpanded={() => {}}
-                        startListening={chatProps.startListening}
-                        stopListening={chatProps.stopListening}
-                        stopAudio={chatProps.stopAudio}
-                        listening={chatProps.listening}
-                        isPlayingAudio={chatProps.isPlayingAudio}
-                        showMicrophone={chatProps.showMicrophone}
-                        memoriID={chatProps.memori?.memoriID}
-                        maxTextareaCharacters={chatProps.maxTextareaCharacters}
-                        maxDocumentsPerMessage={maxDocumentsPerMessage}
-                        maxDocumentContentLength={maxDocumentContentLength}
-                        pasteAsCardLineThreshold={pasteAsCardLineThreshold}
-                        pasteAsCardCharThreshold={pasteAsCardCharThreshold}
-                        showAiGeneratedNote={false}
-                      />
-                    </div>
-                  )}
                 </div>
               ) : null}
             </div>
+
+            {/* Input bar sits outside body so it spans the shared column below the scroll area */}
+            {Chat && chatProps && chatProps.showInputs !== false && (
+              <ChatInputs
+                userMessage={chatProps.userMessage}
+                onChangeUserMessage={chatProps.onChangeUserMessage}
+                dialogState={chatProps.dialogState}
+                instruct={chatProps.instruct}
+                authToken={chatProps.authToken}
+                sendMessage={chatProps.sendMessage}
+                isTyping={chatProps.memoriTyping}
+                microphoneMode={chatProps.microphoneMode}
+                sendOnEnter={chatProps.sendOnEnter}
+                setSendOnEnter={chatProps.setSendOnEnter}
+                client={chatProps.client}
+                sessionID={chatProps.sessionID}
+                showUpload={chatProps.showUpload}
+                attachmentsMenuOpen={chatProps.attachmentsMenuOpen}
+                setAttachmentsMenuOpen={chatProps.setAttachmentsMenuOpen}
+                onTextareaFocus={() => {
+                  chatProps.stopListening?.();
+                }}
+                onTextareaBlur={() => {}}
+                onTextareaExpanded={() => {}}
+                startListening={chatProps.startListening}
+                stopListening={chatProps.stopListening}
+                stopAudio={chatProps.stopAudio}
+                listening={chatProps.listening}
+                isPlayingAudio={chatProps.isPlayingAudio}
+                showMicrophone={chatProps.showMicrophone}
+                memoriID={chatProps.memori?.memoriID}
+                maxTextareaCharacters={chatProps.maxTextareaCharacters}
+                maxTotalMessagePayload={chatProps.maxTotalMessagePayload}
+                maxDocumentsPerMessage={maxDocumentsPerMessage}
+                maxDocumentContentLength={maxDocumentContentLength}
+                pasteAsCardLineThreshold={pasteAsCardLineThreshold}
+                pasteAsCardCharThreshold={pasteAsCardCharThreshold}
+                showAiGeneratedNote={isSessionStarted}
+                footerBrand={poweredBy}
+              />
+            )}
+            </div>
+          </div>
+
+          {/* Artifact column — width 0→480px with CSS transition */}
+          <div
+            className={`memori--grid-column-artifact${
+              useSideArtifactChrome ? ' memori--grid-column-artifact--open' : ''
+            }`}
+          >
+            {useSideArtifactChrome && (
+              <ArtifactDrawer isLayoutColumn />
+            )}
           </div>
         </div>
       </Spin>

package/src/components/layouts/FullPage.tsx

@@ -77,6 +77,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;
 
@@ -216,7 +248,7 @@ const FullPageLayout: React.FC<LayoutProps> = ({
       {integrationBackground}
 
       <Spin spinning={loading}>
-        {poweredBy}
+        {useSideArtifactChrome && poweredBy}
 
         {Header && headerProps && mobileHeaderProps && (
           <div className="memori-fullpage-top-header">
@@ -321,6 +353,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 +363,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>