@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
-import Button from '../ui/Button';
-import Expand from '../icons/Expand';
-import FullscreenExit from '../icons/FullscreenExit';
+import { Button } from '@memori.ai/ui';
+import { Maximize2, Minimize } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { isMobileOrTablet } from '../../helpers/utils';
 
 export interface Props {
+  /** When true, the field is not editable (e.g. dialog states R2–X3 or no session yet — see ChatInputs). */
   disabled?: boolean;
   value: string;
   onChange: (value: string) => void;
@@ -112,9 +112,13 @@ const ChatTextArea: React.FC<Props> = ({
       <div ref={innerRef} className="memori-chat-textarea--inner">
         <textarea
           ref={textareaRef}
+          id="memori-chat-message"
           className="memori-chat-textarea--input"
           disabled={disabled}
           value={displayValue}
+          aria-label={String(
+            t('placeholder', 'Ask a question') || 'Ask a question'
+          )}
           placeholder={t('placeholder', 'Ask a question') || 'Ask a question'}
           onChange={e => {
             const next = e.target.value;

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

@@ -11,7 +11,9 @@ exports[`renders ChatTextArea unchanged 1`] = `
       style="height: 36px;"
     >
       <textarea
+        aria-label="placeholder"
         class="memori-chat-textarea--input"
+        id="memori-chat-message"
         maxlength="100000"
         placeholder="placeholder"
         style="height: 36px;"
@@ -32,7 +34,9 @@ exports[`renders ChatTextArea with long text unchanged 1`] = `
       style="height: 36px;"
     >
       <textarea
+        aria-label="placeholder"
         class="memori-chat-textarea--input"
+        id="memori-chat-message"
         maxlength="100000"
         placeholder="placeholder"
         style="height: 36px;"
@@ -55,7 +59,9 @@ exports[`renders ChatTextArea with value unchanged 1`] = `
       style="height: 36px;"
     >
       <textarea
+        aria-label="placeholder"
         class="memori-chat-textarea--input"
+        id="memori-chat-message"
         maxlength="100000"
         placeholder="placeholder"
         style="height: 36px;"

package/src/components/CompletionProviderStatus/CompletionProviderStatus.css

@@ -2,7 +2,7 @@
     width: 24px;
     height: 24px;
     cursor: pointer;
-    font-size: 16px;
+    font-size: var(--memori-text-size-base);
   }
   
   .memori--completion-provider-status--loading {
@@ -12,15 +12,15 @@
   }
   
   .memori--completion-provider-status--icon-error {
-    color: #f5222d;
+    color: var(--memori-error);
   }
   
   .memori--completion-provider-status--icon-warning {
-    color: #faad14;
+    color: var(--memori-warning);
   }
   
   .memori--completion-provider-status--icon-info {
-    color: #1890ff;
+    color: var(--memori-info);
   }
   
   .memori--completion-provider-status--tooltip {
@@ -28,7 +28,7 @@
   }
   
   .memori--completion-provider-status--tooltip p {
-    margin-bottom: 8px;
+    margin-bottom: var(--memori-spacing-sm);
   }
   
   .memori--completion-provider-status--tooltip p:last-child {

package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx

@@ -1,10 +1,8 @@
 import { useEffect, useState, useCallback } from 'react';
-import Tooltip from '../ui/Tooltip';
-import Warning from '../icons/Warning';
-import Alert from '../icons/Alert';
-import Info from '../icons/Info';
+import { Tooltip } from '@memori.ai/ui';
+import { AlertTriangle, Info } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import Spin from '../ui/Spin';
+import { Spin } from '@memori.ai/ui';
 
 type Status =
   | 'operational'
@@ -162,7 +160,7 @@ const CompletionProviderStatus = ({
     switch (status) {
       case 'major_outage':
         return {
-          Icon: Alert,
+          Icon: AlertTriangle,
           message: t('completionProviderMajorOutage', {
             provider: provider ?? t('completionProviderFallbackName'),
             fallback: t('completionProviderDown', {
@@ -173,7 +171,7 @@ const CompletionProviderStatus = ({
         };
       case 'partial_outage':
         return {
-          Icon: Warning,
+          Icon: AlertTriangle,
           message: t('completionProviderPartialOutage', {
             provider: provider ?? t('completionProviderFallbackName'),
             fallback: t('completionProviderDown', {

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

@@ -2,94 +2,109 @@
 
 exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
+  <span
+    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r3:"
     >
       <svg
-        aria-hidden="true"
-        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
-        color="currentColor"
+        class="lucide lucide-triangle-alert memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
         fill="none"
-        height="800px"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
         viewBox="0 0 24 24"
-        width="800px"
+        width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        />
+        <path
+          d="M12 9v4"
+        />
+        <path
+          d="M12 17h.01"
         />
       </svg>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders CompletionProviderStatus errored with provider specified unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
+  <span
+    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r5:"
     >
       <svg
-        aria-hidden="true"
-        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
-        color="currentColor"
+        class="lucide lucide-triangle-alert memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
         fill="none"
-        height="800px"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
         viewBox="0 0 24 24"
-        width="800px"
+        width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        />
+        <path
+          d="M12 9v4"
+        />
+        <path
+          d="M12 17h.01"
         />
       </svg>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders CompletionProviderStatus unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
+  <span
+    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r1:"
     >
       <svg
-        aria-hidden="true"
-        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
-        color="currentColor"
+        class="lucide lucide-triangle-alert memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
         fill="none"
-        height="800px"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
         viewBox="0 0 24 24"
-        width="800px"
+        width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        />
+        <path
+          d="M12 9v4"
+        />
+        <path
+          d="M12 17h.01"
         />
       </svg>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;
 

package/src/components/ContentPreviewModal/ContentPreviewModal.css

@@ -1,128 +1,173 @@
 /* ContentPreviewModal – modern preview modal for files and media */
 
-/* Stack above Chat History Drawer (z-index: 10000) and other drawers */
-.memori-content-preview-modal.memori-modal {
-  z-index: 10001;
+/*
+ * @memori.ai/ui Modal uses memori-modal__backdrop (z-index 40) and memori-modal__viewport (z-index 50);
+ * drawers use z-index 1001. className is applied to the viewport; raise both layers so previews
+ * stack above chat history and artifact drawers.
+ */
+.memori-modal__backdrop.memori-content-preview-modal-backdrop,
+.memori-content-preview-modal.memori-modal__viewport {
+    z-index: 2147483647 !important;
+}
+
+.memori-content-preview-modal.memori-modal__viewport .memori-modal__popup {
+    overflow: hidden;
+    width: min(90vw, 800px);
+    min-width: 0;
+    max-width: min(90vw, 800px);
+    min-height: min(500px, 80vh);
+    max-height: 80vh;
+    border-radius: var(--memori-radius-box);
+    /* background: var(--memori-content-preview-bg, #fafafa); */
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
+    overflow-y: auto;
 }
 
-.memori-content-preview-modal.memori-modal .memori-modal--backdrop,
-.memori-content-preview-modal.memori-modal .memori-modal--container {
-  z-index: 10001;
-}
-
-.memori-content-preview-modal.memori-modal .memori-modal--panel {
-  z-index: 10001;
-  overflow: hidden;
-  min-width: 500px;
-  min-height: 500px;
-  border-radius: 16px;
-  background: var(--memori-content-preview-bg, #fafafa);
-  box-shadow:
-    0 25px 50px -12px rgba(0, 0, 0, 0.25),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
-  overflow-y: auto;
+/* Image variant: modal at least 600px wide (capped by viewport on small screens) */
+.memori-content-preview-modal--image.memori-modal__viewport .memori-modal__popup {
+    overflow: hidden;
+    min-width: min(600px, 100vw);
+    max-width: min(90vw, 760px);
+    min-height: auto;
 }
 
-/* Image variant: modal at least 600px wide (capped by viewport on small screens) */
-.memori-content-preview-modal--image.memori-modal .memori-modal--panel {
-  min-width: min(600px, 100vw);
+.memori-modal__viewport.memori-content-preview-modal .memori-modal__title {
+    padding: 1rem 1.25rem 0.75rem;
+    border-bottom: 1px solid var(--memori-content-preview-border, rgba(0, 0, 0, 0.06));
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-base);
+    font-weight: var(--memori-text-weight-semibold);
+    letter-spacing: -0.01em;
 }
 
-.memori-content-preview-modal .memori-modal--title {
-  padding: 1rem 1.25rem 0.75rem;
-  border-bottom: 1px solid var(--memori-content-preview-border, rgba(0, 0, 0, 0.06));
-  color: var(--memori-content-preview-title, #1f2937);
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+.memori-modal__viewport.memori-content-preview-modal .memori-modal__close {
+    top: 0.75rem;
+    right: 0.75rem;
 }
 
-.memori-content-preview-modal .memori-modal--close {
-  top: 0.75rem;
-  right: 0.75rem;
+.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
+    border-radius: var(--memori-radius-box);
+    background: var(--memori-content-preview-close-bg, rgba(0, 0, 0, 0.05));
+    color: var(--memori-text-color, #111827);
+    transition: background 0.2s ease, transform 0.15s ease;
 }
 
-.memori-content-preview-modal .memori-modal--close button {
-  border-radius: 10px;
-  background: var(--memori-content-preview-close-bg, rgba(0, 0, 0, 0.05));
-  transition: background 0.2s ease, transform 0.15s ease;
+.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button svg {
+    color: currentColor;
 }
 
-.memori-content-preview-modal .memori-modal--close button:hover {
-  background: var(--memori-content-preview-close-hover, rgba(0, 0, 0, 0.1));
-  transform: scale(1.05);
+.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button:hover {
+    background: var(--memori-content-preview-close-hover, rgba(0, 0, 0, 0.1));
+    transform: scale(1.05);
 }
 
-/* Body area */
-.memori-content-preview-modal--body {
-  overflow: auto;
-  max-height: 70vh;
-  padding: 1.25rem;
+[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button,
+.memori-widget[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
+    background: color-mix(in srgb, var(--memori-main-background, #111) 85%, white);
+    color: var(--memori-text-color, #fff);
 }
 
 .memori-content-preview-modal--body--image {
-  display: flex;
-  min-height: 400px;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-  background: var(--memori-content-preview-image-bg, #f3f4f6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    /* background: var(--memori-content-preview-image-bg, #f3f4f6); */
 }
 
 .memori-content-preview-modal--body--content {
-  padding: 1rem 1.25rem;
+    min-width: 0;
+    max-width: 100%;
+    padding: 1rem 1.25rem;
+    overflow-x: auto;
 }
 
 /* Image */
 .memori-content-preview-modal--image-wrap {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    width: min(72vw, 640px);
+    min-width: 0;
+    max-width: 100%;
+    height: min(56vh, 420px);
+    align-items: center;
+    justify-content: center;
 }
 
 .memori-content-preview-modal--image {
-  width: 100%;
-  height: 100%;
-  max-height: 70vh;
-  border-radius: 8px;
-  object-fit: contain;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--memori-radius-box);
+    object-fit: contain;
+}
+
+.memori-file-preview-modal.memori-content-preview-modal--image.memori-modal__viewport .memori-modal__popup {
+    overflow: hidden;
+    background: var(--memori-main-background);
+}
+
+@media (max-width: 768px) {
+    .memori-content-preview-modal.memori-modal__viewport .memori-modal__popup {
+        width: min(92vw, 100%) !important;
+        min-width: 0 !important;
+        max-width: 100vw;
+        min-height: auto;
+        max-height: 85vh;
+    }
+
+    .memori-content-preview-modal--image.memori-modal__viewport .memori-modal__popup {
+        min-width: min(92vw, 600px);
+    }
+
+    .memori-content-preview-modal--image-wrap {
+        width: min(84vw, 520px);
+        height: min(48vh, 320px);
+    }
+
+    .memori-content-preview-modal--body--content {
+        padding: 0.75rem;
+    }
+
+    .memori-content-preview-modal--snippet-wrap .memori-snippet {
+        min-width: 0;
+        max-width: 100%;
+    }
 }
 
 /* Snippet / text content area */
 .memori-content-preview-modal--snippet-wrap {
-  min-height: 120px;
-  border: 1px solid var(--memori-content-preview-snippet-border, #e2e8f0);
-  border-radius: 12px;
-  background: var(--memori-content-preview-snippet-bg, #f8fafc);
-  color: var(--memori-content-preview-snippet-text, #334155);
-  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
+    min-width: 0;
+    max-width: 100%;
+    min-height: 120px;
+    border: 1px solid var(--memori-content-preview-snippet-border, #e2e8f0);
+    border-radius: var(--memori-radius-box);
+    background: var(--memori-content-preview-snippet-bg, #f8fafc);
+    color: var(--memori-content-preview-snippet-text, #334155);
+    font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: var(--memori-text-size-small);
+    line-height: var(--memori-text-line-relaxed);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
 }
 
 /* When Snippet component is used inside, give it consistent spacing */
 .memori-content-preview-modal--snippet-wrap .memori-snippet {
-  border: none;
-  border-radius: 12px;
-  background: transparent;
-  box-shadow: none;
+    border: none;
+    border-radius: var(--memori-radius-box);
+    background: transparent;
+    box-shadow: none;
 }
 
 .memori-content-preview-modal--snippet-wrap .memori-snippet--content pre {
-  padding: 1rem 1.25rem;
-  overflow-wrap: break-word;
-  /* Override Prism theme so PDF/text content wraps instead of one long line */
-  white-space: pre-wrap !important;
-  word-break: break-word;
+    padding: 1rem 1.25rem;
+    overflow-wrap: break-word;
+    /* Override Prism theme so PDF/text content wraps instead of one long line */
+    white-space: pre-wrap !important;
+    word-break: break-word;
 }
 
 .memori-content-preview-modal--snippet-wrap .memori-snippet--content pre code {
-  overflow-wrap: break-word;
-  white-space: pre-wrap !important;
-  word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap !important;
+    word-break: break-word;
 }

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import Modal from '../ui/Modal';
+import { Modal } from '@memori.ai/ui';
 import cx from 'classnames';
 
 export interface ContentPreviewModalProps {
@@ -21,7 +21,7 @@ const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
   title,
   isImage = false,
   imageSrc,
-  imageAlt = '',
+  imageAlt,
   children,
   className,
 }) => {
@@ -33,6 +33,7 @@ const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
       onClose={() => onClose()}
       width={width}
       widthMd={width}
+      backdropClassName="memori-content-preview-modal-backdrop"
       className={cx('memori-content-preview-modal', className, {
         'memori-content-preview-modal--image': isImage,
       })}
@@ -50,7 +51,7 @@ const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
           <div className="memori-content-preview-modal--image-wrap">
             <img
               src={imageSrc}
-              alt={imageAlt}
+              alt={imageAlt ?? title ?? 'Preview'}
               className="memori-content-preview-modal--image"
             />
           </div>