@memori.ai/memori-react 9.0.0-alpha.0 → 9.0.0-alpha.10

package/src/helpers/utils.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { Material, MeshStandardMaterial, SkinnedMesh } from 'three';
 import * as THREE from 'three';
+import { officeNativeExtensions } from './constants';
 
 export const hasTouchscreen = (): boolean => {
   let hasTouchScreen = false;
@@ -237,6 +238,67 @@ export const stripMarkdown = (text: string) => {
   return text;
 };
 
+export const OFFICE_NATIVE_EXTENSIONS = officeNativeExtensions;
+
+export const isOfficeNativeFilename = (filename: string): boolean => {
+  const ext = `.${filename.split('.').pop()?.toLowerCase() || ''}`;
+  return (officeNativeExtensions as readonly string[]).includes(ext);
+};
+
+export type ParsedDocumentAttachment = {
+  filename: string;
+  type: string;
+  content: string;
+  url: string;
+};
+
+const DOCUMENT_ATTACHMENT_REGEX =
+  /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
+
+const ATTACHMENT_LINK_AFTER_REGEX =
+  /<attachment_link>\s*([\s\S]*?)\s*<\/attachment_link>/;
+
+export const parseDocumentAttachmentsFromMessage = (
+  text: string
+): ParsedDocumentAttachment[] => {
+  if (!text) return [];
+
+  const attachments: ParsedDocumentAttachment[] = [];
+  const regex = new RegExp(DOCUMENT_ATTACHMENT_REGEX.source, 'g');
+  let match;
+
+  while ((match = regex.exec(text)) !== null) {
+    const [, filename, type, content] = match;
+    const afterTag = text.slice(match.index + match[0].length);
+    const linkMatch = afterTag.match(ATTACHMENT_LINK_AFTER_REGEX);
+    const rawUrl = linkMatch?.[1]?.trim() || '';
+    const url = /^https?:\/\//.test(rawUrl) ? rawUrl : '';
+
+    attachments.push({
+      filename,
+      type,
+      content: content.trim(),
+      url,
+    });
+  }
+
+  return attachments;
+};
+
+export const extractAttachmentLinks = (content: string): string[] => {
+  return parseDocumentAttachmentsFromMessage(content).map(
+    attachment => attachment.url
+  );
+};
+
+export const extractAttachmentLink = (content: string): string | null => {
+  const match = content?.match(
+    /<attachment_link>\s*([\s\S]*?)\s*<\/attachment_link>/
+  );
+  const rawUrl = match?.[1]?.trim() || '';
+  return /^https?:\/\//.test(rawUrl) ? rawUrl : null;
+};
+
 export const stripDocumentAttachmentTags = (text: string): string => {
   const documentAttachmentTagRegex = /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
   return text
@@ -245,6 +307,36 @@ export const stripDocumentAttachmentTags = (text: string): string => {
     .replace(/<attachment_link>\s*[\s\S]*?\s*<\/attachment_link>/g, '');
 };
 
+export const getDocumentAttachmentAssetUrl = (attachment: {
+  content?: string | null;
+  url?: string | null;
+}): string =>
+  attachment.url?.trim() ||
+  extractAttachmentLink(attachment.content || '') ||
+  '';
+
+export const isAssetOnlyDocumentAttachment = (attachment: {
+  title?: string;
+  name?: string;
+  content?: string | null;
+  url?: string | null;
+}): boolean => {
+  const filename = attachment.title || attachment.name || '';
+  const assetUrl = getDocumentAttachmentAssetUrl(attachment);
+
+  if (!assetUrl) return false;
+
+  if (isOfficeNativeFilename(filename)) {
+    return true;
+  }
+
+  const strippedContent = attachment.content
+    ? stripDocumentAttachmentTags(attachment.content).trim()
+    : '';
+
+  return !strippedContent;
+};
+
 export const stripOutputTags = (text: string): string => {
   const outputTagRegex = /<output.*?<\/output>/gs;
 
@@ -271,10 +363,23 @@ export const stripReasoningTags = (text: string) => {
   return strippedText;
 };
 
+/**
+ * Strip HTML tags / decode entities without executing scripts or event handlers.
+ * Uses an inert DOMParser document (no resource loads / onerror), unlike live innerHTML.
+ */
 export const stripHTML = (text: string) => {
-  const el = document.createElement('div');
-  el.innerHTML = text;
-  return el.textContent || '';
+  if (typeof DOMParser !== 'undefined') {
+    try {
+      return (
+        new DOMParser().parseFromString(text, 'text/html').body.textContent ||
+        ''
+      );
+    } catch {
+      // fall through
+    }
+  }
+  // Non-DOM / parse failure: strip tags only (does not decode entities)
+  return text.replace(/<[^>]*>/g, '');
 };
 
 /** Ensures all <a> tags in HTML open in a new tab (target="_blank" rel="noopener noreferrer"). */

package/src/index.stories.tsx

@@ -192,3 +192,35 @@ WithPiiDetection.args = {
     }),
   },
 };
+
+export const WithLocalNats = Template.bind({});
+WithLocalNats.args = {
+  memoriName: 'test324',
+  ownerUserName: 'andrea.patini',
+  memoriID: 'd661a9ca-e907-4396-a986-5095ccd582d6',
+  ownerUserID: '69fcc557-9cb6-4e5e-b8ab-140cff975492',
+  tenantID: 'localhost:3000',
+  engineURL: 'http://localhost:7778/memori/v2',
+  apiURL: 'http://localhost:7778/api/v2',
+  baseURL: 'http://localhost:3000',
+  layout: 'FULLPAGE',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  integrationID: 'ee1c3d98-7819-4506-ba28-818e79ba86cb',
+};
+
+export const WithFunctionalities = Template.bind({});
+WithFunctionalities.args = {
+  memoriName: 'test324',
+  ownerUserName: 'andrea.patini',
+  memoriID: 'd661a9ca-e907-4396-a986-5095ccd582d6',
+  ownerUserID: '69fcc557-9cb6-4e5e-b8ab-140cff975492',
+  tenantID: 'localhost:3000',
+  engineURL: 'http://localhost:7778/memori/v2',
+  apiURL: 'http://localhost:7778/api/v2',
+  baseURL: 'http://localhost:3000',
+  layout: 'FULLPAGE',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  integrationID: 'ee1c3d98-7819-4506-ba28-818e79ba86cb',
+};

package/src/locales/de.json

@@ -87,6 +87,7 @@
   "errorFetchingSession": "Fehler beim Laden der Sitzung",
   "errorGettingReferralURL": "Fehler beim Laden des Referrals",
   "errorReopeningSession": "Fehler beim erneuten Öffnen der Sitzung",
+  "sessionExpiredReopening": "Sitzung abgelaufen, Sitzung wird neu geöffnet",
   "ageVerification": "Altersüberprüfung",
   "ageVerificationText": "Um mit diesem Zwilling interagieren zu können, müssen Sie mindestens sein {{minAge}} Jahre alt.",
   "ageVerificationSuccess": "Altersprüfung bestanden mit Erfolg.",
@@ -131,6 +132,7 @@
     "instruct": "Anleiten",
     "test": "Testen",
     "sound": "Ton",
+    "soundOff": "Ton aus",
     "position": "Positionspräferenzen",
     "settings": "Einstellungen",
     "share": "Teilen",
@@ -142,6 +144,9 @@
     "expertsInTheBoard": "Experten in diesem Rat",
     "goToIntegrationsToCustomizeAvatar": "Um den Avatar anzupassen, gehen Sie zu \"Teilen\" und passen Sie die öffentliche Seite an",
     "chatAssistantStatus": "Aktiv • Antwortet in wenigen Sekunden",
+    "agentStatusListening": "hört zu",
+    "agentStatusSpeaking": "spricht",
+    "agentStatusProcessing": "verarbeitet",
     "shareLocation": "Standort teilen",
     "shareLocationHint": "Erhalte Antworten passend zu deinem Standort",
     "shareLocationAria": "Standort mit dem Assistenten teilen",
@@ -152,7 +157,7 @@
     "geocodingFailed": "Adresse konnte nicht ermittelt werden. Bitte erneut versuchen oder manuell suchen.",
     "positionUnavailableManual": "Standort nicht verfügbar. Bitte manuell eingeben.",
     "positionSharingEnabled": "Standort geteilt.",
-    "headerHistory": "Chatverlauf",
+    "headerHistory": "Verlauf",
     "headerProfile": "Profil",
     "headerLogin": "Anmelden",
     "downloadQrCode": "QR-Code herunterladen",
@@ -243,6 +248,8 @@
     "images": "Bilder",
     "file": "Datei",
     "files": "Dateien",
+    "function": "Funktion",
+    "functions": "Funktionen",
     "iWantToTalkToIn": "Ich möchte mit reden {{name}} In",
     "chatLanguageLabel": "Wählen Sie die Sprache der Unterhaltung",
     "chatResumed": "Unterhaltung erfolgreich fortgesetzt.",
@@ -250,6 +257,9 @@
     "messages": "nachrichten",
     "page": "Seite {{current}} von {{total}}"
   },
+  "chatResume": {
+    "resume": "Unterhaltung fortsetzen"
+  },
   "artifact": {
     "close": "Schließen",
     "size": "Größe",

package/src/locales/en.json

@@ -89,6 +89,7 @@
   "errorFetchingSession": "Error during session loading",
   "errorGettingReferralURL": "Error during referral loading",
   "errorReopeningSession": "Error during session reopening",
+  "sessionExpiredReopening": "Session expired, reopening session",
   "ageVerification": "Age verification",
   "ageVerificationText": "To interact with this agent, you must be at least {{minAge}} years old.",
   "ageVerificationSuccess": "Age verified with success.",
@@ -132,7 +133,8 @@
   "widget": {
     "instruct": "Instruct",
     "test": "Test",
-    "sound": "Sound",
+    "sound": "Audio",
+    "soundOff": "Audio off",
     "position": "Position preferences",
     "settings": "Settings",
     "share": "Share",
@@ -144,6 +146,9 @@
     "expertsInTheBoard": "Experts in this board",
     "goToIntegrationsToCustomizeAvatar": "To customize the avatar, go to Share and customize the public page",
     "chatAssistantStatus": "Active • Replies in a few seconds",
+    "agentStatusListening": "listening",
+    "agentStatusSpeaking": "speaking",
+    "agentStatusProcessing": "processing",
     "shareLocation": "Share location",
     "shareLocationHint": "Get answers tailored to where you are",
     "shareLocationAria": "Share location with the assistant",
@@ -154,7 +159,7 @@
     "geocodingFailed": "Could not resolve the address. Try again or search manually.",
     "positionUnavailableManual": "Location unavailable. Please enter it manually.",
     "positionSharingEnabled": "Location shared.",
-    "headerHistory": "Chat history",
+    "headerHistory": "History",
     "headerProfile": "Profile",
     "headerLogin": "Log in",
     "downloadQrCode": "Download QR Code",
@@ -256,6 +261,8 @@
     "images": "images",
     "file": "file",
     "files": "files",
+    "function": "function",
+    "functions": "functions",
     "iWantToTalkToIn": "I want to talk to {{name}} in",
     "chatLanguageLabel": "Choose the conversation language",
     "chatResumed": "Conversation resumed successfully.",
@@ -263,6 +270,9 @@
     "messages": "messages",
     "page": "Page {{current}} of {{total}}"
   },
+  "chatResume": {
+    "resume": "Resume conversation"
+  },
   "artifact": {
     "close": "Close",
     "size": "Size",

package/src/locales/es.json

@@ -87,6 +87,7 @@
   "errorFetchingSession": "Error durante el cargamento de la sesión",
   "errorGettingReferralURL": "Error durante el cargamento del référent",
   "errorReopeningSession": "Error durante el re-abrir la sesión",
+  "sessionExpiredReopening": "Sesión expirada, reabriendo sesión",
   "ageVerification": "Verificación de edad",
   "ageVerificationText": "Para interactuar con este Gemelo, debes tener al menos {{minAge}} años.",
   "ageVerificationSuccess": "Edad verificada con éxito.",
@@ -131,6 +132,7 @@
     "instruct": "Instruir",
     "test": "Probar",
     "sound": "Sonido",
+    "soundOff": "Sonido desactivado",
     "position": "Preferencias de posición",
     "settings": "Ajustes",
     "share": "Compartir",
@@ -142,6 +144,9 @@
     "expertsInTheBoard": "Expertos en este panel",
     "goToIntegrationsToCustomizeAvatar": "Para personalizar el avatar, ve a Compartir y personaliza la página pública",
     "chatAssistantStatus": "Activa • Responde en pocos segundos",
+    "agentStatusListening": "escuchando",
+    "agentStatusSpeaking": "hablando",
+    "agentStatusProcessing": "procesando",
     "shareLocation": "Compartir ubicación",
     "shareLocationHint": "Recibe respuestas adaptadas a dónde estás",
     "shareLocationAria": "Compartir ubicación con el asistente",
@@ -152,7 +157,7 @@
     "geocodingFailed": "No se pudo obtener la dirección. Inténtalo de nuevo o busca manualmente.",
     "positionUnavailableManual": "Ubicación no disponible. Introdúcela manualmente.",
     "positionSharingEnabled": "Ubicación compartida.",
-    "headerHistory": "Historial de chat",
+    "headerHistory": "Historial",
     "headerProfile": "Perfil",
     "headerLogin": "Iniciar sesión",
     "expandToImmersive": "Expandir para vista inmersiva",
@@ -242,6 +247,8 @@
     "images": "imagenes",
     "file": "archivo",
     "files": "archivos",
+    "function": "función",
+    "functions": "funciones",
     "iWantToTalkToIn": "quiero hablar con {{name}} en",
     "chatLanguageLabel": "Elige el idioma de la conversación",
     "chatResumed": "Conversación reanudada correctamente.",
@@ -249,6 +256,9 @@
     "messages": "mensajes",
     "page": "Página {{current}} de {{total}}"
   },
+  "chatResume": {
+    "resume": "Reanudar la conversación"
+  },
   "artifact": {
     "close": "Cerrar",
     "size": "Tamaño",

package/src/locales/fr.json

@@ -86,6 +86,7 @@
   "errorFetchingSession": "Erreur lors du chargement de la session",
   "errorGettingReferralURL": "Erreur lors du chargement du référent",
   "errorReopeningSession": "Erreur lors de la re-ouverture de la session",
+  "sessionExpiredReopening": "Session expirée, réouverture en cours",
   "ageVerification": "Vérification de l'âge",
   "ageVerificationText": "Pour interagir avec ce Agent, vous devez être au minimum {{minAge}} ans.",
   "ageVerificationSuccess": "Âge vérifié avec succès.",
@@ -129,6 +130,7 @@
     "instruct": "Instruire",
     "test": "Tester",
     "sound": "Son",
+    "soundOff": "Son désactivé",
     "position": "Préférences de position",
     "settings": "Paramètres",
     "share": "Partager",
@@ -140,6 +142,9 @@
     "expertsInTheBoard": "Experts dans ce conseil",
     "goToIntegrationsToCustomizeAvatar": "Pour personnaliser l'avatar, allez dans Partager et personnalisez la page publique",
     "chatAssistantStatus": "Actif • Répond en quelques secondes",
+    "agentStatusListening": "à l'écoute",
+    "agentStatusSpeaking": "parle",
+    "agentStatusProcessing": "en traitement",
     "shareLocation": "Partager la position",
     "shareLocationHint": "Obtenez des réponses adaptées à votre position",
     "shareLocationAria": "Partager la position avec l'assistant",
@@ -150,7 +155,7 @@
     "geocodingFailed": "Impossible de déterminer l'adresse. Réessayez ou recherchez manuellement.",
     "positionUnavailableManual": "Position indisponible. Saisissez-la manuellement.",
     "positionSharingEnabled": "Position partagée.",
-    "headerHistory": "Historique de chat",
+    "headerHistory": "Historique",
     "headerProfile": "Profil",
     "headerLogin": "Connexion",
     "downloadQrCode": "Télécharger le QR Code",
@@ -242,6 +247,8 @@
     "images": "images",
     "file": "fichier",
     "files": "fichiers",
+    "function": "fonction",
+    "functions": "fonctions",
     "iWantToTalkToIn": "je veux parler à {{name}} dans",
     "chatLanguageLabel": "Choisissez la langue de la conversation",
     "chatResumed": "Conversation reprise avec succès.",
@@ -249,6 +256,9 @@
     "messages": "messages",
     "page": "Page {{current}} de {{total}}"
   },
+  "chatResume": {
+    "resume": "Reprendre la conversation"
+  },
   "artifact": {
     "close": "Fermer",
     "size": "Taille",

package/src/locales/it.json

@@ -90,6 +90,7 @@
   "errorFetchingSession": "Errore durante il caricamento della sessione",
   "errorGettingReferralURL": "Errore durante il caricamento del riferimento",
   "errorReopeningSession": "Errore durante il riapertura della sessione",
+  "sessionExpiredReopening": "Sessione scaduta, riapertura in corso",
   "ageVerification": "Verifica dell'età",
   "ageVerificationText": "Per interagire con questo agente, devi aver almeno {{minAge}} anni.",
   "ageVerificationSuccess": "Età verificata con successo.",
@@ -132,7 +133,8 @@
   "widget": {
     "instruct": "Istruisci",
     "test": "Prova",
-    "sound": "Suono",
+    "sound": "Audio",
+    "soundOff": "Audio disattivato",
     "position": "Preferenze posizione",
     "settings": "Impostazioni",
     "share": "Condividi",
@@ -144,6 +146,9 @@
     "expertsInTheBoard": "Esperti in questa board",
     "goToIntegrationsToCustomizeAvatar": "Per personalizzare l'avatar, vai a Condividimi e configura la pagina pubblica",
     "chatAssistantStatus": "Attiva • Risponde in pochi secondi",
+    "agentStatusListening": "in ascolto",
+    "agentStatusSpeaking": "sta parlando",
+    "agentStatusProcessing": "in elaborazione",
     "shareLocation": "Condividi posizione",
     "shareLocationHint": "Ricevi risposte in base a dove ti trovi",
     "shareLocationAria": "Condividi la posizione con l'assistente",
@@ -154,7 +159,7 @@
     "geocodingFailed": "Impossibile ottenere l'indirizzo. Riprova o cerca manualmente.",
     "positionUnavailableManual": "Posizione non disponibile. Inseriscila manualmente.",
     "positionSharingEnabled": "Posizione condivisa.",
-    "headerHistory": "Cronologia chat",
+    "headerHistory": "Cronologia",
     "headerProfile": "Profilo",
     "headerLogin": "Accedi",
     "downloadQrCode": "Scarica QR Code",
@@ -258,6 +263,8 @@
     "images": "immagini",
     "file": "file",
     "files": "file",
+    "function": "funzione",
+    "functions": "funzioni",
     "iWantToTalkToIn": "Voglio parlare con {{name}} in",
     "chatLanguageLabel": "Scegli la lingua della conversazione",
     "chatResumed": "Chat ripresa con successo.",
@@ -265,6 +272,9 @@
     "messages": "messaggi",
     "page": "Pagina {{current}} di {{total}}"
   },
+  "chatResume": {
+    "resume": "Riprendi la conversazione"
+  },
   "artifact": {
     "close": "Chiudi",
     "size": "Dimensione",

package/src/styles.css

@@ -4,7 +4,10 @@
 /* Layer order: theme (defaults) < integration (integrationConfig overrides) */
 @layer theme, integration;
 
-/* --- 1. Design system esterno (variabili, reset, token) --- */
+/* --- 1. Design system esterno (variabili, reset, token) ---
+   NOTE: the bundler-style specifier below is intentional for dev/Storybook.
+   Published `dist/styles.css` and `esm/styles.css` are bundled by PostCSS
+   (`postcss-import`) so this import is inlined before publishing. */
 @import url('@memori.ai/ui/dist/memori-ai-ui.css');
 
 /* --- 2. Stili per componente (ordine: componenti UI, poi layout) --- */
@@ -24,6 +27,7 @@
 @import url('./components/CustomGLBModelViewer/ModelViewer.css');
 @import url('./components/SettingsDrawer/SettingsDrawer.css');
 @import url('./components/ChatHistoryDrawer/ChatHistory.css');
+@import url('./components/ChatHistoryDrawer/ChatResumeDrawer.css');
 @import url('./components/ExpertsDrawer/ExpertsDrawer.css');
 @import url('./components/ExportHistoryButton/ExportHistoryButton.css');
 @import url('./components/FeedbackButtons/FeedbackButtons.css');
@@ -40,6 +44,7 @@
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
 @import url('./components/KnownFacts/KnownFacts.css');
 @import url('./components/LoginDrawer/LoginDrawer.css');
+@import url('./components/MobileSessionPanel/MobileSessionPanel.css');
 @import url('./components/VenueWidget/VenueWidget.css');
 @import url('./components/WhyThisAnswer/WhyThisAnswer.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
@@ -76,13 +81,64 @@
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
 }
+.memori.memori-widget.memori-layout-chat,
+.memori.memori-widget.memori-layout-fullpage,
+.memori.memori-widget.memori-layout-zoomed_full_body {
+    /* Portal root for Floating UI menus — do NOT set contain here.
+       Use 100dvh (not height:100% alone): Storybook’s root often has no
+       definite height, and % / flex children do not resolve against min-height. */
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    height: 100vh;
+    height: 100dvh;
+    max-height: 100vh;
+    max-height: 100dvh;
+    flex-direction: column;
+}
 
-/* --- 5. Light mode: colori superficie (prima del base così memori-client #root < body.sb-show-main #root) --- */
-memori-client,
-memori-client #root,
-.memori-widget {
-    --memori-surface-contrast: white;
-    --memori-surface-contrast-inverse: black;
+/*
+ * Layout containment lives on the inner surface so fixed Drawers/Modals stay
+ * clipped to the chat widget, while Select/Popover menus can portal to the
+ * outer .memori-widget (MemoriUIProvider container) without the left-offset bug.
+ */
+.memori-widget__surface {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+}
+
+.memori.memori-widget.memori-layout-chat > .memori-widget__surface,
+.memori.memori-widget.memori-layout-fullpage > .memori-widget__surface,
+.memori.memori-widget.memori-layout-zoomed_full_body > .memori-widget__surface {
+    contain: layout;
+}
+
+/* After inserting .memori-widget__surface, Spin is no longer a direct child of
+   .memori-widget — keep it a stretching flex column so fullpage/chat fill the viewport. */
+.memori-widget > .memori-widget__surface > .memori-spin {
+    display: flex !important;
+    overflow: hidden;
+    width: 100%;
+    height: 100% !important;
+    min-height: 0;
+    flex: 1 1 0% !important;
+    flex-direction: column !important;
+}
+
+.memori-widget > .memori-widget__surface > .memori-spin > .memori-fullpage-content-row,
+.memori-widget > .memori-widget__surface > .memori-spin.memori-chat-layout > .memori-chat-layout--main {
+    height: 100% !important;
+    min-height: 0;
+    flex: 1 1 0% !important;
+}
+
+.memori-widget > .memori-widget__surface > .memori-spin > .memori-fullpage-top-header {
+    flex-shrink: 0;
 }
 
 /* --- 6. Base: brand e tema di default (in layer così integration può sovrascrivere --memori-primary) --- */
@@ -99,6 +155,9 @@ memori-client #root,
         --memori-primary-color: rgb(var(--memori-primary-rgb, 130 70 175));
         --memori-primary: var(--memori-primary-color);
         --memori-layout-max-width: 1280px;
+        /* Shared conversation axis (message list, empty state, input) */
+        --memori-conversation-max-width: 48rem; /* 768px */
+        --memori-conversation-inline-padding: var(--memori-spacing-md);
         font-family: var(--memori-font-family, 'Lexend Deca', sans-serif);
         font-size: var(--memori-text-size-base);
     }
@@ -121,8 +180,9 @@ memori-client #root,
     memori-client[data-theme='dark'],
     .memori-widget[data-theme='dark'] {
         --memori-primary: var(--memori-primary-hover);
-        --memori-surface-contrast: black;
-        --memori-surface-contrast-inverse: white;
+        /* Align with @memori.ai/ui: contrast = ink, inverse = surface */
+        --memori-surface-contrast: #fff;
+        --memori-surface-contrast-inverse: #000;
     }
 }
 
@@ -139,16 +199,41 @@ memori-client #root,
     );
 } */
 
-/* --- 10. Utility responsive --- */
+/* --- 10. HIDDEN_CHAT / WEBSITE_ASSISTANT tooltip labels ---
+ * Both layouts park their UI in position:fixed children, so .memori-widget
+ * (MemoriUIProvider portal root) often collapses to a near-zero in-flow box.
+ * Base UI tooltips position with position:absolute inside that root, so the
+ * popup shrink-to-fits to a tiny width and overflow-wrap:anywhere (from
+ * @memori.ai/ui) stacks each letter vertically. Force content-sized popups. */
+.memori-widget.memori-layout-hidden_chat .memori-tooltip__popup,
+.memori-widget.memori-layout-website_assistant .memori-tooltip__popup {
+    width: max-content;
+    max-width: min(20rem, calc(100vw - 2rem));
+    overflow-wrap: break-word;
+    text-orientation: mixed;
+    word-break: normal;
+    writing-mode: horizontal-tb;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-tooltip__surface,
+.memori-widget.memori-layout-website_assistant .memori-tooltip__surface {
+    max-width: none;
+}
+
+/* --- 11. Utility responsive --- */
 @media (max-width: 768px) {
     .mobile-hidden {
         display: none;
     }
 }
 
-/* Keep toast feedback below the header actions area. */
+/* Keep toast feedback below the header actions area.
+   Fixed width — do not set left+right together (that stretches full-bleed). */
 .memori-alert-viewport.memori-alert-viewport--top-end {
     top: 4.75rem !important;
+    left: auto !important;
+    width: 300px !important;
+    max-width: calc(100vw - 2 * var(--memori-spacing-sm));
 }
 
 @media (max-width: 768px) {
@@ -156,6 +241,7 @@ memori-client #root,
         top: auto !important;
         right: var(--memori-spacing-sm) !important;
         bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
-        left: var(--memori-spacing-sm) !important;
+        left: auto !important;
+        width: min(300px, calc(100vw - 2 * var(--memori-spacing-sm))) !important;
     }
 }

package/src/types/integration.test.ts

@@ -0,0 +1,32 @@
+import {
+  is3dAvatarWithUrl,
+  usesRpmAvatarView,
+} from './integration';
+
+describe('integration avatar helpers', () => {
+  const avatarURL = 'https://example.com/avatar.glb';
+
+  describe('is3dAvatarWithUrl', () => {
+    it('returns true for avatar-configurator with avatarURL', () => {
+      expect(is3dAvatarWithUrl('avatar-configurator', avatarURL)).toBe(true);
+    });
+
+    it('returns false for avatar-configurator without avatarURL', () => {
+      expect(is3dAvatarWithUrl('avatar-configurator', undefined)).toBe(false);
+    });
+  });
+
+  describe('usesRpmAvatarView', () => {
+    it('returns true for avatar-configurator', () => {
+      expect(usesRpmAvatarView('avatar-configurator')).toBe(true);
+    });
+
+    it('returns true for readyplayerme-full', () => {
+      expect(usesRpmAvatarView('readyplayerme-full')).toBe(true);
+    });
+
+    it('returns false for customglb', () => {
+      expect(usesRpmAvatarView('customglb')).toBe(false);
+    });
+  });
+});