@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/Header/Header.stories.tsx

@@ -4,6 +4,7 @@ import { memori, history } from '../../mocks/data';
 import Header, { Props } from './Header';
 
 import './Header.css';
+import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 
 const meta: Meta = {
   title: 'Widget/Header',
@@ -24,12 +25,29 @@ export default meta;
 
 const Template: Story<Props> = args => {
   const [speakerMuted, setSpeakerMuted] = React.useState(args.speakerMuted);
+  const [showSettingsDrawer, setShowSettingsDrawer] = React.useState(false);
+  const [continuousSpeech, setContinuousSpeech] = React.useState(true);
+  const [continuousSpeechTimeout, setContinuousSpeechTimeout] =
+    React.useState(2);
+
   return (
-    <Header
-      {...args}
-      speakerMuted={speakerMuted}
-      setSpeakerMuted={setSpeakerMuted}
-    />
+    <>
+      <Header
+        {...args}
+        speakerMuted={speakerMuted}
+        setSpeakerMuted={setSpeakerMuted}
+        showSettings
+        setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
+      />
+      <SettingsDrawer
+        open={!!showSettingsDrawer}
+        onClose={() => setShowSettingsDrawer(false)}
+        continuousSpeech={continuousSpeech}
+        continuousSpeechTimeout={continuousSpeechTimeout}
+        setContinuousSpeech={setContinuousSpeech}
+        setContinuousSpeechTimeout={setContinuousSpeechTimeout}
+      />
+    </>
   );
 };
 

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
 import {
   Memori,
@@ -13,6 +13,9 @@ import { useTranslation } from 'react-i18next';
 import ExportHistoryButton from '../ExportHistoryButton/ExportHistoryButton';
 import Setting from '../icons/Setting';
 import ShareButton from '../ShareButton/ShareButton';
+import FullscreenExit from '../icons/FullscreenExit';
+import Fullscreen from '../icons/Fullscreen';
+import Refresh from '../icons/Refresh';
 
 export interface Props {
   className?: string;
@@ -27,6 +30,7 @@ export interface Props {
   showShare?: boolean;
   showSettings?: boolean;
   showSpeaker?: boolean;
+  showReload?: boolean;
 }
 
 const Header: React.FC<Props> = ({
@@ -42,11 +46,31 @@ const Header: React.FC<Props> = ({
   showShare = true,
   showSettings = true,
   showSpeaker = true,
+  showReload = false,
 }) => {
   const { t } = useTranslation();
+  const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
+  const [fullScreen, setFullScreen] = useState(false);
+  useEffect(() => {
+    if (document.fullscreenEnabled) {
+      setFullScreenAvailable(true);
+    }
+  }, []);
 
   return (
     <div className={cx('memori-header', className)}>
+      {showReload && (
+        <Button
+          primary
+          shape="circle"
+          className="memori-header--button"
+          title={t('reload') || 'Reload'}
+          icon={<Refresh />}
+          onClick={() => {
+            window.location.reload();
+          }}
+        />
+      )}
       {memori.needsPosition && position && (
         <div className="memori-header--position">
           <span className="memori-header--position-placeName">
@@ -60,6 +84,28 @@ const Header: React.FC<Props> = ({
           />
         </div>
       )}
+      {fullScreenAvailable && (
+        <Button
+          primary
+          shape="circle"
+          className="memori-header--button"
+          title={
+            fullScreen
+              ? t('fullscreenExit') || 'Exit fullscreen'
+              : t('fullscreenEnter') || 'Enter fullscreen'
+          }
+          icon={fullScreen ? <FullscreenExit /> : <Fullscreen />}
+          onClick={() => {
+            if (!document.fullscreenElement) {
+              document.documentElement.requestFullscreen();
+              setFullScreen(true);
+            } else if (document.exitFullscreen) {
+              document.exitFullscreen();
+              setFullScreen(false);
+            }
+          }}
+        />
+      )}
       {showSpeaker && (
         <Button
           primary

package/src/components/MediaWidget/LinkItemWidget.tsx

@@ -21,6 +21,7 @@ export declare type ILinkPreviewInfo = {
 };
 
 export interface Props {
+  isChild?: boolean;
   items: Medium[];
   baseUrl?: string;
   descriptionOneLine?: boolean;
@@ -43,6 +44,7 @@ const getSiteInfo = async (url: string, baseUrl?: string) => {
 };
 
 export const RenderLinkItem = ({
+  isChild = false,
   item,
   baseUrl,
   onLinkPreviewInfo,
@@ -97,7 +99,24 @@ export const RenderLinkItem = ({
       href={normURL}
       target="_blank"
       rel="noopener noreferrer"
-      className="memori-link-item--link"
+      className={cx('memori-link-item--link', {
+        'memori-link-item--link--child': isChild,
+      })}
+      onClick={e => {
+        if (!isChild) {
+          e.preventDefault();
+          e.stopPropagation();
+          window.open(
+            normURL,
+            '_blank',
+            `toolbar=yes,top=${window.innerHeight * 0.1},left=${
+              window.innerWidth * 0.1
+            },width=${window.innerWidth * 0.8},height=${
+              window.innerHeight * 0.8
+            }`
+          );
+        }
+      }}
     >
       <Card
         hoverable

package/src/components/MediaWidget/MediaItemWidget.css

@@ -63,3 +63,70 @@ a.memori-media-item--link {
     width: 50%;
     height: 50%;
 }
+
+.memori-media-item--modal .memori-media-item--figure {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    max-height: 100%;
+    flex-direction: row;
+}
+
+.memori-media-item--modal .memori-card {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+    margin-bottom: 0;
+    box-shadow: none;
+}
+
+.memori-media-item--modal .memori-card--content {
+    display: none;
+}
+
+.memori-media-item--modal .memori-card--cover {
+    height: 100%;
+    border-radius: 0;
+}
+
+.memori-media-item--modal .memori-modal--panel {
+    width: 75vw;
+    height: 85vh;
+    backdrop-filter: blur(var(--memori-blur-background, 10px));
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.memori-media-item--modal .memori-modal--panel .memori-card {
+    background: none;
+}
+
+.memori-media-item--modal .memori-modal--panel .memori-spin {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-media-item--modal a.memori-media-item--link {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-media-item--modal .memori-media-item--figure-caption {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    backdrop-filter: blur(var(--memori-blur-background, 5px));
+    background: rgba(255, 255, 255, 0.5);
+    color: #000;
+}
+
+.memori-media-item--modal .memori-modal--close button {
+    border-color: #fff;
+    color: #fff;
+}

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -6,6 +6,7 @@ import { prismSyntaxLangs } from '../../helpers/constants';
 import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
 import Snippet from '../Snippet/Snippet';
 import Card from '../ui/Card';
+import Modal from '../ui/Modal';
 import File from '../icons/File';
 import FilePdf from '../icons/FilePdf';
 import FileExcel from '../icons/FileExcel';
@@ -22,20 +23,32 @@ export interface Props {
 }
 
 export const RenderMediaItem = ({
+  isChild = false,
   item,
   sessionID,
   tenantID,
   preview = false,
   baseURL,
   apiURL,
+  onClick,
 }: {
+  isChild?: boolean;
   item: Medium;
   sessionID?: string;
   tenantID?: string;
   preview?: boolean;
   baseURL?: string;
   apiURL?: string;
+  onClick?: (mediumID: string) => void;
 }) => {
+  const url = getResourceUrl({
+    resourceURI: item.url,
+    sessionID,
+    tenantID,
+    baseURL,
+    apiURL,
+  });
+
   switch (item.mimeType) {
     case 'image/jpeg':
     case 'image/png':
@@ -44,7 +57,16 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={item.url}
+          href={url}
+          onClick={e => {
+            if (isChild) {
+              e.preventDefault();
+            }
+            if (onClick) {
+              e.preventDefault();
+              onClick(item.mediumID);
+            }
+          }}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -57,13 +79,7 @@ export const RenderMediaItem = ({
                 {!preview && (
                   <source
                     srcSet={[
-                      getResourceUrl({
-                        resourceURI: item.url,
-                        sessionID,
-                        tenantID,
-                        baseURL,
-                        apiURL,
-                      }),
+                      url,
                       getResourceUrl({
                         resourceURI: item.content,
                         sessionID,
@@ -97,13 +113,7 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={getResourceUrl({
-            resourceURI: item.url,
-            sessionID,
-            tenantID,
-            baseURL,
-            apiURL,
-          })}
+          href={url}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -121,13 +131,7 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={getResourceUrl({
-            resourceURI: item.url,
-            sessionID,
-            tenantID,
-            baseURL,
-            apiURL,
-          })}
+          href={url}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -144,13 +148,7 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={getResourceUrl({
-            resourceURI: item.url,
-            sessionID,
-            tenantID,
-            baseURL,
-            apiURL,
-          })}
+          href={url}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -169,13 +167,16 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={getResourceUrl({
-            resourceURI: item.url,
-            sessionID,
-            tenantID,
-            baseURL,
-            apiURL,
-          })}
+          href={url}
+          onClick={e => {
+            if (isChild) {
+              e.preventDefault();
+            }
+            if (onClick) {
+              e.preventDefault();
+              onClick(item.mediumID);
+            }
+          }}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -186,13 +187,7 @@ export const RenderMediaItem = ({
               <video
                 style={{ width: '100%', height: '100%' }}
                 controls
-                src={getResourceUrl({
-                  resourceURI: item.url,
-                  sessionID,
-                  tenantID,
-                  baseURL,
-                  apiURL,
-                })}
+                src={url}
                 title={item.title}
               />
             }
@@ -207,13 +202,7 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={getResourceUrl({
-            resourceURI: item.url,
-            sessionID,
-            tenantID,
-            baseURL,
-            apiURL,
-          })}
+          href={url}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -224,13 +213,7 @@ export const RenderMediaItem = ({
               <audio
                 style={{ width: '100%', height: '100%' }}
                 controls
-                src={getResourceUrl({
-                  resourceURI: item.url,
-                  sessionID,
-                  tenantID,
-                  baseURL,
-                  apiURL,
-                })}
+                src={url}
               />
             }
             title={item.title}
@@ -241,13 +224,7 @@ export const RenderMediaItem = ({
     case 'model/gltf-binary':
       return (
         <ModelViewer
-          src={getResourceUrl({
-            resourceURI: item.url,
-            sessionID,
-            tenantID,
-            baseURL,
-            apiURL,
-          })}
+          src={url}
           alt=""
           poster="data:image/png;base64,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"
         />
@@ -257,13 +234,7 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={getResourceUrl({
-            resourceURI: item.url,
-            sessionID,
-            tenantID,
-            baseURL,
-            apiURL,
-          })}
+          href={url}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -287,6 +258,7 @@ const MediaItemWidget: React.FC<Props> = ({
   apiURL,
 }: Props) => {
   const [media, setMedia] = useState(items);
+  const [openModalMedium, setOpenModalMedium] = useState<Medium>();
 
   const translateMediaCaptions = useCallback(async () => {
     if (!translateTo) return;
@@ -358,10 +330,14 @@ const MediaItemWidget: React.FC<Props> = ({
               leaveTo="opacity-0 scale-95"
             >
               <RenderMediaItem
+                isChild
                 sessionID={sessionID}
                 tenantID={tenantID}
                 baseURL={baseURL}
                 apiURL={apiURL}
+                onClick={mediumID => {
+                  setOpenModalMedium(media.find(m => m.mediumID === mediumID));
+                }}
                 item={{
                   ...item,
                   title: item.title,
@@ -401,6 +377,31 @@ const MediaItemWidget: React.FC<Props> = ({
             dangerouslySetInnerHTML={{ __html: medium.content || '' }}
           ></style>
         ))}
+
+      {openModalMedium?.mediumID && (
+        <Modal
+          width="100%"
+          widthMd="100%"
+          className="memori-media-item--modal"
+          open={!!openModalMedium}
+          onClose={() => setOpenModalMedium(undefined)}
+          footer={null}
+        >
+          <RenderMediaItem
+            isChild
+            sessionID={sessionID}
+            tenantID={tenantID}
+            baseURL={baseURL}
+            apiURL={apiURL}
+            item={{
+              ...openModalMedium,
+              title: openModalMedium.title,
+              url: openModalMedium.url,
+              content: openModalMedium.content,
+            }}
+          />
+        </Modal>
+      )}
     </Transition>
   );
 };

package/src/components/MediaWidget/MediaWidget.css

@@ -119,3 +119,12 @@
 .delay-1000 {
     transition-delay: 1000ms;
 }
+
+.memori-hints--show-more {
+    text-align: center;
+}
+
+.memori-hints--show-more-button {
+    border-radius: 5px;
+    background: none;
+}

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

@@ -111,6 +111,14 @@ Hints.args = {
   hints,
 };
 
+export const LongListHints = Template.bind({});
+LongListHints.args = {
+  hints: Array.from({ length: 12 }, (_, i) => ({
+    text: `Hint ${i + 1}`,
+    originalText: `Hint ${i + 1}`,
+  })),
+};
+
 export const Combined = Template.bind({});
 Combined.args = {
   media,

package/src/components/MediaWidget/MediaWidget.tsx

@@ -8,6 +8,7 @@ import LinkItemWidget from './LinkItemWidget';
 import MediaItemWidget from './MediaItemWidget';
 import { Transition } from '@headlessui/react';
 import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 export interface Props {
   hints?: TranslatedHint[];
@@ -30,7 +31,10 @@ const MediaWidget: React.FC<Props> = ({
   apiUrl,
   translateTo,
 }: Props) => {
+  const { t } = useTranslation();
   const [showHints, setShowHints] = useState(true);
+  const [hintsPagination, setHintsPagination] = useState(6);
+
   useEffect(() => {
     setShowHints(true);
   }, [hints]);
@@ -48,36 +52,49 @@ const MediaWidget: React.FC<Props> = ({
       )}
       {links?.length > 0 && <LinkItemWidget items={links} baseUrl={baseUrl} />}
       {hints?.length > 0 && showHints && (
-        <Transition appear show as="ul" className="memori-media--hints">
-          {hints.map((item, index) => (
-            <Transition.Child
-              as="li"
-              key={item.text + index}
-              enter="ease-out duration-500"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-1 translate-y-0"
-              leave="ease-in duration-300"
-              leaveFrom="opacity-1"
-              leaveTo="opacity-0"
-            >
-              <Button
+        <>
+          <Transition appear show as="ul" className="memori-media--hints">
+            {hints.slice(0, hintsPagination).map((item, index) => (
+              <Transition.Child
+                as="li"
                 key={item.text + index}
-                className={cx('memori-media--hint')}
-                primary
-                onClick={() => {
-                  simulateUserPrompt(item.originalText, item.text);
-                  setShowHints(false);
-                }}
-                onTouchEnd={() => {
-                  simulateUserPrompt(item.originalText, item.text);
-                  setShowHints(false);
-                }}
+                enter="ease-out duration-500"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-1 translate-y-0"
+                leave="ease-in duration-300"
+                leaveFrom="opacity-1"
+                leaveTo="opacity-0"
+              >
+                <Button
+                  key={item.text + index}
+                  className={cx('memori-media--hint')}
+                  primary
+                  onClick={() => {
+                    simulateUserPrompt(item.originalText, item.text);
+                    setShowHints(false);
+                  }}
+                  onTouchEnd={() => {
+                    simulateUserPrompt(item.originalText, item.text);
+                    setShowHints(false);
+                  }}
+                >
+                  {item.text}
+                </Button>
+              </Transition.Child>
+            ))}
+          </Transition>
+          {hints.length > hintsPagination && (
+            <div className="memori-hints--show-more">
+              <Button
+                className="memori-hints--show-more-button"
+                id="showMoreHints"
+                onClick={() => setHintsPagination(hintsPagination + 6)}
               >
-                {item.text}
+                {t('expand') || 'Expand'}
               </Button>
-            </Transition.Child>
-          ))}
-        </Transition>
+            </div>
+          )}
+        </>
       )}
     </div>
   );

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

@@ -241,7 +241,7 @@ exports[`renders MediaItemWidget unchanged with img and sessionID 1`] = `
       >
         <a
           class="memori-media-item--link"
-          href="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
+          href="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
           rel="noopener noreferrer"
           target="_blank"
           title="Game Cover"

package/src/components/MemoriWidget/MemoriWidget.css

@@ -125,7 +125,7 @@
 .memori--powered-by {
     position: absolute;
     z-index: 1000;
-    bottom: 1rem;
+    bottom: 0;
     left: 0;
     display: inline-flex;
     flex-wrap: wrap;

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -19,6 +19,11 @@ const meta: Meta = {
         type: 'boolean',
       },
     },
+    showSettings: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   parameters: {
     controls: { expanded: true },
@@ -96,6 +101,13 @@ ShowShare.args = {
   showShare: true,
 };
 
+export const ShowSettings = Template.bind({});
+ShowSettings.args = {
+  memori,
+  tenant,
+  showSettings: true,
+};
+
 export const WithAzureSpeechKey = Template.bind({});
 WithAzureSpeechKey.args = {
   memori,