@memori.ai/memori-react 8.15.1 → 8.16.0

package/src/components/MediaWidget/MediaWidget.stories.tsx

@@ -124,3 +124,196 @@ Combined.args = {
   links,
   hints,
 };
+
+export const AllMediaTypes = Template.bind({});
+AllMediaTypes.args = {
+  media: [
+    // Images
+    {
+      mediumID: 'img-jpeg-1',
+      mimeType: 'image/jpeg',
+      title: 'JPEG Image',
+      url: 'https://picsum.photos/300/200?random=1',
+    },
+    {
+      mediumID: 'img-png-1',
+      mimeType: 'image/png',
+      title: 'PNG Image',
+      url: 'https://picsum.photos/300/200?random=2',
+    },
+    {
+      mediumID: 'img-jpg-1',
+      mimeType: 'image/jpg',
+      title: 'JPG Image',
+      url: 'https://picsum.photos/300/200?random=3',
+    },
+    {
+      mediumID: 'img-gif-1',
+      mimeType: 'image/gif',
+      title: 'GIF Image',
+      url: 'https://picsum.photos/300/200?random=4',
+    },
+    // Videos
+    {
+      mediumID: 'video-mp4-1',
+      mimeType: 'video/mp4',
+      title: 'MP4 Video',
+      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+    },
+    {
+      mediumID: 'video-quicktime-1',
+      mimeType: 'video/quicktime',
+      title: 'QuickTime Video',
+      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+    },
+    {
+      mediumID: 'video-avi-1',
+      mimeType: 'video/avi',
+      title: 'AVI Video',
+      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+    },
+    {
+      mediumID: 'video-mpeg-1',
+      mimeType: 'video/mpeg',
+      title: 'MPEG Video',
+      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+    },
+    // Audio
+    {
+      mediumID: 'audio-mpeg-1',
+      mimeType: 'audio/mpeg',
+      title: 'MPEG Audio',
+      url: 'https://www.w3schools.com/html/horse.mp3',
+    },
+    {
+      mediumID: 'audio-mpeg3-1',
+      mimeType: 'audio/mpeg3',
+      title: 'MPEG3 Audio',
+      url: 'https://www.w3schools.com/html/horse.mp3',
+    },
+    {
+      mediumID: 'audio-wav-1',
+      mimeType: 'audio/wav',
+      title: 'WAV Audio',
+      url: 'https://www.w3schools.com/html/horse.mp3',
+    },
+    // Documents
+    {
+      mediumID: 'doc-pdf-1',
+      mimeType: 'application/pdf',
+      title: 'PDF Document',
+      url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+    {
+      mediumID: 'doc-word-1',
+      mimeType: 'application/msword',
+      title: 'Word Document (.doc)',
+      url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+    {
+      mediumID: 'doc-wordx-1',
+      mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      title: 'Word Document (.docx)',
+      url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+    {
+      mediumID: 'doc-excel-1',
+      mimeType: 'application/vnd.ms-excel',
+      title: 'Excel Document (.xls)',
+      url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+    {
+      mediumID: 'doc-excelx-1',
+      mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      title: 'Excel Document (.xlsx)',
+      url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+    // Code Snippets
+    {
+      mediumID: 'code-js-1',
+      mimeType: 'text/javascript',
+      title: 'JavaScript Code',
+      content: "function greet() {\n  return 'Hello World!';\n}\n\nconsole.log(greet());",
+    },
+    {
+      mediumID: 'code-ts-1',
+      mimeType: 'text/ecmascript',
+      title: 'TypeScript Code',
+      content: "interface User {\n  name: string;\n  age: number;\n}\n\nconst user: User = { name: 'John', age: 30 };",
+    },
+    {
+      mediumID: 'code-json-1',
+      mimeType: 'application/json',
+      title: 'JSON Data',
+      content: '{\n  "name": "John Doe",\n  "age": 43,\n  "city": "New York"\n}',
+    },
+    {
+      mediumID: 'code-css-1',
+      mimeType: 'text/css',
+      title: 'CSS Styles',
+      content: 'body {\n  background: #f0f0f0;\n  color: #333;\n  font-family: Arial, sans-serif;\n}',
+    },
+    {
+      mediumID: 'code-xml-1',
+      mimeType: 'application/xml',
+      title: 'XML Document',
+      content: '<?xml version="1.0"?>\n<root>\n  <item>Value</item>\n</root>',
+    },
+    {
+      mediumID: 'code-bash-1',
+      mimeType: 'application/x-sh',
+      title: 'Bash Script',
+      content: '#!/bin/bash\n\necho "Hello World"\nls -la',
+    },
+    {
+      mediumID: 'code-python-1',
+      mimeType: 'text/x-python',
+      title: 'Python Code',
+      content: 'def greet(name):\n    return f"Hello, {name}!"\n\nprint(greet("World"))',
+    },
+    {
+      mediumID: 'code-cpp-1',
+      mimeType: 'text/x-c++src',
+      title: 'C++ Code',
+      content: '#include <iostream>\n\nint main() {\n    std::cout << "Hello World" << std::endl;\n    return 0;\n}',
+    },
+    {
+      mediumID: 'code-php-1',
+      mimeType: 'application/x-php',
+      title: 'PHP Code',
+      content: '<?php\nfunction greet($name) {\n    return "Hello, " . $name . "!";\n}\n\necho greet("World");\n?>',
+    },
+    {
+      mediumID: 'code-ruby-1',
+      mimeType: 'text/x-ruby',
+      title: 'Ruby Code',
+      content: 'def greet(name)\n  "Hello, #{name}!"\nend\n\nputs greet("World")',
+    },
+    {
+      mediumID: 'code-sql-1',
+      mimeType: 'text/x-sql',
+      title: 'SQL Query',
+      content: 'SELECT * FROM users\nWHERE age > 18\nORDER BY name ASC;',
+    },
+    {
+      mediumID: 'code-text-1',
+      mimeType: 'text/plain',
+      title: 'Plain Text',
+      content: 'This is a plain text file.\nIt can contain multiple lines.\nAnd various content.',
+    },
+    // HTML
+    {
+      mediumID: 'html-1',
+      mimeType: 'text/html',
+      title: 'HTML Content',
+      content: '<div><h1>HTML Preview</h1><p>This is HTML content.</p></div>',
+    },
+    // 3D Model
+    {
+      mediumID: 'model-1',
+      mimeType: 'model/gltf-binary',
+      title: '3D Model (GLTF)',
+      url: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb',
+    },
+  ],
+};

package/src/components/MediaWidget/MediaWidget.tsx

@@ -4,7 +4,6 @@ import {
 } from '@memori.ai/memori-api-client/dist/types';
 import React, { useEffect, useState, memo } from 'react';
 import Button from '../ui/Button';
-import LinkItemWidget from './LinkItemWidget';
 import MediaItemWidget, { Props as MediaItemProps } from './MediaItemWidget';
 import { Transition } from '@headlessui/react';
 import cx from 'classnames';
@@ -45,9 +44,9 @@ const MediaWidget: React.FC<Props> = ({
 
   return (
     <div className="memori-media-widget">
-      {media?.length > 0 && (
+      {(media?.length > 0 || links?.length > 0) && (
         <MediaItemWidget
-          items={media}
+          items={[...(media || []), ...(links || [])]}
           sessionID={sessionID}
           translateTo={translateTo}
           baseURL={baseUrl}
@@ -56,7 +55,6 @@ const MediaWidget: React.FC<Props> = ({
           fromUser={fromUser}
         />
       )}
-      {links?.length > 0 && <LinkItemWidget items={links} baseUrl={baseUrl} fromUser={fromUser} />}
       {hints?.length > 0 && showHints && (
         <>
           <Transition appear show as="ul" className="memori-media--hints">

package/src/components/MediaWidget/__snapshots__/DocumentCard.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocumentCard renders unchanged snapshot 1`] = `
+<div>
+  <div
+    class="memori-media-item--document"
+  >
+    <div
+      class="memori-media-item--document-header"
+    >
+      <div
+        class="memori-media-item--document-title"
+      >
+        Spreadsheet
+      </div>
+    </div>
+    <span
+      class="memori-media-item--document-badge"
+    >
+      XLSX
+    </span>
+  </div>
+</div>
+`;