@memori.ai/memori-react 7.28.0 → 7.29.0

package/src/components/icons/History.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+const History = ({
+    className,
+    title,
+    disabled,
+  }: {
+    className?: string;
+    title?: string;
+    disabled?: boolean;
+  }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke={disabled ? '#000000' : '#ffff'}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 8v4l2.5 2.5"
+    />
+    <path
+      fill={disabled ? '#000000' : '#ffff'}
+      d="m5.604 5.604-.53-.53.53.53ZM4.338 6.871l-.75.003a.75.75 0 0 0 .746.747l.004-.75Zm2.542.762a.75.75 0 1 0 .007-1.5l-.007 1.5ZM5.075 4.321a.75.75 0 0 0-1.5.008l1.5-.008ZM3.75 12a.75.75 0 0 0-1.5 0h1.5Zm13.125 8.445a.75.75 0 1 0-.75-1.298l.75 1.298Zm2.272-4.32a.75.75 0 1 0 1.298.75l-1.298-.75ZM5.14 5.07a.75.75 0 1 0 1.056 1.066L5.14 5.071Zm13.722.067c-3.82-3.82-9.993-3.859-13.788-.064l1.06 1.06c3.2-3.199 8.423-3.18 11.668.065l1.06-1.061ZM5.074 5.074 3.808 6.34l1.06 1.06 1.267-1.265-1.061-1.061Zm-.74 2.547 2.546.012.007-1.5-2.545-.012-.008 1.5Zm.754-.754L5.075 4.32l-1.5.008.013 2.545 1.5-.007ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5c0-5.385-4.365-9.75-9.75-9.75v1.5Zm0 16.5A8.25 8.25 0 0 1 3.75 12h-1.5c0 5.385 4.365 9.75 9.75 9.75v-1.5Zm4.125-1.103A8.209 8.209 0 0 1 12 20.25v1.5c1.775 0 3.44-.475 4.875-1.305l-.75-1.298ZM20.25 12a8.209 8.209 0 0 1-1.103 4.125l1.298.75A9.708 9.708 0 0 0 21.75 12h-1.5ZM6.196 6.137A8.221 8.221 0 0 1 12 3.75v-1.5a9.721 9.721 0 0 0-6.86 2.821l1.056 1.066Z"
+    />
+  </svg>
+)
+export default History

package/src/components/ui/Card.css

@@ -58,3 +58,7 @@
     font-size: 0.875rem;
     font-weight: 400;
 }
+
+.memori-card--pointer {
+    cursor: pointer;
+}

package/src/components/ui/Card.tsx

@@ -24,12 +24,13 @@ const Card: FC<Props> = ({
   onClick,
 }) => (
   <div
+    onClick={onClick}
     className={cx('memori-card', className, {
       'memori-card--loading': loading,
       'memori-card--with-cover': cover,
       'memori-card--hoverable': hoverable,
+      'memori-card--pointer': !!onClick,
     })}
-    onClick={onClick}
   >
     <Spin spinning={loading}>
       {cover && <div className="memori-card--cover">{cover}</div>}

package/src/helpers/message.ts

@@ -91,8 +91,6 @@ export const renderMsg = (
       // Abilita il supporto per KaTeX
       marked.use(
         markedKatex({
-          throwOnError: false,
-          output: 'htmlAndMathml',
         })
       );
 

package/src/helpers/utils.ts

@@ -228,6 +228,29 @@ export const getFieldFromCustomData = (
   }
 };
 
+const MAX_MSG_CHARS = 4000;
+
+const MAX_MSG_WORDS = 300;
+
+export const truncateMessage = (message: string) => {
+
+  let truncatedMessage = message;
+
+  if (message.length > MAX_MSG_CHARS) {
+    truncatedMessage = `${message.slice(0, MAX_MSG_CHARS)}\n<br />...`;
+  }
+
+  if (truncatedMessage.split(' ').length > MAX_MSG_WORDS) {
+    truncatedMessage = truncatedMessage
+      .split(' ')
+      .slice(0, MAX_MSG_WORDS)
+      .join(' ')
+      .concat('\n<br/>...');
+  }
+
+  return truncatedMessage;
+};
+
 export const stripObjNulls = (obj: { [key: string]: any }) => {
   const newObj = { ...obj };
   Object.keys(newObj).forEach(key => {

package/src/index.stories.tsx

@@ -36,6 +36,7 @@ Anonymous.args = {
   spokenLang: 'IT',
   enableAudio: true,
   autoStart: true,
+  showChatHistory: true,
 };
 
 export const WithInitialContextAndQuestion = Template.bind({});
@@ -88,6 +89,19 @@ WithPreviousSession.args = {
   spokenLang: 'IT',
 };
 
+export const WithChatHistory = Template.bind({});
+WithChatHistory.args = {
+  ownerUserName: 'nzambello',
+  memoriName: 'Nicola',
+  tenantID: 'www.aisuru.com',
+  engineURL: 'https://engine.memori.ai',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://www.aisuru.com',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  showChatHistory: true,
+};
+
 export const WithUpload = Template.bind({});
 WithUpload.args = {
   ownerUserName: 'nzambello',
@@ -117,19 +131,32 @@ Nunzio.args = {
 
 export const Localhost = Template.bind({});
 Localhost.args = {
-  memoriName: 'test memori',
-  ownerUserName: 'nicola',
-  memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
-  ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
-  tenantID: 'www.aisuru.com',
-  apiURL: 'http://localhost:7778',
+  memoriName: 'test9',
+  ownerUserName: 'andrea.patini',
+  memoriID: 'e31aa393-08c4-469a-b2e8-971eb45f4925',
+  ownerUserID: '9266e23e-6822-4658-bbb0-4bebbc232bd4',
+  tenantID: 'localhost:3000',
   engineURL: 'http://localhost:7778',
+  apiURL: 'http://localhost:7778',
   baseURL: 'http://localhost:3000',
-  uiLang: 'EN',
-  lang: 'IT',
+  uiLang: 'IT',
+  spokenLang: 'IT',
   layout: 'FULLPAGE',
+  showInstruct: false,
+  showSettings: true,
+  showChatHistory: true,
+  showClear: false,
+  showTypingText: false,
+  showOnlyLastMessages: false,
+  showTranslationOriginal: false,
+  showCopyButton: false,
   showShare: true,
-  integrationID: '82f017cc-450b-4c47-acf5-47910d336ce9',
+  showLogin: true,
+  useMathFormatting: false,
+  showUpload: false,
+  autoStart: false,
+  enableAudio: true,
+  integrationID: 'c13fe42a-2d25-4bde-a502-f34824cd4ff1',
 };
 
 export const LocalhostBoE = Template.bind({});

package/src/index.tsx

@@ -34,6 +34,7 @@ export interface Props {
   layout?: WidgetProps['layout'];
   customLayout?: WidgetProps['customLayout'];
   showShare?: boolean;
+  showChatHistory?: boolean;
   showCopyButton?: boolean;
   showTranslationOriginal?: boolean;
   showInputs?: boolean;
@@ -128,6 +129,7 @@ const Memori: React.FC<Props> = ({
   pin,
   context,
   initialQuestion,
+  showChatHistory = true,
   uiLang,
   spokenLang,
   multilingual,
@@ -285,6 +287,7 @@ const Memori: React.FC<Props> = ({
             tenantID={tenantID}
             memoriLang={spokenLang ?? memori.culture?.split('-')?.[0]}
             multilingual={multilingual}
+            showChatHistory={showChatHistory}
             tenant={tenant}
             secret={secretToken}
             sessionID={sessionID}

package/src/locales/de.json

@@ -113,6 +113,11 @@
     "boardOfExperts": "Expertengremium",
     "showExpertsInTheBoard": "Experten in diesem Forum anzeigen",
     "expertsInTheBoard": "Experten in diesem Forum",
+    "chatHistory": "Chatverlauf",
+    "chatHistoryDescription": "Zeige den Chatverlauf mit diesem Agenten",
+    "loadingChatHistory": "Chatverlauf wird geladen...",
+    "noChatHistoryAvailable": "Kein Chatverlauf verfügbar",
+    "noResultsFound": "Keine Ergebnisse gefunden für "{{searchText}}"",
     "goToIntegrationsToCustomizeAvatar": "Um den Avatar anzupassen, gehen Sie zu „Teilen“ und passen Sie die öffentliche Seite an"
   },
   "write_and_speak": {
@@ -156,7 +161,12 @@
     "requirePositionHelp": "Zum Reden {{name}} Sie müssen entscheiden, ob Sie Ihre Position angeben oder nicht. ",
     "dontWantToProvidePosition": "Ich möchte meine Position nicht bekannt geben",
     "attachmentsLabel": "Bereichern Sie Ihre Botschaft",
-    "iWantToTalkToIn": "Ich möchte mit reden {{name}} In"
+    "iWantToTalkToIn": "Ich möchte mit reden {{name}} In",
+    "message": "nachricht",
+    "messages": "nachrichten",
+    "latestFirst": "Neueste zuerst",
+    "oldestFirst": "Älteste zuerst",
+    "page": "Seite {{current}} von {{total}}"
   },
   "upload": {
     "loginRequired": "Login erforderlich",

package/src/locales/en.json

@@ -113,6 +113,11 @@
     "boardOfExperts": "Board of experts",
     "showExpertsInTheBoard": "Show experts in this board",
     "expertsInTheBoard": "Experts in this board",
+    "chatHistory": "Chat history",
+    "chatHistoryDescription": "Show the chat history with this agent",
+    "loadingChatHistory": "Loading chat history...",
+    "noChatHistoryAvailable": "No chat history available",
+    "noResultsFound": "No results found for "{{searchText}}"",
     "goToIntegrationsToCustomizeAvatar": "To customize the avatar, go to Share and customize the public page"
   },
   "write_and_speak": {
@@ -168,7 +173,12 @@
     "requirePositionHelp": "To talk to {{name}} you have to decide whether to provide your position or not. This is because different answers that it can provide you may depend on where you are.",
     "dontWantToProvidePosition": "I don't want to provide my position",
     "attachmentsLabel": "Enrich your message",
-    "iWantToTalkToIn": "I want to talk to {{name}} in"
+    "iWantToTalkToIn": "I want to talk to {{name}} in",
+    "message": "message",
+    "messages": "messages",
+    "latestFirst": "Latest first",
+    "oldestFirst": "Oldest first",
+    "page": "Page {{current}} of {{total}}"
   },
   "upload": {
     "loginRequired": "Login required",

package/src/locales/es.json

@@ -113,6 +113,11 @@
     "boardOfExperts": "junta de expertos",
     "showExpertsInTheBoard": "Mostrar expertos en este foro",
     "expertsInTheBoard": "Expertos en este foro",
+    "chatHistory": "Historial de chat",
+    "chatHistoryDescription": "Mostrar el historial de chat con este agente",
+    "loadingChatHistory": "Cargando historial de chat...",
+    "noChatHistoryAvailable": "No hay historial de chat disponible",
+    "noResultsFound": "No se encontraron resultados para "{{searchText}}"",
     "goToIntegrationsToCustomizeAvatar": "Para personalizar el avatar, vaya a Compartir y personalice la página pública."
   },
   "write_and_speak": {
@@ -156,7 +161,12 @@
     "requirePositionHelp": "para hablar con {{name}} usted tiene que decidir si proporciona su puesto o no. ",
     "dontWantToProvidePosition": "No quiero proporcionar mi puesto.",
     "attachmentsLabel": "Enriquece tu mensaje",
-    "iWantToTalkToIn": "quiero hablar con {{name}} en"
+    "iWantToTalkToIn": "quiero hablar con {{name}} en",
+    "message": "mensaje",
+    "messages": "mensajes",
+    "latestFirst": "Más recientes",
+    "oldestFirst": "Más antiguos",
+    "page": "Página {{current}} de {{total}}"
   },
   "upload": {
     "loginRequired": "Connexion requise",

package/src/locales/fr.json

@@ -112,13 +112,20 @@
     "boardOfExperts": "Conseil d'experts",
     "showExpertsInTheBoard": "Afficher les experts dans ce forum",
     "expertsInTheBoard": "Experts dans ce forum",
-    "goToIntegrationsToCustomizeAvatar": "Pour personnaliser l'avatar, allez dans Partager et personnalisez la page publique"
+    "goToIntegrationsToCustomizeAvatar": "Pour personnaliser l'avatar, allez dans Partager et personnalisez la page publique",
+    "chatHistory": "Historique des discussions",
+    "chatHistoryDescription": "Afficher l'historique des discussions avec cet agent",
+    "loadingChatHistory": "Chargement de l'historique des discussions...",
+    "noChatHistoryAvailable": "Aucun historique des discussions disponible",
+    "noResultsFound": "Aucun résultat trouvé pour "{{searchText}}""
   },
   "write_and_speak": {
     "micButtonPopover": "Cliquez sur le bouton pour parler",
     "micButtonPopoverListening": "Cliquez sur le bouton pour arrêter de parler",
     "pageInstructExplanation": "Pour m'apprendre de nouvelles choses, cliquez sur le bouton INSTRUCTEZ-MOI pour commencer",
     "pageTryMeExplanation": "Pour me parler, cliquez sur le bouton START pour commencer",
+    "pagePrivacyExplanation": "Les conversations sont visibles par l'auteur de l'agent",
+    "pagePrivacyExplanationTooltip": "En commençant la conversation, nous vous informons que :\n\n- Toutes les conversations avec cet agent sont visibles par l'auteur de l'agent\n- Si vous utilisez la chat comme utilisateur anonyme, l'auteur pourra voir le contenu de la conversation et votre adresse IP\n- Si vous utilisez la chat comme utilisateur enregistré (connecté), l'auteur pourra voir le contenu de la conversation et votre nom d'utilisateur\n- L'auteur utilise ces informations pour améliorer les fonctionnalités de l'agent et pour vous fournir un meilleur service\n- En continuant la conversation, vous acceptez ces conditions.",
     "instructButton": "INSTRUCTEZ-MOI",
     "tryMeButton": "COMMENCER",
     "chatHistory": "Historique des discussions",
@@ -148,7 +155,12 @@
     "requirePositionHelp": "Pour parler à {{name}} vous devez décider si vous souhaitez ou non fournir votre poste. ",
     "dontWantToProvidePosition": "Je ne veux pas donner ma position",
     "attachmentsLabel": "Enrichissez votre message",
-    "iWantToTalkToIn": "je veux parler à {{name}} dans"
+    "iWantToTalkToIn": "je veux parler à {{name}} dans",
+    "message": "message",
+    "messages": "messages",
+    "latestFirst": "Plus récent",
+    "oldestFirst": "Plus ancien",
+    "page": "Page {{current}} de {{total}}"
   },
   "upload": {
     "loginRequired": "Connexion requise",

package/src/locales/it.json

@@ -113,6 +113,11 @@
     "boardOfExperts": "Gruppo di esperti",
     "showExpertsInTheBoard": "Mostra gli esperti di questo gruppo",
     "expertsInTheBoard": "Esperti di questo gruppo",
+    "chatHistory": "Cronologia chat",
+    "chatHistoryDescription": "Visualizza la cronologia delle chat con questo agente",
+    "loadingChatHistory": "Caricamento cronologia chat...",
+    "noChatHistoryAvailable": "Nessuna cronologia chat disponibile",
+    "noResultsFound": "Nessun risultato trovato per "{{searchText}}"",
     "goToIntegrationsToCustomizeAvatar": "Per personalizzare l'avatar, vai a Condividimi e configura la pagina pubblica"
   },
   "write_and_speak": {
@@ -167,7 +172,12 @@
     "requirePositionHelp": "Per parlare con {{name}} devi decidere se fornire o meno la tua posizione. Questo perchè diverse risposte che potrà fornirti potrebbero dipendere da dove ti trovi.",
     "dontWantToProvidePosition": "Non voglio fornire la mia posizione",
     "attachmentsLabel": "Arricchisci il tuo messaggio",
-    "iWantToTalkToIn": "Voglio parlare con {{name}} in"
+    "iWantToTalkToIn": "Voglio parlare con {{name}} in",
+    "message": "messaggio",
+    "messages": "messaggi",
+    "latestFirst": "Più recenti",
+    "oldestFirst": "Più vecchi",
+    "page": "Pagina {{current}} di {{total}}"
   },
   "media": {
     "title": "Titolo",

package/src/styles.css

@@ -29,6 +29,7 @@
 @import url('./components/ChatTextArea/ChatTextArea.css');
 @import url('./components/CustomGLBModelViewer/ModelViewer.css');
 @import url('./components/SettingsDrawer/SettingsDrawer.css');
+@import url('./components/ChatHistoryDrawer/ChatHistory.css');
 @import url('./components/ExpertsDrawer/ExpertsDrawer.css');
 @import url('./components/ExportHistoryButton/ExportHistoryButton.css');
 @import url('./components/FeedbackButtons/FeedbackButtons.css');