@memori.ai/memori-react 3.0.1 → 4.0.0

package/src/components/ChatBubble/ChatBubble.css

@@ -68,6 +68,23 @@
     margin-bottom: 0;
 }
 
+.memori-chat--bubble ul,
+.memori-chat--bubble ol {
+    padding-left: 1rem;
+    margin: 1em 0;
+}
+
+.memori-chat--bubble a {
+    color: var(--memori-primary, #000);
+    text-decoration: underline;
+}
+
+.memori-chat--bubble a:hover,
+.memori-chat--bubble a:focus {
+    opacity: 0.8;
+    text-decoration: underline !important;
+}
+
 @media (max-width: 600px) {
     .memori-chat--bubble p {
         font-size: 14px;

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

@@ -209,3 +209,18 @@ FromExpertOfABoard.args = {
       'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
   },
 };
+
+export const WithMarkdown = Template.bind({});
+WithMarkdown.args = {
+  memori,
+  apiUrl: 'https://backend.memori.ai',
+  tenant,
+  message: {
+    fromUser: false,
+    text: '## Test\n\nEcco tutte le possibili personalizzazioni che puoi applicare:\n\n- **Colletto**:\n - Girocollo\n - Scollo a V\n\n- **Manica**:\n - Manica Lunga\n - Manica Corta\n\n- **Taglia**:\n - XS\n - S\n - M\n - L\n - XL\n - XXL\n - 3XL\n\n- **Posizione Stampa**:\n - Fronte Petto\n - Retro Schiena\n - Fronte DX\n - Fronte SX\n\n- **Generazione Immagine**:\n - Prompt generazione immagine\n\nSeleziona le personalizzazioni che desideri applicare.\n\n[Vedi altro](https://memori.ai)',
+    initial: false,
+    generatedByAI: true,
+    translatedText:
+      '## Test\n\nEcco tutte le possibili personalizzazioni che puoi applicare:\n\n- **Colletto**:\n - Girocollo\n - Scollo a V\n\n- **Manica**:\n - Manica Lunga\n - Manica Corta\n\n- **Taglia**:\n - XS\n - S\n - M\n - L\n - XL\n - XXL\n - 3XL\n\n- **Posizione Stampa**:\n - Fronte Petto\n - Retro Schiena\n - Fronte DX\n - Fronte SX\n\n- **Generazione Immagine**:\n - Prompt generazione immagine\n\nSeleziona le personalizzazioni che desideri applicare.\n\n[Vedi altro](https://memori.ai)',
+  },
+};

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

@@ -158,3 +158,20 @@ it('renders ChatBubble from user with avatar as react element unchanged', () =>
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders ChatBubble with markdown unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      message={{
+        fromUser: false,
+        text: '## Test\n\nEcco tutte le possibili personalizzazioni che puoi applicare:\n\n- **Colletto**:\n - Girocollo\n - Scollo a V\n\n- **Manica**:\n - Manica Lunga\n - Manica Corta\n\n- **Taglia**:\n - XS\n - S\n - M\n - L\n - XL\n - XXL\n - 3XL\n\n- **Posizione Stampa**:\n - Fronte Petto\n - Retro Schiena\n - Fronte DX\n - Fronte SX\n\n- **Generazione Immagine**:\n - Prompt generazione immagine\n\nSeleziona le personalizzazioni che desideri applicare.\n\n[Vedi altro](https://memori.ai)',
+        initial: false,
+        translatedText:
+          '## Test\n\nEcco tutte le possibili personalizzazioni che puoi applicare:\n\n- **Colletto**:\n - Girocollo\n - Scollo a V\n\n- **Manica**:\n - Manica Lunga\n - Manica Corta\n\n- **Taglia**:\n - XS\n - S\n - M\n - L\n - XL\n - XXL\n - 3XL\n\n- **Posizione Stampa**:\n - Fronte Petto\n - Retro Schiena\n - Fronte DX\n - Fronte SX\n\n- **Generazione Immagine**:\n - Prompt generazione immagine\n\nSeleziona le personalizzazioni che desideri applicare.\n\n[Vedi altro](https://memori.ai)',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ChatBubble/ChatBubble.tsx

@@ -15,6 +15,9 @@ import AI from '../icons/AI';
 import Tooltip from '../ui/Tooltip';
 import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
+import { marked } from 'marked';
+import { sanitize } from 'dompurify';
+import { cleanUrl } from '../../helpers/utils';
 
 export interface Props {
   message: Message;
@@ -31,6 +34,27 @@ export interface Props {
   experts?: ExpertReference[];
 }
 
+marked.use({
+  async: false,
+  gfm: true,
+  pedantic: true,
+  renderer: {
+    link(href: string, title: string | null | undefined, text: string) {
+      const cleanHref = cleanUrl(href);
+      if (cleanHref === null) {
+        return text;
+      }
+      href = cleanHref;
+      let out = '<a href="' + href + '"';
+      if (title) {
+        out += ' title="' + title + '"';
+      }
+      out += ' target="_blank" rel="noopener noreferrer">' + text + '</a>';
+      return out;
+    },
+  },
+});
+
 const ChatBubble: React.FC<Props> = ({
   message,
   memori,
@@ -47,6 +71,10 @@ const ChatBubble: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
+  const renderedText = sanitize(marked.parse(message.text) as string, {
+    ADD_ATTR: ['target'],
+  });
+
   return (
     <>
       {(message.initial || isFirst) && (
@@ -154,11 +182,12 @@ const ChatBubble: React.FC<Props> = ({
             message.fromUser ? '30' : '-30'
           }`}
         >
-          {(message.translatedText || message.text)
+          {/*(message.translatedText || message.text)
             .split(/\r\n|\r|\n/)
             .map((row, index) => (
               <p key={index}>{row}</p>
-            ))}
+            ))*/}
+          <div dangerouslySetInnerHTML={{ __html: renderedText }} />
           {((message.generatedByAI && showAIicon) ||
             (showFeedback && simulateUserPrompt)) && (
             <div className="memori-chat--bubble-addon">

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

@@ -8,9 +8,13 @@ exports[`renders ChatBubble from user with avatar as react element unchanged 1`]
     <div
       class="memori-chat--bubble memori-chat--user-bubble 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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
     </div>
     <div
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
@@ -31,9 +35,13 @@ exports[`renders ChatBubble from user with avatar unchanged 1`] = `
     <div
       class="memori-chat--bubble memori-chat--user-bubble 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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
     </div>
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
@@ -56,9 +64,13 @@ exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
     <div
       class="memori-chat--bubble memori-chat--user-bubble 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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
     </div>
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
@@ -91,9 +103,13 @@ exports[`renders ChatBubble unchanged 1`] = `
     <div
       class="memori-chat--bubble 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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
     </div>
   </div>
 </div>
@@ -120,9 +136,240 @@ exports[`renders ChatBubble with initial msg unchanged 1`] = `
     <div
       class="memori-chat--bubble 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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ChatBubble with markdown unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container"
+  >
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+      title="Memori"
+    >
+      <img
+        alt="Memori"
+        class="memori-chat--bubble-avatar-img"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
+      />
+    </picture>
+    <div
+      class="memori-chat--bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+    >
+      <div>
+        <h2>
+          Test
+        </h2>
+        
+
+        <p>
+          Ecco tutte le possibili personalizzazioni che puoi applicare:
+        </p>
+        
+
+        <ul>
+          
+
+          <li>
+            <p>
+              <strong>
+                Colletto
+              </strong>
+              :
+            </p>
+            
+
+            <ul>
+              
+
+              <li>
+                Girocollo
+              </li>
+              
+
+              <li>
+                Scollo a V
+              </li>
+              
+
+            </ul>
+            
+
+          </li>
+          
+
+          <li>
+            <p>
+              <strong>
+                Manica
+              </strong>
+              :
+            </p>
+            
+
+            <ul>
+              
+
+              <li>
+                Manica Lunga
+              </li>
+              
+
+              <li>
+                Manica Corta
+              </li>
+              
+
+            </ul>
+            
+
+          </li>
+          
+
+          <li>
+            <p>
+              <strong>
+                Taglia
+              </strong>
+              :
+            </p>
+            
+
+            <ul>
+              
+
+              <li>
+                XS
+              </li>
+              
+
+              <li>
+                S
+              </li>
+              
+
+              <li>
+                M
+              </li>
+              
+
+              <li>
+                L
+              </li>
+              
+
+              <li>
+                XL
+              </li>
+              
+
+              <li>
+                XXL
+              </li>
+              
+
+              <li>
+                3XL
+              </li>
+              
+
+            </ul>
+            
+
+          </li>
+          
+
+          <li>
+            <p>
+              <strong>
+                Posizione Stampa
+              </strong>
+              :
+            </p>
+            
+
+            <ul>
+              
+
+              <li>
+                Fronte Petto
+              </li>
+              
+
+              <li>
+                Retro Schiena
+              </li>
+              
+
+              <li>
+                Fronte DX
+              </li>
+              
+
+              <li>
+                Fronte SX
+              </li>
+              
+
+            </ul>
+            
+
+          </li>
+          
+
+          <li>
+            <p>
+              <strong>
+                Generazione Immagine
+              </strong>
+              :
+            </p>
+            
+
+            <ul>
+              
+
+              <li>
+                Prompt generazione immagine
+              </li>
+              
+
+            </ul>
+            
+
+          </li>
+          
+
+        </ul>
+        
+
+        <p>
+          Seleziona le personalizzazioni che desideri applicare.
+        </p>
+        
+
+        <p>
+          <a
+            href="https://memori.ai"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Vedi altro
+          </a>
+        </p>
+        
+
+      </div>
     </div>
   </div>
 </div>
@@ -136,9 +383,13 @@ exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
     <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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
       <div
         class="memori-chat--bubble-addon"
       >
@@ -216,9 +467,13 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
     <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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
       <div
         class="memori-chat--bubble-addon"
       >
@@ -296,9 +551,13 @@ exports[`renders ChatBubble with user msg unchanged 1`] = `
     <div
       class="memori-chat--bubble memori-chat--user-bubble 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>
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </p>
+        
+
+      </div>
     </div>
     <div
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"

package/src/components/ChatInputs/ChatInputs.tsx

@@ -35,11 +35,8 @@ export interface Props {
 
 const ChatInputs: React.FC<Props> = ({
   dialogState,
-  instruct = false,
   sendOnEnter = 'click',
   setSendOnEnter,
-  attachmentsMenuOpen,
-  setAttachmentsMenuOpen,
   userMessage = '',
   onChangeUserMessage,
   sendMessage,
@@ -52,7 +49,6 @@ const ChatInputs: React.FC<Props> = ({
   stopAudio,
   startListening,
   stopListening,
-  authToken,
 }) => {
   const { t } = useTranslation();
 
@@ -62,14 +58,14 @@ const ChatInputs: React.FC<Props> = ({
       className="memori-chat-inputs"
       disabled={dialogState?.state === 'X2a' || dialogState?.state === 'X3'}
     >
-      {(instruct || dialogState?.acceptsMedia) && (
+      {/*(instruct || dialogState?.acceptsMedia) && (
         <UploadMenu
           attachmentsMenuOpen={attachmentsMenuOpen}
           setAttachmentsMenuOpen={setAttachmentsMenuOpen}
           authToken={authToken}
           disabled={!dialogState?.acceptsMedia}
         />
-      )}
+      )*/}
       <SendOnEnterMenu
         sendOnEnter={sendOnEnter}
         setSendOnEnter={setSendOnEnter}

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

@@ -16,7 +16,7 @@ exports[`renders ChatInputs disabled unchanged 1`] = `
         aria-haspopup="true"
         class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
         data-headlessui-state=""
-        id="headlessui-menu-button-:rc:"
+        id="headlessui-menu-button-:ra:"
         type="button"
       >
         <div
@@ -143,7 +143,7 @@ exports[`renders ChatInputs listening unchanged 1`] = `
         aria-haspopup="true"
         class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
         data-headlessui-state=""
-        id="headlessui-menu-button-:r8:"
+        id="headlessui-menu-button-:r6:"
         type="button"
       >
         <div
@@ -260,35 +260,6 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
     class="memori-chat-inputs"
     id="chat-fieldset"
   >
-    <div
-      class="memori-upload-menu"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:r4:"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 0 0 174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
-            />
-          </svg>
-        </div>
-      </button>
-    </div>
     <div
       class="memori-send-on-enter-menu"
       data-headlessui-state=""
@@ -298,7 +269,7 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
         aria-haspopup="true"
         class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
         data-headlessui-state=""
-        id="headlessui-menu-button-:r6:"
+        id="headlessui-menu-button-:r4:"
         type="button"
       >
         <div
@@ -675,7 +646,7 @@ exports[`renders ChatInputs without microphone button unchanged 1`] = `
         aria-haspopup="true"
         class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
         data-headlessui-state=""
-        id="headlessui-menu-button-:ra:"
+        id="headlessui-menu-button-:r8:"
         type="button"
       >
         <div

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

@@ -26,7 +26,7 @@ const Template: Story<Props> = args => (
 export const Default = Template.bind({});
 Default.args = {
   defaultDate: new Date(Date.now()),
-  onChange: () => {},
+  onChange: console.log,
   disabled: false,
 };
 

package/src/components/DateSelector/DateSelector.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import DateSelector from './DateSelector';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 
 const dateMock = new Date(Date.UTC(2022, 8, 24, 0, 0, 0, 0));
 
@@ -18,10 +18,7 @@ it('renders DateSelector unchanged', () => {
 
 it('renders DateSelector with default value unchanged', () => {
   const { container } = render(
-    <DateSelector
-      defaultDate={moment(`2022-08-24 00:00:00Z`)}
-      onChange={jest.fn()}
-    />
+    <DateSelector defaultDate="2023-12-14T08:48:06.977Z" onChange={jest.fn()} />
   );
   expect(container).toMatchSnapshot();
 });
@@ -30,7 +27,7 @@ it('renders DateSelector disabled unchanged', () => {
   const { container } = render(
     <DateSelector
       disabled
-      defaultDate={moment(`2022-08-24 00:00:00Z`)}
+      defaultDate={new Date(Date.now())}
       onChange={jest.fn()}
     />
   );