@memori.ai/memori-react 7.25.1 → 7.26.1

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { DialogState } from '@memori.ai/memori-api-client/dist/types';
+import { DialogState, Medium } from '@memori.ai/memori-api-client/dist/types';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
 import Button from '../ui/Button';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +9,7 @@ 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';
 export interface Props {
   dialogState?: DialogState;
   instruct?: boolean;
@@ -21,13 +21,7 @@ export interface Props {
   onChangeUserMessage: (userMessage: string) => void;
   sendMessage: (
     msg: string,
-    media?: {
-      mediumID: string;
-      mimeType: string;
-      content: string;
-      title?: string;
-      properties?: { [key: string]: any };
-    }
+    media?: (Medium & { type: string })[]
   ) => void;
   onTextareaFocus: () => void;
   onTextareaBlur: () => void;
@@ -41,6 +35,8 @@ export interface Props {
   microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   authToken?: string;
   showUpload?: boolean;
+  sessionID?: string;
+  apiURL?: string;
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -59,35 +55,60 @@ const ChatInputs: React.FC<Props> = ({
   startListening,
   stopListening,
   showUpload = false,
+  sessionID,
+  authToken,
+  apiURL,
 }) => {
   const { t } = useTranslation();
 
-  // State for file preview list
-  const [previewFiles, setPreviewFiles] = useState<
-    { name: string; id: string; content: string }[]
+  // State for document preview files
+  const [documentPreviewFiles, setDocumentPreviewFiles] = useState<
+    {
+      name: string;
+      id: string;
+      content: string;
+      mediumID: string | undefined;
+      mimeType: string;
+      url?: string;
+      type: string;
+    }[]
   >([]);
 
+  // Client
+  const client = apiURL ? memoriApiClient(apiURL) : null;
+  const { dialog } = client || {
+    dialog: { postMediumDeselectedEvent: null },
+  };
+
   /**
    * Handles sending a message, including any attached files
    */
-  const onSendMessage = () => {
+  const onSendMessage = (
+    files: {
+      name: string;
+      id: string;
+      content: string;
+      mediumID: string | undefined;
+      mimeType: string;
+      type: string;
+      url?: string;
+    }[]
+  ) => {
     sendMessage(
       userMessage,
-      previewFiles[0]
-        ? {
-            mediumID: '',
-            mimeType: 'text/plain',
-            content: previewFiles[0].content,
-            title: previewFiles[0].name,
-            properties: {
-              isAttachedFile: true,
-            },
-          }
-        : undefined
+      files.map(file => ({
+        mediumID: file.mediumID || '',
+        mimeType: file.mimeType,
+        content: file.content,
+        title: file.name,
+        properties: { isAttachedFile: true },
+        type: file.type,
+        url: file.url,
+      }))
     );
 
     // Reset states after sending
-    setPreviewFiles([]);
+    setDocumentPreviewFiles([]);
     stopAudio();
     speechSynthesis.speak(new SpeechSynthesisUtterance(''));
   };
@@ -100,20 +121,18 @@ const ChatInputs: React.FC<Props> = ({
       stopListening();
       sendMessage(
         userMessage,
-        previewFiles[0]
-          ? {
-              mediumID: '',
-              mimeType: 'text/plain',
-              content: previewFiles[0].content,
-              title: previewFiles[0].name,
-              properties: {
-                isAttachedFile: true,
-              },
-            }
-          : undefined
+        documentPreviewFiles.map(file => ({
+          mediumID: file.mediumID || '',
+          mimeType: file.mimeType,
+          content: file.content,
+          title: file.name,
+          properties: { isAttachedFile: true },
+          type: file.type,
+          url: file.url,
+        }))
       );
 
-      setPreviewFiles([]);
+      setDocumentPreviewFiles([]);
       onChangeUserMessage('');
       resetTranscript();
     }
@@ -122,9 +141,24 @@ const ChatInputs: React.FC<Props> = ({
   /**
    * Removes a file from the preview list
    */
-  const removeFile = (fileId: string) => {
-    setPreviewFiles((prev: { name: string; id: string; content: string }[]) =>
-      prev.filter((file: { id: string }) => file.id !== fileId)
+  const removeFile = async (fileId: string, mediumID: string | undefined) => {
+    console.log('removeFile', fileId);
+    // Call the MediumDeselected event if dialog API is available
+    if (dialog.postMediumDeselectedEvent && sessionID && mediumID) {
+      await dialog.postMediumDeselectedEvent(sessionID, mediumID);
+    }
+    setDocumentPreviewFiles(
+      (
+        prev: {
+          name: string;
+          id: string;
+          content: string;
+          mediumID: string | undefined;
+          mimeType: string;
+          type: string;
+          url?: string;
+        }[]
+      ) => prev.filter((file: { id: string }) => file.id !== fileId)
     );
   };
 
@@ -144,10 +178,23 @@ const ChatInputs: React.FC<Props> = ({
           dialogState?.state || ''
         )}
       />
+      {/* Preview for document files */}
       {showUpload && (
         <>
-          <FilePreview previewFiles={previewFiles} removeFile={removeFile} />
-          <UploadButton setPreviewFiles={setPreviewFiles} />
+          <FilePreview
+            previewFiles={documentPreviewFiles}
+            removeFile={removeFile}
+          />
+
+          {/* Replace the individual buttons with our unified upload component */}
+          <UploadButton
+            authToken={authToken}
+            apiUrl={apiURL}
+            sessionID={sessionID}
+            isMediaAccepted={dialogState?.acceptsMedia || false}
+            setDocumentPreviewFiles={setDocumentPreviewFiles}
+            documentPreviewFiles={documentPreviewFiles}
+          />
         </>
       )}
       <Button
@@ -155,7 +202,9 @@ const ChatInputs: React.FC<Props> = ({
         primary={!!userMessage?.length}
         disabled={!userMessage || userMessage.length === 0}
         className="memori-chat-inputs--send"
-        onClick={onSendMessage}
+        onClick={() => {
+          onSendMessage(documentPreviewFiles);
+        }}
         title={t('send') || 'Send'}
         icon={<Send />}
       />

package/src/components/FilePreview/FilePreview.css

@@ -1,155 +1,184 @@
-.memori--preview-container {
-    min-width: 200px;
-    padding: 12px;
-    border-radius: 8px;
-    margin-bottom: 12px;
-    animation: slide-in 0.3s ease;
-    background: white;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
-  }
+/* Updated FilePreview Styles */
 
-  .memori--preview-container.slide-down {
-    animation: slide-down 0.3s ease;
-  }
-
-  .memori--absolute-preview {
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    left: 0;
-  }
-
-  .memori--message-preview {
-    margin: 12px 0;
-  }
-
-  .memori--preview-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .memori--preview-item {
-    position: relative;
-    display: flex;
-    max-width: fit-content;
-    align-items: center;
-    padding: 8px;
-    border-radius: 8px;
-    animation: slide-in 0.3s ease;
-    background-color: #f8f9fa;
-    cursor: pointer;
-    gap: 8px;
-    transition: all 0.2s ease;
-  }
-
-  .memori--preview-item:hover {
-    background-color: #f1f3f5;
-    transform: translateX(4px);
-  }
-
-  .memori--preview-icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    fill: var(--memori-primary);
-  }
-
-  .memori--preview-filename {
-    overflow: hidden;
-    max-width: 200px;
-    color: #495057;
-    font-size: 14px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .memori--modal-title-preview {
-    margin-top: 12px;
-    margin-bottom: 12px;
-    font-size: 20px;
-    font-weight: 600;
-  }
-
-  .memori--remove-button {
-    position: absolute;
-    top: -4px;
-    right: -4px;
-    padding: 4px;
-    border: none;
-    border-radius: 50%;
-    background-color: #e03131;
-    color: white;
-    cursor: pointer;
+.memori--preview-container {
+  min-width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  animation: slide-in 0.3s ease;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.memori--preview-container.slide-down {
+  animation: slide-down 0.3s ease;
+}
+
+.memori--absolute-preview {
+  position: absolute;
+  bottom: 100%;
+}
+
+.memori--message-preview {
+  max-width: 100%;
+  margin: 12px 0;
+}
+
+.memori--preview-list {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  overflow-x: auto;
+}
+
+.memori--preview-item {
+  position: relative;
+  display: flex;
+  max-width: fit-content;
+  align-items: center;
+  padding: 8px;
+  border-radius: 8px;
+  animation: slide-in 0.3s ease;
+  background-color: #f8f9fa;
+  cursor: pointer;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.memori--preview-item:hover {
+  background-color: #f1f3f5;
+  transform: translateX(4px);
+}
+
+.memori--preview-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: #fff;
+  fill: var(--memori-primary);
+}
+
+.memori--preview-file-info {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.memori--preview-filename {
+  overflow: hidden;
+  max-width: 200px;
+  color: #495057;
+  font-size: 14px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori--preview-filetype {
+  margin-top: 2px;
+  color: #868e96;
+  font-size: 12px;
+}
+
+.memori--modal-title-preview {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.memori--remove-button {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  padding: 4px;
+  border: none;
+  border-radius: 50%;
+  background-color: #e03131;
+  color: white;
+  cursor: pointer;
+  opacity: 0;
+  transform: scale(0.75);
+  transition: all 0.2s ease;
+}
+
+.memori--remove-button.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.memori--remove-button:hover {
+  background-color: #c92a2a;
+  transform: scale(1.1);
+}
+
+.memori--remove-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.memori--modal-preview-file {
+  width: 100%;
+  max-width: 800px;
+  height: 100%;
+  padding: 12px;
+}
+
+.memori--preview-content {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f8f9fa;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from {
     opacity: 0;
-    transform: scale(0.75);
-    transition: all 0.2s ease;
+    transform: scale(0.95);
   }
-
-  .memori--remove-button.visible {
+  to {
     opacity: 1;
     transform: scale(1);
   }
+}
 
-  .memori--remove-button:hover {
-    background-color: #c92a2a;
-    transform: scale(1.1);
-  }
-
-  .memori--remove-icon {
-    width: 12px;
-    height: 12px;
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
   }
-
-  .memori--modal-preview-file {
-    width: 100%;
-    max-width: 800px;
-    height: 100%;
-    padding: 12px;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
   }
-
-  @keyframes scaleIn {
-    from { 
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to { 
-      opacity: 1;
-      transform: scale(1);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  @keyframes slide-up {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+@keyframes slide-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
   }
-  
-  @keyframes slide-in {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  to {
+    opacity: 0;
+    transform: translateY(10px);
   }
-
-  @keyframes slide-down {
-    from {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+}