@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -0,0 +1,362 @@
+import React, { useState, useRef, useEffect } from 'react';
+import cx from 'classnames';
+import Spin from '../../ui/Spin';
+import Alert from '../../ui/Alert';
+import { ImageIcon } from '../../icons/Image';
+import Modal from '../../ui/Modal';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import { Asset, Medium } from '@memori.ai/memori-api-client/dist/types';
+import { useTranslation } from 'react-i18next';
+import Button from '../../ui/Button';
+
+// Types
+type PreviewFile = {
+  name: string;
+  id: string;
+  content: string;
+  type: 'image';
+  previewUrl?: string;
+  uploaded?: boolean;
+  file?: File;
+  error?: boolean;
+  title?: string;
+};
+
+// Props interface
+interface UploadImagesProps {
+  authToken?: string;
+  client?: ReturnType<typeof memoriApiClient>;
+  sessionID?: string;
+  isMediaAccepted?: boolean;
+  setDocumentPreviewFiles: any;
+  documentPreviewFiles: any;
+  onLoadingChange?: (loading: boolean) => void;
+  maxImages?: number;
+  memoriID?: string;
+  onImageError?: (error: { message: string; severity: 'error' | 'warning' | 'info' }) => void;
+  onValidateImageFile?: (file: File) => boolean;
+}
+
+const UploadImages: React.FC<UploadImagesProps> = ({
+  authToken = '',
+  sessionID = '',
+  client,
+  isMediaAccepted = false,
+  setDocumentPreviewFiles,
+  documentPreviewFiles,
+  onLoadingChange,
+  maxImages = 5,
+  memoriID = '',
+  onImageError,
+  onValidateImageFile,
+}) => {
+  const { t, i18n } = useTranslation();
+  // Client
+  const { backend, dialog } = client || {
+    backend: { uploadAsset: null, uploadAssetUnlogged: null },
+    dialog: { postMediumSelectedEvent: null, postMediumDeselectedEvent: null },
+  };
+
+  // State
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [filePreview, setFilePreview] = useState<string | null>(null);
+  const [imageTitle, setImageTitle] = useState('');
+  const [showUploadModal, setShowUploadModal] = useState(false);
+
+  // Refs
+  const imageInputRef = useRef<HTMLInputElement>(null);
+
+  // Update loading state in parent component
+  useEffect(() => {
+    if (onLoadingChange) {
+      onLoadingChange(isLoading);
+    }
+  }, [isLoading, onLoadingChange]);
+
+  // Check current image count
+  const currentImageCount = documentPreviewFiles.filter(
+    (file: any) => file.type === 'image'
+  ).length;
+
+  // Image upload
+  const validateImageFile = (file: File): boolean => {
+    if (onValidateImageFile) {
+      return onValidateImageFile(file);
+    }
+    return true;
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+
+    // Check if adding this file would exceed the limit
+    if (currentImageCount >= maxImages) {
+      onImageError?.({
+        message:
+          t('upload.maxImagesReached') ??
+          `Maximum ${maxImages} images allowed.`,
+        severity: 'error',
+      });
+      return;
+    }
+
+    const file = files[0]; // Only handle the first file
+
+    if (!validateImageFile(file)) {
+      if (imageInputRef.current) {
+        imageInputRef.current.value = '';
+      }
+      return;
+    }
+
+    // Set file and create preview
+    setSelectedFile(file);
+    setFilePreview(URL.createObjectURL(file));
+
+    // Set initial title as filename without extension
+    const fileName = file.name.split('.').slice(0, -1).join('.');
+    setImageTitle(fileName);
+
+    // Show upload modal with preview
+    setShowUploadModal(true);
+
+    if (imageInputRef.current) {
+      imageInputRef.current.value = '';
+    }
+  };
+
+  const handleTitleSubmit = async () => {
+    if (!selectedFile || !imageTitle.trim()) return;
+
+    setIsLoading(true);
+    setShowUploadModal(false);
+
+    try {
+      const reader = new FileReader();
+
+      reader.onload = async e => {
+        const fileDataUrl = e.target?.result as string;
+        const fileId = Math.random().toString(36).substr(2, 9);
+
+        if (client) {
+          try {
+            let asset: Asset;
+            let response;
+
+            if (authToken && backend?.uploadAsset) {
+              response = await backend.uploadAsset(
+                selectedFile.name,
+                fileDataUrl,
+                authToken
+              );
+            } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
+              response = await backend.uploadAssetUnlogged(
+                selectedFile.name,
+                fileDataUrl,
+                memoriID,
+                sessionID
+              );
+
+              if (!response) {
+                throw new Error('Upload failed');
+              }
+            } else {
+              throw new Error('Missing required parameters for upload');
+            }
+
+            asset = response.asset;
+            if (response.resultCode !== 0) {
+              throw new Error(response.resultMessage || 'Upload failed');
+            }
+
+            let medium: any = null;
+            if (dialog?.postMediumSelectedEvent && sessionID) {
+              medium = await dialog.postMediumSelectedEvent(sessionID, {
+                url: asset.assetURL,
+                mimeType: asset.mimeType,
+              } as Medium);
+            }
+
+            let finalMediumID: string | undefined = undefined;
+            if (medium?.currentState?.currentMedia) {
+              const existingMediumIDs = new Set(
+                documentPreviewFiles.map((file: any) => file.mediumID)
+              );
+
+              finalMediumID = medium.currentState.currentMedia.find(
+                (media: any) => !existingMediumIDs.has(media.mediumID)
+              )?.mediumID;
+            }
+
+            setDocumentPreviewFiles(
+              (
+                prevFiles: {
+                  name: string;
+                  id: string;
+                  content: string;
+                  type: string;
+                  mediumID: string | undefined;
+                  url: string;
+                  mimeType: string;
+                }[]
+              ) => [
+                ...prevFiles,
+                {
+                  name: imageTitle,
+                  id: fileId,
+                  url: asset.assetURL,
+                  content: asset.assetURL,
+                  type: 'image',
+                  mediumID: finalMediumID,
+                  mimeType: asset.mimeType,
+                },
+              ]
+            );
+          } catch (error) {
+            onImageError?.({
+              message: t('upload.uploadFailed') ?? 'Upload failed',
+              severity: 'error',
+            });
+          }
+        } else {
+          onImageError?.({
+            message:
+              t('upload.apiClientNotConfigured') ??
+              'API client not configured properly for media upload',
+            severity: 'warning',
+          });
+        }
+
+        setIsLoading(false);
+      };
+
+      reader.onerror = () => {
+        onImageError?.({
+          message: t('upload.fileReadingFailed') ?? 'File reading failed',
+          severity: 'error',
+        });
+        setIsLoading(false);
+      };
+
+      reader.readAsDataURL(selectedFile);
+    } catch (error) {
+      onImageError?.({
+        message: t('upload.uploadFailed') ?? 'Upload failed',
+        severity: 'error',
+      });
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancelUpload = () => {
+    setShowUploadModal(false);
+    setSelectedFile(null);
+    setFilePreview(null);
+    setImageTitle('');
+  };
+
+  return (
+    <div className="memori--image-upload-wrapper">
+      {/* Hidden file input */}
+      <input
+        ref={imageInputRef}
+        type="file"
+        accept=".jpg,.jpeg,.png"
+        className="memori--upload-file-input"
+        onChange={handleImageUpload}
+        disabled={
+          isLoading || !isMediaAccepted || currentImageCount >= maxImages
+        }
+      />
+
+      {/* Upload image button */}
+      <button
+        className={cx(
+          'memori-button',
+          'memori-button--circle',
+          'memori-button--icon-only',
+          'memori-share-button--button',
+          'memori--conversation-button',
+          'memori--image-upload-button'
+        )}
+        onClick={() => imageInputRef.current?.click()}
+        disabled={
+          isLoading || !isMediaAccepted || currentImageCount >= maxImages
+        }
+      >
+        {isLoading ? (
+          <Spin spinning className="memori--upload-icon" />
+        ) : (
+          <ImageIcon className="memori--upload-icon" />
+        )}
+      </button>
+
+      {/* Upload Modal with Title Input */}
+      <Modal
+        width="80%"
+        widthMd="80%"
+        open={showUploadModal && !!selectedFile}
+        className="memori--modal-preview-file"
+        onClose={handleCancelUpload}
+        closable
+        title={t('upload.titleImage', { title: imageTitle })}
+        // description={t('upload.imageTitleDescription')}
+      >
+        <div
+          className="memori--preview-content"
+          style={{
+            maxHeight: '70vh',
+            overflowY: 'auto',
+            textAlign: 'center',
+          }}
+        >
+          {filePreview && (
+            <img
+              src={filePreview}
+              alt={selectedFile?.name || 'Preview'}
+              style={{
+                maxWidth: '100%',
+                maxHeight: '40vh',
+                marginBottom: '20px',
+              }}
+            />
+          )}
+
+          <div
+            style={{ maxWidth: '400px', margin: '0 auto', textAlign: 'left' }}
+          >
+            <p style={{ marginBottom: '10px', color: '#666' }}>
+              {t('upload.titleHelp')}
+            </p>
+            <input
+              value={imageTitle}
+              onChange={e => setImageTitle(e.target.value)}
+              placeholder={t('upload.titlePlaceholder') ?? 'Enter image title'}
+              style={{ width: '90%', marginBottom: '20px' }}
+              className="memori--upload-title-input"
+            />
+            <div style={{ display: 'flex', gap: '10px' }}>
+              <Button
+                onClick={handleTitleSubmit}
+                disabled={!selectedFile || !imageTitle.trim()}
+                className="memori-button memori-button--primary"
+              >
+                {t('confirm') ?? 'Confirm'}
+              </Button>
+              <Button
+                onClick={handleCancelUpload}
+                className="memori-button memori-button--primary"
+              >
+                {t('cancel') ?? 'Cancel'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default UploadImages;

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

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders UploadButton unchanged 1`] = `
+<div>
+  <div
+    class="memori--unified-upload-wrapper"
+  >
+    <button
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
+      title="upload.uploadFiles"
+    >
+      <svg
+        class="memori--upload-icon"
+        fill="none"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          d="M17 8L12 3L7 8"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          d="M12 3V15"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+      </svg>
+    </button>
+    <div
+      class="memori--hidden-uploader"
+    >
+      <div
+        class="memori--document-upload-wrapper"
+      >
+        <input
+          accept=".pdf,.txt,.md,.json,.xlsx,.csv"
+          class="memori--upload-file-input"
+          type="file"
+        />
+        <button
+          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--document-upload-button"
+          title="Upload documents"
+        >
+          <svg
+            class="memori--upload-icon"
+            fill="none"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+            <path
+              d="M14 2.5V8H19.5"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+            <path
+              d="M16 13H8"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+            <path
+              d="M16 17H8"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+            <path
+              d="M10 9H8"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="memori--hidden-uploader"
+    >
+      <div
+        class="memori--image-upload-wrapper"
+      >
+        <input
+          accept=".jpg,.jpeg,.png"
+          class="memori--upload-file-input"
+          disabled=""
+          type="file"
+        />
+        <button
+          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--image-upload-button"
+          disabled=""
+        >
+          <svg
+            class="memori--upload-icon"
+            fill="none"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="18"
+              rx="2"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              width="18"
+              x="3"
+              y="3"
+            />
+            <circle
+              cx="8.5"
+              cy="8.5"
+              fill="currentColor"
+              r="1.5"
+            />
+            <path
+              d="M21 15L16 10L5 21"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="memori--error-message-container"
+    />
+  </div>
+</div>
+`;

package/src/components/UploadMenu/UploadMenu.css

@@ -9,9 +9,9 @@
 
 .memori-menu--overlay {
     position: absolute;
-    right: auto;
-    bottom: 100%;
-    left: 0;
+    top: 100%;
+    right: 0;
+    left: auto;
     display: flex;
     min-width: 12rem;
     flex-direction: column;

package/src/components/VenueWidget/VenueWidget.css

@@ -139,6 +139,13 @@ li.memori--venue-widget-search--option--active {
     background-color: #f7fafc;
 }
 
+.memori--venue-widget-search--option-centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
 .memori--venue--widget__place-name {
     margin: 0 0 1rem;
 }

package/src/components/VenueWidget/VenueWidget.tsx

@@ -292,14 +292,14 @@ const VenueWidget = ({
                       <Combobox.Options className="memori--venue-widget-search--options">
                         {fetching ? (
                           <Spin spinning>
-                            <center className="memori--venue-widget-search--option">
+                            <div className="memori--venue-widget-search--option memori--venue-widget-search--option-centered">
                               {t('loading')}...
-                            </center>
+                            </div>
                           </Spin>
                         ) : suggestions.length === 0 && query !== '' ? (
-                          <center className="memori--venue-widget-search--option">
+                          <div className="memori--venue-widget-search--option memori--venue-widget-search--option-centered">
                             {t('nothingFound')}
-                          </center>
+                          </div>
                         ) : (
                           suggestions?.map(s => (
                             <Combobox.Option

package/src/components/WhyThisAnswer/WhyThisAnswer.css

@@ -126,3 +126,46 @@ div.memori--whythisanswer-skeleton-text {
     margin-bottom: 0.5rem;
     background: #ccc;
 }
+
+.memori--whythisanswer-title-text {
+    width: 100%;
+}
+
+.memori--whythisanswer-title-text-top {
+    display: flex;
+    align-items: space-between;
+    gap: 0.5rem;
+}
+
+.memori--whythisanswer-title-text-top p {
+    margin: 0;
+    font-size: 0.75rem;
+}
+
+.memori--whythisanswer-contextvars {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+}
+
+.memori--whythisanswer-contextvars-card {
+    max-width: max-content;
+    padding: 0.5rem;
+    box-shadow: 0 0 0.25rem var(--memori-primary);
+    font-size: 0.75rem;
+}
+
+.memori--whythisanswer-contextvars-card + .memori--whythisanswer-contextvars-card {
+    margin-left: 0.5rem;
+}
+
+.memori--whythisanswer-contextvars-card > div > div {
+    padding: 0 !important;
+}
+
+.memori--whythisanswer-title-text-top-container {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    gap: 0.5rem;
+}