@memori.ai/memori-react 2.22.0 → 2.23.0

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -15,6 +15,7 @@ import {
   Asset,
   MemoriSession,
   User,
+  ExpertReference,
 } from '@memori.ai/memori-api-client/src/types';
 import {
   SpeakerAudioDestination,
@@ -411,6 +412,7 @@ const MemoriWidget = ({
     postTagChangedEvent,
     getSession,
     getContentQualityIndexes,
+    getExpertReferences,
   } = client;
 
   const [instruct, setInstruct] = useState(false);
@@ -635,6 +637,7 @@ const MemoriWidget = ({
           if (emission) {
             pushMessage({
               text: emission,
+              emitter: currentState.emitter,
               media: currentState.media,
               fromUser: false,
             });
@@ -663,6 +666,7 @@ const MemoriWidget = ({
             if (emission) {
               pushMessage({
                 text: emission,
+                emitter: currentState.emitter,
                 media: currentState.media,
                 fromUser: false,
               });
@@ -698,6 +702,7 @@ const MemoriWidget = ({
         if (emission) {
           pushMessage({
             text: emission,
+            emitter: currentState.emitter,
             media: currentState.media,
             fromUser: false,
             generatedByAI: !!currentState.completion,
@@ -757,6 +762,7 @@ const MemoriWidget = ({
       if (emission) {
         translatedMsg = {
           text: emission,
+          emitter: state.emitter,
           media: state.media,
           fromUser: false,
         };
@@ -796,6 +802,7 @@ const MemoriWidget = ({
       if (t.text.length > 0)
         translatedMsg = {
           text: t.text,
+          emitter: state.emitter,
           media: state.media,
           fromUser: false,
           generatedByAI: !!state.completion,
@@ -1025,6 +1032,7 @@ const MemoriWidget = ({
               ? setHistory([
                   {
                     text: currentState.emission,
+                    emitter: currentState.emitter,
                     media: currentState.media,
                     fromUser: false,
                     initial: true,
@@ -1032,6 +1040,7 @@ const MemoriWidget = ({
                 ])
               : pushMessage({
                   text: currentState.emission,
+                  emitter: currentState.emitter,
                   media: currentState.media,
                   fromUser: false,
                   initial: true,
@@ -1246,6 +1255,7 @@ const MemoriWidget = ({
         } else if (emission && emission.length > 0) {
           pushMessage({
             text: emission,
+            emitter: currentState.emitter,
             media: currentState.media,
             fromUser: false,
             generatedByAI: !!currentState.completion,
@@ -2141,6 +2151,7 @@ const MemoriWidget = ({
             if (currentState.emission) {
               pushMessage({
                 text: currentState.emission,
+                emitter: currentState.emitter,
                 media: currentState.media,
                 fromUser: false,
               });
@@ -2154,6 +2165,7 @@ const MemoriWidget = ({
           if (currentState.emission) {
             pushMessage({
               text: currentState.emission,
+              emitter: currentState.emitter,
               media: currentState.media,
               fromUser: false,
             });
@@ -2548,6 +2560,29 @@ const MemoriWidget = ({
     };
   }, []);
 
+  /**
+   * Experts references
+   */
+  const [experts, setExperts] = useState<ExpertReference[]>();
+  const fetchExperts = useCallback(async () => {
+    if (!sessionId || !memori?.enableBoardOfExperts) return;
+
+    try {
+      const { experts, count, ...resp } = await getExpertReferences(sessionId);
+
+      if (resp.resultCode === 0) {
+        setExperts(experts);
+      } else {
+        console.warn('Error fetching experts', resp);
+      }
+    } catch (err) {
+      console.warn(err);
+    }
+  }, [sessionId, memori?.enableBoardOfExperts]);
+  useEffect(() => {
+    fetchExperts();
+  }, [sessionId, fetchExperts]);
+
   const showFullHistory =
     showOnlyLastMessages === undefined
       ? layout !== 'TOTEM' && layout !== 'WEBSITE_ASSISTANT'
@@ -2676,6 +2711,7 @@ const MemoriWidget = ({
     customMediaRenderer,
     user,
     userAvatar,
+    experts,
   };
 
   const integrationBackground =
@@ -2905,6 +2941,7 @@ const MemoriWidget = ({
                 if (currentState.emission) {
                   pushMessage({
                     text: currentState.emission,
+                    emitter: currentState.emitter,
                     media: currentState.media,
                     fromUser: false,
                   });
@@ -2962,6 +2999,7 @@ const MemoriWidget = ({
                 if (currentState.emission) {
                   pushMessage({
                     text: currentState.emission,
+                    emitter: currentState.emitter,
                     media: currentState.media,
                     fromUser: false,
                   });

package/src/components/StartPanel/StartPanel.css

@@ -133,6 +133,7 @@
 }
 
 .memori--completions-enabled,
+.memori--board-of-experts,
 .memori--nsfw {
     position: absolute;
     right: 2.5rem;
@@ -161,4 +162,15 @@
 
 .memori--completions-enabled+.memori--nsfw {
     right: 4.75rem;
+}
+
+.memori--board-of-experts {
+    right: 0.25rem;
+}
+
+.memori--board-of-experts svg {
+    overflow: visible;
+    width: 1rem;
+    height: 1rem;
+    fill: #000;
 }

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -187,6 +187,29 @@ WithAllTheBadges.args = {
   onClickStart: () => {},
 };
 
+export const BoardOfExpert = Template.bind({});
+BoardOfExpert.args = {
+  memori: {
+    ...memori,
+    enableBoardOfExperts: true,
+    enableCompletions: true,
+  },
+  gamificationLevel: {
+    points: 61,
+    pointsForCurrentBadge: 60,
+    badge: '🌍',
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
 export const Instruct = Template.bind({});
 Instruct.args = {
   memori,

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

@@ -65,6 +65,27 @@ it('renders StartPanel with completions enabled unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders StartPanel for board of experts unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={{
+        ...memori,
+        enableBoardOfExperts: true,
+      }}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders StartPanel on instruct unchanged', () => {
   const { container } = render(
     <StartPanel

package/src/components/StartPanel/StartPanel.tsx

@@ -14,6 +14,7 @@ import Translation from '../icons/Translation';
 import { chatLanguages } from '../../helpers/constants';
 import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
 import AI from '../icons/AI';
+import Group from '../icons/Group';
 import CompletionProviderStatus from '../CompletionProviderStatus/CompletionProviderStatus';
 
 export interface Props {
@@ -101,7 +102,7 @@ const StartPanel: React.FC<Props> = ({
           })}")`,
         }}
       >
-        {!!gamificationLevel?.badge?.length && (
+        {!!gamificationLevel?.badge?.length && !memori.enableBoardOfExperts && (
           <div className="memori--gamification-badge">
             <Tooltip
               align="left"
@@ -119,7 +120,7 @@ const StartPanel: React.FC<Props> = ({
             </Tooltip>
           </div>
         )}
-        {!!memori.enableCompletions && (
+        {!!memori.enableCompletions && !memori.enableBoardOfExperts && (
           <div className="memori--completions-enabled">
             <Tooltip align="left" content={t('completionsEnabled')}>
               <span aria-label={t('completionsEnabled') || 'Completions'}>
@@ -128,6 +129,15 @@ const StartPanel: React.FC<Props> = ({
             </Tooltip>
           </div>
         )}
+        {!!memori.enableBoardOfExperts && (
+          <div className="memori--board-of-experts">
+            <Tooltip align="left" content={t('boardOfExperts')}>
+              <span aria-label={t('boardOfExperts') || 'Board of Experts'}>
+                <Group />
+              </span>
+            </Tooltip>
+          </div>
+        )}
         {!!memori.nsfw && (
           <div className="memori--nsfw">
             <Tooltip align="left" content={t('nsfw')}>

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

@@ -1,5 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders StartPanel for board of experts unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--board-of-experts"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            boardOfExperts
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="boardOfExperts"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                focusable="false"
+                height="16"
+                role="img"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 640 512"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
+      />
+      <img
+        alt="Memori"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <span
+          class="memori--description-text"
+        >
+          Lorem ipsum.
+        </span>
+      </p>
+      <button
+        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
+      >
+        write_and_speak.tryMeButton
+      </button>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders StartPanel on instruct unchanged 1`] = `
 <div>
   <div

package/src/components/icons/Group.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Group = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    width="20"
+    height="16"
+    viewBox="0 0 640 512"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"></path>
+  </svg>
+);
+
+export default Group;

package/src/helpers/media.test.ts

@@ -12,7 +12,7 @@ describe('Media URL helper', () => {
         baseURL: 'https://twin.memori.ai',
         apiURL: 'https://backend.memori.ai/api/v2',
       })
-    ).toBe('https://twin.memori.ai/images/memoriAvatar.png');
+    ).toBe('https://twin.memori.ai/images/memoriAvatar.png?v=20231208');
   });
   it('Get default cover URL with no url', async () => {
     expect(

package/src/helpers/media.ts

@@ -16,7 +16,7 @@ export const getResourceUrl = ({
   let defaultUri =
     type === 'cover'
       ? `${baseURL}/images/memoriCover.png`
-      : `${baseURL}/images/memoriAvatar.png`;
+      : `${baseURL}/images/memoriAvatar.png?v=20231208`;
 
   try {
     if (!resourceURI || resourceURI.length === 0) {

package/src/locales/en.json

@@ -34,6 +34,7 @@
   "completionProviderDown": "This Twin is integrated with a generative AI from {{provider}}, but it is currently unavailable. Try again later.",
   "completionProviderFallbackName": "an external provider",
   "completionProviderCheckStatusPage": "Check status page",
+  "boardOfExperts": "Board of experts",
   "birthDate": "Birth date",
   "birthDateHelper": "We ask for your birth date only to enable or disable functionalities that have age restrictions",
   "underage": "You must be at least {{age}} years old to sign up.",

package/src/locales/it.json

@@ -34,6 +34,7 @@
   "completionProviderDown": "Questo Twin è integrato con una IA generativa di {{provider}}, ma al momento non è disponibile. Riprova più tardi.",
   "completionProviderFallbackName": "un provider esterno",
   "completionProviderCheckStatusPage": "Vedi pagina di stato",
+  "boardOfExperts": "Gruppo di esperti",
   "birthDate": "Data di nascita",
   "birthDateHelper": "Ti chiediamo la data di nascita esclusivamente per abilitare o disabilitare le funzionalità che hanno restrizioni in base all'età",
   "underage": "Devi avere almeno {{age}} anni per registrarti.",