@memori.ai/memori-react 2.23.0 → 3.0.0

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, tenant, integration } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import Avatar, { Props } from './Avatar';
 
 import './Avatar.css';
@@ -30,32 +31,34 @@ const Template: Story<Props> = args => {
   );
 
   return (
-    <div
-      style={
-        args.integrationConfig?.avatar === 'customglb' ||
-        args.integrationConfig?.avatar === 'readyplayerme' ||
-        args.integrationConfig?.avatar === 'readyplayerme-full'
-          ? {}
-          : { marginTop: '20vw' }
-      }
-    >
-      <Avatar
-        {...args}
-        integrationConfig={
-          args.integrationConfig
-            ? {
-                ...args.integrationConfig,
-                avatarURL:
-                  args.integrationConfig.avatarURL?.split('#')?.[0] +
-                  `#${new Date(Date.now()).toISOString()}`,
-              }
-            : undefined
+    <I18nWrapper>
+      <div
+        style={
+          args.integrationConfig?.avatar === 'customglb' ||
+          args.integrationConfig?.avatar === 'readyplayerme' ||
+          args.integrationConfig?.avatar === 'readyplayerme-full'
+            ? {}
+            : { marginTop: '20vw' }
         }
-        avatar3dVisible={avatar3dVisible}
-        setAvatar3dVisible={setAvatar3dVisible}
-        key={Date.now()}
-      />
-    </div>
+      >
+        <Avatar
+          {...args}
+          integrationConfig={
+            args.integrationConfig
+              ? {
+                  ...args.integrationConfig,
+                  avatarURL:
+                    args.integrationConfig.avatarURL?.split('#')?.[0] +
+                    `#${new Date(Date.now()).toISOString()}`,
+                }
+              : undefined
+          }
+          avatar3dVisible={avatar3dVisible}
+          setAvatar3dVisible={setAvatar3dVisible}
+          key={Date.now()}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

package/src/components/AvatarView/AvatarView.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import AvatarView, { Props } from './index';
 
 const meta: Meta = {
@@ -67,11 +68,13 @@ const Template: Story<Props> = args => {
   }, []);
 
   return hydrated ? (
-    <AvatarView
-      {...args}
-      url={args.url + `#${new Date(Date.now()).toISOString()}`}
-      key={Date.now()}
-    />
+    <I18nWrapper>
+      <AvatarView
+        {...args}
+        url={args.url + `#${new Date(Date.now()).toISOString()}`}
+        key={Date.now()}
+      />
+    </I18nWrapper>
   ) : (
     <></>
   );

package/src/components/Blob/Blob.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import Blob, { Props } from './Blob';
 import './Blob.css';
 
@@ -26,9 +27,11 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<Props> = args => (
-  <div style={{ marginTop: '20vw' }}>
-    <Blob {...args} />
-  </div>
+  <I18nWrapper>
+    <div style={{ marginTop: '20vw' }}>
+      <Blob {...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/BlockedMemoriBadge/BlockedMemoriBadge.stories.tsx

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import ChangeMode, { Props } from './ChangeMode';
 
 import './ChangeMode.css';
@@ -25,12 +26,14 @@ const Template: Story<Props> = args => {
   const [instruct, setInstruct] = React.useState(args.instruct);
 
   return (
-    <ChangeMode
-      {...args}
-      canInstruct
-      instruct={instruct}
-      onChangeMode={mode => setInstruct(mode === 'instruct')}
-    />
+    <I18nWrapper>
+      <ChangeMode
+        {...args}
+        canInstruct
+        instruct={instruct}
+        onChangeMode={mode => setInstruct(mode === 'instruct')}
+      />
+    </I18nWrapper>
   );
 };
 

package/src/components/Chat/Chat.stories.tsx

@@ -9,6 +9,7 @@ import {
   sessionID,
   dialogState as dialogStateWithHints,
 } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
 import Chat, { Props } from './Chat';
 
 import './Chat.css';
@@ -33,11 +34,13 @@ const Template: Story<Props> = args => {
   const [userMessage, setUserMessage] = useState(args.userMessage);
 
   return (
-    <Chat
-      {...args}
-      userMessage={userMessage}
-      onChangeUserMessage={setUserMessage}
-    />
+    <I18nWrapper>
+      <Chat
+        {...args}
+        userMessage={userMessage}
+        onChangeUserMessage={setUserMessage}
+      />
+    </I18nWrapper>
   );
 };
 

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

@@ -368,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"
@@ -815,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"
@@ -1198,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"
@@ -1611,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"
@@ -1970,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"
@@ -2335,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"
@@ -2753,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"
@@ -3162,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"
@@ -3946,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"
@@ -4350,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"
@@ -4715,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({});

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