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

package/src/components/ChatInputs/ChatInputs.css

@@ -3,28 +3,38 @@
     z-index: 10;
     bottom: 0;
     width: 100%;
+    min-width: 0;
+    max-width: 100%;
     padding: 0;
-    padding-bottom: 1.5rem;
+    /* padding-bottom: 1.5rem; */
     margin: 0;
+    overflow-x: hidden;
     /* background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); */
 }
 
 .memori-chat-inputs {
     position: relative;
     display: flex;
-    min-width: 98%;
-    max-width: 98%;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
     box-sizing: border-box;
     flex-flow: column;
     flex-shrink: 0;
     padding: 0;
-    padding: 8px 12px !important;
+    padding: var(--memori-spacing-sm) calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) !important;
     border: none;
-    border-radius: 12px;
+    border-radius: var(--memori-radius-box);
     margin: 0;
     margin: auto;
-    background: white;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background-color: var(--memori-secondary-background);
+    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
+    overflow-x: hidden;
+}
+
+[data-theme='dark'] .memori-chat-inputs,
+.memori-chat-inputs[data-theme='dark'] {
+    background-color: var(--memori-main-background);
 }
 
 .memori-chat-inputs:disabled {
@@ -48,11 +58,11 @@
     box-sizing: border-box;
     align-items: center;
     padding: 0 1rem;
-    padding: 12px;
-    border-radius: var(--memori-border-radius);
+    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+    border-radius: var(--memori-radius-box);
     /* max-width: 48rem; */
     margin: 0 auto;
-    background: #fff;
+    background-color: transparent;
     gap: 0;
     grid-template-areas: 'leading primary trailing';
     grid-template-columns: auto 1fr auto;
@@ -74,7 +84,7 @@
 .memori-chat-inputs--leading {
     display: flex;
     align-items: center;
-    padding-right: 6px;
+    padding-right: var(--memori-spacing-sm);
     grid-area: leading;
 }
 
@@ -89,14 +99,14 @@
 .memori-chat-inputs--trailing {
     display: flex;
     align-items: center;
-    padding-left: 8px;
+    padding-left: var(--memori-spacing-sm);
     grid-area: trailing;
 }
 
 .memori-chat-inputs--trailing-inner {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: calc(var(--memori-spacing-xs) + 2px);
 }
 
 /* Plus button styling */
@@ -112,22 +122,19 @@
 
 .memori-chat-inputs--upload-wrapper .memori-button {
     display: flex;
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
     align-items: center;
     justify-content: center;
-    padding: 0;
+    padding: var(--memori-spacing-sm);
     border: none !important;
     background: transparent !important;
     box-shadow: none !important;
-    color: #000 !important;
+    color: var(--memori-text-color) !important;
     cursor: pointer;
     transition: opacity 0.2s ease;
 }
 
 .memori-chat-inputs--upload-wrapper .memori-button:hover {
-    background: transparent !important;
+    background: var(--memori-secondary-background) !important;
     opacity: 0.7;
 }
 
@@ -166,7 +173,7 @@
     padding: 0;
     border: none;
     background: transparent;
-    color: #000;
+    color: var(--memori-text-color);
     cursor: pointer;
     transition: opacity 0.2s ease;
 }
@@ -201,6 +208,7 @@
 .memori-chat-inputs--send-btn .icon {
     width: 20px;
     height: 20px;
+    color: #fff;
     fill: #fff;
 }
 
@@ -216,56 +224,50 @@
 }
 
 .memori-chat-inputs--mic-btn--listening {
-    color: #10a37f;
+    color: var(--memori-text-color);
 }
 
 .memori-chat-inputs--mic {
-    font-size: 125%;
+    font-size: 100%;
 }
-
 /* Style MicrophoneButton component when used in trailing area */
 .memori-chat-inputs--trailing .memori-chat-inputs--mic {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
     padding: 0;
     border: none;
     background: transparent;
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-chat-inputs--trailing .memori-chat-inputs--mic .memori-button {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
     padding: 0;
     border: none;
     background: transparent;
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 /* Send button styling - ChatGPT style */
 .memori-chat-inputs--send-btn {
     display: flex;
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    padding: 0;
     border: none;
-    border-radius: var(--memori-border-radius);
-    background: #000;
-    background: var(--memori-chat-user-bubble-bg);
-    color: #fff;
+    border-radius: var(--memori-radius-box);
+    background: var(--memori-primary);
+    color: var(--memori-text-color);
     cursor: pointer;
     transition: all 0.2s ease;
 }
 
 .memori-chat-inputs--send-btn:disabled {
     /* background: #f4f4f4; */
-    color: #f4f4f4;
+    color: #fff;
     cursor: not-allowed;
     opacity: 0.3;
 }
@@ -277,18 +279,19 @@
 .memori-chat-inputs--trailing .memori-chat-inputs--mic svg {
     width: 20px;
     height: 20px;
+    margin-right: 0;
 }
 
 .memori-chat-inputs--send-btn--active {
     /* background: #000; */
-    color: #fff;
+    color: var(--memori-text-color);
 }
 
 .memori-chat-inputs--send-btn--loading {
     width: 16px;
     height: 16px;
     border: 2px solid currentColor;
-    border-radius: var(--memori-border-radius);
+    border-radius: var(--memori-radius-box);
     border-top-color: transparent;
     animation: spin 0.8s linear infinite;
 }
@@ -305,16 +308,17 @@
     min-height: 32px;
     align-items: center;
     justify-content: center;
-    padding: 8px 60px;
-    margin-top: -4px;
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 12px;
-    line-height: 1.5;
+    padding: var(--memori-spacing-sm)
+        calc(var(--memori-spacing-3xl) + var(--memori-spacing-sm) + var(--memori-spacing-xs));
+    margin-top: calc(-1 * var(--memori-spacing-xs));
+    color: var(--memori-text-color);
+    font-size: 0.75rem;
+    line-height: var(--memori-text-line-normal);
     text-align: center;
 }
 
 .memori-chat-inputs--disclaimer a {
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--memori-text-color);
     cursor: pointer;
     text-decoration: underline;
 }
@@ -323,18 +327,31 @@
     opacity: 0.8;
 }
 
+.memori-chat-inputs--ai-note {
+    margin: var(--memori-spacing-xs) var(--memori-spacing-sm) 0;
+    color: color-mix(in oklch, var(--memori-text-color) 68%, transparent);
+    font-size: 0.75rem;
+    line-height: 1.3;
+    text-align: center;
+}
+
 @media (max-width: 768px) {
     .memori-chat-inputs--disclaimer {
-        padding: 8px 16px;
+        padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    }
+
+    .memori-chat-inputs--ai-note {
+        margin-right: var(--memori-spacing-xs);
+        margin-left: var(--memori-spacing-xs);
     }
 }
 
 /* Legacy support for old button classes */
 .memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
-    margin-left: 0.33rem;
+    margin-left: var(--memori-spacing-sm);
 }
 
 .memori-chat-inputs .memori--conversation-button {
     background: #fff;
-    color: #000;
+    color: var(--memori-text-color);
 }

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -5,6 +5,7 @@ import I18nWrapper from '../../I18nWrapper';
 import { dialogState } from '../../mocks/data';
 
 import './ChatInputs.css';
+import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
   title: 'Widget/Chat inputs (footer)',
@@ -52,16 +53,18 @@ const Template: Story<Props> = args => {
 
   return (
     <I18nWrapper>
-      <div style={{ paddingTop: '10rem' }}>
-        <ChatInputs
-          {...args}
-          listening={listening}
-          startListening={startListening}
-          stopListening={stopListening}
-          userMessage={userMessage}
-          onChangeUserMessage={setUserMessage}
-        />
-      </div>
+      <AlertProvider defaultDuration={5000}>
+        <div style={{ paddingTop: '10rem' }}>
+          <ChatInputs
+            {...args}
+            listening={listening}
+            startListening={startListening}
+            stopListening={stopListening}
+            userMessage={userMessage}
+            onChangeUserMessage={setUserMessage}
+          />
+        </div>
+      </AlertProvider>
     </I18nWrapper>
   );
 };

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import { DialogState, Medium } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
-import toast from 'react-hot-toast';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
-import Send from '../icons/Send';
+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 cx from 'classnames';
-import Microphone from '../icons/Microphone';
 import UploadButton from '../UploadButton/UploadButton';
 import FilePreview from '../FilePreview/FilePreview';
 import memoriApiClient from '@memori.ai/memori-api-client';
@@ -49,6 +49,8 @@ export interface Props {
   pasteAsCardLineThreshold?: number;
   /** When pasted text exceeds this length, it is added as a document card. */
   pasteAsCardCharThreshold?: number;
+  /** When false, hides the AI disclaimer below the input (e.g. pre-start / start panel). */
+  showAiGeneratedNote?: boolean;
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -78,9 +80,10 @@ const ChatInputs: React.FC<Props> = ({
   maxDocumentContentLength,
   pasteAsCardLineThreshold,
   pasteAsCardCharThreshold,
+  showAiGeneratedNote = true,
 }) => {
   const { t } = useTranslation();
-
+  const alertManager = useAlertManager();
   // State for textarea expansion
   const [isExpanded, setIsExpanded] = useState(false);
   const [uploadingCount, setUploadingCount] = useState(0);
@@ -245,13 +248,14 @@ const ChatInputs: React.FC<Props> = ({
         lengthAfterPaste > maxTextareaCharacters
       ) {
         e.preventDefault();
-        toast(
-          t('upload.pasteContentExceedsLimit', {
+        alertManager.add({
+          id: `paste-content-exceeds-limit-${Date.now()}`,
+          title: t('upload.pasteContentExceedsLimit', {
             defaultValue:
               'Pasted content exceeds the size limit. Try shortening the text or splitting it into smaller parts.',
           }),
-          { icon: '⚠️' }
-        );
+          data: { severity: 'error', closable: true },
+        });
         return;
       }
 
@@ -268,12 +272,14 @@ const ChatInputs: React.FC<Props> = ({
       const maxDocs = maxDocumentsPerMessage ?? 10;
       if (documentPreviewFiles.length >= maxDocs) {
         e.preventDefault();
-        toast.error(
-          t('upload.pasteMaxAttachmentsReached', {
+        alertManager.add({
+          id: `paste-max-attachments-reached-${Date.now()}`,
+          title: t('upload.pasteMaxAttachmentsReached', {
             max: maxDocs,
             defaultValue: `Maximum ${maxDocs} attachments. Remove one to add this as a file.`,
-          })
-        );
+          }),
+          data: { severity: 'error', closable: true },
+        });
         return;
       }
 
@@ -284,13 +290,14 @@ const ChatInputs: React.FC<Props> = ({
 
       if (text.length > perDocumentLimit) {
         e.preventDefault();
-        toast(
-          t('upload.pasteContentExceedsLimit', {
+        alertManager.add({
+          id: `paste-content-exceeds-per-document-limit-${Date.now()}`,
+          title: t('upload.pasteContentExceedsLimit', {
             defaultValue:
               'Pasted content exceeds the size limit. Try shortening the text or splitting it into smaller parts.',
           }),
-          { icon: '⚠️' }
-        );
+          data: { severity: 'error', closable: true },
+        });
         return;
       }
 
@@ -334,9 +341,13 @@ ${text}
 
   const isDisabled =
     dialogState?.state === 'X2a' || dialogState?.state === 'X3';
-  const textareaDisabled = ['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes(
-    dialogState?.state || ''
-  );
+  const hasActiveSession = Boolean(sessionID?.trim());
+  const hasChatStarted = Boolean(dialogState);
+  const textareaDisabled =
+    !hasActiveSession ||
+    ['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes(dialogState?.state || '');
+  const microphoneDisabled =
+    isDisabled || textareaDisabled || !hasActiveSession || !hasChatStarted;
 
   return (
     <div className="memori-chat-inputs-wrapper">
@@ -348,7 +359,9 @@ ${text}
         disabled={isDisabled}
       >
         {/* Preview for document files (show when upload enabled or when paste added cards) */}
-        {(showUpload || documentPreviewFiles.length > 0 || uploadingCount > 0) && (
+        {(showUpload ||
+          documentPreviewFiles.length > 0 ||
+          uploadingCount > 0) && (
           <div className="memori-chat-inputs--preview-wrapper">
             <FilePreview
               previewFiles={documentPreviewFiles}
@@ -375,6 +388,7 @@ ${text}
                   maxDocumentsPerMessage={maxDocumentsPerMessage}
                   maxDocumentContentLength={maxDocumentContentLength}
                   onUploadLoadingChange={handleUploadLoadingChange}
+                  disabled={textareaDisabled || isDisabled}
                 />
               </div>
             )}
@@ -412,6 +426,7 @@ ${text}
                         'Start listening'
                   }
                   onClick={() => {
+                    if (microphoneDisabled) return;
                     if (listening) {
                       stopListening();
                     } else {
@@ -419,7 +434,7 @@ ${text}
                       startListening();
                     }
                   }}
-                  disabled={isDisabled}
+                  disabled={microphoneDisabled}
                   aria-label={
                     listening
                       ? t('write_and_speak.micButtonPopoverListening') ||
@@ -428,55 +443,66 @@ ${text}
                         'Start listening'
                   }
                 >
-                  <Microphone className="icon" />
+                  <Mic className="icon" aria-hidden />
                 </button>
               )}
               {showMicrophone && microphoneMode === 'HOLD_TO_TALK' && (
                 <MicrophoneButton
                   listening={listening}
                   startListening={startListening}
-                  stopListening={() => {
-                    stopListening();
-                    if (listening && !!userMessage?.length) {
-                      sendMessage(userMessage);
-                    }
-                  }}
+                  stopListening={stopListening}
                   stopAudio={stopAudio}
+                  disabled={microphoneDisabled}
                 />
               )}
-              <button
-                type="button"
-                className={cx('memori-chat-inputs--send-btn', {
-                  'memori-chat-inputs--send-btn--active': !!userMessage?.length,
-                  'memori-chat-inputs--send-btn--disabled':
-                    !userMessage || userMessage.length === 0,
-                })}
-                onClick={() => {
-                  onSendMessage(documentPreviewFiles);
+              <Tooltip
+                placement="top"
+                className="memori-chat-inputs--send-btn-tooltip"
+                slotProps={{
+                  positioner: {
+                    className:
+                      'memori-chat-inputs--send-btn-tooltip-positioner',
+                  },
                 }}
-                disabled={!userMessage || userMessage.length === 0 || isTyping || uploadingCount > 0}
                 title={t('send') || 'Send'}
-                aria-label={t('send') || 'Send'}
               >
-                {isTyping ? (
-                  <div className="memori-chat-inputs--send-btn--loading" />
-                ) : (
-                  <Send className="icon" />
-                )}
-              </button>
+                <Button
+                  variant="primary"
+                  className={cx('memori-chat-inputs--send-btn', {
+                    'memori-chat-inputs--send-btn--active':
+                      !!userMessage?.length,
+                    'memori-chat-inputs--send-btn--disabled':
+                      !userMessage || userMessage.length === 0,
+                  })}
+                  onClick={() => {
+                    onSendMessage(documentPreviewFiles);
+                  }}
+                  disabled={
+                    !userMessage ||
+                    userMessage.length === 0 ||
+                    isTyping ||
+                    uploadingCount > 0
+                  }
+                  title={t('send') || 'Send'}
+                  size="sm"
+                  aria-label={t('send') || 'Send'}
+                >
+                  {isTyping ? (
+                    <div className="memori-chat-inputs--send-btn--loading" />
+                  ) : (
+                    <Send className="icon" />
+                  )}
+                </Button>
+              </Tooltip>
             </div>
           </div>
         </div>
       </fieldset>
-      {/* Disclaimer */}
-      <div className="memori-chat-inputs--disclaimer">
-        <div className="memori-chat-inputs--disclaimer-text">
-          {t(
-            'write_and_speak.aiDisclaimer',
-            "L'agente può commettere errori. Assicurati di verificare le risposte."
-          )}
-        </div>
-      </div>
+      {showAiGeneratedNote && (
+        <p className="memori-chat-inputs--ai-note">
+          {t('aiGeneratedNote', { defaultValue: 'Generato da AI' })}
+        </p>
+      )}
     </div>
   );
 };

package/src/components/ChatTextArea/ChatTextArea.css

@@ -67,7 +67,7 @@
     .memori-chat-textarea--inner {
         max-height: 200px;
     }
-    
+
     .memori-chat-textarea--expanded .memori-chat-textarea--inner {
         max-height: 200px;
     }
@@ -77,7 +77,7 @@
     .memori-chat-textarea--inner {
         max-height: 150px;
     }
-    
+
     .memori-chat-textarea--expanded .memori-chat-textarea--inner {
         max-height: 150px;
     }
@@ -92,13 +92,13 @@ textarea.memori-chat-textarea--input {
     min-height: 36px;
     max-height: 208px;
     box-sizing: border-box;
-    /* padding: 8px 0; */
+    /* padding: var(--memori-spacing-sm) 0; */
     border: none;
     background: transparent;
-    color: #000;
-    font-family: var(--memori-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);
-    font-size: 16px;
-    line-height: 1.5;
+    color: var(--memori-text-color, #000);
+    font-family: var(--memori-font-family);
+    font-size: var(--memori-text-size-base);
+    line-height: var(--memori-text-line-normal);
     overflow-y: auto;
     resize: none;
     scrollbar-width: thin;
@@ -107,7 +107,7 @@ textarea.memori-chat-textarea--input {
 
 /* Placeholder styling */
 textarea.memori-chat-textarea--input::placeholder {
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--memori-text-color);
 }
 
 /* Scrollbar styling */
@@ -120,7 +120,7 @@ textarea.memori-chat-textarea--input::-webkit-scrollbar-track {
 }
 
 textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
-    border-radius: 3px;
+    border-radius: var(--memori-radius-box);
     background: rgba(0, 0, 0, 0.2);
 }
 
@@ -132,14 +132,14 @@ textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
 @media (max-width: 768px) {
     textarea.memori-chat-textarea--input {
         max-height: 200px;
-        font-size: 16px; /* Prevent zoom on iOS */
+        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
     }
 }
 
 @media (max-width: 480px) {
     textarea.memori-chat-textarea--input {
         max-height: 150px;
-        font-size: 16px; /* Prevent zoom on iOS */
+        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
     }
 }
 
@@ -159,7 +159,7 @@ textarea.memori-chat-textarea--input:focus {
 
 button.memori-chat-textarea--expand-button {
     padding: 0.25rem 0.5rem;
-    color: #000;
+    color: var(--memori-text-color);
     opacity: 0.6;
     transition: all 0.2s ease-in-out;
 }
@@ -183,3 +183,29 @@ button.memori-chat-textarea--expand-button:focus {
     .memori-chat-textarea--expand-button {
     opacity: 1;
 }
+
+/* Dark theme */
+[data-theme='dark'] .memori-chat-textarea--counter {
+    color: var(--memori-text-color, rgba(255, 255, 255, 0.85));
+}
+
+[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);
+}
+
+[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));
+}