@memori.ai/memori-react 4.1.0 → 4.2.0

package/src/components/KnownFacts/KnownFacts.tsx

@@ -0,0 +1,449 @@
+import { KnownFact, Memori } from '@memori.ai/memori-api-client/dist/types';
+import { useEffect, useState } from 'react';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import Button from '../ui/Button';
+import Drawer from '../ui/Drawer';
+import Spin from '../ui/Spin';
+import Modal from '../ui/Modal';
+import toast from 'react-hot-toast';
+import { getErrori18nKey } from '../../helpers/error';
+import { useTranslation } from 'react-i18next';
+import Delete from '../icons/Delete';
+import Checkbox from '../ui/Checkbox';
+import Select from '../ui/Select';
+import ChevronLeft from '../icons/ChevronLeft';
+import ChevronRight from '../icons/ChevronRight';
+
+export interface Props {
+  apiURL: string;
+  sessionID: string;
+  memori: Memori;
+  initialKnownFacts?: KnownFact[];
+  visible?: boolean;
+  closeDrawer: () => void;
+}
+
+const KnownFacts = ({
+  apiURL,
+  sessionID,
+  memori,
+  visible = true,
+  initialKnownFacts = [],
+  closeDrawer,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const client = memoriApiClient(apiURL);
+  const { getKnownFactsPaginated, deleteKnownFact } = client.knownFacts;
+
+  const [knownFacts, setKnownFacts] = useState<KnownFact[]>(initialKnownFacts);
+  const [numberOfResults, setNumberOfResults] = useState(25);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [knownFactsCount, setKnownFactsCount] = useState(
+    initialKnownFacts?.length ?? 0
+  );
+  const [loading, setLoading] = useState(false);
+
+  /**
+   * Fetch known facts
+   */
+  const fetchKnownFacts = async (
+    sessionId?: string,
+    from?: number,
+    howMany?: number
+  ) => {
+    if (!sessionID && !sessionId) return;
+    setLoading(true);
+    try {
+      const { knownFacts, count, ...response } = await getKnownFactsPaginated(
+        sessionId ?? sessionID,
+        from ?? pageIndex,
+        howMany ?? numberOfResults
+      );
+
+      setKnownFacts(knownFacts ?? []);
+      setKnownFactsCount(count ?? 0);
+
+      if (response.resultCode !== 0) {
+        console.error(response);
+        toast.error(t(getErrori18nKey(response.resultCode)));
+      }
+    } catch (err) {
+      console.error('KNOWN_FACTS/FETCH', err);
+      setKnownFacts(initialKnownFacts ?? []);
+    }
+
+    setLoading(false);
+  };
+  useEffect(() => {
+    fetchKnownFacts();
+  }, []);
+
+  /**
+   * Table selection
+   */
+  const [bulkDeleteModalVisible, setBulkDeleteModalVisible] = useState(false);
+  const [deleteModalVisibleFor, setDeleteModalVisibleFor] = useState<string>();
+  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>(
+    []
+  );
+  // const rowSelection = {
+  //   selectedRowKeys,
+  //   onChange: setSelectedRowKeys,
+  // };
+
+  // const columns = [
+  //   {
+  //     title: t('knownFacts.text'),
+  //     dataIndex: 'text',
+  //   },
+  //   {
+  //     title: t('createdAt'),
+  //     dataIndex: 'creationTimestamp',
+  //     sorter: (a: KnownFact, b: KnownFact) =>
+  //       new Date(a.creationTimestamp ?? Date.now()).getTime() -
+  //       new Date(b.creationTimestamp ?? Date.now()).getTime(),
+  //     render: (creationTimestamp: Date) => (
+  //       <div className={styles.columnCentered}>
+  //         <span className={styles.date}>
+  //           {creationTimestamp
+  //             ? new Intl.DateTimeFormat('it', {
+  //                 dateStyle: 'short',
+  //                 timeStyle: 'short',
+  //               }).format(new Date(creationTimestamp))
+  //             : '-'}
+  //         </span>
+  //       </div>
+  //     ),
+  //   },
+  //   {
+  //     title: t('actions'),
+  //     key: 'action',
+  //     render: (_value: any, kf: KnownFact) => (
+  //       <div className={styles.actionColumn}>
+  //         <Button
+  //           danger
+  //           icon={<DeleteOutlined />}
+  //           disabled={selectedRowKeys?.length > 0}
+  //           title={t('delete') || 'Delete'}
+  //           onClick={() => {
+  //             kf.knownFactID &&
+  //               Modal.confirm({
+  //                 title: t('knownFacts.deleteConfirmTitle'),
+  //                 content: t('knownFacts.deleteConfirmMessage'),
+  //                 okText: t('confirm'),
+  //                 cancelText: t('cancel'),
+  //                 centered: true,
+  //                 autoFocusButton: 'cancel',
+  //                 onOk: async () => {
+  //                   try {
+  //                     const response = await deleteKnownFact(
+  //                       sessionID,
+  //                       kf.knownFactID
+  //                     );
+  //                     if (response.resultCode === 0) {
+  //                       toast.success(t('knownFacts.deleteSuccess'));
+  //                       setSelectedRowKeys([]);
+  //                       fetchKnownFacts();
+  //                     } else {
+  //                       console.error(response);
+  //                       toast.error(
+  //                         t(getErrori18nKey(response.resultCode), {
+  //                           ns: 'common',
+  //                         })
+  //                       );
+  //                     }
+  //                   } catch (_e) {
+  //                     let error = _e as Error;
+  //                     toast.error(t('Error') + error.message);
+  //                   }
+  //                 },
+  //               });
+  //           }}
+  //         />
+  //       </div>
+  //     ),
+  //   },
+  // ];
+
+  return (
+    <Drawer
+      open={visible}
+      width="80%"
+      className="memori-known-facts-drawer"
+      onClose={() => closeDrawer()}
+      title={t('knownFacts.title')}
+    >
+      <p>
+        {t('knownFacts.description', {
+          memoriName: memori.name,
+        })}
+      </p>
+
+      <Spin spinning={loading}>
+        <div className="memori-known-facts-actions">
+          <Button
+            primary
+            danger
+            onClick={() => {
+              setBulkDeleteModalVisible(true);
+            }}
+            className="memori-known-facts-delete-selected"
+            disabled={selectedRowKeys?.length === 0}
+            icon={<Delete />}
+            loading={loading}
+          >
+            {t('selected')} ({selectedRowKeys?.length})
+          </Button>
+          <Modal
+            className="memori-known-facts-modal"
+            open={bulkDeleteModalVisible}
+            closable
+            title={
+              selectedRowKeys.length > 1
+                ? t('knownFacts.deleteSelectedConfirmTitle')
+                : t('knownFacts.deleteConfirmTitle')
+            }
+            description={
+              selectedRowKeys.length > 1
+                ? t('knownFacts.deleteSelectedConfirmMessage', {
+                    number: selectedRowKeys.length,
+                  })
+                : t('knownFacts.deleteConfirmMessage')
+            }
+            onClose={() => {
+              setBulkDeleteModalVisible(false);
+            }}
+            footer={
+              <>
+                <Button
+                  ghost
+                  onClick={() => {
+                    setBulkDeleteModalVisible(false);
+                  }}
+                >
+                  {t('cancel')}
+                </Button>
+                <Button
+                  primary
+                  danger
+                  onClick={async () => {
+                    try {
+                      const mutations = selectedRowKeys.map(key => {
+                        let knownFactID = key as string;
+                        return deleteKnownFact(sessionID, knownFactID);
+                      });
+                      Promise.all(mutations).then(responses => {
+                        if (responses.every(r => r.resultCode === 0)) {
+                          toast.success(t('knownFacts.deleteSuccess'));
+                          setSelectedRowKeys([]);
+                          fetchKnownFacts();
+                          setBulkDeleteModalVisible(false);
+                        } else {
+                          let errored = responses.find(r => r.resultCode !== 0);
+                          console.error(errored);
+                          if (errored?.resultCode !== undefined)
+                            toast.error(
+                              t(getErrori18nKey(errored?.resultCode))
+                            );
+                        }
+                      });
+                    } catch (_e) {
+                      let error = _e as Error;
+                      toast.error(t('Error') + error.message);
+                    }
+                  }}
+                >
+                  {t('confirm')}
+                </Button>
+              </>
+            }
+          />
+        </div>
+
+        {knownFactsCount > 25 && (
+          <nav className="memori--table--pagination">
+            {knownFactsCount > numberOfResults && (
+              <div className="memori--table--pagination--pages">
+                <Button
+                  shape="circle"
+                  disabled={pageIndex === 0}
+                  padded={false}
+                  title={t('previous') || 'Previous'}
+                  icon={<ChevronLeft />}
+                  onClick={() => {
+                    setPageIndex(pageIndex - 1);
+                    fetchKnownFacts(undefined, pageIndex - 1, numberOfResults);
+                  }}
+                />
+                <span className="memori--table--pagination--pages--current">
+                  {pageIndex + 1} /{' '}
+                  {Math.ceil(knownFactsCount / numberOfResults)}
+                </span>
+                <Button
+                  shape="circle"
+                  padded={false}
+                  title={t('next') || 'Next'}
+                  icon={<ChevronRight />}
+                  disabled={
+                    (pageIndex + 1) * numberOfResults >= knownFactsCount
+                  }
+                  onClick={() => {
+                    setPageIndex(pageIndex + 1);
+                    fetchKnownFacts(undefined, 1, numberOfResults);
+                  }}
+                />
+              </div>
+            )}
+
+            <Select
+              options={[
+                { label: `25 / ${t('page') || 'page'}`, value: 25 },
+                { label: `50 / ${t('page') || 'page'}`, value: 50 },
+                { label: `100 / ${t('page') || 'page'}`, value: 100 },
+              ]}
+              value={numberOfResults}
+              displayValue={`${numberOfResults} / ${t('page') || 'page'}`}
+              onChange={value => {
+                setNumberOfResults(value);
+                fetchKnownFacts(undefined, undefined, value);
+              }}
+            />
+          </nav>
+        )}
+        <table className="memori--table">
+          <thead>
+            <tr>
+              <th className="memori--table--column-centered">
+                <Checkbox
+                  checked={
+                    !!knownFacts?.length &&
+                    selectedRowKeys?.length === knownFacts.length
+                  }
+                  indeterminate={
+                    !!knownFacts?.length &&
+                    !!selectedRowKeys?.length &&
+                    selectedRowKeys?.length !== knownFacts?.length
+                  }
+                  onChange={e => {
+                    if (e.target.checked) {
+                      setSelectedRowKeys(knownFacts.map(kf => kf.knownFactID));
+                    } else {
+                      setSelectedRowKeys([]);
+                    }
+                  }}
+                />
+              </th>
+              <th>{t('knownFacts.text')}</th>
+              <th className="mobile-hidden">{t('createdAt')}</th>
+              <th className="memori--table--column-right">{t('actions')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {knownFacts.map(kf => (
+              <tr key={kf.knownFactID}>
+                <th className="memori--table--column-centered">
+                  <Checkbox
+                    checked={selectedRowKeys?.includes(kf.knownFactID)}
+                    onChange={e => {
+                      if (e.target.checked) {
+                        setSelectedRowKeys(srk => [
+                          ...new Set([...srk, kf.knownFactID]),
+                        ]);
+                      } else {
+                        setSelectedRowKeys(
+                          srk =>
+                            srk.filter(
+                              key => key !== kf.knownFactID
+                            ) as string[]
+                        );
+                      }
+                    }}
+                  />
+                </th>
+                <td>{kf.text}</td>
+                <td className="mobile-hidden">
+                  <span className="memori--table--date">
+                    {kf.creationTimestamp
+                      ? new Intl.DateTimeFormat('it', {
+                          dateStyle: 'short',
+                          timeStyle: 'short',
+                        }).format(new Date(kf.creationTimestamp))
+                      : '-'}
+                  </span>
+                </td>
+                <td className="memori--table--column-right">
+                  <div className="memori--table--action-column">
+                    <Button
+                      danger
+                      ghost
+                      shape="circle"
+                      icon={<Delete />}
+                      disabled={selectedRowKeys?.length > 0}
+                      title={t('delete') || 'Delete'}
+                      onClick={() => setDeleteModalVisibleFor(kf.knownFactID)}
+                    />
+                    <Modal
+                      className="memori-known-facts-modal"
+                      open={deleteModalVisibleFor === kf.knownFactID}
+                      closable
+                      title={t('knownFacts.deleteConfirmTitle')}
+                      description={t('knownFacts.deleteConfirmMessage')}
+                      onClose={() => {
+                        setDeleteModalVisibleFor(undefined);
+                      }}
+                      footer={
+                        <>
+                          <Button
+                            ghost
+                            onClick={() => {
+                              setDeleteModalVisibleFor(undefined);
+                            }}
+                          >
+                            {t('cancel')}
+                          </Button>
+                          <Button
+                            primary
+                            danger
+                            onClick={async () => {
+                              try {
+                                const response = await deleteKnownFact(
+                                  sessionID,
+                                  kf.knownFactID
+                                );
+                                if (response.resultCode === 0) {
+                                  toast.success(t('knownFacts.deleteSuccess'));
+                                  setSelectedRowKeys([]);
+                                  fetchKnownFacts();
+                                  setDeleteModalVisibleFor(undefined);
+                                } else {
+                                  console.error(response);
+                                  toast.error(
+                                    t(getErrori18nKey(response.resultCode), {
+                                      ns: 'common',
+                                    })
+                                  );
+                                }
+                              } catch (_e) {
+                                let error = _e as Error;
+                                toast.error(t('Error') + error.message);
+                              }
+                            }}
+                          >
+                            {t('confirm')}
+                          </Button>
+                        </>
+                      }
+                    />
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Spin>
+    </Drawer>
+  );
+};
+
+export default KnownFacts;

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KnownFacts hidden unchanged 1`] = `<div />`;
+
+exports[`renders KnownFacts 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;"
+  />
+</div>
+`;
+
+exports[`renders KnownFacts 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/MemoriWidget/MemoriWidget.tsx

@@ -49,6 +49,9 @@ import Avatar, { Props as AvatarProps } from '../Avatar/Avatar';
 import ChangeMode, { Props as ChangeModeProps } from '../ChangeMode/ChangeMode';
 import Header, { Props as HeaderProps } from '../Header/Header';
 import PoweredBy from '../PoweredBy/PoweredBy';
+import AgeVerificationModal from '../AgeVerificationModal/AgeVerificationModal';
+import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
+import KnownFacts from '../KnownFacts/KnownFacts';
 
 // Layout
 import FullPageLayout from '../layouts/FullPage';
@@ -67,8 +70,6 @@ import {
 import { anonTag } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
 import { getGamificationLevel } from '../../helpers/statistics';
-import AgeVerificationModal from '../AgeVerificationModal/AgeVerificationModal';
-import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 
 // Widget utilities and helpers
 const getMemoriState = (integrationId?: string): object | null => {
@@ -453,6 +454,7 @@ const MemoriWidget = ({
     useState(false);
   const [showPositionDrawer, setShowPositionDrawer] = useState(false);
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
+  const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
   const [muteSpeaker, setMuteSpeaker] = useState(false);
   const [continuousSpeech, setContinuousSpeech] = useState(false);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
@@ -2592,6 +2594,7 @@ const MemoriWidget = ({
     position,
     setShowPositionDrawer,
     setShowSettingsDrawer,
+    setShowKnownFactsDrawer,
     showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
     speakerMuted: muteSpeaker || speakerMuted,
     setSpeakerMuted: mute => {
@@ -2613,6 +2616,8 @@ const MemoriWidget = ({
     showReload: selectedLayout === 'TOTEM',
     showClear,
     clearHistory: () => setHistory(h => h.slice(-1)),
+    loginToken,
+    sessionID: sessionId,
   };
 
   const avatarProps: AvatarProps = {
@@ -2905,6 +2910,16 @@ const MemoriWidget = ({
           additionalSettings={additionalSettings}
         />
       )}
+
+      {showKnownFactsDrawer && sessionId && (
+        <KnownFacts
+          apiURL={apiUrl}
+          memori={memori}
+          sessionID={sessionId}
+          visible={showKnownFactsDrawer}
+          closeDrawer={() => setShowKnownFactsDrawer(false)}
+        />
+      )}
     </div>
   );
 };

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -142,7 +142,9 @@ const SettingsDrawer = ({
           </div>
           <div className="memori-settings-drawer--field">
             <Checkbox
-              label={t('write_and_speak.hideEmissionsLabel')}
+              label={
+                t('write_and_speak.hideEmissionsLabel') || 'Hide emissions'
+              }
               name="hideControls"
               checked={hideEmissions}
               onChange={e => {

package/src/components/StartPanel/StartPanel.css

@@ -209,8 +209,8 @@
 }
 
 .memori--deep-thought-disclaimer .memori-tooltip .memori-tooltip--trigger svg {
-    width: 1.25em;
-    height: 1.25em;
+    width: 1.5rem;
+    height: 1.5rem;
     padding: 5px;
     border: 1px solid #666;
     border-radius: 50%;

package/src/components/icons/ChevronLeft.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const ChevronLeft = ({
+  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="M15 18L9 12 15 6"></path>
+  </svg>
+);
+
+export default ChevronLeft;

package/src/components/icons/ChevronRight.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const ChevronRight = ({
+  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="M9 18L15 12 9 6"></path>
+  </svg>
+);
+
+export default ChevronRight;

package/src/components/ui/Button.css

@@ -99,6 +99,34 @@
     border-radius: var(--memori-button-radius);
 }
 
+.memori-button--danger {
+    border-color: var(--memori-error-color);
+    background: rgba(0, 0, 0, 0.02);
+    color: var(--memori-error-color);
+}
+
+.memori-button--danger:hover,
+.memori-button--danger:focus {
+    border-color: var(--memori-error-color);
+    background-color: var(--memori-error-color);
+    color: #fff;
+}
+
+.memori-button--danger.memori-button--ghost {
+    border-color: transparent;
+    background: none;
+    box-shadow: none;
+    color: var(--memori-error-color);
+}
+
+.memori-button--danger.memori-button--ghost:hover,
+.memori-button--danger.memori-button--ghost:focus {
+    border-color: var(--memori-error-color);
+    background: rgba(0, 0, 0, 0.02);
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
+    color: var(--memori-error-color);
+}
+
 .memori-button--circle {
     padding: 0.75em;
     border-radius: 50%;
@@ -129,4 +157,4 @@
 .memori-button[disabled] {
     cursor: not-allowed;
     opacity: 0.6;
-}
+}