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

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.0-alpha.10";
+export declare const version = "9.0.0-alpha.13";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '9.0.0-alpha.10';
+export const version = '9.0.0-alpha.13';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-alpha.10",
+  "version": "9.0.0-alpha.13",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -308,7 +308,7 @@
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.5.1",
-    "dompurify": "^3.4.12",
+    "dompurify": "^3.4.13",
     "ellipsed": "1.6.0",
     "i18next": "22.0.6",
     "katex": "^0.16.11",

package/src/__snapshots__/index.test.tsx.snap

@@ -2,16 +2,6 @@
 
 exports[`renders client 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -27,16 +17,6 @@ exports[`renders client 1`] = `
 
 exports[`renders client with all the props 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -52,16 +32,6 @@ exports[`renders client with all the props 1`] = `
 
 exports[`renders client with audio disabled 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -77,16 +47,6 @@ exports[`renders client with audio disabled 1`] = `
 
 exports[`renders client with whiteListedDomains on allowed domains 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -102,16 +62,6 @@ exports[`renders client with whiteListedDomains on allowed domains 1`] = `
 
 exports[`renders client with whiteListedDomains on not allowed domains 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >

package/src/components/Chat/Chat.css

@@ -67,6 +67,25 @@
     /* 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. */

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

@@ -506,7 +506,7 @@ exports[`renders Chat unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -1494,7 +1494,7 @@ exports[`renders Chat with context vars unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -2476,7 +2476,7 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -3414,7 +3414,7 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -4396,7 +4396,7 @@ exports[`renders Chat with dates unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -5394,7 +5394,7 @@ exports[`renders Chat with hints unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -6539,7 +6539,7 @@ exports[`renders Chat with media unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/en/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai/en"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link Memori Srl"
@@ -7617,7 +7617,7 @@ exports[`renders Chat with memori typing unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -8628,7 +8628,7 @@ exports[`renders Chat with message consumption unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"
@@ -9747,7 +9747,7 @@ exports[`renders Chat with user unchanged 1`] = `
                     >
                       <a
                         class="memori-media-item--link memori-media-item--document-link"
-                        href="https://memori.ai/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                        href="https://memori.ai"
                         rel="noopener noreferrer"
                         target="_blank"
                         title="Link"

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -483,4 +483,28 @@ it('renders ChatBubble with reasoning and output and markdown unchanged', () =>
     />
   );
   expect(container).toMatchSnapshot();
-});
+});
+
+it('uses the adjacent attachment link for document media', () => {
+  const attachmentUrl = 'https://assets.example.com/report.docx';
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: false,
+        initial: false,
+        text: [
+          '<document_attachment filename="report.docx" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document">',
+          '</document_attachment>',
+          `<attachment_link>${attachmentUrl}</attachment_link>`,
+        ].join('\n'),
+      }}
+    />
+  );
+
+  expect(
+    container.querySelector(`a[href="${attachmentUrl}"]`)
+  ).toBeInTheDocument();
+});

package/src/components/ChatBubble/ChatBubble.tsx

@@ -25,7 +25,11 @@ import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@memori.ai/ui';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
-import { stripHTML, stripOutputTags } from '../../helpers/utils';
+import {
+  parseDocumentAttachmentsFromMessage,
+  stripHTML,
+  stripOutputTags,
+} from '../../helpers/utils';
 import {
   renderMsg,
   sanitizeMsg,
@@ -454,32 +458,21 @@ const ChatBubble: React.FC<Props> = ({
             (m.mimeType === 'text/html' && !!m.url)
           )
       ) || []),
-    ...(() => {
-      const text = message.translatedText || message.text;
-      const documentAttachmentRegex =
-        /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
-      const attachments: (Medium & { type?: string })[] = [];
-      let match;
-      let attachmentIndex = 0;
-
-      while ((match = documentAttachmentRegex.exec(text)) !== null) {
-        const [, filename, type, content] = match;
-        attachments.push({
-          mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
-            .toString(36)
-            .substr(2, 9)}`,
-          url: '',
-          mimeType: type,
-          title: filename,
-          content: content.trim(),
-          properties: { isDocumentAttachment: true },
-          type: 'document',
-        });
-        attachmentIndex++;
-      }
-
-      return attachments;
-    })(),
+    ...parseDocumentAttachmentsFromMessage(
+      message.translatedText || message.text
+    ).map(
+      (attachment, attachmentIndex): Medium & { type?: string } => ({
+        mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
+          .toString(36)
+          .substr(2, 9)}`,
+        url: attachment.url,
+        mimeType: attachment.type,
+        title: attachment.filename,
+        content: attachment.content,
+        properties: { isDocumentAttachment: true },
+        type: 'document',
+      })
+    ),
   ];
 
   const codeMediaWidgetMedia =

package/src/components/ChatInputs/ChatInputs.css

@@ -278,6 +278,15 @@
     color: inherit;
 }
 
+/* Light hover surface (#f2eef5) — keep the icon black in dark mode for contrast */
+.memori-widget[data-theme='dark'] .memori-chat-inputs--mic-btn:hover,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--mic-btn:hover svg,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--trailing .memori-chat-inputs--mic:hover,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--trailing .memori-chat-inputs--mic:hover .memori-button,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--trailing .memori-chat-inputs--mic:hover svg {
+    color: #000 !important;
+}
+
 /* Send button — solid brand fill, high-contrast icon (all layouts) */
 .memori-chat-inputs--send-btn,
 .memori-chat-inputs--send-btn.memori-button {
@@ -360,41 +369,52 @@
 }
 
 .memori-chat-inputs--ai-note {
-    max-width: var(--memori-conversation-max-width, 48rem);
+    max-width: 100%;
     margin: 0;
     background: transparent;
     color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
     font-size: 0.75rem;
     line-height: 1.3;
+    overflow-wrap: anywhere;
     text-align: left;
+    word-break: break-word;
 }
 
 .memori-conversation-footer {
+    position: relative;
     display: flex;
     width: 100%;
+    max-width: var(--memori-conversation-max-width, 48rem);
     box-sizing: border-box;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
     align-items: center;
     justify-content: space-between;
     padding: var(--memori-spacing-sm) 0 0;
     border-top: 1px solid var(--memori-border-color);
     margin-top: var(--memori-spacing-sm);
+    margin-right: auto;
+    margin-left: auto;
     color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
     gap: var(--memori-spacing-md);
 }
 
 .memori-conversation-footer .memori-chat-inputs--ai-note {
+    overflow: hidden;
     min-width: 0;
     flex: 1 1 auto;
     margin: 0;
     text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-conversation-footer .memori--powered-by {
-    position: static;
+    position: static !important;
     z-index: auto;
     bottom: auto;
     left: auto;
-    display: inline-flex;
+    display: inline-flex !important;
     flex-shrink: 0;
     padding: 0;
     border-radius: 0;
@@ -402,6 +422,7 @@
     background: transparent;
     color: inherit;
     transform: none;
+    white-space: nowrap;
 }
 
 .memori-conversation-footer .memori--powered-by-icon {
@@ -501,6 +522,59 @@
     color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
 }
 
+/* Keep disclaimer + brand on the same axis as the input pill */
+.memori-widget.memori-layout-fullpage .memori-conversation-footer,
+.memori-widget.memori-layout-zoomed_full_body .memori-conversation-footer {
+    max-width: 100%;
+}
+
+/* FULLPAGE + ZOOMED: border-top only after chat has started (under ChatInputs).
+   Start-panel footer is a direct child of the conversation column. */
+.memori-widget.memori-layout-fullpage
+    .memori-conversation-column
+    > .memori-conversation-footer,
+.memori-widget.memori-layout-zoomed_full_body
+    .memori-conversation-column
+    > .memori-conversation-footer {
+    border-top: none;
+}
+
+.memori-widget.memori-layout-fullpage
+    .memori-chat-inputs-wrapper
+    > .memori-conversation-footer,
+.memori-widget.memori-layout-zoomed_full_body
+    .memori-chat-inputs-wrapper
+    > .memori-conversation-footer {
+    border-top: 1px solid var(--memori-border-color);
+}
+
+@media (max-width: 768px) {
+    .memori-conversation-footer,
+    .memori-widget.memori-layout-fullpage
+        .memori-chat-inputs-wrapper
+        > .memori-conversation-footer,
+    .memori-widget.memori-layout-zoomed_full_body
+        .memori-chat-inputs-wrapper
+        > .memori-conversation-footer {
+        justify-content: center;
+        border-top: none;
+        gap: 0;
+    }
+
+    .memori-conversation-footer .memori--powered-by,
+    .memori-widget.memori-layout-chat .memori-conversation-footer > .memori--powered-by {
+        display: none !important;
+    }
+
+    .memori-conversation-footer .memori-chat-inputs--ai-note {
+        overflow: visible;
+        flex: 0 1 auto;
+        text-align: center;
+        text-overflow: unset;
+        white-space: normal;
+    }
+}
+
 /* =============================================================================
    HIDDEN_CHAT + WEBSITE_ASSISTANT + CHAT — bottom-anchored white pill
    ============================================================================= */

package/src/components/ChatTextArea/ChatTextArea.css

@@ -102,9 +102,10 @@ textarea.memori-chat-textarea--input {
     font-size: 14.5px;
     line-height: var(--memori-text-line-normal);
     outline: none;
+    -ms-overflow-style: none; /* IE/Edge */
     overflow-y: auto;
     resize: none;
-    scrollbar-width: thin;
+    scrollbar-width: none; /* Firefox */
     transition: height 0.2s ease-in-out;
 }
 
@@ -114,22 +115,10 @@ textarea.memori-chat-textarea--input::placeholder {
     opacity: 1;
 }
 
-/* Scrollbar styling */
+/* Hide vertical scrollbar (scroll still works) */
 textarea.memori-chat-textarea--input::-webkit-scrollbar {
-    width: 6px;
-}
-
-textarea.memori-chat-textarea--input::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 0, 0, 0.2);
-}
-
-textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.3);
+    display: none;
+    width: 0;
 }
 
 /* Responsive adjustments for textarea input */
@@ -195,7 +184,6 @@ button.memori-chat-textarea--expand-button:focus {
 
 [data-theme='dark'] textarea.memori-chat-textarea--input {
     color: var(--memori-text-color, rgba(255, 255, 255, 0.92));
-    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
 }
 
 [data-theme='dark'] textarea.memori-chat-textarea--input::placeholder {
@@ -222,14 +210,6 @@ button.memori-chat-textarea--expand-button:focus {
     color: #7d7a86;
 }
 
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.25);
-}
-
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.4);
-}
-
 [data-theme='dark'] button.memori-chat-textarea--expand-button {
     color: var(--memori-text-color, rgba(255, 255, 255, 0.85));
 }

package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx

@@ -182,7 +182,7 @@ const DrawerModeDemo: React.FC = () => (
         message={htmlArtifactMessage}
       />
     </div>
-    <div style={{ width: '46%', minWidth: 360 }}>
+    <div style={{ width: '55%', minWidth: 360 }}>
       <ArtifactDrawer isLayoutColumn />
     </div>
   </div>

package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css

@@ -23,10 +23,13 @@
 .memori-artifact-action-icon-fullscreen {
     width: 16px;
     height: 16px;
+    color: inherit;
+    fill: none;
+    stroke: currentColor;
 }
 
 .memori-artifact-action-icon {
-    fill: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-artifact-action-btn:disabled {
@@ -122,7 +125,9 @@
 /* Remove unused styles */
 
 .memori-artifact-action-icon-fullscreen {
-    fill: #fff;
+    color: #fff;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* Animation for Copy Feedback */

package/src/components/MemoriArtifactSystem/components/ArtifactActions/styles.css

@@ -27,11 +27,15 @@
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    min-height: 48px;
+    width: auto;
+    min-width: 38px;
+    height: 38px;
+    min-height: 38px;
     align-items: center;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    border: 1px solid var(--memori-copy-border);
-    border-radius: 0.5rem;
+    padding: 8px 12px;
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    border-radius: var(--memori-radius-box, 8px);
+    background: transparent;
     border-bottom-right-radius: 0px;
     border-top-right-radius: 0px;
     color: var(--memori-text-color);
@@ -40,7 +44,7 @@
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
     line-height: 1.4;
-    transition: all 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
 .memori-copy-button:disabled {
@@ -54,12 +58,13 @@
 }
 
 .memori-copy-button:hover:not(:disabled) {
-    border-color: color-mix(in oklch, var(--memori-primary) 28%, var(--memori-border-color));
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
 }
 
 .memori-copy-button:active:not(:disabled) {
-    border-color: color-mix(in oklch, var(--memori-primary) 40%, var(--memori-border-color));
-    background: var(--memori-copy-surface-pressed);
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 22%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
 }
 
 .memori-copy-button--success {
@@ -87,12 +92,16 @@
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    min-height: 48px;
+    width: 38px;
+    min-width: 38px;
+    height: 38px;
+    min-height: 38px;
     align-items: center;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    padding-right: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    border: 1px solid var(--memori-copy-border);
-    border-radius: 0.5rem;
+    justify-content: center;
+    padding: 8px;
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    border-radius: var(--memori-radius-box, 8px);
+    background: transparent;
     border-bottom-left-radius: 0px !important;
     border-top-left-radius: 0px !important;
     color: var(--memori-text-color);
@@ -101,7 +110,12 @@
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
     line-height: 1.4;
-    transition: all 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.memori-copy-button--dropdown:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
 }
 
 /* Button Icons */
@@ -440,7 +454,9 @@
 
     .memori-copy-button,
     .memori-copy-button--dropdown {
-        padding: calc(var(--memori-spacing-xs) + 2px) calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+        height: 38px;
+        min-height: 38px;
+        padding: 8px;
         font-size: 13px;
     }