@memori.ai/memori-react 2.22.0 → 3.0.0-rc.0

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

@@ -24,6 +24,7 @@ exports[`renders Chat on X2a state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -79,6 +80,7 @@ exports[`renders Chat on X2a state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -134,6 +136,7 @@ exports[`renders Chat on X2a state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -280,6 +283,7 @@ exports[`renders Chat on X2a state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -364,6 +368,7 @@ exports[`renders Chat on X2a state unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -434,6 +439,7 @@ exports[`renders Chat on X3 state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -489,6 +495,7 @@ exports[`renders Chat on X3 state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -544,6 +551,7 @@ exports[`renders Chat on X3 state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -690,6 +698,7 @@ exports[`renders Chat on X3 state unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -807,6 +816,7 @@ exports[`renders Chat on X3 state unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -877,6 +887,7 @@ exports[`renders Chat unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -932,6 +943,7 @@ exports[`renders Chat unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -987,6 +999,7 @@ exports[`renders Chat unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1118,6 +1131,7 @@ exports[`renders Chat unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1186,6 +1200,7 @@ exports[`renders Chat unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -1256,6 +1271,7 @@ exports[`renders Chat with context vars unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1311,6 +1327,7 @@ exports[`renders Chat with context vars unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1366,6 +1383,7 @@ exports[`renders Chat with context vars unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1512,6 +1530,7 @@ exports[`renders Chat with context vars unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1595,6 +1614,7 @@ exports[`renders Chat with context vars unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -1665,6 +1685,7 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1712,6 +1733,7 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1759,6 +1781,7 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1882,6 +1905,7 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -1950,6 +1974,7 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -2020,6 +2045,7 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2069,6 +2095,7 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2118,6 +2145,7 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2243,6 +2271,7 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2311,6 +2340,7 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -2381,6 +2411,7 @@ exports[`renders Chat with dates unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2446,6 +2477,7 @@ exports[`renders Chat with dates unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2511,6 +2543,7 @@ exports[`renders Chat with dates unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2652,6 +2685,7 @@ exports[`renders Chat with dates unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2725,6 +2759,7 @@ exports[`renders Chat with dates unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -2795,6 +2830,7 @@ exports[`renders Chat with hints unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2850,6 +2886,7 @@ exports[`renders Chat with hints unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -2905,6 +2942,7 @@ exports[`renders Chat with hints unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -3036,6 +3074,7 @@ exports[`renders Chat with hints unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -3130,6 +3169,7 @@ exports[`renders Chat with hints unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -3200,6 +3240,7 @@ exports[`renders Chat with media unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -3255,6 +3296,7 @@ exports[`renders Chat with media unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -3310,6 +3352,7 @@ exports[`renders Chat with media unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -3842,6 +3885,7 @@ exports[`renders Chat with media unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -3910,6 +3954,7 @@ exports[`renders Chat with media unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -3980,6 +4025,7 @@ exports[`renders Chat with memori typing unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4035,6 +4081,7 @@ exports[`renders Chat with memori typing unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4090,6 +4137,7 @@ exports[`renders Chat with memori typing unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4221,6 +4269,7 @@ exports[`renders Chat with memori typing unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4310,6 +4359,7 @@ exports[`renders Chat with memori typing unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"
@@ -4380,6 +4430,7 @@ exports[`renders Chat with user unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4429,6 +4480,7 @@ exports[`renders Chat with user unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4478,6 +4530,7 @@ exports[`renders Chat with user unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4603,6 +4656,7 @@ exports[`renders Chat with user unchanged 1`] = `
         >
           <picture
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
           >
             <source
               src="https://app.twincreator.com/images/twincreator/square_logo.png"
@@ -4671,6 +4725,7 @@ exports[`renders Chat with user unchanged 1`] = `
           >
             <button
               class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
+              title="expand"
             >
               <span
                 class="memori-button--icon"

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import ChatBubble, { Props } from './ChatBubble';
 
 import './ChatBubble.css';
@@ -32,8 +33,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <ChatBubble {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <ChatBubble {...args} />
+  </I18nWrapper>
+);
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
@@ -177,3 +181,31 @@ FromUserWithAvatarAndCustomAvatar.args = {
       'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
   },
 };
+
+export const FromExpertOfABoard = Template.bind({});
+FromExpertOfABoard.args = {
+  memori: {
+    ...memori,
+    enableBoardOfExperts: true,
+  },
+  apiUrl: 'https://backend.memori.ai',
+  tenant,
+  experts: [
+    {
+      expertID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b',
+      name: 'Expert name',
+      description: 'Expert description',
+      expertMemoriID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b',
+      expertBaseURL: 'https://engine.memori.ai',
+    },
+  ],
+  message: {
+    fromUser: false,
+    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    generatedByAI: true,
+    emitter: 'Expert name',
+    translatedText:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+};

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -72,6 +72,38 @@ it('renders ChatBubble with msg generated by AI unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders ChatBubble with msg from BoE expert unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={{
+        ...memori,
+        enableBoardOfExperts: true,
+      }}
+      tenant={tenant}
+      apiUrl="https://backend.memori.ai"
+      experts={[
+        {
+          expertID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b',
+          name: 'Expert name',
+          description: 'Expert description',
+          expertMemoriID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b',
+          expertBaseURL: 'https://engine.memori.ai',
+        },
+      ]}
+      message={{
+        fromUser: true,
+        text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+        initial: false,
+        generatedByAI: true,
+        emitter: 'Expert name',
+        translatedText:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders ChatBubble from user with avatar unchanged', () => {
   const { container } = render(
     <ChatBubble

package/src/components/ChatBubble/ChatBubble.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import {
+  ExpertReference,
   Memori,
   Message,
   Tenant,
@@ -27,6 +28,7 @@ export interface Props {
   isFirst?: boolean;
   userAvatar?: MemoriProps['userAvatar'];
   user?: User;
+  experts?: ExpertReference[];
 }
 
 const ChatBubble: React.FC<Props> = ({
@@ -41,6 +43,7 @@ const ChatBubble: React.FC<Props> = ({
   isFirst = false,
   user,
   userAvatar,
+  experts,
 }) => {
   const { t } = useTranslation();
 
@@ -74,21 +77,46 @@ const ChatBubble: React.FC<Props> = ({
             leaveTo={`opacity-0 scale-075 ${
               message.fromUser ? 'translate-x-15' : 'translate-x--15'
             }`}
+            title={
+              !!message.emitter?.length && !!memori.enableBoardOfExperts
+                ? message.emitter
+                : memori.name
+            }
           >
             <source
-              src={getResourceUrl({
-                type: 'avatar',
-                tenantID: tenant?.id,
-                resourceURI: memori.avatarURL,
-                baseURL: baseUrl,
-                apiURL: apiUrl,
-              })}
+              src={
+                !!message.emitter?.length &&
+                !!memori.enableBoardOfExperts &&
+                experts?.find(e => e.name === message.emitter)
+                  ? `${apiUrl}/api/v1/memoriai/memori/avatar/${
+                      experts.find(e => e.name === message.emitter)
+                        ?.expertMemoriID
+                    }`
+                  : getResourceUrl({
+                      type: 'avatar',
+                      tenantID: tenant?.id,
+                      resourceURI: memori.avatarURL,
+                      baseURL: baseUrl,
+                      apiURL: apiUrl,
+                    })
+              }
             />
             <img
               className="memori-chat--bubble-avatar-img"
-              alt={memori.name}
+              alt={
+                !!message.emitter?.length && !!memori.enableBoardOfExperts
+                  ? message.emitter
+                  : memori.name
+              }
               src={
-                memori.avatarURL && memori.avatarURL.length > 0
+                !!message.emitter?.length &&
+                !!memori.enableBoardOfExperts &&
+                experts?.find(e => e.name === message.emitter)
+                  ? `${apiUrl}/api/v1/memoriai/memori/avatar/${
+                      experts.find(e => e.name === message.emitter)
+                        ?.expertMemoriID
+                    }`
+                  : memori.avatarURL && memori.avatarURL.length > 0
                   ? getResourceUrl({
                       type: 'avatar',
                       tenantID: tenant?.id,