@memori.ai/memori-react 8.45.6 → 8.46.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 
 
+## [8.46.1](https://github.com/memori-ai/memori-react/compare/v8.46.0...v8.46.1) (2026-10-05)
+
+
+### Features
+
+* **chat:** enhance chat UI with new styles and markdown rendering improvements ([30e9aac](https://github.com/memori-ai/memori-react/commit/30e9aacf6f4dfc79b5c102ac4973893e383280ee))
+
+
+### Maintenance
+
+* update dompurify to version 3.4.16 ([c0b4aa5](https://github.com/memori-ai/memori-react/commit/c0b4aa568b0f29a11afdc2cf36efe9215205ea9b))
+
+## [8.46.0](https://github.com/memori-ai/memori-react/compare/v8.45.6...v8.46.0) (2026-09-29)
+
+
+### Bug Fixes
+
+* **nats:** avoid re-applying stale dialog state on tab resume ([7336d45](https://github.com/memori-ai/memori-react/commit/7336d4517ca0b9e68d348188b3903005bd0356fc))
+
 ## [8.45.6](https://github.com/memori-ai/memori-react/compare/v8.45.5...v8.45.6) (2026-09-28)
 
 

package/dist/components/ChatBubble/ChatBubble.css

@@ -126,6 +126,100 @@
     margin-bottom: 0;
 }
 
+.memori-chat--bubble strong,
+.memori-chat--bubble b {
+    font-weight: 700;
+}
+
+.memori-chat--bubble em,
+.memori-chat--bubble i {
+    font-style: italic;
+}
+
+.memori-chat--bubble h1,
+.memori-chat--bubble h2,
+.memori-chat--bubble h3,
+.memori-chat--bubble h4,
+.memori-chat--bubble h5,
+.memori-chat--bubble h6 {
+    margin: 0.75em 0 0.35em;
+    color: inherit;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+.memori-chat--bubble h1 {
+    font-size: 1.25em;
+}
+
+.memori-chat--bubble h2 {
+    font-size: 1.15em;
+}
+
+.memori-chat--bubble h3 {
+    font-size: 1.05em;
+}
+
+.memori-chat--bubble h1:first-child,
+.memori-chat--bubble h2:first-child,
+.memori-chat--bubble h3:first-child,
+.memori-chat--bubble h4:first-child,
+.memori-chat--bubble h5:first-child,
+.memori-chat--bubble h6:first-child {
+    margin-top: 0;
+}
+
+.memori-chat--bubble blockquote {
+    padding-left: 0.75em;
+    border-left: 3px solid rgba(20, 21, 21, 0.25);
+    margin: 0.65em 0;
+}
+
+.memori-chat--bubble.memori-chat--user-bubble blockquote {
+    border-left-color: rgba(255, 255, 255, 0.55);
+}
+
+.memori-chat--bubble code {
+    padding: 0.1em 0.35em;
+    border-radius: 4px;
+    background: rgba(20, 21, 21, 0.06);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 0.9em;
+}
+
+.memori-chat--bubble pre {
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 10px 12px;
+    border-radius: 8px;
+    margin: 0.65em 0;
+    background: #161b22;
+    color: #e6edf3;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 0.85em;
+    line-height: 1.45;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.memori-chat--bubble pre code {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font-size: inherit;
+}
+
+.memori-chat--bubble.memori-chat--user-bubble code {
+    background: rgba(255, 255, 255, 0.18);
+    color: inherit;
+}
+
+.memori-chat--bubble.memori-chat--user-bubble pre code {
+    background: transparent;
+    color: inherit;
+}
+
 .memori-chat--bubble ul,
 .memori-chat--bubble ol {
     padding-left: 1rem;
@@ -154,15 +248,6 @@
     color: var(--memori-primary-text);
 }
 
-.memori-chat--bubble h1,
-.memori-chat--bubble h2,
-.memori-chat--bubble h3,
-.memori-chat--bubble h4,
-.memori-chat--bubble h5,
-.memori-chat--bubble h6 {
-    color: inherit;
-}
-
 @media (max-width: 600px) {
     .memori-chat--bubble p {
         font-size: 12px;

package/dist/components/ChatInputs/ChatInputs.css

@@ -6,7 +6,8 @@
     padding: 0;
     padding-bottom: 1.5rem;
     margin: 0;
-    /* background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); */
+    /* Solid surface so messages scrolling under the sticky composer stay hidden. */
+    background-color: var(--memori-chat-inputs-surface, #fff);
 }
 
 .memori-chat-inputs {
@@ -148,8 +149,8 @@
     padding: 4px 12px;
     border-radius: 10px;
     margin-top: 2px;
-    background-color: var(--memori-inner-bg, transparent);
-    color: rgba(0, 0, 0, 0.6);
+    background-color: var(--memori-chat-inputs-surface, #fff);
+    color: var(--memori-chat-inputs-disclaimer, rgba(0, 0, 0, 0.6));
     font-size: 12px;
     line-height: 1.5;
     text-align: center;
@@ -307,14 +308,15 @@
     justify-content: center;
     padding: 8px 60px;
     margin-top: -4px;
-    color: rgba(0, 0, 0, 0.6);
+    background-color: var(--memori-chat-inputs-surface, #fff);
+    color: var(--memori-chat-inputs-disclaimer, rgba(0, 0, 0, 0.6));
     font-size: 12px;
     line-height: 1.5;
     text-align: center;
 }
 
 .memori-chat-inputs--disclaimer a {
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--memori-chat-inputs-disclaimer-link, rgba(0, 0, 0, 0.8));
     cursor: pointer;
     text-decoration: underline;
 }

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css

@@ -24,6 +24,33 @@
     pointer-events: none;
 }
 
+/*
+ * Side panel only covers the right half, so the chat column keeps wheel/touch scroll.
+ * 50% matches widthLg in ArtifactDrawer.tsx; the Drawer sets its width vars on the panel, not here.
+ */
+@media (min-width: 1025px) {
+    .memori-artifact-panel-drawer .memori-drawer--container {
+        left: auto;
+        overflow: hidden;
+        width: 50%;
+        pointer-events: none;
+    }
+
+    .memori-artifact-panel-drawer .memori-drawer--container-scrollable {
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        justify-content: flex-end;
+        pointer-events: none;
+    }
+
+    .memori-artifact-panel-drawer .memori-drawer--panel {
+        width: 100%;
+        max-width: none;
+        pointer-events: auto;
+    }
+}
+
 /* Main Drawer Container (Mobile Only) */
 .memori-artifact-drawer {
     position: relative;

package/dist/components/MemoriWidget/MemoriWidget.js

@@ -87,6 +87,7 @@ function readCorrelationID(response) {
     const value = response.correlationID;
     return typeof value === 'string' && value.length > 0 ? value : undefined;
 }
+const MAX_WAIT_FOR_PREVIOUS_RETRIES = 30;
 const typeMessage = (message, waitForPrevious = true, hidden = false, typingText, useLoaderTextAsMsg = false, hasBatchQueued = false) => {
     const e = new CustomEvent('MemoriTextEntered', {
         detail: {
@@ -502,7 +503,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             if (response.resultCode === 0 && correlationID) {
                 registerPendingEnterText(correlationID, {
                     msg,
-                    stateBeforeRequest: (0, dialogStateCatchUp_1.dialogStateFingerprint)(currentDialogState),
+                    stateBeforeRequest: engineStateFingerprintRef.current,
                     text,
                     media,
                     translate,
@@ -556,7 +557,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             setMemoriTyping(false);
         }
     };
-    const translateDialogState = async (state, userLang, msg, avoidPushingMessage = false) => {
+    const translateDialogState = async (state, userLang, msg, avoidPushingMessage = false, engineState = state) => {
         var _a, _b, _c, _d, _f, _g;
         const emission = (_a = state === null || state === void 0 ? void 0 : state.emission) !== null && _a !== void 0 ? _a : currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission;
         let translatedState = { ...state };
@@ -652,7 +653,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                 };
             }
         }
-        setCurrentDialogState(translatedState);
+        setCurrentDialogState(translatedState, engineState);
         if (!avoidPushingMessage && translatedMsg) {
             pushMessage(translatedMsg);
         }
@@ -730,8 +731,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         setSessionIdState(id);
     };
     const [currentDialogState, _setCurrentDialogState] = (0, react_1.useState)();
-    const setCurrentDialogState = (state) => {
+    const engineStateFingerprintRef = (0, react_1.useRef)('');
+    const setCurrentDialogState = (state, engineState = state) => {
         var _a, _b;
+        engineStateFingerprintRef.current = (0, dialogStateCatchUp_1.dialogStateFingerprint)(engineState);
         _setCurrentDialogState(state);
         if (onStateChange) {
             onStateChange(state);
@@ -1286,8 +1289,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         if (userLang.toLowerCase() !== language.toLowerCase() &&
             emission &&
             isMultilanguageEnabled) {
-            currentState.emission = emission;
-            translateDialogState(currentState, userLang, msg).then(ts => {
+            translateDialogState({ ...currentState, emission }, userLang, msg, false, currentState).then(ts => {
                 const text = ts.translatedEmission || ts.emission;
                 if (text && shouldPlayAudio(text)) {
                     handleSpeak(text);
@@ -1298,7 +1300,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             setCurrentDialogState({
                 ...currentState,
                 emission,
-            });
+            }, currentState);
             if (emission) {
                 pushMessage({
                     text: emission,
@@ -1421,7 +1423,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             reject(new Error('NATS enter-text response timeout'));
         }, timeoutMs);
         registerPendingEnterText(correlationID, {
-            stateBeforeRequest: (0, dialogStateCatchUp_1.dialogStateFingerprint)(currentDialogState),
+            stateBeforeRequest: engineStateFingerprintRef.current,
             waitForResponse: {
                 resolve: event => {
                     clearTimeout(timeoutId);
@@ -1434,7 +1436,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                 timeoutId,
             },
         });
-    }), [registerPendingEnterText, clearEnterTextPending, currentDialogState]);
+    }), [registerPendingEnterText, clearEnterTextPending]);
     const catchUpPendingEnterText = (0, react_1.useCallback)(async () => {
         if (!sessionId || pendingEnterTextRef.current.size === 0)
             return;
@@ -1455,7 +1457,9 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                 });
                 return;
             }
-            if (!(0, dialogStateCatchUp_1.isEnterTextCatchUpReady)(pending.stateBeforeRequest, currentState)) {
+            if (!(0, dialogStateCatchUp_1.isEnterTextCatchUpReady)(pending.stateBeforeRequest, currentState) ||
+                (0, dialogStateCatchUp_1.dialogStateFingerprint)(currentState) ===
+                    engineStateFingerprintRef.current) {
                 console.info('[NATS] catch-up: pending turn has not completed yet');
                 return;
             }
@@ -1585,6 +1589,15 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     '--memori-inner-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
                         ? '0, 0, 0'
                         : '255, 255, 255'}, ${(_y = integrationConfig.innerBgAlpha) !== null && _y !== void 0 ? _y : 0.4})`,
+                    '--memori-chat-inputs-surface': integrationConfig.innerBgColor === 'dark'
+                        ? '#141414'
+                        : '#ffffff',
+                    '--memori-chat-inputs-disclaimer': integrationConfig.innerBgColor === 'dark'
+                        ? 'rgba(255, 255, 255, 0.72)'
+                        : 'rgba(0, 0, 0, 0.6)',
+                    '--memori-chat-inputs-disclaimer-link': integrationConfig.innerBgColor === 'dark'
+                        ? 'rgba(255, 255, 255, 0.88)'
+                        : 'rgba(0, 0, 0, 0.8)',
                     '--memori-inner-content-pad': '1.5rem',
                     '--memori-nav-bg-image': 'none',
                     '--memori-nav-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
@@ -1650,7 +1663,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         ttsStop();
         sendMessage(text, undefined, undefined, false, translatedText);
     };
-    const memoriTextEnteredHandler = (0, react_1.useCallback)((e) => {
+    const memoriTextEnteredHandler = (e, retries = 0) => {
         if (disableTextEnteredEvents) {
             return;
         }
@@ -1658,9 +1671,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         if (text) {
             if (waitForPrevious &&
                 !speakerMuted &&
-                (memoriSpeaking || !!memoriTyping)) {
+                (memoriSpeaking || pendingEnterTextRef.current.size > 0) &&
+                retries < MAX_WAIT_FOR_PREVIOUS_RETRIES) {
                 setTimeout(() => {
-                    memoriTextEnteredHandler(e);
+                    memoriTextEnteredHandlerRef.current(e, retries + 1);
                 }, 1000);
             }
             else {
@@ -1668,25 +1682,18 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                 sendMessage(text, undefined, undefined, undefined, undefined, hidden, typingText, useLoaderTextAsMsg, hasBatchQueued);
             }
         }
-    }, [
-        sessionId,
-        isPlayingAudio,
-        memoriTyping,
-        userLang,
-        disableTextEnteredEvents,
-        speakerMuted,
-    ]);
+    };
+    const memoriTextEnteredHandlerRef = (0, react_1.useRef)(memoriTextEnteredHandler);
+    memoriTextEnteredHandlerRef.current = memoriTextEnteredHandler;
     (0, react_1.useEffect)(() => {
-        if (!disableTextEnteredEvents) {
-            document.addEventListener('MemoriTextEntered', memoriTextEnteredHandler);
-        }
-        else {
-            document.removeEventListener('MemoriTextEntered', memoriTextEnteredHandler);
-        }
+        if (disableTextEnteredEvents)
+            return;
+        const listener = (e) => memoriTextEnteredHandlerRef.current(e);
+        document.addEventListener('MemoriTextEntered', listener);
         return () => {
-            document.removeEventListener('MemoriTextEntered', memoriTextEnteredHandler);
+            document.removeEventListener('MemoriTextEntered', listener);
         };
-    }, [sessionId, userLang, disableTextEnteredEvents]);
+    }, [disableTextEnteredEvents]);
     const onClickStart = (0, react_1.useCallback)(async (session, initialSessionExpired = false, chatLog, targetSessionID) => {
         var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         const sessionID = chatLog ? undefined : (session === null || session === void 0 ? void 0 : session.sessionID) || sessionId;