@memori.ai/memori-react 9.0.0-alpha.24 → 9.0.0-alpha.25

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -22,7 +22,6 @@ import { stripAllInternalTags } from '../../helpers/message';
 import debounce from 'lodash/debounce';
 import { Spin } from '@memori.ai/ui';
 import { SelectBox } from '@memori.ai/ui';
-import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
 import ChatResumeDrawer from './ChatResumeDrawer';
@@ -458,7 +457,6 @@ const ChatHistoryDrawer = ({
   showFunctionCache = false,
   showMessageConsumption = false,
 }: Props) => {
-  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
@@ -1171,7 +1169,6 @@ const ChatHistoryDrawer = ({
 
   return (
     <Drawer
-      container={surfaceEl ?? undefined}
       className="memori-chat-history-drawer"
       open={open}
       onClose={onClose}

package/src/components/ChatHistoryDrawer/ChatResumeDrawer.css

@@ -69,21 +69,44 @@
     }
 }
 
-.memori-chat-resume-drawer--header-icon-button {
-    display: inline-flex;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
+/* Compact circular header actions — beat UI lib ghost/sm + icon-only 44px touch targets */
+.memori-chat-resume-drawer--header-icon-button.memori-button,
+.memori-chat-resume-drawer--header
+    .memori-chat-history-drawer--header-download-button.memori-button {
+    display: inline-flex !important;
+    width: 36px !important;
+    min-width: 36px !important;
+    height: 36px !important;
+    min-height: 36px !important;
+    flex-shrink: 0;
     align-items: center;
+    align-self: center;
     justify-content: center;
-    padding: 0;
-    border: none;
+    padding: 0 !important;
+    border: none !important;
     border-radius: 999px;
-    background: transparent;
+    margin: 0;
+    background: transparent !important;
+    box-shadow: none !important;
     color: var(--color-text-primary, var(--memori-text-color));
     cursor: pointer;
 }
 
+.memori-chat-resume-drawer--header-icon-button.memori-button:hover:not(:disabled),
+.memori-chat-resume-drawer--header
+    .memori-chat-history-drawer--header-download-button.memori-button:hover:not(
+        :disabled
+    ) {
+    background: color-mix(in oklch, var(--memori-text-color) 8%, transparent) !important;
+}
+
+.memori-chat-resume-drawer--header-icon-button.memori-button svg,
+.memori-chat-resume-drawer--header
+    .memori-chat-history-drawer--header-download-button.memori-button svg {
+    width: 18px;
+    height: 18px;
+}
+
 .memori-chat-resume-drawer--header-main {
     min-width: 0;
     flex: 1;
@@ -316,8 +339,8 @@
 }
 
 .memori-chat-history-drawer--header-download-button {
-    display: flex;
-    align-self: baseline;
+    display: inline-flex;
+    align-self: center;
 }
 
 .memori-chat-resume-drawer--chips-row {

package/src/components/ChatHistoryDrawer/ChatResumeDrawer.tsx

@@ -7,7 +7,6 @@ import {
 import { ArrowLeft, ArrowUpRight, Download } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { stripHTML } from '../../helpers/utils';
-import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import Chat from '../Chat/Chat';
 
 export interface ResumeDrawerMessage {
@@ -81,7 +80,6 @@ const ChatResumeDrawer = ({
   showMessageConsumption = false,
 }: ChatResumeDrawerProps) => {
   const { t } = useTranslation();
-  const surfaceEl = useWidgetSurfaceEl();
   const backButtonRef = useRef<HTMLButtonElement>(null);
   const titleId = 'chat-resume-drawer-title';
 
@@ -130,13 +128,13 @@ const ChatResumeDrawer = ({
         <Button
           ref={backButtonRef}
           variant="ghost"
+          size="sm"
           type="button"
           className="memori-chat-resume-drawer--header-icon-button"
           onClick={onBack || onClose}
           aria-label={String(t('back', { defaultValue: 'Back' }))}
-        >
-          <ArrowLeft size={16} aria-hidden />
-        </Button>
+          icon={<ArrowLeft aria-hidden />}
+        />
         <div className="memori-chat-resume-drawer--header-main">
           <h2
             id={titleId}
@@ -222,7 +220,6 @@ const ChatResumeDrawer = ({
 
   return (
     <Drawer
-      container={surfaceEl ?? undefined}
       open={isOpen}
       onClose={onClose}
       className="memori-chat-resume-drawer"

package/src/components/ChatInputs/ChatInputs.css

@@ -22,18 +22,16 @@
     box-sizing: border-box;
     flex-flow: column;
     flex-shrink: 0;
-    padding: 0 !important;
-    border: none;
-    border-radius: 0;
+    padding: 0px;
+    border: 1.5px solid var(--memori-border-color, #ddd);
+    border-radius: var(--memori-radius-box);
     margin: 0 auto;
+    background: var(--memori-secondary-background);
     background-color: transparent;
     box-shadow: none;
+    gap: 10px;
     overflow-x: hidden;
-}
-
-[data-theme='dark'] .memori-chat-inputs,
-.memori-chat-inputs[data-theme='dark'] {
-    background-color: transparent;
+    transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .memori-chat-inputs:disabled {
@@ -41,6 +39,16 @@
     pointer-events: none;
 }
 
+.memori-chat-inputs:focus-within {
+    border-color: var(--memori-border-color, #ddd);
+    box-shadow: none;
+}
+
+.memori-chat-inputs:focus-within:has(:focus-visible) {
+    border-color: var(--memori-primary);
+    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
+}
+
 /* Wrapper so FilePreview horizontal scroll is constrained */
 .memori-chat-inputs--preview-wrapper {
     overflow: hidden;
@@ -57,21 +65,6 @@
     box-sizing: border-box;
     align-items: center;
     padding: 10px 12px 10px 16px;
-    border: 1.5px solid var(--memori-border-color, #ddd);
-    border-radius: 8px;
-    margin: 0;
-    gap: 10px;
-    transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.memori-chat-inputs--container:focus-within {
-    border-color: var(--memori-border-color, #ddd);
-    box-shadow: none;
-}
-
-.memori-chat-inputs--container:focus-within:has(:focus-visible) {
-    border-color: var(--memori-primary);
-    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
 }
 
 /* Responsive adjustments */
@@ -422,18 +415,13 @@
 .memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs {
     max-width: 100%;
     margin: 0;
-    background: transparent;
+    /* background: transparent; */
 }
 
 .memori-widget.memori-layout-fullpage .memori-chat-inputs--container,
 .memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs--container {
     min-height: 0;
     padding: 12px;
-    border: 1.5px solid var(--memori-border-color, #ddd);
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-secondary-background);
-    gap: 10px;
-    transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .memori-widget.memori-layout-hidden_chat .memori-chat-inputs--container,
@@ -441,29 +429,6 @@
 .memori-widget.memori-layout-chat .memori-chat-inputs--container {
     min-height: 0;
     padding: 12px;
-    border: 1.5px solid var(--memori-border-color, #ddd);
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-secondary-background);
-    gap: 8px;
-    transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-inputs--container:focus-within,
-.memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs--container:focus-within,
-.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--container:focus-within,
-.memori-widget.memori-layout-website_assistant .memori-chat-inputs--container:focus-within,
-.memori-widget.memori-layout-chat .memori-chat-inputs--container:focus-within {
-    border-color: var(--memori-border-color, #ddd);
-    box-shadow: none;
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-inputs--container:focus-within:has(:focus-visible),
-.memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs--container:focus-within:has(:focus-visible),
-.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--container:focus-within:has(:focus-visible),
-.memori-widget.memori-layout-website_assistant .memori-chat-inputs--container:focus-within:has(:focus-visible),
-.memori-widget.memori-layout-chat .memori-chat-inputs--container:focus-within:has(:focus-visible) {
-    border-color: var(--memori-primary);
-    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
 }
 
 /* Keep disclaimer + brand on the same axis as the input pill */

package/src/components/ChatInputs/ChatInputs.tsx

@@ -374,10 +374,8 @@ ${text}
         })}
         disabled={isDisabled}
       >
-        {/* Preview for document files (show when upload enabled or when paste added cards) */}
-        {(showUpload ||
-          documentPreviewFiles.length > 0 ||
-          uploadingCount > 0) && (
+        {/* Preview for document files (only when files or uploads are present) */}
+        {(documentPreviewFiles.length > 0 || uploadingCount > 0) && (
           <div className="memori-chat-inputs--preview-wrapper">
             <FilePreview
               previewFiles={documentPreviewFiles}

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

@@ -10,6 +10,7 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
       id="base-ui-:r3:"
     >
       <svg
+        aria-hidden="true"
         class="lucide lucide-triangle-alert memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
         fill="none"
         height="24"
@@ -46,6 +47,7 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
       id="base-ui-:r5:"
     >
       <svg
+        aria-hidden="true"
         class="lucide lucide-triangle-alert memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
         fill="none"
         height="24"
@@ -82,6 +84,7 @@ exports[`renders CompletionProviderStatus unchanged 1`] = `
       id="base-ui-:r1:"
     >
       <svg
+        aria-hidden="true"
         class="lucide lucide-triangle-alert memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
         fill="none"
         height="24"

package/src/components/ContentPreviewModal/ContentPreviewModal.css

@@ -113,10 +113,10 @@
     min-width: 0;
     max-width: 100%;
     min-height: 120px;
-    border: 1px solid var(--memori-content-preview-snippet-border, #e2e8f0);
+    border: 1px solid var(--memori-border-color);
     border-radius: var(--memori-radius-box);
-    background: var(--memori-content-preview-snippet-bg, #f8fafc);
-    color: var(--memori-content-preview-snippet-text, #334155);
+    background: var(--memori-main-background);
+    color: var(--memori-text-color);
     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);

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Modal } from '@memori.ai/ui';
 import cx from 'classnames';
-import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
 export interface ContentPreviewModalProps {
   open: boolean;
@@ -26,12 +25,10 @@ const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
   children,
   className,
 }) => {
-  const surfaceEl = useWidgetSurfaceEl();
   const width = 'min(90vw, 800px)';
 
   return (
     <Modal
-      container={surfaceEl ?? undefined}
       open={open}
       onClose={() => onClose()}
       width={width}

package/src/components/DateSelector/DateSelector.css

@@ -38,17 +38,26 @@
     text-align: left;
 }
 
+.memori--date-selector__mobile-input-wrap {
+    position: relative;
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    align-items: center;
+}
+
 .memori--date-selector__mobile-input {
     width: 100%;
     min-width: 0;
     max-width: 100%;
     min-height: var(--memori-spacing-3xl);
     box-sizing: border-box;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    padding: var(--memori-spacing-sm) 2.75rem var(--memori-spacing-sm) var(--memori-spacing-md);
     border: 1px solid #e5e7eb;
     border-radius: var(--memori-radius-box);
     -webkit-appearance: none;
     appearance: none;
+    background-color: var(--memori-secondary-background, #fff);
     /* Touch-friendly */
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     color: var(--memori-text-color);
@@ -71,11 +80,60 @@
 }
 
 .memori--date-selector__mobile-input::-webkit-calendar-picker-indicator {
-    width: 1.25em;
-    height: 1.25em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto;
     padding: 0;
     margin: 0;
+    background: transparent;
     cursor: pointer;
+    opacity: 0;
+}
+
+/* Hide the empty native date chrome so our placeholder is readable */
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input {
+    color: transparent;
+}
+
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input::-webkit-datetime-edit,
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input::-webkit-datetime-edit-fields-wrapper,
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input::-webkit-datetime-edit-text,
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input::-webkit-datetime-edit-month-field,
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input::-webkit-datetime-edit-day-field,
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input::-webkit-datetime-edit-year-field,
+.memori--date-selector__mobile-input-wrap--empty .memori--date-selector__mobile-input::-webkit-date-and-time-value {
+    color: transparent;
+}
+
+.memori--date-selector__mobile-placeholder {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: var(--memori-spacing-md);
+    overflow: hidden;
+    max-width: calc(100% - 3.25rem);
+    color: color-mix(in srgb, var(--memori-text-color) 45%, transparent);
+    font-size: var(--memori-text-size-base);
+    line-height: 1.375;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    transform: translateY(-50%);
+    white-space: nowrap;
+}
+
+.memori--date-selector__mobile-icon {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    right: var(--memori-spacing-md);
+    flex-shrink: 0;
+    color: color-mix(in srgb, var(--memori-text-color) 55%, transparent);
+    pointer-events: none;
+    transform: translateY(-50%);
 }
 
 .memori--date-selector__mobile-input:focus {
@@ -95,6 +153,11 @@
     opacity: 0.6;
 }
 
+.memori--date-selector__mobile-input-wrap:has(.memori--date-selector__mobile-input:disabled) .memori--date-selector__mobile-icon,
+.memori--date-selector__mobile-input-wrap:has(.memori--date-selector__mobile-input:disabled) .memori--date-selector__mobile-placeholder {
+    opacity: 0.6;
+}
+
 /* Desktop Styles */
 .memori--date-selector--desktop {
     display: flex;

package/src/components/DateSelector/DateSelector.test.tsx

@@ -110,18 +110,47 @@ describe('DateSelector', () => {
   });
 
   describe('Mobile View', () => {
-    it('renders native date input on mobile', () => {
+    const originalInnerWidth = window.innerWidth;
+
+    beforeEach(() => {
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 375,
+      });
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    afterEach(() => {
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: originalInnerWidth,
+      });
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    it('renders native date input on mobile', async () => {
       render(<DateSelector onChange={mockOnChange} />);
 
-      const dateInput = screen.getByLabelText(/date/i);
+      const dateInput = await screen.findByLabelText(/birth date/i);
       expect(dateInput).toBeInTheDocument();
       expect(dateInput).toHaveAttribute('type', 'date');
     });
 
+    it('shows a placeholder hint when the date is empty', async () => {
+      render(<DateSelector onChange={mockOnChange} />);
+
+      await screen.findByLabelText(/birth date/i);
+      expect(
+        screen.getByText('DD/MM/YYYY')
+      ).toBeInTheDocument();
+    });
+
     it('calls onChange when mobile date input changes', async () => {
       render(<DateSelector onChange={mockOnChange} />);
 
-      const dateInput = screen.getByLabelText(/date/i);
+      const dateInput = await screen.findByLabelText(/birth date/i);
       fireEvent.change(dateInput, { target: { value: '1995-06-15' } });
 
       await waitFor(() => {
@@ -138,7 +167,7 @@ describe('DateSelector', () => {
     it('calls onChange with undefined when mobile input is cleared', async () => {
       render(<DateSelector defaultDate="1995-06-15" onChange={mockOnChange} />);
 
-      const dateInput = screen.getByLabelText(/date/i);
+      const dateInput = await screen.findByLabelText(/birth date/i);
       fireEvent.change(dateInput, { target: { value: '' } });
 
       await waitFor(() => {

package/src/components/DateSelector/DateSelector.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, memo, useMemo, useRef, ChangeEvent } from 'react';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
+import { Calendar } from 'lucide-react';
 
 export interface Props {
   defaultDate?: string | Date;
@@ -168,23 +169,48 @@ const DateSelector = memo(
       const currentDate = (day && month && year)
         ? DateTime.fromObject({ year: parseInt(year), month: parseInt(month), day: parseInt(day) })
         : null;
+      const dateValue =
+        currentDate?.isValid ? currentDate.toISODate() || '' : '';
+      const isEmpty = !dateValue;
+      const placeholder =
+        t('login.birthDatePlaceholder') || 'DD/MM/YYYY';
 
       return (
         <div className="memori--date-selector memori--date-selector--mobile">
           <label htmlFor="birth-date-mobile" className="memori--date-selector__mobile-label">
             {t('birthDate') || 'Birth Date'}:
           </label>
-          <input
-            id="birth-date-mobile"
-            type="date"
-            className="memori--date-selector__mobile-input"
-            value={currentDate?.isValid ? currentDate.toISODate() || '' : ''}
-            onChange={handleMobileChange}
-            disabled={disabled}
-            min={minDate.toISODate() || '1900-01-01'}
-            max={maxDate.toISODate() || ''}
-            aria-label={String(t('dateOfBirth') || t('date'))}
-          />
+          <div
+            className={`memori--date-selector__mobile-input-wrap${
+              isEmpty ? ' memori--date-selector__mobile-input-wrap--empty' : ''
+            }`}
+          >
+            <input
+              id="birth-date-mobile"
+              type="date"
+              className="memori--date-selector__mobile-input"
+              value={dateValue}
+              onChange={handleMobileChange}
+              disabled={disabled}
+              min={minDate.toISODate() || '1900-01-01'}
+              max={maxDate.toISODate() || ''}
+              aria-label={String(t('birthDate') || t('date'))}
+            />
+            {isEmpty && (
+              <span
+                className="memori--date-selector__mobile-placeholder"
+                aria-hidden
+              >
+                {placeholder}
+              </span>
+            )}
+            <Calendar
+              className="memori--date-selector__mobile-icon"
+              aria-hidden
+              size={20}
+              strokeWidth={1.75}
+            />
+          </div>
         </div>
       );
     }

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -3,7 +3,6 @@ import {
   Tenant,
 } from '@memori.ai/memori-api-client/dist/types';
 import { Drawer } from '@memori.ai/ui';
-import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { useTranslation } from 'react-i18next';
 import { getResourceUrl } from '../../helpers/media';
 
@@ -25,11 +24,9 @@ const ExpertsDrawer = ({
   onClose,
 }: Props) => {
   const { t } = useTranslation();
-  const surfaceEl = useWidgetSurfaceEl();
 
   return (
     <Drawer
-      container={surfaceEl ?? undefined}
       open={open}
       onClose={onClose}
       className="memori--experts-drawer"

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

@@ -22,6 +22,7 @@ exports[`renders FeedbackButtons unchanged 1`] = `
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-message-square"
               fill="none"
               height="24"
@@ -34,7 +35,7 @@ exports[`renders FeedbackButtons unchanged 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+                d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
               />
             </svg>
           </span>