@memori.ai/memori-react 1.0.2 → 1.2.0

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -97,7 +97,13 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={item.url}
+          href={getResourceUrl({
+            resourceURI: item.url,
+            sessionID,
+            tenantID,
+            baseURL,
+            apiURL,
+          })}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -115,7 +121,13 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={item.url}
+          href={getResourceUrl({
+            resourceURI: item.url,
+            sessionID,
+            tenantID,
+            baseURL,
+            apiURL,
+          })}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -132,7 +144,13 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={item.url}
+          href={getResourceUrl({
+            resourceURI: item.url,
+            sessionID,
+            tenantID,
+            baseURL,
+            apiURL,
+          })}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -151,7 +169,13 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={item.url}
+          href={getResourceUrl({
+            resourceURI: item.url,
+            sessionID,
+            tenantID,
+            baseURL,
+            apiURL,
+          })}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -162,7 +186,13 @@ export const RenderMediaItem = ({
               <video
                 style={{ width: '100%', height: '100%' }}
                 controls
-                src={item.url}
+                src={getResourceUrl({
+                  resourceURI: item.url,
+                  sessionID,
+                  tenantID,
+                  baseURL,
+                  apiURL,
+                })}
                 title={item.title}
               />
             }
@@ -177,7 +207,13 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={item.url}
+          href={getResourceUrl({
+            resourceURI: item.url,
+            sessionID,
+            tenantID,
+            baseURL,
+            apiURL,
+          })}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}
@@ -188,7 +224,13 @@ export const RenderMediaItem = ({
               <audio
                 style={{ width: '100%', height: '100%' }}
                 controls
-                src={item.url}
+                src={getResourceUrl({
+                  resourceURI: item.url,
+                  sessionID,
+                  tenantID,
+                  baseURL,
+                  apiURL,
+                })}
               />
             }
             title={item.title}
@@ -199,7 +241,13 @@ export const RenderMediaItem = ({
     case 'model/gltf-binary':
       return (
         <ModelViewer
-          src={item.url!}
+          src={getResourceUrl({
+            resourceURI: item.url,
+            sessionID,
+            tenantID,
+            baseURL,
+            apiURL,
+          })}
           alt=""
           poster="data:image/png;base64,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"
         />
@@ -209,7 +257,13 @@ export const RenderMediaItem = ({
       return (
         <a
           className="memori-media-item--link"
-          href={item.url}
+          href={getResourceUrl({
+            resourceURI: item.url,
+            sessionID,
+            tenantID,
+            baseURL,
+            apiURL,
+          })}
           target="_blank"
           rel="noopener noreferrer"
           title={item.title}

package/src/components/MediaWidget/MediaWidget.css

@@ -3,14 +3,14 @@
     align-items: center;
     padding: 10px 30px;
     border-radius: 5px;
-    background-color: var(--ant-primary-color);
-    color: var(--ant-primary-text);
+    background-color: var(--memori-primary);
+    color: var(--memori-primary-text);
     transition: all 0.5s ease;
 }
 
 .actionButton:hover {
-    border-color: var(--ant-primary-color) !important;
-    background-color: var(--ant-primary-color);
+    border-color: var(--memori-primary) !important;
+    background-color: var(--memori-primary);
     color: var(--light-gray) !important;
     filter: brightness(1.08);
 }

package/src/components/MemoriWidget/MemoriWidget.css

@@ -1,25 +1,3 @@
-memori-client #root,
-.memori-widget {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-    --memori-inner-content-pad: 1rem;
-    --memori-inner-bg: transparent;
-    --memori-chat-bubble-bg: #ffffff60;
-    --memori-text-color: #000;
-    --memori-button-bg: #fff;
-    --memori-button-text: #000;
-    --memori-button-padding: 0.5rem 1.5rem;
-    --memori-button-border-color: #d9d9d9;
-    --memori-button-radius: 5px;
-    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
-    --memori-blur-background: 0;
-    --memori-drawer--width: 100%;
-    --memori-drawer--width--md: 80%;
-    --memori-drawer--width--lg: 60%;
-    --memori-modal--width: 100%;
-    --memori-modal--width--md: 80%;
-}
-
 .memori-widget {
     position: relative;
     width: 100%;

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

@@ -57,7 +57,23 @@ WithPublicPageIntegration.args = {
       ...JSON.parse(integration.customData ?? '{}'),
       avatar: 'readyplayerme',
       avatarURL:
-        'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb' +
+        'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb#' +
+        new Date(Date.now()).getTime(),
+    }),
+  },
+};
+
+export const WithPublicPageIntegrationAndFullbodyAvatar = Template.bind({});
+WithPublicPageIntegrationAndFullbodyAvatar.args = {
+  memori,
+  tenant,
+  integration: {
+    ...integration,
+    customData: JSON.stringify({
+      ...JSON.parse(integration.customData ?? '{}'),
+      avatar: 'readyplayerme-full',
+      avatarURL:
+        'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#' +
         new Date(Date.now()).getTime(),
     }),
   },

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -49,6 +49,7 @@ import ChangeMode from '../ChangeMode/ChangeMode';
 import Header from '../Header/Header';
 import AttachmentMediaModal from '../AttachmentMediaModal/AttachmentMediaModal';
 import AttachmentLinkModal from '../AttachmentLinkModal/AttachmentLinkModal';
+import PoweredBy from '../PoweredBy/PoweredBy';
 
 // Layout
 import DefaultLayout from '../layouts/Default';
@@ -517,6 +518,9 @@ const MemoriWidget = ({
         translatedState = {
           ...state,
           emission: t.text,
+          hints:
+            state.hints ??
+            (state.state === 'G1' ? currentDialogState?.hints : []),
         };
       }
 
@@ -823,7 +827,12 @@ const MemoriWidget = ({
             generatedByAI: !!currentState.completion,
           });
           speak(emission);
-          setCurrentDialogState(currentState);
+          setCurrentDialogState({
+            ...currentState,
+            hints:
+              currentState.hints ??
+              (currentState.state === 'G1' ? currentDialogState?.hints : []),
+          });
         }
       }
     }
@@ -1242,7 +1251,6 @@ const MemoriWidget = ({
       }
     );
 
-    setIsPlayingAudio(false);
     setMemoriTyping(false);
   };
   const stopAudio = () => {
@@ -1985,6 +1993,7 @@ const MemoriWidget = ({
       position={position}
       setShowPositionDrawer={setShowPositionDrawer}
       setShowSettingsDrawer={setShowSettingsDrawer}
+      showSpeaker={!!AZURE_COGNITIVE_SERVICES_TTS_KEY}
       speakerMuted={muteSpeaker}
       setSpeakerMuted={mute => {
         setMuteSpeaker(mute);
@@ -2014,6 +2023,7 @@ const MemoriWidget = ({
       setAvatar3dVisible={setAvatar3dVisible}
       hasUserActivatedSpeak={hasUserActivatedSpeak}
       isPlayingAudio={isPlayingAudio}
+      loading={memoriTyping}
       baseUrl={baseUrl}
       apiUrl={apiUrl}
     />
@@ -2122,6 +2132,8 @@ const MemoriWidget = ({
     />
   );
 
+  const poweredBy = <PoweredBy tenant={tenant} userLang={userLang} />;
+
   return (
     <div
       className={cx('memori', 'memori-widget', {
@@ -2149,6 +2161,7 @@ const MemoriWidget = ({
         integrationStyle={integrationStyle}
         integrationBackground={integrationBackground}
         changeMode={changeMode}
+        poweredBy={poweredBy}
         sessionId={sessionId}
         hasUserActivatedSpeak={hasUserActivatedSpeak}
         showInstruct={showInstruct}

package/src/components/PoweredBy/PoweredBy.css

@@ -0,0 +1,45 @@
+.memori--powered-by {
+    position: absolute;
+    z-index: 1000;
+    bottom: 1rem;
+    left: 0;
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: 0.25rem 0.5rem;
+    border-radius: 10px;
+    background-color: var(--memori-inner-bg, transparent);
+    box-shadow: var(--memori-button-box-shadow);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    font-size: 0.7em;
+}
+
+@media (max-width: 768px) {
+    .memori--powered-by {
+        top: 3.5rem;
+        bottom: auto;
+    }
+}
+
+.memori--powered-by img {
+    max-width: 2rem;
+    max-height: 2rem;
+    margin-right: 0.25rem;
+}
+
+.memori--powered-by p {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+.memori--powered-by a {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    text-decoration: underline;
+}
+
+.memori--powered-by a:hover,
+.memori--powered-by a:focus {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    opacity: 0.8;
+    text-decoration: underline;
+}

package/src/components/PoweredBy/PoweredBy.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, Story } from '@storybook/react';
+import PoweredBy, { Props } from './PoweredBy';
+
+import './PoweredBy.css';
+
+const meta: Meta = {
+  title: 'Powered by',
+  component: PoweredBy,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <PoweredBy {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  userLang: 'en',
+};
+
+export const MemoryTwin = Template.bind({});
+MemoryTwin.args = {
+  tenant: {
+    id: 'memorytwin',
+    theme: 'memorytwin',
+    config: {
+      name: 'MemoryTwin',
+      showNewUser: true,
+      requirePosition: false,
+      feedbackURL: '',
+    },
+  },
+};
+
+export const Italian = Template.bind({});
+Italian.args = {
+  userLang: 'it',
+};

package/src/components/PoweredBy/PoweredBy.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PoweredBy from './PoweredBy';
+
+it('renders PoweredBy unchanged', () => {
+  const { container } = render(<PoweredBy />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,34 @@
+import { Tenant } from '@memori.ai/memori-api-client/dist/types';
+
+export interface Props {
+  tenant?: Tenant;
+  userLang?: string;
+}
+
+const PoweredBy = ({ tenant, userLang = 'en' }: Props) => {
+  const tenantId =
+    tenant?.theme === 'memorytwin' ? 'memorytwin' : 'twincreator';
+
+  return (
+    <div className="memori--powered-by">
+      <img
+        src={`https://app.twincreator.com/images/${tenantId}/logo.png`}
+        alt=""
+      />
+      <p>
+        Powered by{' '}
+        <a
+          href={`https://app.${tenantId}.com/${
+            userLang ? userLang.toLowerCase() : ''
+          }`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {tenantId === 'memorytwin' ? 'MemoryTwin' : 'TwinCreator'}
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default PoweredBy;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders PoweredBy unchanged 1`] = `
+<div>
+  <div
+    class="memori--powered-by"
+  >
+    <img
+      alt=""
+      src="https://app.twincreator.com/images/twincreator/logo.png"
+    />
+    <p>
+      Powered by
+       
+      <a
+        href="https://app.twincreator.com/en"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        TwinCreator
+      </a>
+    </p>
+  </div>
+</div>
+`;

package/src/components/StartPanel/StartPanel.css

@@ -7,7 +7,7 @@
     height: 2rem;
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--ant-primary-color);
+    border: 1.5px solid var(--memori-primary);
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
@@ -29,7 +29,7 @@
 }
 
 .memori--start-panel .memori--start-panel-title {
-    color: var(--memori-text-color, var(--ant-primary-color)) !important;
+    color: var(--memori-text-color, var(--memori-primary)) !important;
 }
 
 .memori--start-panel .memori--start-panel-description {
@@ -132,7 +132,7 @@
     height: 2rem;
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--ant-primary-color);
+    border: 1.5px solid var(--memori-primary);
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);

package/src/components/icons/icons.stories.tsx

@@ -48,7 +48,7 @@ const IconsShowcase = (iconProps: IconProps) => {
 };
 
 const meta: Meta = {
-  title: 'Icons',
+  title: 'Definitions/Icons',
   component: IconsShowcase,
   argTypes: {
     children: {

package/src/components/layouts/Default.tsx

@@ -9,6 +9,7 @@ export interface Props {
   integrationStyle?: JSX.Element | null;
   integrationBackground?: JSX.Element | null;
   changeMode?: JSX.Element | null;
+  poweredBy?: JSX.Element | null;
   sessionId?: string;
   hasUserActivatedSpeak?: boolean;
   showInstruct?: boolean;
@@ -27,6 +28,7 @@ const Default: React.FC<Props> = ({
   hasUserActivatedSpeak,
   showInstruct = false,
   loading = false,
+  poweredBy,
 }) => (
   <>
     {integrationStyle}
@@ -44,6 +46,8 @@ const Default: React.FC<Props> = ({
         <div className="memori--grid-column memori--grid-column-right">
           {sessionId && hasUserActivatedSpeak ? chat : startPanel}
         </div>
+
+        {poweredBy}
       </div>
     </Spin>
   </>

package/src/components/ui/Button.css

@@ -1,13 +1,3 @@
-:root,
-#root {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-    --memori-button-radius: 5px;
-    --memori-button-padding: 0.5rem 1.5rem;
-    --memori-button-border-color: #d9d9d9;
-    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
-}
-
 .memori-button {
     display: inline-flex;
     align-items: center;

package/src/components/ui/Checkbox.css

@@ -1,8 +1,4 @@
-:root,
-#root {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-}
+
 
 .memori-checkbox {
     display: inline-flex;

package/src/components/ui/definitions.stories.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import '../../styles.css';
+
+const ColorDisplay = ({ color }: { color: string }) => (
+  <div
+    style={{
+      marginTop: '1rem',
+    }}
+  >
+    <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+      --{color}
+    </dt>
+    <dd>
+      <div
+        className={`color-${color}`}
+        style={{
+          width: '100px',
+          height: '100px',
+          boxShadow: '0 0 0.5rem rgba(0, 0, 0, 0.1)',
+          borderRadius: '10px',
+          background: `var(--${color})`,
+        }}
+        title={color}
+      />
+    </dd>
+  </div>
+);
+
+const colors = [
+  'memori-primary',
+  'memori-primary-text',
+  'memori-inner-bg',
+  'memori-chat-bubble-bg',
+  'memori-text-color',
+  'memori-button-bg',
+  'memori-button-text',
+  'memori-button-border-color',
+];
+
+const variables = [
+  'memori-inner-content-pad',
+  'memori-button-padding',
+  'memori-drawer--width',
+  'memori-drawer--width--md',
+  'memori-drawer--width--lg',
+  'memori-modal--width',
+  'memori-modal--width--md',
+];
+
+const Definitions = () => (
+  <div>
+    <h2>Colors</h2>
+    <dl>
+      {colors.map(color => (
+        <ColorDisplay key={color} color={color} />
+      ))}
+    </dl>
+    <h2>Others</h2>
+    <dl>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}
+      >
+        <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+          <p>--memori-button-box-shadow +</p>
+          <p>--memori-button-radius</p>
+        </dt>
+        <dd>
+          <div
+            style={{
+              boxShadow: 'var(--memori-button-box-shadow)',
+              border: '1px solid #f3f3f3',
+              width: '100px',
+              height: '100px',
+              borderRadius: 'var(--memori-button-radius)',
+            }}
+          />
+        </dd>
+      </div>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}
+      >
+        <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+          --memori-blur-background
+        </dt>
+        <dd>
+          <div
+            style={{
+              backgroundColor: '#eee',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: 'cover',
+              backgroundImage:
+                'url(https://app.twincreator.com/images/twincreator/og-image.png)',
+              filter: 'blur(var(--memori-blur-background, 0))',
+              width: '200px',
+              height: '100px',
+              borderRadius: '10px',
+            }}
+          />
+        </dd>
+      </div>
+    </dl>
+    <ul
+      style={{
+        padding: 0,
+        margin: 0,
+        listStyle: 'none',
+      }}
+    >
+      {variables.map(v => (
+        <li
+          key={v}
+          style={{
+            marginTop: '1rem',
+          }}
+        >
+          <p
+            style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}
+          >
+            --{v}
+          </p>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default {
+  title: 'Definitions/CSS Variables',
+  component: Definitions,
+} as ComponentMeta<typeof Definitions>;
+
+const Template: ComponentStory<typeof Definitions> = () => <Definitions />;
+export const Default = Template.bind({});