@memori.ai/memori-react 7.11.3 → 7.12.0

package/src/components/FilePreview/FilePreview.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import PreviewIcon from '../icons/Preview';
+import CloseIcon from '../icons/Close';
+import Button from '../ui/Button';
+import Modal from '../ui/Modal';
+
+type FilePreviewProps = {
+  previewFiles: { name: string; id: string; content: string }[];
+  removeFile: (id: string) => void;
+  allowRemove?: boolean;
+  isMessagePreview?: boolean;
+};
+
+const FilePreview = ({
+  previewFiles,
+  removeFile,
+  allowRemove = true,
+  isMessagePreview = false,
+}: FilePreviewProps) => {
+  const [selectedFile, setSelectedFile] = useState<{
+    name: string;
+    content: string;
+  } | null>(null);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  return (
+    <>
+      {previewFiles.length > 0 && (
+        <div
+          className={`memori--preview-container ${
+            isMessagePreview
+              ? 'memori--message-preview'
+              : 'memori--absolute-preview'
+          }`}
+        >
+          <div className="memori--preview-list">
+            {previewFiles.map(file => (
+              <div
+                key={file.id}
+                className="memori--preview-item"
+                onMouseEnter={() => setHoveredId(file.id)}
+                onMouseLeave={() => setHoveredId(null)}
+                onClick={() => setSelectedFile(file)}
+              >
+                <PreviewIcon className="memori--preview-icon" />
+                <span className="memori--preview-filename">{file.name}</span>
+
+                {allowRemove && (
+                  <Button
+                    shape="rounded"
+                    icon={<CloseIcon />}
+                    danger
+                    className={`memori--remove-button ${
+                      hoveredId === file.id ? 'visible' : ''
+                    }`}
+                    onClick={e => {
+                      e.stopPropagation();
+                      removeFile(file.id);
+                    }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <Modal
+        width="80%"
+        widthMd="80%"
+        open={!!selectedFile}
+        className="memori--modal-preview-file"
+        onClose={() => setSelectedFile(null)}
+        closable
+        title={selectedFile?.name}
+      >
+        <div className="memori--preview-content" style={{ whiteSpace: 'pre-wrap', maxHeight: '70vh', overflowY: 'auto' }}>
+          {selectedFile?.content}
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default FilePreview;

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

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders FilePreview unchanged 1`] = `<div />`;
+
+exports[`renders FilePreview with one file 1`] = `
+<div>
+  <div
+    class="memori--preview-container memori--absolute-preview"
+  >
+    <div
+      class="memori--preview-list"
+    >
+      <div
+        class="memori--preview-item"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori--preview-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+          />
+        </svg>
+        <span
+          class="memori--preview-filename"
+        >
+          test.pdf
+        </span>
+        <button
+          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button "
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders FilePreview with two files 1`] = `
+<div>
+  <div
+    class="memori--preview-container memori--absolute-preview"
+  >
+    <div
+      class="memori--preview-list"
+    >
+      <div
+        class="memori--preview-item"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori--preview-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+          />
+        </svg>
+        <span
+          class="memori--preview-filename"
+        >
+          test.pdf
+        </span>
+        <button
+          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button "
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="memori--preview-item"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori--preview-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+          />
+        </svg>
+        <span
+          class="memori--preview-filename"
+        >
+          test.pdf
+        </span>
+        <button
+          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button "
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -123,6 +123,15 @@ type MemoriTextEnteredEvent = CustomEvent<{
   hasBatchQueued?: boolean;
 }>;
 
+/**
+ * Dispatches a MemoriTextEntered event to simulate a user typing a message
+ * @param message The text message to send
+ * @param waitForPrevious Whether to wait for previous message to finish before sending (default true)
+ * @param hidden Whether to hide the message from chat history (default false)
+ * @param typingText Optional custom typing indicator text
+ * @param useLoaderTextAsMsg Whether to use the loader text as the message (default false)
+ * @param hasBatchQueued Whether there are more messages queued to be sent (default false)
+ */
 const typeMessage = (
   message: string,
   waitForPrevious = true,
@@ -143,17 +152,24 @@ const typeMessage = (
   });
   document.dispatchEvent(e);
 
+  // Special handling for Safari on iOS devices
   const isSafariIOS =
     window.navigator.userAgent.includes('Safari') &&
     !window.navigator.userAgent.includes('Chrome') &&
     /iPad|iPhone|iPod/.test(navigator.userAgent);
 
   if (isSafariIOS) {
+    // Dispatch end speak event after short delay for iOS Safari
     setTimeout(() => {
       document.dispatchEvent(new CustomEvent('MemoriEndSpeak'));
     }, 300);
   }
 };
+
+/**
+ * Helper function to send a hidden message
+ * Wraps typeMessage with hidden=true and passes through other params
+ */
 const typeMessageHidden = (
   message: string,
   waitForPrevious = true,
@@ -334,6 +350,7 @@ export interface LayoutProps {
   sessionId?: string;
   hasUserActivatedSpeak?: boolean;
   showInstruct?: boolean;
+  showUpload?: boolean;
   loading?: boolean;
 }
 
@@ -367,6 +384,7 @@ export interface Props {
   showOnlyLastMessages?: boolean;
   showTypingText?: boolean;
   showLogin?: boolean;
+  showUpload?: boolean;
   preview?: boolean;
   embed?: boolean;
   height?: number | string;
@@ -421,6 +439,7 @@ const MemoriWidget = ({
   showTypingText = false,
   showClear = false,
   showLogin = false,
+  showUpload = false,
   showOnlyLastMessages,
   height = '100vh',
   secret,
@@ -718,6 +737,18 @@ const MemoriWidget = ({
       },
     ]);
   };
+  /**
+   * Sends a message to the Memori and handles the response
+   * @param text The text message to send
+   * @param media Optional media attachments
+   * @param newSessionId Optional new session ID to use
+   * @param translate Whether to translate the message before sending (default true)
+   * @param translatedText Optional pre-translated text
+   * @param hidden Whether to hide the message from chat history (default false)
+   * @param typingText Optional custom typing indicator text
+   * @param useLoaderTextAsMsg Whether to use the loader text as the message (default false)
+   * @param hasBatchQueued Whether there are more messages queued to be sent (default false)
+   */
   const sendMessage = async (
     text: string,
     media?: Medium[],
@@ -729,12 +760,14 @@ const MemoriWidget = ({
     useLoaderTextAsMsg = false,
     hasBatchQueued = false
   ) => {
+    // Get the session ID from params or global state
     const sessionID =
       newSessionId ||
       sessionId ||
       (window.getMemoriState() as MemoriSession)?.sessionID;
     if (!sessionID || !text?.length) return;
 
+    // Add user message to chat history if not hidden
     if (!hidden)
       pushMessage({
         text: text,
@@ -746,6 +779,7 @@ const MemoriWidget = ({
           : !!newSessionId,
       });
 
+    // Show typing indicator
     setMemoriTyping(true);
     setTypingText(typingText);
 
@@ -753,6 +787,7 @@ const MemoriWidget = ({
     let gotError = false;
 
     try {
+      // Translate message if needed
       if (
         !hidden &&
         translate &&
@@ -769,6 +804,10 @@ const MemoriWidget = ({
         msg = translation.text;
       }
 
+      if (media?.length && media[0]?.properties?.isAttachedFile) {
+        msg = msg + ' ' + media[0].content;
+      }
+
       const { currentState, ...response } = await postTextEnteredEvent({
         sessionId: sessionID,
         text: msg,
@@ -778,6 +817,7 @@ const MemoriWidget = ({
           useLoaderTextAsMsg && typingText
             ? typingText
             : currentState.emission ?? currentDialogState?.emission;
+
         if (currentState.state === 'X4' && memori.giverTag) {
           const { currentState, ...resp } = await postTagChangedEvent(
             sessionID,
@@ -892,10 +932,10 @@ const MemoriWidget = ({
           }
         }
       } else if (response.resultCode === 404) {
+        // Handle expired session
         // remove last sent message, will set it as initial
         setHistory(h => [...h.slice(0, h.length - 1)]);
 
-        // post session timeout -> Z0/A0 -> restart session and re-send msg
         reopenSession(
           false,
           memoriPwd || memori.secretToken,
@@ -2515,6 +2555,8 @@ const MemoriWidget = ({
       ? true
       : integrationConfig?.showAIicon;
 
+  const enableUpload = showUpload ?? integrationConfig?.showUpload ?? false;
+
   const showWhyThisAnswer =
     integrationConfig?.showWhyThisAnswer === undefined
       ? true
@@ -3297,6 +3339,7 @@ const MemoriWidget = ({
     showDates,
     showContextPerLine,
     showAIicon,
+    showUpload: enableUpload,
     showWhyThisAnswer,
     showCopyButton,
     showTranslationOriginal,
@@ -3313,10 +3356,32 @@ const MemoriWidget = ({
     showMicrophone: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
     userMessage,
     onChangeUserMessage,
-    sendMessage: (msg: string, media?: Medium[]) => {
+    sendMessage: (
+      msg: string,
+      media?: {
+        mediumID: string;
+        mimeType: string;
+        content: string;
+        title?: string;
+        properties?: { [key: string]: any };
+      }
+    ) => {
       stopAudio();
       stopListening();
-      sendMessage(msg, media);
+      sendMessage(
+        msg,
+        media
+          ? [
+              {
+                mediumID: media.mediumID,
+                mimeType: media.mimeType,
+                content: media.content,
+                title: media.title,
+                properties: media.properties,
+              },
+            ]
+          : undefined
+      );
       setUserMessage('');
       resetTranscript();
     },