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

package/src/components/layouts/zoomed-full-body.css

@@ -1,3 +1,6 @@
+/* ZoomedFullBody layout – mirrors the FullPage layout structure/styling.
+   The avatar is kept zoomed via the `isZoomed` prop on the Avatar component. */
+
 .memori--powered-by-custom {
     position: absolute;
     z-index: 1000;
@@ -7,50 +10,81 @@
     flex-wrap: wrap;
 }
 
-.memori-widget.memori-layout-zoomed_full_body > .memori-spin {
+.memori-widget.memori-layout-zoomed_full_body {
+    /* max-width: var(--memori-layout-max-width); */
+    padding: var(--memori-spacing-md);
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.memori-widget.memori-layout-zoomed_full_body > .memori-spin,
+.memori-widget.memori-layout-zoomed_full_body > .memori-widget__surface > .memori-spin {
     display: flex;
-    height: calc(100vh - 50px);
-    height: calc(100dvh - 50px);
+    overflow: hidden;
+    height: 100%;
     min-height: 0;
+    flex: 1 1 auto;
     flex-direction: column;
     gap: 0;
 }
 
-.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls {
-    padding: var(--memori-spacing-md);
-}
-
-.memori-widget.memori-layout-zoomed_full_body {
-    max-width: var(--memori-layout-max-width);
-    margin: 0 auto;
-}
+/* "Powered by" lives in the conversation footer under the chat input. */
 
+/* Header spacing + fullpage chrome (brand + actions bar) */
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-top-header {
     position: relative;
     z-index: 6;
     width: 100%;
     flex-shrink: 0;
-    padding: 0 var(--memori-spacing-md);
+    padding: 0;
     padding-bottom: 0;
+    margin-bottom: var(--memori-spacing-sm);
 }
 
-.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--header {
-    min-width: 100%;
-    flex-shrink: 0;
-    padding: var(--memori-spacing-sm) 0;
-    border: 0;
-    border-radius: 0;
-    border-bottom: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 14%, transparent);
-    background: transparent;
-}
-
+/* Header shares the same content axis as .memori--grid, so brand, actions and
+   the divider stay aligned with the panels below at any width. */
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row {
+    position: sticky;
+    z-index: 6;
+    top: 0;
     display: flex;
     width: 100%;
+    max-width: var(--memori-layout-max-width);
     min-height: 48px;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
+    padding: var(--memori-spacing-md);
+    padding-right: var(--memori-spacing-md);
+    padding-left: var(--memori-spacing-md);
+    border-bottom: 1px solid var(--memori-border-color);
+    margin-right: auto;
+    margin-left: auto;
+    background: transparent;
     gap: var(--memori-spacing-md);
+    transition: background-color var(--memori-motion-duration-fast, 0.15s) var(--memori-motion-ease, ease);
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row.memori-header--scrolled,
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--header.memori-header--scrolled,
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-top-header.memori-header--scrolled {
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--header {
+    min-width: 100%;
+    flex-shrink: 0;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: transparent;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat--history {
+    min-height: 0;
+    flex: 1 1 auto;
+    border: none;
+    border-radius: var(--memori-radius-box);
+    margin-bottom: 0;
+    background-color: var(--memori-secondary-background);
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand {
@@ -59,24 +93,33 @@
     min-width: 0;
     flex: 1 1 auto;
     align-items: center;
+    margin-right: auto;
     gap: 0.625rem;
 }
 
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-text {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-icon {
     display: block;
     width: 30px;
     height: 30px;
     flex-shrink: 0;
     border-radius: 50%;
-    background: linear-gradient(145deg, #6d28d9 0%, #534ab7 52%, #4338ca 100%);
-    box-shadow: 0 1px 4px rgba(109, 40, 217, 0.35);
+    background: var(--memori-primary);
 }
 
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-icon--avatar {
     flex-shrink: 0;
     border: 0;
     background: none;
-    box-shadow: 0 1px 4px rgba(109, 40, 217, 0.2);
+    box-shadow: none;
     object-fit: cover;
 }
 
@@ -85,9 +128,8 @@
     overflow: hidden;
     min-width: 0;
     max-width: 100%;
-    flex: 1 1 auto;
     color: var(--memori-text-color, #1f2937);
-    font-size: 1.35rem;
+    font-size: 1.05rem;
     font-weight: 700;
     letter-spacing: -0.02em;
     line-height: 1.2;
@@ -95,18 +137,35 @@
     white-space: nowrap;
 }
 
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-role {
+    display: block;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;
+    color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
+    font-size: var(--memori-text-size-sm, 0.8125rem);
+    font-weight: var(--memori-text-weight-normal, 400);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-actions {
     display: flex;
     min-width: 0;
     flex: 0 0 auto;
     align-items: center;
     justify-content: flex-end;
+    margin-left: auto;
 }
 
-.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-actions .memori-header.memori-header--fullpage {
+/* FullPage header controls: compact square actions + rounded login CTA */
+.memori-widget.memori-layout-zoomed_full_body .memori-header.memori-header--fullpage {
+    width: auto;
     min-width: 0;
     flex-wrap: nowrap;
     justify-content: flex-end;
+    margin-left: auto;
     gap: 0.5rem;
 }
 
@@ -121,25 +180,271 @@
     margin: 0;
 }
 
+/* Full-height flex row: [grid] [artifact column] — outside the grid so artifact
+   spans the entire content height without inheriting grid padding/max-width */
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-content-row {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: row;
+    align-items: stretch;
+}
+
+/* Grid holds avatar + chat as two separate panels: no outer frame, vertical breathing room. */
+.memori-widget.memori-layout-zoomed_full_body .memori--grid {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    max-width: var(--memori-layout-max-width);
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0%;
+    align-items: stretch;
+    justify-content: center;
+    padding: var(--memori-spacing-md);
+    border: none;
+    margin: 0 auto;
+    background: var(--memori-secondary-background);
+    gap: var(--memori-spacing-md);
+}
+
+/* Avatar column: its own rounded panel, wider than the chat sidebar it replaced. */
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left {
+    position: relative;
+    z-index: 10;
+    display: flex;
+    overflow: hidden;
+    width: clamp(240px, 34%, 420px);
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: stretch;
+    align-self: stretch;
+    border: none;
+    border-radius: 12px;
+    margin-right: 0;
+    background: color-mix(in srgb, var(--memori-text-color) 4%, var(--memori-secondary-background));
+}
+
+/* Agent status indicator above the avatar. */
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-agent-status {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
+    font-size: var(--memori-text-size-sm, 0.8125rem);
+    gap: var(--memori-spacing-xs);
+    line-height: 1.2;
+    text-align: center;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-agent-status--dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-agent-status--dot-speaking {
+    background: var(--memori-primary);
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-agent-status--dot-processing {
+    background: color-mix(in srgb, var(--memori-text-color) 55%, transparent);
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-agent-status--dot-listening {
+    background: var(--memori-primary);
+}
+
+/* Cover banner is removed here too — it wastes the most valuable space. */
+.memori-widget.memori-layout-zoomed_full_body .memori-chat--cover {
+    display: none;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0%;
+    align-items: stretch;
+    justify-content: center;
+    padding-top: 0;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper model-viewer,
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper canvas,
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left .memori--avatar-wrapper > div {
+    width: 100% !important;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--main {
+    display: flex;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    align-self: stretch;
+    justify-content: stretch;
+}
+
+/* Artifact column — flex sibling of .memori--grid, outside the padded grid */
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-artifact {
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+    flex-shrink: 0;
+    transition: width 0.25s ease;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-artifact--open {
+    width: 560px;
+    border-left: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
+    background: var(--memori-secondary-background);
+}
+
+/* Hide avatar column when artifact drawer is open */
+.memori-widget.memori-layout-zoomed_full_body
+    .memori-fullpage-content-row:has(.memori--grid-column-artifact--open)
+    .memori--grid-column-left {
+    display: none;
+}
+
+@media (max-width: 1260px) {
+    .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-artifact {
+        display: none;
+    }
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    max-height: 100%;
+    flex: 1 1 0%;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-conversation-column {
+    display: flex;
+    width: 100%;
+    max-width: none;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+    padding-inline: 0;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori--start-panel,
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat--wrapper {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+    padding: 0 !important;
+    margin-right: 0;
+    margin-left: 0;
+}
+
+/* Typography: title and description in left column */
+.memori-widget.memori-layout-zoomed_full_body .memori--title {
+    margin-bottom: var(--memori-spacing-xs);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-heading-large);
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: var(--memori-text-line-tight);
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori--description,
+.memori-widget.memori-layout-zoomed_full_body .memori--needsPosition {
+    padding: var(--memori-spacing-lg);
+    padding-top: var(--memori-spacing-xs);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-base);
+    line-height: var(--memori-text-line-relaxed);
+}
+
+/* ZoomedFullBody: Memori brand lives in the conversation footer; no watermark.
+   Input bar styles live in ChatInputs.css (shared with FULLPAGE). */
+
+/* Keep the input bar inside the chat panel, pinned to the bottom of the column */
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat--wrapper {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls .memori-chat-inputs-wrapper {
+    width: 100%;
+    flex-shrink: 0;
+    border: none;
+    border-radius: 0;
+    background: var(--memori-secondary-background);
+}
+
 @media (max-width: 870px) {
+    .memori-widget.memori-layout-zoomed_full_body {
+        padding: var(--memori-spacing-sm);
+    }
+
     .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-top-header {
-        padding: 0 var(--memori-spacing-sm);
-        padding-bottom: 0;
+        padding: 0;
+        margin-bottom: var(--memori-spacing-md);
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left {
+        display: none;
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori--grid {
+        padding: var(--memori-spacing-sm);
+        gap: var(--memori-spacing-sm);
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls {
+        padding: 0;
     }
 }
 
 @media (max-width: 480px) {
     .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-top-header {
-        padding: 0 var(--memori-spacing-xs);
-        padding-bottom: 0;
+        padding: 0;
     }
 
     .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-name {
         font-size: 1.1rem;
     }
 
+    .memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls {
+        padding: 0;
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori--grid {
+        padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
+    }
+
     .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row {
-        /* flex-wrap: wrap; */
         align-items: flex-start;
     }
 

package/src/context/widgetSurfaceContext.tsx

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+
+/**
+ * Portal target for fixed overlays (Drawer/Modal) that must stay clipped to the
+ * chat widget. Kept separate from MemoriUIProvider's container so Floating UI
+ * menus (Select/Popover) can portal to the widget root *outside* `contain: layout`.
+ */
+const WidgetSurfaceContext = createContext<HTMLElement | null>(null);
+
+export const WidgetSurfaceProvider = WidgetSurfaceContext.Provider;
+
+export function useWidgetSurfaceEl(): HTMLElement | null {
+  return useContext(WidgetSurfaceContext);
+}

package/src/helpers/constants.ts

@@ -36,7 +36,7 @@ export const getGroupedChatLanguages = () => {
     popularLanguageCodes.includes(lang.value)
   );
   const all = chatLanguages.filter(lang => !popularLanguageCodes.includes(lang.value));
-  return {  
+  return {
     popular,
     all,
   };
@@ -44,6 +44,39 @@ export const getGroupedChatLanguages = () => {
 
 export const uiLanguages = ['en', 'it', 'fr', 'es', 'de'];
 
+/** Extensions uploaded as original Office binaries (no text extraction) */
+export const officeNativeExtensions = [
+  '.doc',
+  '.docx',
+  '.dotx',
+  '.xltx',
+  '.potx',
+] as const;
+
+export const documentConversionExtensions = [
+  '.pdf',
+  '.docm',
+  '.xlsx',
+  '.xlsm',
+  '.xls',
+  '.ods',
+  '.pptx',
+  '.pptm',
+  '.html',
+  '.htm',
+  '.xhtml',
+  '.csv',
+  '.tsv',
+  '.txt',
+  '.md',
+  '.markdown',
+  '.json',
+  '.xml',
+  '.log',
+  '.yml',
+  '.yaml',
+] as const;
+
 export const allowedMediaTypes = [
   'image/jpeg',
   'image/png',
@@ -51,6 +84,7 @@ export const allowedMediaTypes = [
   'image/gif',
   'application/msword',
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
   'application/vnd.ms-excel',
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   'application/pdf',
@@ -63,6 +97,27 @@ export const allowedMediaTypes = [
   'model/gltf-binary',
 ];
 
+/** Short badge labels for Office document cards */
+export const officeMimeShortLabels: Record<string, string> = {
+  'application/msword': 'Word',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template': 'Word',
+  'application/vnd.ms-excel': 'Excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.template': 'Excel',
+  'application/vnd.openxmlformats-officedocument.presentationml.template': 'PPT',
+};
+
+export const officeExtensionShortLabels: Record<string, string> = {
+  DOC: 'Word',
+  DOCX: 'Word',
+  DOTX: 'Word',
+  XLS: 'Excel',
+  XLSX: 'Excel',
+  XLTX: 'Excel',
+  POTX: 'PPT',
+};
+
 export const anonTag = '👤';
 
 export const prismSyntaxLangs = [

package/src/helpers/convertDocument.test.ts

@@ -0,0 +1,67 @@
+import { convertDocument } from './convertDocument';
+
+describe('convertDocument', () => {
+  const fetchMock = jest.fn();
+
+  beforeEach(() => {
+    fetchMock.mockReset();
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+  });
+
+  it('uploads a file through the session-gated endpoint', async () => {
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: jest.fn().mockResolvedValue({ text: '# Converted document' }),
+    });
+    const file = new File(['document'], 'contract.pdf', {
+      type: 'application/pdf',
+    });
+
+    await expect(
+      convertDocument(file, 'session/id', 'https://www.aisuru.com/')
+    ).resolves.toBe('# Converted document');
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://www.aisuru.com/api/convert/session%2Fid',
+      expect.objectContaining({
+        method: 'POST',
+        body: expect.any(FormData),
+      })
+    );
+    const body = fetchMock.mock.calls[0][1].body as FormData;
+    expect(body.get('file')).toBe(file);
+    expect(fetchMock.mock.calls[0][1].headers).toBeUndefined();
+  });
+
+  it('uses the current origin when baseUrl is omitted', async () => {
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: jest.fn().mockResolvedValue({ text: 'Converted' }),
+    });
+
+    await convertDocument(new File(['text'], 'notes.txt'), 'session');
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/convert/session',
+      expect.any(Object)
+    );
+  });
+
+  it('surfaces conversion API errors', async () => {
+    fetchMock.mockResolvedValue({
+      ok: false,
+      json: jest.fn().mockResolvedValue({ error: 'Formato non supportato' }),
+    });
+
+    await expect(
+      convertDocument(new File(['document'], 'contract.pages'), 'session')
+    ).rejects.toThrow('Formato non supportato');
+  });
+
+  it('requires a session before uploading', async () => {
+    await expect(
+      convertDocument(new File(['document'], 'contract.pdf'), '')
+    ).rejects.toThrow('Session ID is required');
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});

package/src/helpers/convertDocument.ts

@@ -0,0 +1,35 @@
+type ConvertDocumentResponse = {
+  text?: string;
+  error?: string;
+};
+
+export const convertDocument = async (
+  file: File,
+  sessionID: string,
+  baseUrl = ''
+): Promise<string> => {
+  if (!sessionID) {
+    throw new Error('Session ID is required to convert documents');
+  }
+
+  const body = new FormData();
+  body.append('file', file);
+
+  const origin = baseUrl.replace(/\/+$/, '');
+  const response = await fetch(
+    `${origin}/api/convert/${encodeURIComponent(sessionID)}`,
+    {
+      method: 'POST',
+      body,
+    }
+  );
+  const payload = (await response
+    .json()
+    .catch(() => null)) as ConvertDocumentResponse | null;
+
+  if (!response.ok || !payload?.text) {
+    throw new Error(payload?.error || 'Document conversion failed');
+  }
+
+  return payload.text;
+};