@memori.ai/memori-react 2.7.1 → 2.8.0

package/src/components/Chat/Chat.tsx

@@ -9,7 +9,9 @@ import {
 import { hasTouchscreen } from '../../helpers/utils';
 import { getResourceUrl } from '../../helpers/media';
 import ChatBubble from '../ChatBubble/ChatBubble';
-import MediaWidget from '../MediaWidget/MediaWidget';
+import MediaWidget, {
+  Props as MediaWidgetProps,
+} from '../MediaWidget/MediaWidget';
 import Button from '../ui/Button';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import ChatInputs from '../ChatInputs/ChatInputs';
@@ -51,6 +53,7 @@ export interface Props {
   startListening: () => void;
   stopListening: () => void;
   resetTranscript: () => void;
+  customMediaRenderer?: MediaWidgetProps['customMediaRenderer'];
 }
 
 const Chat: React.FC<Props> = ({
@@ -87,6 +90,7 @@ const Chat: React.FC<Props> = ({
   startListening,
   stopListening,
   resetTranscript,
+  customMediaRenderer,
 }) => {
   const scrollToBottom = () => {
     setTimeout(() => {
@@ -249,6 +253,7 @@ const Chat: React.FC<Props> = ({
                 baseUrl={baseUrl}
                 apiUrl={apiUrl}
                 translateTo={translateTo}
+                customMediaRenderer={customMediaRenderer}
               />
             </React.Fragment>
           ))}

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

@@ -94,3 +94,28 @@ ImagesGrid.args = {
     }?random=${i}`,
   })),
 };
+
+export const WithCustomMediaRenderer = Template.bind({});
+WithCustomMediaRenderer.args = {
+  items: [
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+      mimeType: 'image/png',
+      title: 'Image',
+      url: 'https://picsum.photos/200/300',
+    },
+    {
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5973',
+      mimeType: 'application/pdf',
+      title: 'PDF',
+      url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+      content:
+        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    },
+  ],
+  customMediaRenderer: (mimeType: string) => {
+    if (mimeType === 'image/png') {
+      return <div>Custom Image Renderer</div>;
+    }
+  },
+};

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

@@ -118,3 +118,14 @@ it('renders MediaItemWidget unchanged with css snippet to exec', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders MediaItemWidget unchanged with custom media renderer', () => {
+  const { container } = render(
+    <MediaItemWidget
+      items={[]}
+      sessionID={sessionID}
+      customMediaRenderer={mimeType => <pre>{mimeType}</pre>}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -20,6 +20,7 @@ export interface Props {
   translateTo?: string;
   baseURL?: string;
   apiURL?: string;
+  customMediaRenderer?: (mimeType: string) => JSX.Element | null;
 }
 
 export const RenderMediaItem = ({
@@ -31,6 +32,7 @@ export const RenderMediaItem = ({
   baseURL,
   apiURL,
   onClick,
+  customMediaRenderer,
 }: {
   isChild?: boolean;
   item: Medium;
@@ -40,6 +42,7 @@ export const RenderMediaItem = ({
   baseURL?: string;
   apiURL?: string;
   onClick?: (mediumID: string) => void;
+  customMediaRenderer?: (mimeType: string) => JSX.Element | null;
 }) => {
   const url = getResourceUrl({
     resourceURI: item.url,
@@ -49,6 +52,12 @@ export const RenderMediaItem = ({
     apiURL,
   });
 
+  const customRenderer = customMediaRenderer?.(item.mimeType);
+
+  if (customRenderer) {
+    return customRenderer;
+  }
+
   switch (item.mimeType) {
     case 'image/jpeg':
     case 'image/png':
@@ -245,6 +254,7 @@ const MediaItemWidget: React.FC<Props> = ({
   translateTo,
   baseURL,
   apiURL,
+  customMediaRenderer,
 }: Props) => {
   const [media, setMedia] = useState(items);
   const [openModalMedium, setOpenModalMedium] = useState<Medium>();
@@ -333,6 +343,7 @@ const MediaItemWidget: React.FC<Props> = ({
                   url: item.url,
                   content: item.content,
                 }}
+                customMediaRenderer={customMediaRenderer}
               />
             </Transition.Child>
           ))}
@@ -388,6 +399,7 @@ const MediaItemWidget: React.FC<Props> = ({
               url: openModalMedium.url,
               content: openModalMedium.content,
             }}
+            customMediaRenderer={customMediaRenderer}
           />
         </Modal>
       )}

package/src/components/MediaWidget/MediaWidget.tsx

@@ -5,7 +5,7 @@ import {
 import React, { useEffect, useState } from 'react';
 import Button from '../ui/Button';
 import LinkItemWidget from './LinkItemWidget';
-import MediaItemWidget from './MediaItemWidget';
+import MediaItemWidget, { Props as MediaItemProps } from './MediaItemWidget';
 import { Transition } from '@headlessui/react';
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +19,7 @@ export interface Props {
   baseUrl?: string;
   apiUrl?: string;
   translateTo?: string;
+  customMediaRenderer?: MediaItemProps['customMediaRenderer'];
 }
 
 const MediaWidget: React.FC<Props> = ({
@@ -30,6 +31,7 @@ const MediaWidget: React.FC<Props> = ({
   baseUrl,
   apiUrl,
   translateTo,
+  customMediaRenderer,
 }: Props) => {
   const { t } = useTranslation();
   const [showHints, setShowHints] = useState(true);
@@ -48,6 +50,7 @@ const MediaWidget: React.FC<Props> = ({
           translateTo={translateTo}
           baseURL={baseUrl}
           apiURL={apiUrl}
+          customMediaRenderer={customMediaRenderer}
         />
       )}
       {links?.length > 0 && <LinkItemWidget items={links} baseUrl={baseUrl} />}

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

@@ -151,6 +151,18 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
 </div>
 `;
 
+exports[`renders MediaItemWidget unchanged with custom media renderer 1`] = `
+<div>
+  <div
+    class="memori-media-items"
+  >
+    <div
+      class="memori-media-items--grid"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders MediaItemWidget unchanged with img 1`] = `
 <div>
   <div

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

@@ -84,6 +84,19 @@ WithPublicPageIntegrationAndFullbodyAvatar.args = {
   },
 };
 
+export const WithPublicPageIntegrationAndNonDefaultLang = Template.bind({});
+WithPublicPageIntegrationAndNonDefaultLang.args = {
+  memori,
+  tenant,
+  integration: {
+    ...integration,
+    customData: JSON.stringify({
+      ...JSON.parse(integration.customData ?? '{}'),
+      lang: 'es',
+    }),
+  },
+};
+
 export const ShowInstruct = Template.bind({});
 ShowInstruct.args = {
   memori: {
@@ -114,3 +127,24 @@ WithAzureSpeechKey.args = {
   tenant,
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
 };
+
+export const WithCustomMediaRenderer = Template.bind({});
+WithCustomMediaRenderer.args = {
+  memori,
+  tenant,
+  customMediaRenderer: (mimeType: string) => (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'black',
+        color: 'white',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {mimeType}
+    </div>
+  ),
+};

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -203,6 +203,7 @@ export interface Props {
   AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
   onStateChange?: (state?: DialogState) => void;
   additionalInfo?: OpenSession['additionalInfo'] & { [key: string]: string };
+  customMediaRenderer?: ChatProps['customMediaRenderer'];
 }
 
 const MemoriWidget = ({
@@ -235,6 +236,7 @@ const MemoriWidget = ({
   AZURE_COGNITIVE_SERVICES_TTS_KEY,
   onStateChange,
   additionalInfo,
+  customMediaRenderer,
 }: Props) => {
   const { t, i18n } = useTranslation();
 
@@ -2312,6 +2314,7 @@ const MemoriWidget = ({
     resetTranscript,
     listening,
     isPlayingAudio,
+    customMediaRenderer,
   };
 
   const integrationBackground =

package/src/components/StartPanel/StartPanel.tsx

@@ -205,26 +205,30 @@ const StartPanel: React.FC<Props> = ({
 
           {integrationConfig?.multilanguage && !instruct && (
             <div className="memori--language-chooser">
-              <Select
-                label={
-                  t('write_and_speak.iWantToTalkToIn', {
-                    name: memori.name,
-                  }) || undefined
-                }
+              <label id="user-lang-pref-label" htmlFor="user-lang-pref">
+                {t('write_and_speak.iWantToTalkToIn', {
+                  name: memori.name,
+                })}
+              </label>
+              <select
+                id="user-lang-pref"
+                className="memori-select--button"
                 value={(userLang ?? i18n.language).toUpperCase()}
-                displayValue={
-                  chatLanguages.find(
-                    lang =>
-                      lang.value.toUpperCase() ===
-                      (userLang ?? i18n.language).toUpperCase()
-                  )?.label
-                }
-                onChange={setUserLang}
-                options={chatLanguages.map(lang => ({
-                  label: lang.label,
-                  value: lang.value.toUpperCase(),
-                }))}
-              />
+                aria-labelledby="user-lang-pref-label"
+                onChange={e => {
+                  setUserLang(e.target.value);
+                }}
+              >
+                {chatLanguages.map(lang => (
+                  <option
+                    key={lang.value}
+                    value={lang.value}
+                    aria-label={lang.label}
+                  >
+                    {lang.label}
+                  </option>
+                ))}
+              </select>
             </div>
           )}
 

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

@@ -537,60 +537,72 @@ exports[`renders StartPanel with integrationConfig unchanged 1`] = `
       <div
         class="memori--language-chooser"
       >
-        <div
-          class="memori-select"
+        <label
+          for="user-lang-pref"
+          id="user-lang-pref-label"
+        >
+          write_and_speak.iWantToTalkToIn
+        </label>
+        <select
+          aria-labelledby="user-lang-pref-label"
+          class="memori-select--button"
+          id="user-lang-pref"
         >
-          <input
-            hidden=""
-            name="day"
-            readonly=""
-            style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-            type="hidden"
+          <option
+            aria-label="Italiano"
+            value="IT"
+          >
+            Italiano
+          </option>
+          <option
+            aria-label="English"
             value="EN"
-          />
-          <label
-            class="memori-select--label"
-            data-headlessui-state=""
-            id="headlessui-listbox-label-:r0:"
           >
-            write_and_speak.iWantToTalkToIn
-            :
-          </label>
-          <button
-            aria-expanded="false"
-            aria-haspopup="true"
-            aria-label="write_and_speak.iWantToTalkToIn"
-            aria-labelledby="headlessui-listbox-label-:r0: headlessui-listbox-button-:r1:"
-            class="memori-select--button"
-            data-headlessui-state=""
-            id="headlessui-listbox-button-:r1:"
-            type="button"
+            English
+          </option>
+          <option
+            aria-label="Deutsch"
+            value="DE"
           >
-            <span
-              class="memori-select--value"
-            >
-              English
-            </span>
-            <span
-              class="memori-select--icon"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                role="img"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
+            Deutsch
+          </option>
+          <option
+            aria-label="Español"
+            value="ES"
+          >
+            Español
+          </option>
+          <option
+            aria-label="Français"
+            value="FR"
+          >
+            Français
+          </option>
+          <option
+            aria-label="Português"
+            value="PT"
+          >
+            Português
+          </option>
+          <option
+            aria-label="Українська"
+            value="UK"
+          >
+            Українська
+          </option>
+          <option
+            aria-label="Русский"
+            value="RU"
+          >
+            Русский
+          </option>
+          <option
+            aria-label="Polski"
+            value="PL"
+          >
+            Polski
+          </option>
+        </select>
       </div>
       <button
         class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"

package/src/components/layouts/__snapshots__/Chat.test.tsx.snap

@@ -237,60 +237,72 @@ exports[`renders Chat layout unchanged 1`] = `
             <div
               class="memori--language-chooser"
             >
-              <div
-                class="memori-select"
+              <label
+                for="user-lang-pref"
+                id="user-lang-pref-label"
+              >
+                write_and_speak.iWantToTalkToIn
+              </label>
+              <select
+                aria-labelledby="user-lang-pref-label"
+                class="memori-select--button"
+                id="user-lang-pref"
               >
-                <input
-                  hidden=""
-                  name="day"
-                  readonly=""
-                  style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-                  type="hidden"
+                <option
+                  aria-label="Italiano"
                   value="IT"
-                />
-                <label
-                  class="memori-select--label"
-                  data-headlessui-state=""
-                  id="headlessui-listbox-label-:r7:"
                 >
-                  write_and_speak.iWantToTalkToIn
-                  :
-                </label>
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="write_and_speak.iWantToTalkToIn"
-                  aria-labelledby="headlessui-listbox-label-:r7: headlessui-listbox-button-:r8:"
-                  class="memori-select--button"
-                  data-headlessui-state=""
-                  id="headlessui-listbox-button-:r8:"
-                  type="button"
+                  Italiano
+                </option>
+                <option
+                  aria-label="English"
+                  value="EN"
                 >
-                  <span
-                    class="memori-select--value"
-                  >
-                    Italiano
-                  </span>
-                  <span
-                    class="memori-select--icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      focusable="false"
-                      role="img"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
+                  English
+                </option>
+                <option
+                  aria-label="Deutsch"
+                  value="DE"
+                >
+                  Deutsch
+                </option>
+                <option
+                  aria-label="Español"
+                  value="ES"
+                >
+                  Español
+                </option>
+                <option
+                  aria-label="Français"
+                  value="FR"
+                >
+                  Français
+                </option>
+                <option
+                  aria-label="Português"
+                  value="PT"
+                >
+                  Português
+                </option>
+                <option
+                  aria-label="Українська"
+                  value="UK"
+                >
+                  Українська
+                </option>
+                <option
+                  aria-label="Русский"
+                  value="RU"
+                >
+                  Русский
+                </option>
+                <option
+                  aria-label="Polski"
+                  value="PL"
+                >
+                  Polski
+                </option>
+              </select>
             </div>
             <button
               class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"