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

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,24 @@
     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;
+}
+
 @media (max-width: 768px) {
     .memori-chat--wrapper.chat-focused {
         padding-bottom: 0;
@@ -18,54 +36,145 @@
     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;
+    scrollbar-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 55%, transparent) transparent;
+    scrollbar-width: thin;
+}
+
+.memori-chat--content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.memori-chat--content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.memori-chat--content::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 45%, transparent);
+}
+
+.memori-chat--content::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 60%, transparent);
+}
+
+/* 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-top: var(--memori-spacing-lg);
+    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: '';
+    filter: blur(5px);
+    pointer-events: none;
+    transform: scale(1.06);
+}
+
+.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 {
@@ -311,39 +420,33 @@
     margin: 0;
 }
 
-/* Dark theme: header controls — white outline and icon (incl. share + position popover) */
+/* Dark theme: header controls — white outline and icon (incl. share + position popover).
+   Soft-active / recording IconButtons keep primary/error chrome from IconButton.css. */
 .memori-widget.memori-layout-chat[data-theme='dark']
     .memori-header
-    .memori-button:not(:disabled):not(.memori-button--disabled),
+    .memori-button:not(.memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 [data-theme='dark']
     .memori-widget.memori-layout-chat
     .memori-header
-    .memori-button:not(:disabled):not(.memori-button--disabled) {
+    .memori-button:not(.memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled) {
     border: var(--memori-border) solid #fff;
     color: #fff;
 }
 
 .memori-widget.memori-layout-chat[data-theme='dark']
     .memori-header
-    .memori-button:hover:not(:disabled, .memori-button--disabled),
+    .memori-button:hover:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 .memori-widget.memori-layout-chat[data-theme='dark']
     .memori-header
-    .memori-button:active:not(:disabled, .memori-button--disabled),
-.memori-widget.memori-layout-chat[data-theme='dark']
-    .memori-header
-    .memori-button.memori-button--active:not(:disabled, .memori-button--disabled),
-[data-theme='dark']
-    .memori-widget.memori-layout-chat
-    .memori-header
-    .memori-button:hover:not(:disabled, .memori-button--disabled),
+    .memori-button:active:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 [data-theme='dark']
     .memori-widget.memori-layout-chat
     .memori-header
-    .memori-button:active:not(:disabled, .memori-button--disabled),
+    .memori-button:hover:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled),
 [data-theme='dark']
     .memori-widget.memori-layout-chat
     .memori-header
-    .memori-button.memori-button--active:not(:disabled, .memori-button--disabled) {
+    .memori-button:active:not(.memori-icon-button, .memori-icon-button--active, .memori-icon-button--recording, :disabled, .memori-button--disabled) {
     border: var(--memori-border) solid #fff;
     color: #fff;
 }

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>(
@@ -229,8 +240,19 @@ const Chat: React.FC<Props> = ({
   const scrollToBottom = useCallback(() => {
     if (isHistoryView) return;
     setTimeout(() => {
-      let userMsgs = document.querySelectorAll('.memori-chat-scroll-item');
-      userMsgs[userMsgs.length - 1]?.scrollIntoView?.();
+      const userMsgs = document.querySelectorAll('.memori-chat-scroll-item');
+      const last = userMsgs[userMsgs.length - 1] as HTMLElement | undefined;
+      if (!last) return;
+      // Scroll only the message list — never scrollIntoView on ancestors
+      // (layout chrome with overflow can shift and clip the header).
+      const content = last.closest(
+        '.memori-chat--content'
+      ) as HTMLElement | null;
+      if (content) {
+        content.scrollTop = content.scrollHeight;
+        return;
+      }
+      last.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
     }, 200);
   }, [isHistoryView]);
 
@@ -411,14 +433,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
@@ -487,28 +522,9 @@ const Chat: React.FC<Props> = ({
                   showReasoning={showReasoning}
                   usageHtml={usageHtmlByIndex[index]}
                   isChatlogPanel={isChatlogPanel}
+                  showDates={showDates}
                 />
 
-                {showDates && !!message.timestamp && !message.fromUser && (
-                  <small
-                    className={`memori-chat--timestamp ${
-                      message.fromUser ? 'text-right' : 'text-left'
-                    }`}
-                  >
-                    {new Intl.DateTimeFormat('it', {
-                      hour: '2-digit',
-                      minute: '2-digit',
-                      second: '2-digit',
-                    }).format(
-                      new Date(
-                        message.timestamp.endsWith('Z')
-                          ? message.timestamp
-                          : `${message.timestamp}Z`
-                      )
-                    )}
-                  </small>
-                )}
-
                 {showContextPerLine &&
                   !!Object.keys(message.contextVars ?? {}).length && (
                     <div className="memori-chat--context-vars">
@@ -602,6 +618,7 @@ const Chat: React.FC<Props> = ({
           setSendOnEnter={setSendOnEnter}
           client={client}
           sessionID={sessionID}
+          baseUrl={baseUrl}
           showUpload={showUpload}
           attachmentsMenuOpen={attachmentsMenuOpen}
           setAttachmentsMenuOpen={setAttachmentsMenuOpen}
@@ -621,10 +638,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={