@memori.ai/memori-react 8.12.0 → 8.13.0

package/esm/locales/it.json

@@ -37,6 +37,7 @@
     "last_7_days": "Ultimi 7 giorni",
     "last_30_days": "Ultimi 30 giorni",
     "previous": "Precedente",
+    "placeholder": "Fai una domanda",
     "copy": "Copia",
     "copyRawCode": "Copia codice sorgente",
     "copyToClipboard": "Copia negli appunti",
@@ -273,10 +274,11 @@
     "upload": {
         "loginRequired": "Login richiesto",
         "loginRequiredDescription": "Per caricare immagini, devi prima accedere",
-        "uploadFiles": "Carica file",
-        "uploadImage": "Carica immagine",
+        "uploadFiles": "Carica file ({{shortcut}}+O per aprire il selettore file)",
+        "uploadFilesWithShortcut": "{{shortcut}}+O per aprire il selettore file",
+        "uploadImages": "Carica immagini",
         "lastDocumentSlot": "Carica ultimo documento",
-        "uploadDocument": "Carica documento",
+        "uploadDocuments": "Carica documenti",
         "maxDocumentsReached": "Puoi caricare fino a {{max}} documenti",
         "replace": "Sostituisci documento",
         "maxImagesReached": "Puoi caricare fino a {{max}} immagini",
@@ -286,13 +288,14 @@
         "uploadSuccess": "Caricamento riuscito",
         "remaining": "rimanenti",
         "maxReached": "Limite raggiunto",
-        "titleImage": "Immagine: {{title}}",
+        "titleImage": "Titolo immagine: {{title}}",
         "titleImageUpload": "Carica immagini",
         "titleHelp": "Aggiungi un titolo descrittivo per aiutare l'AI a fornire risposte più appropriate.",
         "titlePlaceholder": "Inserisci il titolo dell'immagine",
         "uploadSuccessDescription": "Il file è stato caricato con successo",
         "partialUpload": "Solo {{uploaded}} immagini su {{total}} immagini saranno caricate. Massimo {{max}} immagini consentite.",
-        "cancel": "Annulla"
+        "cancel": "Annulla",
+        "dragAndDropFiles": "Trascina qui i file per aggiungerli alla chat"
     },
     "gamification": {
         "level": "Livello",

package/esm/styles.css

@@ -43,7 +43,6 @@
 @import url('./components/ShareButton/ShareButton.css');
 @import url('./components/Snippet/Snippet.css');
 @import url('./components/StartPanel/StartPanel.css');
-@import url('./components/UploadMenu/UploadMenu.css');
 @import url('./components/DateSelector/DateSelector.css');
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
 @import url('./components/KnownFacts/KnownFacts.css');
@@ -97,7 +96,7 @@ body.sb-show-main #root,
     --memori-chat-bubble-bg: #fff;
     --memori-chat-user-bubble-bg: var(--memori-primary);
     --memori-text-color: #000;
-    --memori-border-radius: 5px;
+    --memori-border-radius: 8px;
     --memori-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
     --memori-button-bg: #fff;
     --memori-button-text: #000;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.12.0",
+  "version": "8.13.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Chat/Chat.css

@@ -52,7 +52,7 @@
     flex: 1;
     flex-direction: column;
     padding: 2rem 10px;
-    mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%);
+    /* mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%); */
     overflow-y: auto;
     scroll-behavior: smooth;
 }
@@ -76,8 +76,8 @@
     margin-bottom: 10px;
     background-position: center;
     background-size: cover;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
 }
 
 .memori-chat--cover+.memori-chat--bubble-initial {
@@ -146,4 +146,38 @@
 
 .memori-chat--known-tag {
     margin-right: 0.5rem;
+}
+
+/* Drag and drop overlay */
+.memori-chat--drag-overlay {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.7);
+    pointer-events: none;
+}
+
+.memori-chat--drag-overlay-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+    color: #fff;
+    opacity: 0.9;
+}
+
+.memori-chat--drag-overlay-text {
+    padding: 0 2rem;
+    color: #ffffff;
+    font-size: 1.2rem;
+    font-weight: 500;
+    text-align: center;
 }

package/src/components/Chat/Chat.tsx

@@ -21,6 +21,8 @@ import ChatInputs from '../ChatInputs/ChatInputs';
 import Typing from '../Typing/Typing';
 import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
 import ArtifactHandler from '../MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler';
+import { DocumentIcon } from '../icons/Document';
+import { useTranslation } from 'react-i18next';
 export interface Props {
   memori: Memori;
   tenant?: Tenant;
@@ -125,7 +127,8 @@ const Chat: React.FC<Props> = ({
   showFunctionCache = false,
 }) => {
   const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
-
+  const [isDragging, setIsDragging] = useState(false);
+  const { t } = useTranslation();
   const scrollToBottom = () => {
     if (isHistoryView) return;
     setTimeout(() => {
@@ -140,13 +143,13 @@ const Chat: React.FC<Props> = ({
   }, [history, preview, isHistoryView]);
 
   // Scroll to bottom when textarea is expanded
-  useEffect(() => {
-    if (isTextareaExpanded && !isHistoryView) {
-      setTimeout(() => {
-        scrollToBottom();
-      }, 250);
-    }
-  }, [isTextareaExpanded, isHistoryView]);
+  // useEffect(() => {
+  //   if (isTextareaExpanded && !isHistoryView) {
+  //     setTimeout(() => {
+  //       scrollToBottom();
+  //     }, 250);
+  //   }
+  // }, [isTextareaExpanded, isHistoryView]);
 
   const onTextareaFocus = () => {
     stopListening();
@@ -154,16 +157,16 @@ const Chat: React.FC<Props> = ({
 
     if (hasTouch) setEnableFocusChatInput(true);
     // if the user is on mobile and had not recorded audio, add the chat-focused class to the chat wrapper
-    if (hasTouch && window.innerWidth <= 768) {
-      document.getElementById('chat-wrapper')?.classList?.add('chat-focused');
-      // add the chat-focused class to the memori widget
-      document
-        .querySelector('.memori.memori-widget')
-        ?.classList?.add('chat-focused');
-      setTimeout(() => {
-        scrollToBottom();
-      }, 300);
-    }
+    // if (hasTouch && window.innerWidth <= 768) {
+    //   document.getElementById('chat-wrapper')?.classList?.add('chat-focused');
+    //   // add the chat-focused class to the memori widget
+    //   document
+    //     .querySelector('.memori.memori-widget')
+    //     ?.classList?.add('chat-focused');
+    //   setTimeout(() => {
+    //     scrollToBottom();
+    //   }, 300);
+    // }
   };
   const onTextareaBlur = () => {
     if (
@@ -183,16 +186,82 @@ const Chat: React.FC<Props> = ({
     setIsTextareaExpanded(expanded);
   };
 
+  // Drag and drop handlers for overlay
+  useEffect(() => {
+    let dragCounter = 0;
+    const chatWrapper = document.getElementById('chat-wrapper');
+
+    const handleDragEnter = (e: DragEvent) => {
+      // Only show overlay if dragging files (not text/links)
+      if (e.dataTransfer?.types.includes('Files')) {
+        dragCounter++;
+        if (dragCounter === 1) {
+          setIsDragging(true);
+        }
+      }
+    };
+
+    const handleDragLeave = (e: DragEvent) => {
+      if (e.dataTransfer?.types.includes('Files')) {
+        dragCounter--;
+        if (dragCounter === 0) {
+          setIsDragging(false);
+        }
+      }
+    };
+
+    const handleDragOver = (e: DragEvent) => {
+      // Prevent default to allow drop, but don't stop propagation
+      if (e.dataTransfer?.types.includes('Files')) {
+        e.preventDefault();
+      }
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      // Reset dragging state, but let UploadButton handle the actual drop
+      if (e.dataTransfer?.types.includes('Files')) {
+        dragCounter = 0;
+        setIsDragging(false);
+      }
+    };
+
+    if (chatWrapper) {
+      chatWrapper.addEventListener('dragenter', handleDragEnter);
+      chatWrapper.addEventListener('dragleave', handleDragLeave);
+      chatWrapper.addEventListener('dragover', handleDragOver);
+      chatWrapper.addEventListener('drop', handleDrop);
+    }
+
+    return () => {
+      if (chatWrapper) {
+        chatWrapper.removeEventListener('dragenter', handleDragEnter);
+        chatWrapper.removeEventListener('dragleave', handleDragLeave);
+        chatWrapper.removeEventListener('dragover', handleDragOver);
+        chatWrapper.removeEventListener('drop', handleDrop);
+      }
+    };
+  }, []);
+
   return (
     <div
       className={cx('memori-chat--wrapper', {
         'memori-chat-wrapper--translate': translateTo,
         'memori-chat-wrapper--expanded': isTextareaExpanded,
+        'memori-chat-wrapper--dragging': isDragging,
       })}
       id="chat-wrapper"
       lang={translateTo?.toUpperCase()}
       data-memori-lang={memori.culture?.split('-')?.[0]?.toUpperCase() ?? 'EN'}
     >
+      {/* Drag and drop overlay */}
+      {isDragging && (
+        <div className="memori-chat--drag-overlay">
+          <DocumentIcon className="memori-chat--drag-overlay-icon" />
+          <span className="memori-chat--drag-overlay-text">
+            {t('upload.dragAndDropFiles') ?? 'Drag and drop files here to add them to the chat'}
+          </span>
+        </div>
+      )}
       <div
         className={cx('memori-chat--history', {
           'memori-chat--history-touch': hasTouchscreen(),
@@ -316,8 +385,7 @@ const Chat: React.FC<Props> = ({
                 media={[
                   // Filter out HTML and plain text media items from the message
                   ...(message?.media?.filter(
-                    m =>
-                      m.mimeType !== 'text/html' && !m.properties?.functionSignature
+                    m => !m.properties?.functionSignature
                   ) || []),
 
                   // Extract document attachments that are embedded in the message text
@@ -364,7 +432,7 @@ const Chat: React.FC<Props> = ({
                     return attachments;
                   })(),
                 ]}
-                links={message?.media?.filter(m => m.mimeType === 'text/html')}
+                // links={message?.media?.filter(m => m.mimeType === 'text/html')}
                 sessionID={sessionID}
                 baseUrl={baseUrl}
                 apiUrl={apiUrl}