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

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

@@ -1,5 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders Avatar with avatar-configurator like readyplayerme-full 1`] = `
+<div>
+  <div
+    class="memori--avatar-wrapper memori--avatar-avatar-configurator"
+  >
+    <div
+      class="memori--blob-container"
+    >
+      <div
+        class="memori-blob"
+      >
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="memori--avatar-toggle"
+  >
+    <button
+      aria-label="hide"
+      class="memori-button memori-button--ghost memori-button--md"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="memori-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="lucide lucide-eye-off"
+          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="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+          />
+          <path
+            d="M14.084 14.158a3 3 0 0 1-4.242-4.242"
+          />
+          <path
+            d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+          />
+          <path
+            d="m2 2 20 20"
+          />
+        </svg>
+      </span>
+      <span
+        class="memori-button__content"
+      >
+        <span
+          class="memori--avatar-toggle-text"
+        >
+          hide
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Avatar with avatar-configurator on totem layout unchanged 1`] = `
+<div>
+  <div
+    class="memori--avatar-wrapper memori--avatar-avatar-configurator"
+  >
+    <div
+      class="memori--blob-container"
+    >
+      <div
+        class="memori-blob"
+      >
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+        <div
+          class="mainDiv"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="memori--avatar-toggle"
+  >
+    <button
+      aria-label="hide"
+      class="memori-button memori-button--ghost memori-button--md"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="memori-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="lucide lucide-eye-off"
+          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="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+          />
+          <path
+            d="M14.084 14.158a3 3 0 0 1-4.242-4.242"
+          />
+          <path
+            d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+          />
+          <path
+            d="m2 2 20 20"
+          />
+        </svg>
+      </span>
+      <span
+        class="memori-button__content"
+      >
+        <span
+          class="memori--avatar-toggle-text"
+        >
+          hide
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders Avatar with blob and avatar in blob unchanged 1`] = `
 <div>
   <div

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

@@ -3,10 +3,10 @@
 exports[`renders BlockedMemoriBadge for not enough credits unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
+    class="memori-tooltip blocked-memori-badge--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r9:"
     >
       <div
@@ -47,10 +47,10 @@ exports[`renders BlockedMemoriBadge for not enough credits unchanged 1`] = `
 exports[`renders BlockedMemoriBadge unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
+    class="memori-tooltip blocked-memori-badge--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r1:"
     >
       <div
@@ -91,10 +91,10 @@ exports[`renders BlockedMemoriBadge unchanged 1`] = `
 exports[`renders BlockedMemoriBadge with giver info unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
+    class="memori-tooltip blocked-memori-badge--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r3:"
     >
       <div
@@ -135,10 +135,10 @@ exports[`renders BlockedMemoriBadge with giver info unchanged 1`] = `
 exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
+    class="memori-tooltip blocked-memori-badge--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r7:"
     >
       <div
@@ -179,10 +179,10 @@ exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
 exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
+    class="memori-tooltip blocked-memori-badge--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r5:"
     >
       <div

package/src/components/Chat/Chat.css

@@ -6,6 +6,25 @@
     flex-direction: column;
 }
 
+/**
+ * Shared conversation axis for CHAT + FULLPAGE:
+ * message list, empty/start state and input share one max-width and inline padding.
+ * Children must not set their own column max-width / margin-inline.
+ */
+.memori-conversation-column {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: var(--memori-conversation-max-width, 48rem);
+    height: 100%;
+    min-height: 0;
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    flex-direction: column;
+    margin-inline: auto;
+    padding-inline: var(--memori-conversation-inline-padding, var(--memori-spacing-md));
+}
+
 @media (max-width: 768px) {
     .memori-chat--wrapper.chat-focused {
         padding-bottom: 0;
@@ -18,54 +37,123 @@
     width: 100%;
     height: calc(100% - 50px);
     flex: 1;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-box) var(--memori-radius-box) 0 0;
     margin-bottom: 1rem;
     background-color: var(--memori-secondary-background);
 }
 
+.memori-chat--history:has(.memori-chat--content--has-global-background) {
+    background-color: transparent;
+}
+
 /* Adjust chat history when textarea is expanded */
 .memori-chat-wrapper--expanded .memori-chat--history {
     margin-bottom: var(--memori-spacing-sm);
 }
 
-/* Solo widget layout CHAT: area messaggi a card */
+.memori-chat--history.memori-chat--history-touch {
+    height: 80% !important;
+    padding: 0;
+}
+
+.memori-chat--content {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex: 1;
+    flex-direction: column;
+    /* background-color: var(--memori-secondary-background); */
+    /* padding: 2rem var(--memori-spacing-sm); */
+    /* mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%); */
+    overflow-y: auto;
+    scroll-behavior: smooth;
+}
+
+/* Conversation-column overrides sit between base and layout-scoped rules. */
+.memori-conversation-column .memori-chat--wrapper,
+.memori-conversation-column .memori-chat--history,
+.memori-conversation-column .memori-chat--content,
+.memori-conversation-column .memori-chat-inputs-wrapper,
+.memori-conversation-column .memori-chat-inputs,
+.memori-conversation-column .memori-chat-inputs--ai-note,
+.memori-conversation-column .memori--start-panel,
+.memori-conversation-column .memori-chat-layout--body,
+.memori-conversation-column .memori-chat-layout--start-shell,
+.memori-conversation-column .memori-chat-layout--start-panel-wrap {
+    width: 100%;
+    max-width: none;
+    margin-inline: 0;
+}
+
+.memori-conversation-column .memori-chat--content {
+    padding-inline: 0;
+}
+
+.memori-conversation-column .memori-chat-inputs-wrapper {
+    padding-inline: 0;
+}
+
+/* Solo widget layout CHAT: area messaggi a card — top radius only;
+   bottom radius lives on the input bar so the panel reads as one unit */
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--history {
+    height: 100%;
     min-height: 0;
     padding: 0;
-    border-radius: 12px;
-    margin: 0.5rem 0 1rem;
-    background-color: transparent;
+    border-radius: 0;
+    margin: 0;
+    background-color: var(--memori-secondary-background);
     box-shadow: none;
 }
 
+.memori-widget.memori-layout-chat
+    .memori-chat-layout--controls
+    .memori-chat--history:has(.memori-chat--content--has-global-background) {
+    background-color: transparent;
+}
+
 .memori-widget.memori-layout-chat .memori-widget {
     padding: 0;
 }
 
-.memori-widget.memori-layout-chat .memori-chat--bubble {
-    background-color: var(--memori-secondary-background);
+.memori-widget.memori-layout-chat .memori-chat--bubble:not(.memori-chat--user-bubble) {
+    border: none;
+    /* background-color: var(--memori-secondary-background); */
 }
 
 .memori-widget.memori-layout-chat .memori-media-item--document {
     background-color: var(--memori-secondary-background);
 }
 
-.memori-chat--history.memori-chat--history-touch {
-    height: 80% !important;
-    padding: 0;
+.memori-chat--content--has-global-background {
+    background-color: transparent;
 }
 
-.memori-chat--content {
+/* Global background image lives on the chat history area (not the whole layout),
+   which is the messages viewport and does not scroll: the image therefore stays
+   put while messages scroll over it. Pseudo-element keeps blur off the messages. */
+.memori-chat--history--has-global-background {
+    isolation: isolate;
+}
+
+.memori-chat--history--has-global-background::before {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #eee;
+    background-image: var(--memori-chat-global-background);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    content: '';
+    pointer-events: none;
+}
+
+.memori-chat--history--has-global-background > * {
     position: relative;
-    display: flex;
-    height: 100%;
-    flex: 1;
-    flex-direction: column;
-    /* background-color: var(--memori-secondary-background); */
-    /* padding: 2rem var(--memori-spacing-sm); */
-    /* mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%); */
-    overflow-y: auto;
-    scroll-behavior: smooth;
+    z-index: 1;
 }
 
 .memori-chat--content.memori-chat--content-touch {

package/src/components/Chat/Chat.tsx

@@ -30,6 +30,7 @@ import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
 import { FileText as DocumentIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Tooltip, Modal } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import {
   maxDocumentsPerMessage,
   maxDocumentContentLength,
@@ -119,6 +120,12 @@ export interface Props {
   /** Max characters in chat textarea; shows counter and enforces paste + existing text does not exceed this limit. */
   maxTextareaCharacters?: number;
   /** Max attachments (docs + images) per message. */
+  /** Integration global background image URL applied to `.memori-chat--content`. */
+  globalBackground?: string;
+  /** Optional branding node for the conversation footer row. */
+  footerBrand?: React.ReactNode;
+  /** When false, hides the AI disclaimer in the footer. */
+  showAiGeneratedNote?: boolean;
 }
 
 type MessageWithLlmUsage = Message & { llmUsage?: LlmUsageOnLine };
@@ -179,6 +186,9 @@ const Chat: React.FC<Props> = ({
   showFunctionCache = false,
   maxTotalMessagePayload,
   maxTextareaCharacters,
+  globalBackground,
+  footerBrand,
+  showAiGeneratedNote = true,
 }) => {
   const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -186,6 +196,7 @@ const Chat: React.FC<Props> = ({
     useState<UsageBadgeModalState | null>(null);
   const chatWrapperRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const locale = (translateTo || memori.culture || 'it-IT').replace('_', '-');
 
   const llmUsageLabels = useMemo<LlmUsageLabels>(
@@ -411,14 +422,27 @@ const Chat: React.FC<Props> = ({
           </span>
         </div>
       )}
+      <div
+        className={cx({ 'memori-conversation-column': showInputs })}
+        style={showInputs ? undefined : { display: 'contents' }}
+      >
       <div
         className={cx('memori-chat--history', {
           'memori-chat--history-touch': hasTouchscreen(),
+          'memori-chat--history--has-global-background': !!globalBackground,
         })}
+        style={
+          globalBackground
+            ? ({
+                ['--memori-chat-global-background' as string]: `url(${globalBackground})`,
+              } as React.CSSProperties)
+            : undefined
+        }
       >
         <div
           className={cx('memori-chat--content', {
             'memori-chat--content-touch': hasTouchscreen(),
+            'memori-chat--content--has-global-background': !!globalBackground,
           })}
         >
           <div
@@ -621,10 +645,14 @@ const Chat: React.FC<Props> = ({
           maxDocumentContentLength={maxDocumentContentLength}
           pasteAsCardLineThreshold={pasteAsCardLineThreshold}
           pasteAsCardCharThreshold={pasteAsCardCharThreshold}
+          showAiGeneratedNote={showAiGeneratedNote}
+          footerBrand={footerBrand}
         />
       )}
+      </div>
 
       <Modal
+        container={surfaceEl ?? undefined}
         open={!!activeUsageBadge}
         onClose={() => setActiveUsageBadge(null)}
         title={