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

package/src/components/layouts/Chat.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Spin } from '@memori.ai/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Spin } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
+import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import { useTranslation } from 'react-i18next';
 import {
-  Expand,
   MapPin,
   Share2,
   EllipsisVertical,
@@ -20,17 +21,6 @@ import {
   pasteAsCardCharThreshold,
 } from '../../helpers/constants';
 
-function isFullscreenAllowedOnDevice(): boolean {
-  if (typeof document === 'undefined') return false;
-
-  if (document.fullscreenEnabled === true) return true;
-
-  const fullscreenMeta = document.querySelector(
-    'meta[name="memori-fullscreen-enabled"], meta[name="fullscreen-enabled"]'
-  );
-  return fullscreenMeta?.getAttribute('content') === 'true';
-}
-
 const ChatLayout: React.FC<LayoutProps> = ({
   Header,
   headerProps,
@@ -60,11 +50,15 @@ 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;
   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;
@@ -83,16 +77,6 @@ const ChatLayout: React.FC<LayoutProps> = ({
   const loggedUserInitial = loggedUserDisplayName.charAt(0).toUpperCase();
   const isSessionStarted = Boolean(sessionId && hasUserActivatedSpeak);
 
-  const handleMobileFullscreen = useCallback(() => {
-    if (!isFullscreenAllowedOnDevice()) return;
-
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen().catch(() => {});
-      return;
-    }
-    document.exitFullscreen().catch(() => {});
-  }, []);
-
   const handleMobileLogout = () => {
     if (!headerProps) return;
     if (loggedUser && headerProps.onLogout) {
@@ -163,6 +147,8 @@ const ChatLayout: React.FC<LayoutProps> = ({
       isMobile &&
       !!headerProps.loginToken &&
       headerProps.showChatHistory !== false;
+    const showShareInPanel = headerProps.showShare !== false;
+    const showLocationInPanel = !!headerProps.memori?.needsPosition;
 
     const historyBlock = showChatHistoryInPanel
       ? [
@@ -183,41 +169,42 @@ const ChatLayout: 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>
-        ),
-      },
+      ...(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]);
+  }, [headerProps, isMobile, t]);
 
   return (
     <>
@@ -225,203 +212,212 @@ const ChatLayout: React.FC<LayoutProps> = ({
       {integrationBackground}
 
       <Spin spinning={loading} className="memori-chat-layout">
-        {poweredBy}
-
         <div id="extension" />
 
+        {/* Header stays full-width above the content split — same pattern as FULLPAGE */}
+        <div className="memori-chat-layout--header">
+          {Header && headerProps && mobileHeaderProps && (
+            <div className="memori-fullpage-header-row">
+              <Header
+                {...mobileHeaderProps}
+                buttonVariant="outline"
+                extraActions={
+                  isMobile ? (
+                    <IconButton
+                      className="memori-chat-layout--overflow-trigger"
+                      active={mobileSheetOpen}
+                      aria-label={t('widget.moreActions') || 'More actions'}
+                      icon={<EllipsisVertical />}
+                      onClick={() =>
+                        setMobileSheetOpen(currentOpen => !currentOpen)
+                      }
+                    />
+                  ) : undefined
+                }
+              />
+            </div>
+          )}
+        </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}
+            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);
+              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);
+            }}
+          />
+        )}
+
+        {/* Content row: chat + artifact as full-height siblings (FULLPAGE pattern) */}
         <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
+          }
         >
           <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'
-                  : ''
-              }`}
-            >
-              {Header && headerProps && mobileHeaderProps && (
-                <div className="memori-fullpage-header-row">
-                    <Header
-                      {...mobileHeaderProps}
-                      buttonVariant="outline"
-                      extraActions={
-                        isMobile ? (
-                          <Button
-                            variant="outline"
-                            className={`memori-chat-layout--overflow-trigger ${
-                              mobileSheetOpen ? 'memori-button--active' : ''
-                            }`}
-                            aria-label={
-                              t('widget.moreActions') || 'More actions'
-                            }
-                            icon={<EllipsisVertical />}
-                            onClick={() =>
-                              setMobileSheetOpen(currentOpen => !currentOpen)
-                            }
-                          />
-                        ) : undefined
-                      }
-                    />
-                </div>
-              )}
-            </div>
+            <div className="memori-conversation-column">
+              <div className="memori-chat-layout--body">
+                {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+                  <Chat {...chatProps} showInputs={false} />
+                ) : startPanelProps ? (
+                  <div
+                    className="memori-chat-layout--start-shell"
+                    id="chat-wrapper"
+                  >
+                    <div className="memori-chat-layout--start-panel-wrap">
+                      <StartPanel {...startPanelProps} />
+                    </div>
+                  </div>
+                ) : null}
+              </div>
 
-            <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);
+              {/* 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}
                 />
               )}
-              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                <Chat {...chatProps} />
-              ) : startPanelProps ? (
-                <div
-                  className="memori-chat-layout--start-shell"
-                  id="chat-wrapper"
-                >
-                  <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>
           </div>
+
+          {/* Artifact column — shrinks chat column only; outer layout stays put */}
+          <div
+            className={`memori--grid-column-artifact${
+              useSideArtifactChrome ? ' memori--grid-column-artifact--open' : ''
+            }`}
+          >
+            {useSideArtifactChrome && <ArtifactDrawer isLayoutColumn />}
+          </div>
         </div>
       </Spin>
     </>