@memori.ai/memori-react 6.8.1 → 6.8.4

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

@@ -3,14 +3,23 @@
 exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
   >
     <div
       class="memori-tooltip--content"
     >
       <div>
         <p>
-          completionProviderDown
+          completionProviderMajorOutage
+        </p>
+        <p>
+          <a
+            href="https://status.anthropic.com/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            completionProviderCheckStatusPage
+          </a>
         </p>
       </div>
     </div>
@@ -19,14 +28,20 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="memori--completion-provider-status--icon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 1024 1024"
+        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
+        color="currentColor"
+        fill="none"
+        height="800px"
+        viewBox="0 0 24 24"
+        width="800px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
         />
       </svg>
     </div>
@@ -37,14 +52,14 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 exports[`renders CompletionProviderStatus errored with provider specified unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
   >
     <div
       class="memori-tooltip--content"
     >
       <div>
         <p>
-          completionProviderDown
+          completionProviderMajorOutage
         </p>
         <p>
           <a
@@ -62,14 +77,20 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
     >
       <svg
         aria-hidden="true"
-        class="memori--completion-provider-status--icon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 1024 1024"
+        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
+        color="currentColor"
+        fill="none"
+        height="800px"
+        viewBox="0 0 24 24"
+        width="800px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
         />
       </svg>
     </div>
@@ -77,6 +98,53 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
 </div>
 `;
 
-exports[`renders CompletionProviderStatus unchanged 1`] = `<div />`;
+exports[`renders CompletionProviderStatus unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      <div>
+        <p>
+          completionProviderMajorOutage
+        </p>
+        <p>
+          <a
+            href="https://status.anthropic.com/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            completionProviderCheckStatusPage
+          </a>
+        </p>
+      </div>
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
+        color="currentColor"
+        fill="none"
+        height="800px"
+        viewBox="0 0 24 24"
+        width="800px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
 
 exports[`renders CompletionProviderStatus with provider specified unchanged 1`] = `<div />`;

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -41,11 +41,13 @@ const ExpertsDrawer = ({
           <li key={expert.expertID} className="memori--experts-drawer--item">
             <figure className="memori--experts-drawer--avatar">
               <img
-                src={`${apiUrl}/api/v1/memoriai/memori/avatar/${expert.expertMemoriID}`}
+                src={`${new URL(apiUrl).origin}/api/v1/memoriai/memori/avatar/${
+                  expert.expertMemoriID
+                }`}
                 alt={expert.name}
                 onError={e => {
                   e.currentTarget.src = getResourceUrl({
-                    tenantID: tenant?.id,
+                    tenantID: tenant?.name,
                     type: 'avatar',
                     baseURL: baseUrl,
                   });

package/src/components/FilePreview/FilePreview.css

@@ -0,0 +1,184 @@
+/* Updated FilePreview Styles */
+
+.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.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}

package/src/components/FilePreview/FilePreview.stories.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
+import FilePreview from './FilePreview';
+
+import './FilePreview.css';
+
+const meta: Meta = {
+  title: 'Widget/File Preview',
+  component: FilePreview,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+
+type Props = {
+  onUpload: (text: string) => void;
+  convertapiToken: string;
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+    const [previewFiles, setPreviewFiles] = useState<{ name: string; id: string; content: string; }[]>([]);
+
+  return (
+    <I18nWrapper>
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'flex-end',
+        }}
+      >
+        <FilePreview {...args} previewFiles={previewFiles} removeFile={
+            (id: string) => {
+                setPreviewFiles(previewFiles.filter(file => file.id !== id));
+            }
+        } />
+      </div>
+    </I18nWrapper>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  onUpload: () => {},
+  convertapiToken: '',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  onUpload: () => {},
+  convertapiToken: '',
+  disabled: true,
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FilePreview from './FilePreview';
+
+it('renders FilePreview unchanged', () => {
+  const { container } = render(
+    <FilePreview previewFiles={[]} removeFile={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders FilePreview with one file', () => {
+  const { container } = render(
+    <FilePreview previewFiles={[{ name: 'test.pdf', id: '1', content: 'test' }]} removeFile={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+
+it('renders FilePreview with two files', () => {
+  const { container } = render(
+    <FilePreview previewFiles={[{ name: 'test.pdf', id: '1', content: 'test' }, { name: 'test.pdf', id: '2', content: 'test' }]} removeFile={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+

package/src/components/FilePreview/FilePreview.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { PreviewIcon } from '../icons/Preview';
+import { DocumentIcon } from '../icons/Document';
+import { ImageIcon } from '../icons/Image';
+import CloseIcon from '../icons/Close';
+import Button from '../ui/Button';
+import Modal from '../ui/Modal';
+import { stripHTML } from '../../helpers/utils';
+
+type FilePreviewProps = {
+  previewFiles: any;
+  removeFile: (id: string, mediumID: string | undefined) => void;
+  allowRemove?: boolean;
+  isMessagePreview?: boolean;
+};
+
+const FilePreview = ({
+  previewFiles,
+  removeFile,
+  allowRemove = true,
+  isMessagePreview = false,
+}: FilePreviewProps) => {
+  const [selectedFile, setSelectedFile] = useState<{
+    name: string;
+    id: string;
+    content: string;
+    type?: string;
+  } | null>(null);
+  
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const getFileType = (filename: string, type?: string) => {
+    // If type is explicitly provided, use it first
+    if (type === 'image') {
+      const extension = filename.split('.').pop()?.toLowerCase();
+      switch (extension) {
+        case 'jpg':
+        case 'jpeg':
+          return 'JPEG';
+        case 'png':
+          return 'PNG';
+        default:
+          return 'Image';
+      }
+    }
+    
+    // Otherwise use extension
+    const extension = filename.split('.').pop()?.toLowerCase();
+    switch (extension) {
+      case 'pdf':
+        return 'PDF';
+      case 'txt':
+        return 'Text';
+      case 'json':
+        return 'JSON';
+      case 'xlsx':
+        return 'Excel';
+      case 'csv':
+        return 'CSV';
+      case 'jpg':
+      case 'jpeg':
+        return 'JPEG';
+      case 'png':
+        return 'PNG';
+      default:
+        return 'Document';
+    }
+  };
+
+  // Detect if the content is an image URL
+  const isImageContent = (content: string, type?: string): boolean => {
+    if (type === 'image') return true;
+    
+    // Check if the content has image file extension or is an image URL
+    const hasImageExtension = /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(content);
+    const isImageUrl = content.startsWith('http') && 
+                       (content.includes('/image/') || 
+                        content.includes('/img/') || 
+                        hasImageExtension);
+    
+    return isImageUrl || hasImageExtension;
+  };
+
+  return (
+    <>
+      {previewFiles.length > 0 && (
+        <div
+          className={`memori--preview-container  ${
+            isMessagePreview
+              ? 'memori--message-preview'
+              : 'memori--absolute-preview'
+          }`}
+        >
+          <div className="memori--preview-list">
+            {previewFiles.map((file: any) => (
+              <div
+                key={file.id}
+                className={`memori--preview-item ${
+                  isImageContent(file.content, file.type) 
+                    ? 'memori--preview-item--image' 
+                    : 'memori--preview-item--document'
+                }`}
+                onMouseEnter={() => setHoveredId(file.id)}
+                onMouseLeave={() => setHoveredId(null)}
+                onClick={() => setSelectedFile(file)}
+              >
+                {isImageContent(file.content, file.type) ? (
+                  <div className="memori--preview-thumbnail">
+                    <img src={file.content} alt={file.name} />
+                  </div>
+                ) : (
+                  <DocumentIcon className="memori--preview-icon" />
+                )}
+                
+                <div className="memori--preview-file-info">
+                  <span className="memori--preview-filename">{file.name}</span>
+                  <span className="memori--preview-filetype">
+                    {getFileType(file.name, file.type)}
+                  </span>
+                </div>
+                
+                {allowRemove && (
+                  <Button
+                    shape="rounded"
+                    icon={<CloseIcon />}
+                    danger
+                    className={`memori--remove-button ${
+                      hoveredId === file.id ? 'visible' : ''
+                    }`}
+                    onClick={e => {
+                      e.stopPropagation();
+                      removeFile(file.id, file?.mediumID);
+                    }}
+                  />
+                )}
+              </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={{ 
+            maxHeight: '70vh', 
+            overflowY: 'auto',
+            textAlign: 'center',
+            whiteSpace: selectedFile && !isImageContent(selectedFile.content, selectedFile.type) ? 'pre-wrap' : 'normal'
+          }}
+        >
+          {selectedFile && isImageContent(selectedFile.content, selectedFile.type) ? (
+            <>
+              <img 
+                src={selectedFile.content} 
+                alt={selectedFile.name} 
+                style={{ maxWidth: '100%', maxHeight: '60vh' }} 
+            />
+            </>
+          ) : (
+            stripHTML(selectedFile?.content || '')
+          )}
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default FilePreview;