@memori.ai/memori-react 9.0.0-alpha.16 → 9.0.0-alpha.18

package/src/components/UploadButton/__snapshots__/UploadButton.test.tsx.snap

@@ -21,34 +21,38 @@ exports[`renders UploadButton unchanged 1`] = `
       >
         <button
           aria-label="upload.uploadFilesOrImages"
-          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
+          class="memori-button memori-button--toolbar memori-button--sm memori-icon-button memori-icon-button--labeled memori-share-button--button memori--conversation-button memori--unified-upload-button"
           type="button"
         >
-          <svg
-            class="lucide lucide-upload memori--upload-icon"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button__content"
           >
-            <path
-              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-            />
-            <polyline
-              points="17 8 12 3 7 8"
-            />
-            <line
-              x1="12"
-              x2="12"
-              y1="3"
-              y2="15"
-            />
-          </svg>
+            <svg
+              class="lucide lucide-upload memori--upload-icon"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+              />
+              <polyline
+                points="17 8 12 3 7 8"
+              />
+              <line
+                x1="12"
+                x2="12"
+                y1="3"
+                y2="15"
+              />
+            </svg>
+          </span>
         </button>
       </span>
     </span>

package/src/components/layouts/Chat.tsx

@@ -1,9 +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,
@@ -21,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,
@@ -67,7 +56,9 @@ const ChatLayout: 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;
@@ -86,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) {
@@ -166,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
       ? [
@@ -186,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 (
     <>
@@ -230,6 +214,118 @@ const ChatLayout: React.FC<LayoutProps> = ({
       <Spin spinning={loading} className="memori-chat-layout">
         <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}
+            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${
             globalBackground ? ' memori-chat-layout--main--has-background' : ''
@@ -242,7 +338,6 @@ const ChatLayout: React.FC<LayoutProps> = ({
               : undefined
           }
         >
-          {/* Chat column — flex:1, shrinks when artifact column grows */}
           <div
             className={
               state.isFullscreen
@@ -250,189 +345,72 @@ const ChatLayout: React.FC<LayoutProps> = ({
                 : `memori-chat-layout--controls`
             }
           >
-            <div className="memori-chat-layout--header">
-              {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>
-
-            {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">
-              {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 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>
-                </div>
-              ) : null}
-            </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}
-              />
-            )}
+              {/* 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 */}
+          {/* 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 />
-            )}
+            {useSideArtifactChrome && <ArtifactDrawer isLayoutColumn />}
           </div>
         </div>
       </Spin>