@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.20

package/src/components/ChatInputs/ChatInputs.tsx

@@ -6,6 +6,7 @@ import { Button, Tooltip } from '@memori.ai/ui';
 import { useAlertManager } from '@memori.ai/ui';
 import { Send, Mic } from 'lucide-react';
 import MicrophoneButton from '../MicrophoneButton/MicrophoneButton';
+import IconButton from '../IconButton/IconButton';
 import cx from 'classnames';
 import UploadButton from '../UploadButton/UploadButton';
 import FilePreview from '../FilePreview/FilePreview';
@@ -35,6 +36,7 @@ export interface Props {
   isTyping?: boolean;
   sessionID?: string;
   memoriID?: string;
+  baseUrl?: string;
   client?: ReturnType<typeof memoriApiClient>;
   onTextareaExpanded?: (expanded: boolean) => void;
   /** Override total document payload limit (character count). */
@@ -51,6 +53,8 @@ export interface Props {
   pasteAsCardCharThreshold?: number;
   /** When false, hides the AI disclaimer below the input (e.g. pre-start / start panel). */
   showAiGeneratedNote?: boolean;
+  /** Optional branding node rendered in the footer row next to the disclaimer. */
+  footerBrand?: React.ReactNode;
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -72,6 +76,7 @@ const ChatInputs: React.FC<Props> = ({
   sessionID,
   authToken,
   memoriID,
+  baseUrl,
   client,
   onTextareaExpanded,
   maxTotalMessagePayload,
@@ -81,6 +86,7 @@ const ChatInputs: React.FC<Props> = ({
   pasteAsCardLineThreshold,
   pasteAsCardCharThreshold,
   showAiGeneratedNote = true,
+  footerBrand,
 }) => {
   const { t } = useTranslation();
   const alertManager = useAlertManager();
@@ -380,6 +386,7 @@ ${text}
                   authToken={authToken}
                   client={client}
                   sessionID={sessionID}
+                  baseUrl={baseUrl}
                   isMediaAccepted={dialogState?.acceptsMedia || false}
                   setDocumentPreviewFiles={setDocumentPreviewFiles}
                   documentPreviewFiles={documentPreviewFiles}
@@ -413,11 +420,10 @@ ${text}
           <div className="memori-chat-inputs--trailing">
             <div className="memori-chat-inputs--trailing-inner">
               {showMicrophone && microphoneMode === 'CONTINUOUS' && (
-                <button
+                <IconButton
                   type="button"
-                  className={cx('memori-chat-inputs--mic-btn', {
-                    'memori-chat-inputs--mic-btn--listening': listening,
-                  })}
+                  className="memori-chat-inputs--mic-btn"
+                  recording={!!listening}
                   title={
                     listening
                       ? t('write_and_speak.micButtonPopoverListening') ||
@@ -442,9 +448,9 @@ ${text}
                       : t('write_and_speak.micButtonPopover') ||
                         'Start listening'
                   }
-                >
-                  <Mic className="icon" aria-hidden />
-                </button>
+                  aria-pressed={!!listening}
+                  icon={<Mic className="icon" aria-hidden />}
+                />
               )}
               {showMicrophone && microphoneMode === 'HOLD_TO_TALK' && (
                 <MicrophoneButton
@@ -498,10 +504,17 @@ ${text}
           </div>
         </div>
       </fieldset>
-      {showAiGeneratedNote && (
-        <p className="memori-chat-inputs--ai-note">
-          {t('aiGeneratedNote', { defaultValue: 'Generato da AI' })}
-        </p>
+      {(showAiGeneratedNote || footerBrand) && (
+        <div className="memori-conversation-footer">
+          {showAiGeneratedNote ? (
+            <p className="memori-chat-inputs--ai-note">
+              {t('aiGeneratedNote', { defaultValue: 'Generato da AI' })}
+            </p>
+          ) : (
+            <span className="memori-chat-inputs--ai-note" aria-hidden />
+          )}
+          {footerBrand}
+        </div>
       )}
     </div>
   );

package/src/components/ChatTextArea/ChatTextArea.css

@@ -89,57 +89,50 @@
 
 textarea.memori-chat-textarea--input {
     width: 100%;
+    min-width: 0;
     min-height: 36px;
     max-height: 208px;
     box-sizing: border-box;
-    /* padding: var(--memori-spacing-sm) 0; */
+    flex: 1;
+    padding: 8px 6px;
     border: none;
     background: transparent;
-    color: var(--memori-text-color, #000);
+    color: var(--memori-text-color, #1f1425);
     font-family: var(--memori-font-family);
-    font-size: var(--memori-text-size-base);
+    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;
 }
 
 /* Placeholder styling */
 textarea.memori-chat-textarea--input::placeholder {
-    color: var(--memori-text-color);
+    color: color-mix(in srgb, var(--memori-text-color) 55%, transparent);
+    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 */
 @media (max-width: 768px) {
     textarea.memori-chat-textarea--input {
         max-height: 200px;
-        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
+        font-size: 14.5px; /* Prevent zoom on iOS */
     }
 }
 
 @media (max-width: 480px) {
     textarea.memori-chat-textarea--input {
         max-height: 150px;
-        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
+        font-size: 14.5px; /* Prevent zoom on iOS */
     }
 }
 
@@ -191,19 +184,30 @@ 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 {
     color: var(--memori-text-color-muted, rgba(255, 255, 255, 0.5));
 }
 
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.25);
+/* Layout-scoped dark pills: keep exact text/placeholder colors */
+.memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input,
+.memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input,
+.memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input {
+    background: transparent;
+    /* color: #f2f0f4; */
 }
 
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.4);
+.memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input::placeholder,
+.memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input::placeholder,
+.memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input::placeholder {
+    color: #7d7a86;
 }
 
 [data-theme='dark'] button.memori-chat-textarea--expand-button {

package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx

@@ -33,17 +33,21 @@ const PROVIDER_CONFIGS: Record<string, ProviderConfig> = {
     statusPage: 'https://status.mistral-data.com/',
     apiComponentName: ['Mistral'],
   },
+  // Use status.claude.com directly: status.anthropic.com 302-redirects and
+  // browsers block the redirected response (missing CORS on the redirect).
   Anthropic: {
-    statusUrl: 'https://status.anthropic.com/api/v2/summary.json',
-    statusPage: 'https://status.anthropic.com/',
-    apiComponentName: ['api.anthropic.com'],
+    statusUrl: 'https://status.claude.com/api/v2/summary.json',
+    statusPage: 'https://status.claude.com/',
+    apiComponentName: [
+      'Claude API (api.anthropic.com)',
+      'api.anthropic.com',
+    ],
   },
 };
 
 // Modified to handle fetch errors, different component names, and check incidents
 const fetchProviderStatus = async (config: ProviderConfig): Promise<Status> => {
   try {
-    // Use cross-fetch instead of native fetch
     const response = await fetch(config.statusUrl);
     if (!response.ok) {
       console.warn(`Status API returned ${response.status}`);

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

@@ -3,10 +3,10 @@
 exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori--completion-provider-status--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r3:"
     >
       <svg
@@ -39,10 +39,10 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 exports[`renders CompletionProviderStatus errored with provider specified unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori--completion-provider-status--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r5:"
     >
       <svg
@@ -75,10 +75,10 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
 exports[`renders CompletionProviderStatus unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori--completion-provider-status--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r1:"
     >
       <svg

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -1,6 +1,7 @@
 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;
@@ -25,10 +26,12 @@ 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

@@ -40,10 +40,11 @@
 
 .memori--date-selector__mobile-input {
     width: 100%;
+    min-width: 0;
     max-width: 100%;
     min-height: var(--memori-spacing-3xl);
     box-sizing: border-box;
-    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-lg);
+    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
     border: 1px solid #e5e7eb;
     border-radius: var(--memori-radius-box);
     -webkit-appearance: none;
@@ -52,9 +53,31 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     color: var(--memori-text-color);
     font-size: var(--memori-text-size-base);
+    line-height: 1.375;
     transition: all 0.2s ease;
 }
 
+.memori--date-selector__mobile-input::-webkit-datetime-edit,
+.memori--date-selector__mobile-input::-webkit-datetime-edit-fields-wrapper {
+    display: inline-flex;
+    min-height: 1.375em;
+    align-items: center;
+    padding: 0;
+}
+
+.memori--date-selector__mobile-input::-webkit-date-and-time-value {
+    min-height: 1.375em;
+    text-align: left;
+}
+
+.memori--date-selector__mobile-input::-webkit-calendar-picker-indicator {
+    width: 1.25em;
+    height: 1.25em;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+}
+
 .memori--date-selector__mobile-input:focus {
     border-color: var(--memori-primary);
     box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
@@ -150,7 +173,7 @@
     }
 
     .memori--date-selector__mobile-input {
-        min-height: 44px;
+        min-height: var(--memori-spacing-3xl);
         font-size: var(--memori-text-size-base); /* Prevents zoom on iOS */
     }
 }

package/src/components/DateSelector/DateSelector.stories.tsx

@@ -25,14 +25,23 @@ const Template: Story<Props> = args => (
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 Default.args = {
-  defaultDate: new Date(Date.now()),
+  defaultDate: '1990-06-15',
+  minAge: 18,
+  onChange: console.log,
+  disabled: false,
+};
+
+export const MinAge14 = Template.bind({});
+MinAge14.args = {
+  minAge: 14,
   onChange: console.log,
   disabled: false,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  defaultDate: new Date(Date.now()),
+  defaultDate: '1990-06-15',
+  minAge: 18,
   onChange: () => {},
   disabled: true,
 };

package/src/components/DateSelector/DateSelector.tsx

@@ -5,16 +5,23 @@ import { useTranslation } from 'react-i18next';
 export interface Props {
   defaultDate?: string | Date;
   disabled?: boolean;
+  /** Minimum age; latest selectable birth date is today minus this many years. */
+  minAge?: number;
   onChange: (date: DateTime | undefined) => void;
 }
 
 const DateSelector = memo(
-  ({ defaultDate, onChange, disabled = false }: Props) => {
+  ({ defaultDate, onChange, disabled = false, minAge = 18 }: Props) => {
     const { t } = useTranslation();
 
-    // Calculate constraints for birth date (18 years ago to 1900)
-    const maxDate = useMemo(() => DateTime.now().minus({ years: 18 }), []);
-    const minDate = useMemo(() => DateTime.fromObject({ year: 1900, month: 1, day: 1 }), []);
+    const maxDate = useMemo(
+      () => DateTime.now().minus({ years: minAge }).startOf('day'),
+      [minAge]
+    );
+    const minDate = useMemo(
+      () => DateTime.fromObject({ year: 1900, month: 1, day: 1 }),
+      []
+    );
 
     // State for individual fields as strings to allow empty values
     const [day, setDay] = useState<string>('');
@@ -54,10 +61,22 @@ const DateSelector = memo(
       return () => window.removeEventListener('resize', checkMobile);
     }, []);
 
+    // Avoid re-running when parent passes an unstable onChange (inline arrow).
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const lastEmittedRef = useRef<string | null | undefined>(undefined);
+
     // Validate and propagate changes
     useEffect(() => {
+      const emit = (next: DateTime | undefined) => {
+        const key = next?.isValid ? next.toISODate() : null;
+        if (key === lastEmittedRef.current) return;
+        lastEmittedRef.current = key;
+        onChangeRef.current(next);
+      };
+
       if (!day || !month || !year) {
-        onChange(undefined);
+        emit(undefined);
         return;
       }
 
@@ -66,7 +85,7 @@ const DateSelector = memo(
       const y = parseInt(year);
 
       if (isNaN(d) || isNaN(m) || isNaN(y)) {
-        onChange(undefined);
+        emit(undefined);
         return;
       }
 
@@ -75,11 +94,11 @@ const DateSelector = memo(
       // Basic validation: check if it's a valid date (e.g. not Feb 30)
       // and within range.
       if (newDate.isValid && newDate >= minDate && newDate <= maxDate) {
-        onChange(newDate);
+        emit(newDate);
       } else {
-        onChange(undefined);
+        emit(undefined);
       }
-    }, [day, month, year, onChange, minDate, maxDate]);
+    }, [day, month, year, minDate, maxDate]);
 
     // Handle mobile native input change
     const handleMobileChange = (e: ChangeEvent<HTMLInputElement>) => {

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -3,6 +3,7 @@ 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';
 
@@ -24,9 +25,11 @@ 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

@@ -6,10 +6,10 @@ exports[`renders FeedbackButtons unchanged 1`] = `
     class="memori-chat--feedback"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1:"
       >
         <button

package/src/components/FilePreview/FilePreview.css

@@ -164,7 +164,7 @@
     height: 20px;
     flex-shrink: 0;
     color: var(--memori-text-color);
-    fill: #868e96;
+    fill: #fff;
 }
 
 .memori--preview-thumbnail {

package/src/components/FilePreview/FilePreview.stories.tsx

@@ -23,7 +23,6 @@ const meta: Meta = {
 
 type Props = {
   onUpload: (text: string) => void;
-  convertapiToken: string;
 };
 
 export default meta;
@@ -55,12 +54,10 @@ const Template: Story<Props> = args => {
 export const Default = Template.bind({});
 Default.args = {
   onUpload: () => {},
-  convertapiToken: '',
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   onUpload: () => {},
-  convertapiToken: '',
   disabled: true,
 };

package/src/components/FilePreview/FilePreview.tsx

@@ -3,8 +3,13 @@ import { File, X } from 'lucide-react';
 import { Button } from '@memori.ai/ui';
 import ContentPreviewModal from '../ContentPreviewModal';
 import Snippet from '../Snippet/Snippet';
-import { stripHTML, stripDocumentAttachmentTags } from '../../helpers/utils';
-import { getFileExtensionFromMime } from '../MediaWidget/MediaItemWidget.utils';
+import {
+  stripHTML,
+  stripDocumentAttachmentTags,
+  isOfficeNativeFilename,
+  getDocumentAttachmentAssetUrl,
+} from '../../helpers/utils';
+import { getDocumentBadgeLabel } from '../MediaWidget/MediaItemWidget.utils';
 import { useTranslation } from 'react-i18next';
 
 type FilePreviewProps = {
@@ -60,6 +65,15 @@ const FilePreview = ({
         return 'CSV';
       case 'html':
         return 'HTML';
+      case 'doc':
+      case 'docx':
+      case 'dotx':
+        return 'Word';
+      case 'xls':
+      case 'xltx':
+        return 'Excel';
+      case 'potx':
+        return 'PowerPoint';
       case 'jpg':
       case 'jpeg':
         return 'JPEG';
@@ -111,9 +125,7 @@ const FilePreview = ({
     if (isHtmlFile(file)) {
       let htmlContent = content;
       if (htmlContent.includes('<') || htmlContent.includes('"')) {
-        const div = document.createElement('div');
-        div.innerHTML = htmlContent;
-        htmlContent = div.textContent || div.innerText || htmlContent;
+        htmlContent = stripHTML(htmlContent) || htmlContent;
       }
       htmlContent = stripDocumentAttachmentTags(htmlContent);
       return htmlContent;
@@ -169,7 +181,16 @@ const FilePreview = ({
                 <button
                   type="button"
                   className="memori--preview-item-trigger"
-                  onClick={() => setSelectedFile(file)}
+                  onClick={() => {
+                    if (isOfficeNativeFilename(file.name || '')) {
+                      const url = getDocumentAttachmentAssetUrl(file);
+                      if (url) {
+                        window.open(url, '_blank', 'noopener,noreferrer');
+                      }
+                    } else {
+                      setSelectedFile(file);
+                    }
+                  }}
                   aria-label={file.name}
                 >
                   {isImageContent(file.content, file.type) ? (
@@ -184,7 +205,7 @@ const FilePreview = ({
                     <span className="memori--preview-filename">{file.name}</span>
                     <span className="memori--preview-filetype">
                       {file.mimeType
-                        ? getFileExtensionFromMime(file.mimeType)
+                        ? getDocumentBadgeLabel(file.mimeType, file.name)
                         : getFileType(file.name, file.type)}
                     </span>
                   </div>

package/src/components/Header/ChatConsumptionDropdown.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Message } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import GasStation from '../icons/GasStation';
 import { BADGE_EMOJI } from '../../helpers/llmUsage';
 
@@ -28,7 +29,8 @@ export interface ChatConsumptionDropdownProps {
   menuAlign?: 'start' | 'center' | 'end';
   trigger?:
     | ((
-        props: React.ButtonHTMLAttributes<HTMLButtonElement>
+        props: React.ButtonHTMLAttributes<HTMLButtonElement>,
+        state: { open: boolean }
       ) => React.ReactElement)
     | React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>>;
 }
@@ -263,6 +265,7 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   trigger,
 }) => {
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
 
   const hasConsumptionData = useMemo(
     () =>
@@ -279,11 +282,15 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   const renderDefaultTrigger = (
     triggerButtonProps: React.ButtonHTMLAttributes<HTMLButtonElement>
   ) => (
-    <Button
+    <IconButton
       {...triggerButtonProps}
       variant={triggerVariant}
       shape="default"
-      className="memori-header--button memori-header--button--sustainability"
+      active={open}
+      className={cx(
+        'memori-header--button memori-header--button--sustainability',
+        triggerButtonProps.className
+      )}
       aria-label={triggerLabel}
       title={triggerLabel}
       icon={
@@ -295,7 +302,8 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
     triggerButtonProps: React.ButtonHTMLAttributes<HTMLButtonElement>
   ) => {
     if (!trigger) return renderDefaultTrigger(triggerButtonProps);
-    if (typeof trigger === 'function') return trigger(triggerButtonProps);
+    if (typeof trigger === 'function')
+      return trigger(triggerButtonProps, { open });
     if (
       !React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(
         trigger
@@ -323,7 +331,11 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   };
 
   return (
-    <Dropdown className="memori-header--dropdown">
+    <Dropdown
+      className="memori-header--dropdown"
+      open={open}
+      onOpenChange={setOpen}
+    >
       <Dropdown.Trigger
         showChevron={false}
         render={props => renderTrigger(props)}