@memori.ai/memori-react 8.46.0 → 8.46.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 
 
+## [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)
 
 

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

@@ -1589,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'