@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/WhyThisAnswer/WhyThisAnswer.css

@@ -1,17 +1,17 @@
 p.memori--whythisanswer-no-results {
     padding: 0.5rem 1rem;
-    border: 1px solid var(--memori-warning-color);
-    border-radius: var(--memori-border-radius);
+    border: var(--memori-border) solid var(--memori-warning);
+    border-radius: var(--memori-radius-box);
     margin: 0.5rem 0;
     background: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    color: var(--memori-warning-color);
+    color: var(--memori-warning);
     text-align: center;
 }
 
 .memori--whythisanswer-question-answered {
     padding: 1rem;
-    border-radius: var(--memori-border-radius);
+    border-radius: var(--memori-radius-box);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
 }
 
@@ -35,8 +35,8 @@ ul.memori--whythisanswer-list li:last-child {
     display: inline-block;
     padding: 0.25rem 0.5rem;
     border: 1px solid var(--memori-primary);
-    border-radius: var(--memori-border-radius);
-    margin-right: 1em;
+    border-radius: var(--memori-radius-box);
+    margin-right: var(--memori-spacing-sm);
     background: #fff;
     color: var(--memori-primary);
     font-size: 0.75rem;
@@ -45,7 +45,7 @@ ul.memori--whythisanswer-list li:last-child {
 .memori--whythisanswer-title {
     display: flex;
     align-items: center;
-    margin-bottom: 1rem;
+    margin-bottom: var(--memori-spacing-lg);
 }
 
 @media (max-width: 768px) {
@@ -78,7 +78,7 @@ ul.memori--whythisanswer-list li:last-child {
 
 .memori-whythisanswer-drawer .memori-card--title {
     margin-bottom: 0;
-    font-size: 1rem;
+    font-size: var(--memori-text-size-base);
 }
 
 .memori--whythisanswer-snippet-expandable {
@@ -95,9 +95,9 @@ ul.memori--whythisanswer-list li:last-child {
 }
 
 .memori--whythisanswer-skeleton-text {
-    padding: 0.5rem;
-    border-radius: var(--memori-border-radius);
-    margin-bottom: 0.5rem;
+    padding: var(--memori-spacing-sm);
+    border-radius: var(--memori-radius-box);
+    margin-bottom: var(--memori-spacing-sm);
     background: #ccc;
 }
 
@@ -111,7 +111,7 @@ p.memori--whythisanswer-skeleton-text {
     display: block;
     width: 100%;
     min-width: 6rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--memori-spacing-sm);
 }
 
 div.memori--whythisanswer-skeleton-text {
@@ -122,8 +122,8 @@ div.memori--whythisanswer-skeleton-text {
 .memori--whythisanswer-skeleton-block {
     height: 3rem;
     padding: 0.5rem;
-    border-radius: var(--memori-border-radius);
-    margin-bottom: 0.5rem;
+    border-radius: var(--memori-radius-box);
+    margin-bottom: var(--memori-spacing-sm);
     background: #ccc;
 }
 
@@ -134,7 +134,7 @@ div.memori--whythisanswer-skeleton-text {
 .memori--whythisanswer-title-text-top {
     display: flex;
     align-items: space-between;
-    gap: 0.5rem;
+    gap: var(--memori-spacing-sm);
 }
 
 .memori--whythisanswer-title-text-top p {
@@ -145,18 +145,18 @@ div.memori--whythisanswer-skeleton-text {
 .memori--whythisanswer-contextvars {
     display: flex;
     flex-wrap: wrap;
-    margin-top: 0.5rem;
+    margin-top: var(--memori-spacing-sm);
 }
 
 .memori--whythisanswer-contextvars-card {
     max-width: max-content;
-    padding: 0.5rem;
+    padding: var(--memori-spacing-sm);
     box-shadow: 0 0 0.25rem var(--memori-primary);
     font-size: 0.75rem;
 }
 
 .memori--whythisanswer-contextvars-card + .memori--whythisanswer-contextvars-card {
-    margin-left: 0.5rem;
+    margin-left: var(--memori-spacing-sm);
 }
 
 .memori--whythisanswer-contextvars-card > div > div {
@@ -166,6 +166,6 @@ div.memori--whythisanswer-skeleton-text {
 .memori--whythisanswer-title-text-top-container {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 8px;
-    gap: 0.5rem;
+    margin-bottom: var(--memori-spacing-sm);
+    gap: var(--memori-spacing-sm);
 }

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

@@ -7,6 +7,7 @@ import { SearchMatches } from '@memori.ai/memori-api-client/dist/types';
 import memoriApiClient from '@memori.ai/memori-api-client';
 
 import './WhyThisAnswer.css';
+import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
   title: 'Why This Answer',
@@ -27,24 +28,26 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
-    <WhyThisAnswer
-      {...args}
-      client={memoriApiClient()}
-      sessionID={sessionID}
-      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={() => {}}
-    />
+    <AlertProvider defaultDuration={5000}>
+      <WhyThisAnswer
+        {...args}
+        client={memoriApiClient()}
+        sessionID={sessionID}
+        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={() => {}}
+      />
+    </AlertProvider>
   </I18nWrapper>
 );
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from '../../testUtils';
 import WhyThisAnswer from './WhyThisAnswer';
 import { sessionID } from '../../mocks/data';
 import memoriApiClient from '@memori.ai/memori-api-client';

package/src/components/WhyThisAnswer/WhyThisAnswer.tsx

@@ -4,15 +4,18 @@ import {
 } from '@memori.ai/memori-api-client/dist/types';
 import { useCallback, useEffect, useState } from 'react';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import Drawer from '../ui/Drawer';
-import Spin from '../ui/Spin';
-import Expandable from '../ui/Expandable';
-import toast from 'react-hot-toast';
+import {
+  Drawer,
+  Spin,
+  Expandable,
+  useAlertManager,
+  createAlertOptions,
+} from '@memori.ai/ui';
 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';
+import { Card } from '@memori.ai/ui';
 import { stripAllInternalTags } from '../../helpers/message';
 
 export interface Props {
@@ -38,7 +41,7 @@ const WhyThisAnswer = ({
   _TEST_loading = false,
 }: Props) => {
   const { t } = useTranslation();
-
+  const { add } = useAlertManager();
   const searchMemory = client?.search.searchMemory;
   const sanitizedQuestionAnswered = stripAllInternalTags(
     message.questionAnswered || ''
@@ -72,7 +75,12 @@ const WhyThisAnswer = ({
 
       if (response.resultCode !== 0) {
         console.error(response);
-        toast.error(t(getErrori18nKey(response.resultCode)));
+        add(
+          createAlertOptions({
+            description: t(getErrori18nKey(response.resultCode)),
+            severity: 'error',
+          })
+        );
       } else {
         setMatches(matches ?? []);
       }
@@ -90,10 +98,11 @@ const WhyThisAnswer = ({
   return (
     <Drawer
       open={visible}
-      width="80%"
-      animated={false}
+      anchor="right"
       className="memori-whythisanswer-drawer"
-      onClose={() => closeDrawer()}
+      onClose={() => {
+        closeDrawer();
+      }}
       title={t('whyThisAnswer')}
     >
       <p>{t('whyThisAnswerHelper')}</p>
@@ -107,7 +116,7 @@ const WhyThisAnswer = ({
 
       <Spin primary spinning={loading}>
         {!loading && matches.length === 0 && (
-          <p role="info" className="memori--whythisanswer-no-results">
+          <p role="status" className="memori--whythisanswer-no-results">
             {t('nothingFound')}
           </p>
         )}

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

@@ -1,11 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders WhyThisAnswer hidden unchanged 1`] = `<div />`;
+exports[`renders WhyThisAnswer hidden unchanged 1`] = `
+<div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-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;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
   />
 </div>
 `;
@@ -13,7 +31,13 @@ exports[`renders WhyThisAnswer loading unchanged 1`] = `
 exports[`renders WhyThisAnswer visible 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;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
   />
 </div>
 `;
@@ -21,7 +45,13 @@ exports[`renders WhyThisAnswer visible unchanged 1`] = `
 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;"
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
   />
 </div>
 `;

package/src/components/layouts/Chat.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render } from '../../testUtils';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';