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

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

@@ -80,6 +80,7 @@ exports[`renders ChatBubble 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"
@@ -111,6 +112,7 @@ exports[`renders ChatBubble with initial msg 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"
@@ -132,6 +134,86 @@ exports[`renders ChatBubble with initial msg unchanged 1`] = `
 </div>
 `;
 
+exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container memori-chat--bubble-from-user memori-chat--with-addon"
+  >
+    <div
+      class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon memori-chat--ai-generated transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+    >
+      <p>
+        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </p>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-ai-icon"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            generatedByAI
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span>
+              <svg
+                aria-label="generatedByAI"
+                fill="none"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  clip-rule="evenodd"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M0 4a4 4 0 014-4h16a4 4 0 014 4v16a4 4 0 01-4 4H4a4 4 0 01-4-4zm4-2.4A2.4 2.4 0 001.6 4v16A2.4 2.4 0 004 22.4h16a2.4 2.4 0 002.4-2.4V4A2.4 2.4 0 0020 1.6z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M9.715 8.442a.798.798 0 00-1.43 0l-3.2 6.4a.799.799 0 101.431.716l.579-1.158h3.811l.578 1.158a.8.8 0 001.431-.716zm.391 4.358L9 10.589 7.894 12.8z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M17 8c.552 0 1 .358 1 .8v6.4c0 .442-.448.8-1 .8s-1-.358-1-.8V8.8c0-.442.448-.8 1-.8z"
+                    fill-rule="evenodd"
+                  />
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
 <div>
   <div

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { Meta, Story } from '@storybook/react';
 import ChatInputs, { Props } from './ChatInputs';
+import I18nWrapper from '../../I18nWrapper';
 import { dialogState } from '../../mocks/data';
 
 import './ChatInputs.css';
@@ -50,16 +51,18 @@ const Template: Story<Props> = args => {
   }, [listening]);
 
   return (
-    <div style={{ paddingTop: '10rem' }}>
-      <ChatInputs
-        {...args}
-        listening={listening}
-        startListening={startListening}
-        stopListening={stopListening}
-        userMessage={userMessage}
-        onChangeUserMessage={setUserMessage}
-      />
-    </div>
+    <I18nWrapper>
+      <div style={{ paddingTop: '10rem' }}>
+        <ChatInputs
+          {...args}
+          listening={listening}
+          startListening={startListening}
+          stopListening={stopListening}
+          userMessage={userMessage}
+          onChangeUserMessage={setUserMessage}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

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

@@ -48,6 +48,7 @@ exports[`renders ChatInputs disabled 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"
@@ -173,6 +174,7 @@ exports[`renders ChatInputs listening 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"
@@ -327,6 +329,7 @@ exports[`renders ChatInputs on instruct 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"
@@ -450,6 +453,7 @@ exports[`renders ChatInputs 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"
@@ -576,6 +580,7 @@ exports[`renders ChatInputs with user message 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"
@@ -701,6 +706,7 @@ exports[`renders ChatInputs without microphone button 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/ChatTextArea/ChatTextArea.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import ChatTextArea, { Props } from './ChatTextArea';
+import I18nWrapper from '../../I18nWrapper';
 import './ChatTextArea.css';
 
 const meta: Meta = {
@@ -24,9 +25,11 @@ const Template: Story<Props> = args => {
   const [userMessage, setUserMessage] = React.useState(args.value);
 
   return (
-    <div style={{ paddingTop: '10rem' }}>
-      <ChatTextArea {...args} value={userMessage} onChange={setUserMessage} />
-    </div>
+    <I18nWrapper>
+      <div style={{ paddingTop: '10rem' }}>
+        <ChatTextArea {...args} value={userMessage} onChange={setUserMessage} />
+      </div>
+    </I18nWrapper>
   );
 };
 

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import Button from '../ui/Button';
 import Expand from '../icons/Expand';
 import FullscreenExit from '../icons/FullscreenExit';
+import { useTranslation } from 'react-i18next';
 
 export interface Props {
   disabled?: boolean;
@@ -21,6 +22,7 @@ const ChatTextArea: React.FC<Props> = ({
   onFocus,
   onBlur,
 }) => {
+  const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
 
   return (
@@ -53,6 +55,9 @@ const ChatTextArea: React.FC<Props> = ({
             onClick={() => setExpanded(!expanded)}
             padded={false}
             ghost
+            title={
+              expanded ? t('collapse') || 'Collapse' : t('expand') || 'Expand'
+            }
             icon={expanded ? <FullscreenExit /> : <Expand />}
           />
         </div>

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

@@ -17,6 +17,7 @@ exports[`renders ChatTextArea 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"
@@ -59,6 +60,7 @@ exports[`renders ChatTextArea with long text 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"
@@ -101,6 +103,7 @@ exports[`renders ChatTextArea with value 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/CompletionProviderStatus/CompletionProviderStatus.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import CompletionProviderStatus, { Props } from './CompletionProviderStatus';
 
 import './CompletionProviderStatus.css';
@@ -16,7 +17,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <CompletionProviderStatus {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <CompletionProviderStatus {...args} />
+  </I18nWrapper>
+);
 
 export const Default = Template.bind({});
 Default.args = {};

package/src/components/DateSelector/DateSelector.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import DateSelector, { Props } from './DateSelector';
 
 import './DateSelector.css';
@@ -15,8 +16,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <DateSelector {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <DateSelector {...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({});

package/src/components/ExportHistoryButton/ExportHistoryButton.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import ExportHistoryButton, { Props } from './ExportHistoryButton';
+import I18nWrapper from '../../I18nWrapper';
 import { memori, history } from '../../mocks/data';
 import Download from '../icons/Download';
 
@@ -27,15 +28,19 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<Props> = args => (
-  <div style={{ textAlign: 'right' }}>
-    <ExportHistoryButton {...args} />
-  </div>
+  <I18nWrapper>
+    <div style={{ textAlign: 'right' }}>
+      <ExportHistoryButton {...args} />
+    </div>
+  </I18nWrapper>
 );
 
 const TemplateRight: Story<Props> = args => (
-  <div style={{ textAlign: 'left' }}>
-    <ExportHistoryButton {...args} />
-  </div>
+  <I18nWrapper>
+    <div style={{ textAlign: 'left' }}>
+      <ExportHistoryButton {...args} />
+    </div>
+  </I18nWrapper>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

package/src/components/FeedbackButtons/FeedbackButtons.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import FeedbackButtons, { Props } from './FeedbackButtons';
 import { memori } from '../../mocks/data';
 
@@ -23,8 +24,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <FeedbackButtons {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <FeedbackButtons {...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({});

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, history } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import Header, { Props } from './Header';
+import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 
 import './Header.css';
-import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 
 const meta: Meta = {
   title: 'Widget/Header',
@@ -31,7 +32,7 @@ const Template: Story<Props> = args => {
     React.useState(2);
 
   return (
-    <>
+    <I18nWrapper>
       <Header
         {...args}
         speakerMuted={speakerMuted}
@@ -51,7 +52,7 @@ const Template: Story<Props> = args => {
         hideEmissions={false}
         setHideEmissions={() => {}}
       />
-    </>
+    </I18nWrapper>
   );
 };
 

package/src/components/ImageUpload/ImageUpload.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import ImageUpload, { Props } from './ImageUpload';
 import memoriAPIClient from '@memori.ai/memori-api-client';
 
@@ -18,8 +19,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <ImageUpload {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <ImageUpload {...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({});

package/src/components/ImageUpload/ImageUpload.tsx

@@ -371,8 +371,11 @@ const ImageUpload: React.FC<Props> = ({
             {t(
               allowedMimeTypes
                 ? 'media.uploadHelper'
-                : 'media.uploadHelperImages'
-            ).replace('@size@', (maxFileSizeInMB ?? 2).toString())}
+                : 'media.uploadHelperImages',
+              {
+                size: maxFileSizeInMB ?? 2,
+              }
+            )}
           </p>
           {imageProportionsHelper && useImageCrop && (
             <p>

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import LinkItemWidget, { Props } from './LinkItemWidget';
 
 import './LinkItemWidget.css';
@@ -15,7 +16,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <LinkItemWidget {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <LinkItemWidget {...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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import MediaItemWidget, { Props } from './MediaItemWidget';
 
 import './MediaItemWidget.css';
@@ -22,7 +23,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <MediaItemWidget {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <MediaItemWidget {...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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import MediaWidget, { Props } from './MediaWidget';
 import {
   Medium,
@@ -92,7 +93,11 @@ const hints: TranslatedHint[] = [
   },
 ];
 
-const Template: Story<Props> = args => <MediaWidget {...args} />;
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <MediaWidget {...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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, integration, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import MemoriWidget, { Props } from './MemoriWidget';
 
 import './MemoriWidget.css';
@@ -33,8 +34,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <MemoriWidget {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <MemoriWidget {...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({});

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,
                   });