@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/WhyThisAnswer/WhyThisAnswer.stories.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { sessionID, memoryQuestion } from '../../mocks/data';
+import { sessionID } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import WhyThisAnswer, { Props } from './WhyThisAnswer';
+import { SearchMatches } from '@memori.ai/memori-api-client/dist/types';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 import './WhyThisAnswer.css';
-import { SearchMatches } from '@memori.ai/memori-api-client/dist/types';
 
 const meta: Meta = {
   title: 'Why This Answer',
@@ -28,7 +29,7 @@ const Template: Story<Props> = args => (
   <I18nWrapper>
     <WhyThisAnswer
       {...args}
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       message={{
         questionAnswered: 'Test message',
@@ -69,6 +70,7 @@ WithData.args = {
       confidenceLevel: 'HIGH',
       memory: {
         memoryID: '1',
+        memoryType: 'Question',
         title: 'This is the title of the content',
         titleVariants: [
           "This is a variant of the content's title",
@@ -89,6 +91,7 @@ WithData.args = {
       confidenceLevel: 'LOW',
       memory: {
         memoryID: '2',
+        memoryType: 'Question',
         title: 'Content with a long answer',
         titleVariants: undefined,
         answers: [
@@ -105,6 +108,7 @@ WithData.args = {
         memoryID: '3',
         title: 'Content with sources',
         titleVariants: undefined,
+        memoryType: 'Question',
         answers: [
           {
             text: 'This is a test answer',
@@ -130,9 +134,9 @@ WithData.args = {
       confidence: 0.7,
       confidenceLevel: 'MEDIUM',
       memory: {
-        ...memoryQuestion,
         memoryID: '4',
         title: 'Content with links',
+        memoryType: 'Question',
         titleVariants: undefined,
         answers: [
           {
@@ -155,5 +159,43 @@ WithData.args = {
         ],
       },
     } as SearchMatches,
+    {
+      confidence: 0.7,
+      confidenceLevel: 'MEDIUM',
+      memory: {
+        memoryID: '5',
+        memoryType: 'Question',
+        title: 'Content with receiver',
+        titleVariants: undefined,
+        receiverName: 'receiver',
+        receiverTag: '🧑‍💻',
+        answers: [
+          {
+            text: 'This is a an answer',
+          },
+        ],
+        media: [],
+      },
+    } as SearchMatches,
+    {
+      confidence: 0.5,
+      confidenceLevel: 'MEDIUM',
+      memory: {
+        memoryID: '5',
+        memoryType: 'Question',
+        title: 'Content with context',
+        titleVariants: undefined,
+        contextVars: {
+          KEY1: 'VALUE1',
+          KEY2: 'VALUE2',
+        },
+        answers: [
+          {
+            text: 'This is a an answer',
+          },
+        ],
+        media: [],
+      },
+    } as SearchMatches,
   ],
 };

package/src/components/WhyThisAnswer/WhyThisAnswer.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import WhyThisAnswer from './WhyThisAnswer';
-import { sessionID, memoryQuestion } from '../../mocks/data';
+import { sessionID } from '../../mocks/data';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 beforeEach(() => {
   // @ts-ignore
@@ -16,7 +17,7 @@ beforeEach(() => {
 it('renders WhyThisAnswer hidden unchanged', () => {
   const { container } = render(
     <WhyThisAnswer
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       visible={false}
       message={{
@@ -40,7 +41,7 @@ it('renders WhyThisAnswer hidden unchanged', () => {
 it('renders WhyThisAnswer visible unchanged', () => {
   const { container } = render(
     <WhyThisAnswer
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       visible={true}
       message={{
@@ -61,12 +62,37 @@ it('renders WhyThisAnswer visible unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders WhyThisAnswer loading unchanged', () => {
+  const { container } = render(
+    <WhyThisAnswer
+      client={memoriApiClient()}
+      sessionID={sessionID}
+      visible={true}
+      message={{
+        questionAnswered: 'Test message',
+        text: 'This is a test content',
+        date: '2021-01-01',
+        placeName: 'Test Place',
+        placeLatitude: 0,
+        placeLongitude: 0,
+        placeUncertaintyKm: 0,
+        contextVars: {
+          KEY: 'value',
+        },
+      }}
+      closeDrawer={jest.fn()}
+      _TEST_loading={true}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders WhyThisAnswer with data unchanged', () => {
   const { container } = render(
     <WhyThisAnswer
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
-      visible={false}
+      visible={true}
       message={{
         questionAnswered: 'Test message',
         text: 'This is a test content',
@@ -84,7 +110,8 @@ it('renders WhyThisAnswer with data unchanged', () => {
           confidence: 0.8,
           confidenceLevel: 'HIGH',
           memory: {
-            ...memoryQuestion,
+            memoryID: '1',
+            memoryType: 'Question',
             title: 'This is the title of the content',
             titleVariants: [
               "This is a variant of the content's title",
@@ -94,26 +121,120 @@ it('renders WhyThisAnswer with data unchanged', () => {
               {
                 text: 'This is a test answer',
               },
+              {
+                text: 'This is another answer',
+              },
+            ],
+          },
+        },
+        {
+          confidence: 0.5,
+          confidenceLevel: 'LOW',
+          memory: {
+            memoryID: '2',
+            memoryType: 'Question',
+            title: 'Content with a long answer',
+            titleVariants: undefined,
+            answers: [
+              {
+                text: 'Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.',
+              },
+            ],
+          },
+        },
+        {
+          confidence: 0.5,
+          confidenceLevel: 'LOW',
+          memory: {
+            memoryID: '3',
+            title: 'Content with sources',
+            titleVariants: undefined,
+            memoryType: 'Question',
+            answers: [
+              {
+                text: 'This is a test answer',
+              },
+            ],
+            media: [
+              {
+                mediumID: '1',
+                mimeType: 'text/plain',
+                content:
+                  'This is a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.',
+              },
+              {
+                mediumID: '2',
+                mimeType: 'text/plain',
+                content:
+                  'This is a source.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\nCras lobortis volutpat nunc.\nProin tincidunt enim in felis aliquet, a ultricies purus bibendum.\n\nQuisque in ultrices lectus.\nNulla at urna diam.\n\nProin sodales lobortis libero eu facilisis.',
+              },
             ],
-            memoryID: '1',
           },
         },
         {
           confidence: 0.7,
           confidenceLevel: 'MEDIUM',
           memory: {
-            ...memoryQuestion,
-            memoryID: '2',
-            title: 'This is a test title',
+            memoryID: '4',
+            title: 'Content with links',
+            memoryType: 'Question',
             titleVariants: undefined,
             answers: [
               {
                 text: 'This is a an answer',
               },
+            ],
+            media: [
               {
-                text: 'This is another answer',
+                mediumID: '1',
+                mimeType: 'text/html',
+                url: 'https://memori.ai',
+                title: 'Memori.AI',
+              },
+              {
+                mediumID: '2',
+                mimeType: 'text/html',
+                url: 'https://nzambello.dev',
+                title: 'Nicola Zambello',
+              },
+            ],
+          },
+        },
+        {
+          confidence: 0.7,
+          confidenceLevel: 'MEDIUM',
+          memory: {
+            memoryID: '5',
+            memoryType: 'Question',
+            title: 'Content with receiver',
+            titleVariants: undefined,
+            receiverName: 'receiver',
+            receiverTag: '🧑‍💻',
+            answers: [
+              {
+                text: 'This is a an answer',
+              },
+            ],
+            media: [],
+          },
+        },
+        {
+          confidence: 0.5,
+          confidenceLevel: 'MEDIUM',
+          memory: {
+            memoryID: '5',
+            memoryType: 'Question',
+            title: 'Content with context',
+            titleVariants: undefined,
+            contextVars: {
+              KEY: 'VALUE',
+            },
+            answers: [
+              {
+                text: 'This is a an answer',
               },
             ],
+            media: [],
           },
         },
       ]}

package/src/components/WhyThisAnswer/WhyThisAnswer.tsx

@@ -12,14 +12,15 @@ import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
 import Snippet from '../Snippet/Snippet';
 import MediaWidget from '../MediaWidget/MediaWidget';
+import Card from '../ui/Card';
 
 export interface Props {
-  apiURL: string;
   sessionID: string;
   message: Message;
   initialMatches?: SearchMatches[];
   visible?: boolean;
   closeDrawer: () => void;
+  client?: ReturnType<typeof memoriApiClient>;
   _TEST_loading?: boolean;
 }
 
@@ -28,17 +29,16 @@ const addQuestionMark = (question: string) =>
 
 const WhyThisAnswer = ({
   message,
-  apiURL,
   sessionID,
   visible = true,
   initialMatches = [],
   closeDrawer,
+  client,
   _TEST_loading = false,
 }: Props) => {
   const { t } = useTranslation();
 
-  const client = memoriApiClient(apiURL);
-  const searchMemory = client.search.searchMemory;
+  const searchMemory = client?.search.searchMemory;
 
   const [matches, setMatches] = useState<SearchMatches[]>(initialMatches);
   const [loading, setLoading] = useState(_TEST_loading);
@@ -49,7 +49,7 @@ const WhyThisAnswer = ({
   const fetchMemories = useCallback(async () => {
     setLoading(true);
 
-    if (_TEST_loading) return;
+    if (_TEST_loading || !searchMemory) return;
 
     try {
       const { matches, ...response } = await searchMemory(sessionID, {
@@ -152,19 +152,45 @@ const WhyThisAnswer = ({
                     {m.confidenceLevel}
                   </span>
                   <div className="memori--whythisanswer-title-text">
-                    <p>
-                      <strong>{addQuestionMark(m.memory.title ?? '')}</strong>
-                    </p>
+                    <div className="memori--whythisanswer-title-text-top-container">
+                      <p>
+                        <strong>{addQuestionMark(m.memory.title ?? '')}</strong>
+                      </p>
+                    </div>
                     <p>
                       {m.memory.titleVariants
                         ?.map(t => addQuestionMark(t))
                         ?.join(' | ')}
                     </p>
+                    {(m.memory.receiverName || m.memory.receiverTag) && (
+                      <p className="memori--whythisanswer-title-text-top">
+                        {t('receiverLabel')}: {m.memory.receiverTag}{' '}
+                        {m.memory.receiverName}
+                      </p>
+                    )}
                   </div>
                 </div>
+                {m.memory.contextVars && (
+                  <div className="memori--whythisanswer-contextvars">
+                    {Object.entries(m.memory.contextVars || {}).map(
+                      ([key, value]) => (
+                        <Card
+                          key={key}
+                          className="memori--whythisanswer-contextvars-card"
+                        >
+                          <span>
+                            {key}: {value?.toString() || '✔️'}
+                          </span>
+                        </Card>
+                      )
+                    )}
+                  </div>
+                )}
                 {m.memory.answers?.map((a, i) => (
                   <p key={i} className="memori--whythisanswer-answer">
-                    <Expandable rows={3}>{a.text}</Expandable>
+                    <Expandable mode="rows" rows={3}>
+                      {a.text}
+                    </Expandable>
                   </p>
                 ))}
 
@@ -178,6 +204,7 @@ const WhyThisAnswer = ({
                   ?.filter(m => m.mimeType === 'text/plain')
                   ?.map(m => (
                     <Expandable
+                      mode="rows"
                       rows={2}
                       key={m.mediumID}
                       lineHeightMultiplier={2}
@@ -187,7 +214,6 @@ const WhyThisAnswer = ({
                         key={m.mediumID}
                         medium={m}
                         showCopyButton={false}
-                        showLineNumbers={false}
                       />
                     </Expandable>
                   ))}

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

@@ -2,6 +2,14 @@
 
 exports[`renders WhyThisAnswer hidden unchanged 1`] = `<div />`;
 
+exports[`renders WhyThisAnswer loading unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
 exports[`renders WhyThisAnswer visible unchanged 1`] = `
 <div>
   <div
@@ -10,4 +18,10 @@ exports[`renders WhyThisAnswer visible unchanged 1`] = `
 </div>
 `;
 
-exports[`renders WhyThisAnswer with data unchanged 1`] = `<div />`;
+exports[`renders WhyThisAnswer with data unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;

package/src/components/icons/Alert.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Alert = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Alert;

package/src/components/icons/ArrowUp.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const ArrowUp = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M12 19V5M5 12l7-7 7 7"></path>
+  </svg>
+);
+
+export default ArrowUp;

package/src/components/icons/Bug.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+const Bug = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      d="M19 15V11.9375C19 9.76288 17.2371 8 15.0625 8H8.9375C6.76288 8 5 9.76288 5 11.9375V15C5 18.866 8.13401 22 12 22C15.866 22 19 18.866 19 15Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M16.5 8.5V7.5C16.5 5.01472 14.4853 3 12 3C9.51472 3 7.5 5.01472 7.5 7.5V8.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M19 14H22"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M5 14H2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M14.5 3.5L17 2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M9.5 3.5L7 2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M20.5 20.0002L18.5 19.2002"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M20.5 7.9998L18.5 8.7998"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M3.5 20.0002L5.5 19.2002"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M3.5 7.9998L5.5 8.7998"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12 21.5V15"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export default Bug;

package/src/components/icons/Chat.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const ChatRound = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    width="24"
+    height="24"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>
+);
+
+export default ChatRound;

package/src/components/icons/ChevronDown.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+const ChevronDown= ({
+    className,
+    title,
+  }: {
+    className?: string;
+    title?: string;
+  }) => (
+  <svg
+    fill="#000000"
+    xmlns="http://www.w3.org/2000/svg"
+    width="800px"
+    height="800px"
+    viewBox="0 0 52 52"
+    enableBackground="new 0 0 52 52"
+    xmlSpace="preserve"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M47.6,17.8L27.1,38.5c-0.6,0.6-1.6,0.6-2.2,0L4.4,17.8c-0.6-0.6-0.6-1.6,0-2.2l2.2-2.2 c0.6-0.6,1.6-0.6,2.2,0l16.1,16.3c0.6,0.6,1.6,0.6,2.2,0l16.1-16.2c0.6-0.6,1.6-0.6,2.2,0l2.2,2.2C48.1,16.3,48.1,17.2,47.6,17.8z" />
+  </svg>
+);
+export default ChevronDown;

package/src/components/icons/ChevronUp.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+const ChevronUp = ({
+    className,
+    title,
+  }: {
+    className?: string;
+    title?: string;
+  }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    width={800}
+    height={800}
+    viewBox="0 0 52 52"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    className={className}
+    aria-label={title}
+  >
+    <path d="m4.4 34.2 20.5-20.7c.6-.6 1.6-.6 2.2 0l20.5 20.7c.6.6.6 1.6 0 2.2l-2.2 2.2c-.6.6-1.6.6-2.2 0L27.1 22.2c-.6-.6-1.6-.6-2.2 0L8.8 38.5c-.6.6-1.6.6-2.2 0l-2.2-2.2c-.5-.6-.5-1.5 0-2.1z" />
+  </svg>
+)
+export default ChevronUp

package/src/components/icons/Close.tsx

@@ -3,9 +3,11 @@ import React from 'react';
 const Close = ({
   className,
   title,
+  bold = false,
 }: {
   className?: string;
   title?: string;
+  bold?: boolean;
 }) => (
   <svg
     {...(!title ? { 'aria-hidden': 'true' } : {})}
@@ -16,7 +18,12 @@ const Close = ({
     className={className}
     aria-label={title}
   >
-    <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
+    <path 
+      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+      strokeWidth={bold ? 2 : 0}
+      stroke={bold ? "currentColor" : "none"}
+      fill={bold ? "none" : "currentColor"}
+    />
   </svg>
 );