@memori.ai/memori-react 8.1.0-rc.0 → 8.2.0

package/src/components/ChatHistoryDrawer/ChatHistory.stories.tsx

@@ -105,7 +105,7 @@ const mockChatLogs: ChatLog[] = [
   {
     chatLogID: 'chat345678',
     memoriID: 'mem123',
-    sessionID: 'session123',
+    sessionID: 'session1234',
     timestamp: '2023-01-04T09:30:00Z',
     lines: [
       {
@@ -158,6 +158,25 @@ const mockMemori: Memori = {
   voiceType: 'FEMALE'
 } as Memori;
 
+const mockParams = {
+    open: true,
+    sessionId: 'session12345',
+    memori: mockMemori,
+    apiClient: mockApiClient as any,
+    onClose: () => console.log('Close button clicked'),
+    history: mockChatLogs.map(chatLog => ({
+      text: chatLog.lines[0].text,
+      fromUser: chatLog.lines[0].inbound,
+      timestamp: chatLog.lines[0].timestamp,
+    })),
+    resumeSession: (chatLog: ChatLog) => {
+      console.log('Resume session called with:', chatLog);
+    },
+    loginToken: 'mock-login-token',
+    language: 'EN',
+    userLang: 'EN',
+}
+
 // Create a meta object for the component
 const meta: Meta<typeof ChatHistory> = {
   title: 'Widget/Chat History Drawer',
@@ -173,22 +192,7 @@ const meta: Meta<typeof ChatHistory> = {
     layout: 'fullscreen',
   },
   // Define common args that apply to all stories
-  args: {
-    open: true,
-    sessionId: 'session123',
-    memori: mockMemori,
-    apiClient: mockApiClient as any,
-    onClose: () => console.log('Close button clicked'),
-    history: mockChatLogs.map(chatLog => ({
-      text: chatLog.lines[0].text,
-      fromUser: chatLog.lines[0].inbound,
-      timestamp: chatLog.lines[0].timestamp,
-    })),
-    resumeSession: (chatLog: ChatLog) => {
-      console.log('Resume session called with:', chatLog);
-    },
-    loginToken: 'mock-login-token',
-  },
+  args: mockParams,
   // Add argTypes to configure controls in Storybook
   argTypes: {
     open: { control: 'boolean', description: 'Whether the drawer is open' },
@@ -335,4 +339,23 @@ export const WithPagination: Story = {
       }
     } as any
   }
+}
+  
+
+// With translation
+export const WithTranslation: Story = {
+  args: {
+    ...mockParams,
+    language: 'EN',
+    userLang: 'IT',
+    isMultilanguageEnabled: true
+  }
+};
+
+// With current chat disabled
+export const WithCurrentChatDisabled: Story = {
+  args: {
+    ...mockParams,
+    sessionId: 'session1234',
+  }
 };

package/src/components/ChatHistoryDrawer/ChatHistory.test.tsx

@@ -39,6 +39,8 @@ it('renders ChatHistoryDrawer unchanged', () => {
       baseUrl="https://www.aisuru.com"
       apiUrl="https://backend.memori.ai"
       loginToken="test-login-token"
+      language="EN"
+      userLang="EN"
     />
   );
   expect(container).toMatchSnapshot();
@@ -57,6 +59,8 @@ it('renders ChatHistoryDrawer with chat logs unchanged', () => {
       baseUrl="https://www.aisuru.com"
       apiUrl="https://backend.memori.ai"
       loginToken="test-login-token"
+      language="EN"
+      userLang="EN"
     />
   );
   expect(container).toMatchSnapshot();
@@ -75,6 +79,8 @@ it('renders ChatHistoryDrawer with selected chat log unchanged', () => {
       baseUrl="https://www.aisuru.com"
       apiUrl="https://backend.memori.ai"
       loginToken="test-login-token"
+      language="EN"
+      userLang="EN"
     />
   );
   expect(container).toMatchSnapshot();
@@ -93,6 +99,8 @@ it('renders ChatHistoryDrawer closed unchanged', () => {
       baseUrl="https://www.aisuru.com"
       apiUrl="https://backend.memori.ai"
       loginToken="test-login-token"
+      language="EN"
+      userLang="EN"
     />
   );
   expect(container).toMatchSnapshot();

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -28,6 +28,8 @@ import Download from '../icons/Download';
 import MessageIcon from '../icons/Message';
 import ArrowUpIcon from '../icons/ArrowUp';
 import Select from '../ui/Select';
+// Helpers / Utils
+import { getTranslation } from '../../helpers/translations';
 
 export interface Props {
   open: boolean;
@@ -40,6 +42,9 @@ export interface Props {
   apiUrl: string;
   history: Message[];
   loginToken?: string;
+  language: string;
+  userLang: string;
+  isMultilanguageEnabled?: boolean;
 }
 
 const ITEMS_PER_PAGE = 8;
@@ -352,6 +357,54 @@ const calculateTitle = (lines: ChatLogLine[]): string => {
   return title;
 };
 
+// Function to translate all chat logs lines
+const translateChatLogs = async (
+  chatLogs: ChatLog[],
+  fromLanguage: string,
+  toLanguage: string,
+  baseUrl: string
+): Promise<ChatLog[]> => {
+  try {
+    const translatedChatLogs = await Promise.all(
+      chatLogs.map(async (chatLog) => {
+        const translatedLines = await Promise.all(
+          chatLog.lines.map(async (line) => {
+            if (!line.text) return line;
+
+            try {
+              const translation = await getTranslation(
+                line.text,
+                toLanguage,
+                fromLanguage,
+                baseUrl
+              );
+
+              return {
+                ...line,
+                originalText: line.text,
+                text: translation.text,
+              };
+            } catch (e) {
+              console.error('Error translating line:', e);
+              return line; // Return original line if translation fails
+            }
+          })
+        );
+
+        return {
+          ...chatLog,
+          lines: translatedLines,
+        };
+      })
+    );
+
+    return translatedChatLogs;
+  } catch (e) {
+    console.error('Error translating chat logs:', e);
+    return chatLogs; // Return original chat logs if translation fails
+  }
+};
+
 const downloadFile = (text: string, filename: string) => {
   const data = new Blob([text], { type: 'text/plain' });
   const url = URL.createObjectURL(data);
@@ -376,6 +429,9 @@ const ChatHistoryDrawer = ({
   apiUrl,
   history,
   loginToken,
+  language,
+  userLang,
+  isMultilanguageEnabled = false,
 }: Props) => {
   const { t } = useTranslation();
   const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
@@ -408,7 +464,7 @@ const ChatHistoryDrawer = ({
   const [minimumMessagesPerChat, setMinimumMessagesPerChat] =
     useState<number>(3);
 
-  const [customMinimumMessages, setCustomMinimumMessages] = useState<number>(0);
+  const [customMinimumMessages, setCustomMinimumMessages] = useState<number>(1);
 
   const formatDateForAPI = (date: Date) => {
     const year = date.getFullYear();
@@ -528,7 +584,7 @@ const ChatHistoryDrawer = ({
         const res = response;
 
         // Sort the chat logs by date
-        const sortedChatLogs = res.chatLogs.sort((a: ChatLog, b: ChatLog) => {
+        let sortedChatLogs = res.chatLogs.sort((a: ChatLog, b: ChatLog) => {
           const dateA = Math.max(
             ...a.lines.map((l: any) => new Date(l.timestamp).getTime())
           );
@@ -538,6 +594,19 @@ const ChatHistoryDrawer = ({
           return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
         });
 
+        // Translate chat logs if needed
+        if (
+          language.toUpperCase() !== userLang.toUpperCase() &&
+          isMultilanguageEnabled
+        ) {
+          sortedChatLogs = await translateChatLogs(
+            sortedChatLogs,
+            language,
+            userLang,
+            baseUrl
+          );
+        }
+
         setChatLogs(sortedChatLogs);
         setTotalItems(res.count || sortedChatLogs.length);
         setTotalPages(
@@ -689,8 +758,12 @@ const ChatHistoryDrawer = ({
 
             return (
               <Card
-                hoverable
+                hoverable={chatLog?.sessionID !== sessionId}
                 onClick={async () => {
+                  // the active chat
+                  if (chatLog?.sessionID === sessionId) {
+                    return;
+                  }
                   if (selectedChatLog?.chatLogID === chatLog.chatLogID) {
                     setSelectedChatLog(null);
                     return;
@@ -724,6 +797,10 @@ const ChatHistoryDrawer = ({
                   selectedChatLog?.chatLogID === chatLog.chatLogID
                     ? 'memori-chat-history-drawer--card--selected'
                     : ''
+                } ${
+                  chatLog?.sessionID === sessionId
+                    ? 'memori-chat-history-drawer--card--disabled'
+                    : 'memori-chat-history-drawer--card--hoverable'
                 }`}
               >
                 <>
@@ -825,6 +902,7 @@ const ChatHistoryDrawer = ({
                       <Button
                         className="memori-chat-history-drawer--card--content--export-button"
                         onClick={e => handleExportChat(chatLog, e)}
+                        disabled={chatLog?.sessionID === sessionId}
                       >
                         <div className="memori-chat-history-drawer--card--content--export-button--content">
                           <Download className="memori-chat-history-drawer--card--content--export-button--icon" />
@@ -1047,6 +1125,7 @@ const ChatHistoryDrawer = ({
             {minimumMessagesPerChat === 0 && (
               <input
                 type="number"
+                min={1}
                 value={customMinimumMessages}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   const value = parseInt(e.target.value, 10);

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -2543,13 +2543,20 @@ const MemoriWidget = ({
             ) {
               try {
                 translatedMessages = await Promise.all(
-                  messages.map(async m => ({
-                    ...m,
-                    originalText: m.text,
-                    text: (
-                      await getTranslation(m.text, userLang, language, baseUrl)
-                    ).text,
-                  }))
+                  messages.map(async m => {
+                    // If original text is present, the message is already translated
+                    if ('originalText' in m && m.originalText) {
+                      return m;
+                    }
+                    // Otherwise translate the message
+                    return {
+                      ...m,
+                      originalText: m.text,
+                      text: (
+                        await getTranslation(m.text, userLang, language, baseUrl)
+                      ).text,
+                    };
+                  })
                 );
               } catch (e) {
                 console.error('[CLICK_START] Error translating messages:', e);
@@ -3324,25 +3331,9 @@ const MemoriWidget = ({
           history={history}
           apiUrl={client.constants.BACKEND_URL}
           loginToken={loginToken}
-        />
-      )}
-
-      {showChatHistoryDrawer && (
-        <ChatHistoryDrawer
-          open={!!showChatHistoryDrawer}
-          onClose={() => setShowChatHistoryDrawer(false)}
-          resumeSession={chatLog => {
-            setChatLogID(chatLog.chatLogID);
-            onClickStart(undefined, false, chatLog);
-            setShowChatHistoryDrawer(false);
-          }}
-          apiClient={client}
-          sessionId={sessionId || ''}
-          memori={memori}
-          baseUrl={baseUrl}
-          history={history}
-          apiUrl={client.constants.BACKEND_URL}
-          loginToken={loginToken}
+          language={language}
+          userLang={userLang}
+          isMultilanguageEnabled={isMultilanguageEnabled}
         />
       )}
 

package/src/index.test.tsx

@@ -43,6 +43,56 @@ it('renders client', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders client with all the props', () => {
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({}),
+      }}
+      secretToken="1234567890"
+      height="100%"
+      tag="🌻"
+      pin="123456"
+      showShare={true}
+      showChatHistory={true}
+      showCopyButton={true}
+      showTranslationOriginal={true}
+      showSettings={true}
+      showTypingText={true}
+      showClear={true}
+      showLogin={true}
+      showUpload={true}
+      showReasoning={true}
+      showContextPerLine={true}
+      context={{
+        name: 'John Doe',
+        email: 'john.doe@example.com',
+        phone: '+39 333 333 3333',
+      }}
+      initialQuestion="What is the capital of France?"
+      autoStart={true}
+      enableAudio={true}
+      defaultSpeakerActive={true}
+      useMathFormatting={true}
+      spokenLang="EL"
+      multilingual={true}
+      authToken="1234567890"
+      onStateChange={() => {}}
+      additionalInfo={{}}
+      customMediaRenderer={() => <div>Custom Media Renderer</div>}
+      additionalSettings={<div>Additional Settings</div>}
+      userAvatar="https://memori.ai/avatar.png"
+      applyVarsToRoot={true}
+      disableTextEnteredEvents={true}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders client with whiteListedDomains on allowed domains', () => {
   mockLocation.hostname = 'memori.ai';
   const { container } = render(

package/src/index.tsx

@@ -283,11 +283,51 @@ const Memori: React.FC<Props> = ({
     }
   }
 
-  const initialContextVars =
-    context ?? getParsedContext(layoutIntegrationConfig.contextVars);
-  const initialQuestionLayout =
-    initialQuestion ??
-    (layoutIntegrationConfig.initialQuestion as string | undefined);
+  const ignoreClientAttributes =
+    layoutIntegrationConfig.ignoreClientAttributes ?? false;
+
+  const clientAttributes = ignoreClientAttributes
+    ? {
+        initialContextVars: getParsedContext(
+          layoutIntegrationConfig.contextVars
+        ),
+        initialQuestion: layoutIntegrationConfig.initialQuestion as
+          | string
+          | undefined,
+        showLogin: memori?.enableDeepThought,
+        memoriLang: memori?.culture?.split('-')?.[0],
+        autoStart: layout === 'HIDDEN_CHAT',
+      }
+    : {
+        ...(tag && pin ? { personification: { tag, pin } } : {}),
+        multilingual,
+        showCopyButton,
+        showTranslationOriginal,
+        showSettings,
+        showChatHistory,
+        showShare,
+        showTypingText,
+        showClear,
+        showLogin: showLogin ?? memori?.enableDeepThought,
+        showUpload,
+        showReasoning,
+        showContextPerLine,
+        initialContextVars:
+          context ?? getParsedContext(layoutIntegrationConfig.contextVars),
+        initialQuestion:
+          initialQuestion ??
+          (layoutIntegrationConfig.initialQuestion as string | undefined),
+        autoStart:
+          autoStart !== undefined
+            ? autoStart
+            : layout === 'HIDDEN_CHAT'
+            ? true
+            : autoStart,
+        enableAudio,
+        defaultSpeakerActive,
+        useMathFormatting,
+        memoriLang: spokenLang ?? memori?.culture?.split('-')?.[0],
+      };
 
   return (
     <I18nWrapper>
@@ -295,6 +335,7 @@ const Memori: React.FC<Props> = ({
         <Toaster position="top-center" reverseOrder={true} />
         {memori ? (
           <MemoriWidget
+            // General props
             layout={layout}
             customLayout={customLayout}
             height={height}
@@ -312,49 +353,26 @@ const Memori: React.FC<Props> = ({
             }}
             ownerUserName={ownerUserName ?? memori.ownerUserName}
             ownerUserID={ownerUserID ?? memori.ownerUserID}
-            tenantID={tenantID}
-            memoriLang={spokenLang ?? memori.culture?.split('-')?.[0]}
-            multilingual={multilingual}
-            showChatHistory={showChatHistory}
             tenant={tenant}
-            secret={secretToken}
+            tenantID={tenantID}
             sessionID={sessionID}
-            showShare={showShare}
-            showCopyButton={showCopyButton}
-            showTranslationOriginal={showTranslationOriginal}
-            showSettings={showSettings}
-            showTypingText={showTypingText}
-            showClear={showClear}
-            showOnlyLastMessages={showOnlyLastMessages}
-            showInputs={showInputs}
-            showDates={showDates}
-            showContextPerLine={showContextPerLine}
-            showLogin={showLogin ?? memori?.enableDeepThought}
-            showUpload={showUpload}
-            showReasoning={showReasoning}
+            secret={secretToken}
+            ttsProvider={provider ? (provider as 'azure' | 'openai') : 'azure'}
             integration={layoutIntegration}
-            initialContextVars={initialContextVars}
-            initialQuestion={initialQuestionLayout}
             authToken={authToken}
-            ttsProvider={provider ? (provider as 'azure' | 'openai') : 'azure'}
-            autoStart={
-              autoStart !== undefined
-                ? autoStart
-                : layout === 'HIDDEN_CHAT'
-                ? true
-                : autoStart
-            }
-            enableAudio={enableAudio}
-            defaultSpeakerActive={defaultSpeakerActive}
-            disableTextEnteredEvents={disableTextEnteredEvents}
             onStateChange={onStateChange}
             additionalInfo={additionalInfo}
             customMediaRenderer={customMediaRenderer}
             additionalSettings={additionalSettings}
             userAvatar={userAvatar}
-            useMathFormatting={useMathFormatting}
             applyVarsToRoot={applyVarsToRoot}
-            {...(tag && pin ? { personification: { tag, pin } } : {})}
+            disableTextEnteredEvents={disableTextEnteredEvents}
+            // From layout, from client if allowed
+            {...clientAttributes}
+            // Client only
+            showOnlyLastMessages={showOnlyLastMessages}
+            showInputs={showInputs}
+            showDates={showDates}
           />
         ) : (
           <div

package/src/locales/de.json

@@ -137,6 +137,7 @@
     },
     "instructButton": "WEISE MICH AN",
     "tryMeButton": "START",
+    "resumeButton": "FORTSETZEN",
     "chatHistory": "Chatverlauf",
     "chatHistoryDescription": "Chatverlauf mit diesem Agenten anzeigen",
     "loadingChatHistory": "Chatverlauf wird geladen...",

package/src/locales/es.json

@@ -137,6 +137,7 @@
     "instructButton": "INSTRUÍME",
     "downloadChat": "Descargar chat",
     "tryMeButton": "COMENZAR",
+    "resumeButton": "CONTINUAR",
     "chatHistory": "Historial de chat",
     "chatHistoryDescription": "Mostrar el historial de chat con este agente",
     "loadingChatHistory": "Cargando historial de chat...",

package/src/locales/fr.json

@@ -146,6 +146,7 @@
     "downloadChat": "Télécharger le chat",
     "instructButton": "INSTRUCTEZ-MOI",
     "tryMeButton": "COMMENCER",
+    "resumeButton": "RÉSUMER",
     "chatHistory": "Historique des discussions",
     "chatHistoryDescription": "Afficher l'historique des discussions avec cet agent",
     "loadingChatHistory": "Chargement de l'historique des discussions...",