@memori.ai/memori-react 4.1.0 → 4.2.0

package/src/components/ui/Checkbox.css

@@ -39,7 +39,7 @@
     transition: all 0.3s;
 }
 
-.memori-checkbox--inner::after {
+.memori-checkbox:not(.memori-checkbox--indeterminate) .memori-checkbox--inner::after {
     position: absolute;
     top: 50%;
     display: table;
@@ -84,7 +84,7 @@
     background: rgba(0, 0, 0, 0.04);
 }
 
-.memori-checkbox--disabled .memori-checkbox--inner::after {
+.memori-checkbox.memori-checkbox--disabled .memori-checkbox--inner::after {
     border-color: rgba(0, 0, 0, 0.25);
 }
 
@@ -92,14 +92,27 @@
     color: rgba(0, 0, 0, 0.25);
 }
 
-.memori-checkbox--input:checked:not(:disabled) + .memori-checkbox--inner {
+.memori-checkbox--input.memori-checkbox--indeterminate+.memori-checkbox--inner,
+.memori-checkbox--input:checked:not(:disabled)+.memori-checkbox--inner {
     z-index: 2;
     border-color: var(--memori-primary);
     background-color: var(--memori-primary);
 }
 
-.memori-checkbox--input:checked + .memori-checkbox--inner::after {
+.memori-checkbox--input:checked+.memori-checkbox--inner::after {
     opacity: 1;
     transform: rotate(45deg) scale(1) translate(-50%, -50%);
     transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
 }
+
+.memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--inner::after,
+.memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--input:checked+.memori-checkbox--inner::after {
+    position: absolute;
+    top: calc(50% - 1px);
+    left: 2px;
+    width: 10px;
+    border-bottom: 2px solid #fff;
+    content: "";
+    transform: none;
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}

package/src/components/ui/Checkbox.stories.tsx

@@ -57,3 +57,18 @@ DisabledChecked.args = {
   checked: true,
   disabled: true,
 };
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  label: 'Indeterminate',
+  checked: true,
+  indeterminate: true,
+};
+
+export const DisabledIndeterminate = Template.bind({});
+DisabledIndeterminate.args = {
+  label: 'Indeterminate',
+  checked: false,
+  indeterminate: true,
+  disabled: true,
+};

package/src/components/ui/Checkbox.test.tsx

@@ -21,3 +21,8 @@ it('renders Checkbox checked and disabled unchanged', () => {
   const { container } = render(<Checkbox label="Check me" checked disabled />);
   expect(container).toMatchSnapshot();
 });
+
+it('renders Checkbox indeterminate unchanged', () => {
+  const { container } = render(<Checkbox label="Check me" indeterminate />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Checkbox.tsx

@@ -1,10 +1,11 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 import cx from 'classnames';
 
 export interface Props extends React.HTMLAttributes<HTMLInputElement> {
-  label: string;
+  label?: string;
   checked?: boolean;
   disabled?: boolean;
+  indeterminate?: boolean;
   name?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
@@ -13,31 +14,45 @@ const Checkbox: FC<Props> = ({
   label,
   className,
   disabled = false,
+  indeterminate = false,
   checked,
   children,
   onChange,
   name,
   ...props
-}) => (
-  <label
-    className={cx('memori-checkbox', className, {
-      'memori-checkbox--disabled': disabled,
-    })}
-  >
-    <span className="memori-checkbox--input-wrapper">
-      <input
-        type="checkbox"
-        {...props}
-        name={name}
-        disabled={disabled}
-        defaultChecked={checked}
-        className="memori-checkbox--input"
-        onChange={onChange}
-      />
-      <span className="memori-checkbox--inner" />
-    </span>
-    <span className="memori-checkbox--text">{label}</span>
-  </label>
-);
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = indeterminate;
+  }, [inputRef, indeterminate]);
+
+  return (
+    <label
+      className={cx('memori-checkbox', className, {
+        'memori-checkbox--disabled': disabled,
+        'memori-checkbox--indeterminate': indeterminate,
+      })}
+    >
+      <span className="memori-checkbox--input-wrapper">
+        <input
+          ref={inputRef}
+          type="checkbox"
+          {...props}
+          name={name}
+          disabled={disabled}
+          checked={checked || indeterminate}
+          className="memori-checkbox--input"
+          onChange={onChange}
+        />
+        <span className="memori-checkbox--inner" />
+      </span>
+      {!!label?.length && (
+        <span className="memori-checkbox--text">{label}</span>
+      )}
+    </label>
+  );
+};
 
 export default Checkbox;

package/src/components/ui/Drawer.css

@@ -34,9 +34,9 @@
     position: relative;
     width: var(--memori-drawer--width, 100%);
     height: 100%;
-    height: 100vh;
+    min-height: 100vh;
     box-sizing: border-box;
-    padding: 3rem 2rem 1.5rem;
+    padding: 1rem 1.5rem 1.5rem;
     margin-right: 0;
     margin-left: auto;
     background-color: #fff;
@@ -47,6 +47,8 @@
     .memori-drawer--panel {
         width: var(--memori-drawer--width--md, 80%);
         padding-top: 1.5rem;
+        padding-right: 2rem;
+        padding-left: 2rem;
     }
 }
 
@@ -67,17 +69,33 @@
     flex-direction: column;
 }
 
+.memori-drawer--panel>.memori-spin {
+    margin-top: -1.75rem;
+}
+
+.memori-drawer--panel p {
+    margin: 0 0 1em;
+}
+
+h2.memori-drawer--title {
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
 .memori-drawer--panel-left {
     margin-right: auto;
     margin-left: 0;
 }
 
 .memori-drawer--close {
-    position: absolute;
+    position: sticky;
     z-index: 70;
     top: 0;
-    left: -3.5rem;
+    left: 0;
     padding: 0.5rem;
+    margin-top: -1.5rem;
+    margin-left: -5.5rem;
 }
 
 @media (max-width: 767px) {

package/src/components/ui/Modal.tsx

@@ -12,7 +12,7 @@ export interface Props {
   className?: string;
   title?: string | JSX.Element | React.ReactNode;
   description?: string | JSX.Element | React.ReactNode;
-  children: JSX.Element | React.ReactNode;
+  children?: JSX.Element | React.ReactNode;
   footer?: JSX.Element | React.ReactNode;
   loading?: boolean;
   closable?: boolean;

package/src/components/ui/Select.tsx

@@ -34,7 +34,11 @@ const Select = ({
         disabled={disabled}
         name="day"
       >
-        <Listbox.Label className="memori-select--label">{label}:</Listbox.Label>
+        {label && (
+          <Listbox.Label className="memori-select--label">
+            {label}:
+          </Listbox.Label>
+        )}
         <Listbox.Button aria-label={label} className="memori-select--button">
           <span
             className={cx('memori-select--value', {

package/src/components/ui/Table.css

@@ -0,0 +1,113 @@
+table.memori--table {
+    --memori-table-spacing: 1rem;
+    --memori-table-border-color: hsl(205, 20%, 94%);
+    --memori-table-bg-color: rgb(246, 248, 249);
+
+    margin: 1rem 0;
+    font-size: 1rem;
+}
+
+@media (max-width: 767px) {
+    table.memori--table {
+        --memori-table-spacing: 0.5rem;
+
+        font-size: 0.875rem;
+    }
+}
+
+:where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-indent: 0;
+}
+
+table.memori--table th,
+table.memori--table td {
+    padding: calc(var(--memori-table-spacing) / 2) var(--memori-table-spacing);
+    border-bottom: 1px solid var(--memori-table-border-color);
+    text-align: left;
+    text-align: start;
+}
+
+table.memori--table thead th {
+    padding: var(--memori-table-spacing) var(--memori-table-spacing);
+    background-color: var(--memori-table-bg-color);
+}
+
+table.memori--table tfoot th,
+table.memori--table tfoot td {
+    border-top: 1px solid var(--memori-table-border-color);
+    border-bottom: 0;
+}
+
+table.memori--table[role="grid"] tbody tr:nth-child(odd) {
+    background-color: var(--memori-table-bg-color);
+}
+
+.memori--table--pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+}
+
+.memori--table--pagination--pages {
+    display: flex;
+    align-items: center;
+    margin-right: 1rem;
+}
+
+.memori--table--pagination--pages--current {
+    padding: 0 0.5rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.memori--table--pagination--pages button.memori-button.memori-button--circle {
+    padding: 0.25rem;
+}
+
+.memori--table--pagination--pages button.memori-button[disabled] {
+    opacity: 0.3;
+}
+
+.memori--table--pagination ul.memori-select--options {
+    right: 0;
+}
+
+@media (max-width: 600px) {
+    .memori--table--pagination--pages {
+        margin-right: auto;
+    }
+
+    .memori--table--pagination--pages--current {
+        padding: 0 0.25rem;
+    }
+
+    .memori--table--pagination .memori-select button.memori-select--button {
+        padding-top: 0.25rem;
+        padding-right: 2rem;
+        padding-bottom: 0.25rem;
+        padding-left: 0.5rem;
+        font-size: 0.875rem;
+    }
+
+    .memori--table--pagination .memori-select ul.memori-select--options {
+        min-width: fit-content;
+    }
+}
+
+table.memori--table th.memori--table--column-centered,
+table.memori--table td.memori--table--column-centered {
+    text-align: center;
+}
+
+table.memori--table th.memori--table--column-right,
+table.memori--table td.memori--table--column-right {
+    text-align: right;
+    text-align: end;
+}
+
+.memori--table--date {
+    white-space: nowrap;
+}

package/src/components/ui/__snapshots__/Checkbox.test.tsx.snap

@@ -79,6 +79,32 @@ exports[`renders Checkbox disabled unchanged 1`] = `
 </div>
 `;
 
+exports[`renders Checkbox indeterminate unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox memori-checkbox--indeterminate"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        checked=""
+        class="memori-checkbox--input"
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
 exports[`renders Checkbox unchanged 1`] = `
 <div>
   <label

package/src/locales/en.json

@@ -21,6 +21,12 @@
   "day": "Day",
   "month": "Month",
   "year": "Year",
+  "createdAt": "Creation date",
+  "selected": "Selected",
+  "page": "page",
+  "actions": "Actions",
+  "next": "Next",
+  "previous": "Previous",
   "copy": "Copy",
   "copyToClipboard": "Copy to clipboard",
   "showOriginalText": "Show original",
@@ -47,6 +53,20 @@
   "deepThoughtHelper": "Allows to establish a unique relationship between the AI and the person who interrogates it, allowing the AI to remember this relationship and therefore supporting people with questions targeted to their experiences. Once people start their relationships, the creator of the AI will see their community grow with Followers and will be able to observe the known facts collected during the conversations.",
   "deepThoughtDisclaimerTitle": "Deep Thought enabled",
   "deepThoughtDisclaimer": "By continuing the conversation I authorize the processing of my personal data as specified in the information notice which I declare to have read.",
+  "knownFacts": {
+    "title": "Known facts",
+    "description": "Details of the information shared between you and {{memoriName}}",
+    "type": "Type",
+    "typeShortTerm": "Short term",
+    "typeLongTerm": "Long term",
+    "typeHelper": "Types:\n- Short Term: this Known Fact is always used during conversations\n- Long Term: this Known Fact is used during conversations only if relevant to the current question",
+    "text": "Text",
+    "deleteSuccess": "Known fact deleted",
+    "deleteConfirmTitle": "Delete known fact",
+    "deleteConfirmMessage": "Are you sure you want to delete this known fact?",
+    "deleteSelectedConfirmTitle": "Delete selected known facts",
+    "deleteSelectedConfirmMessage": "Are you sure you want to delete the selected known facts?"
+  },
   "auth": {
     "title": "Authentication",
     "useRecoveryTokens": "Use recovery tokens",

package/src/locales/it.json

@@ -21,6 +21,12 @@
   "day": "Giorno",
   "month": "Mese",
   "year": "Anno",
+  "createdAt": "Data creazione",
+  "selected": "Selezionati",
+  "page": "pagina",
+  "actions": "Azioni",
+  "next": "Successivo",
+  "previous": "Precedente",
   "copy": "Copia",
   "copyToClipboard": "Copia negli appunti",
   "showOriginalText": "Mostra originale",
@@ -47,6 +53,20 @@
   "deepThoughtHelper": "Permette di stabilire una relazione univoca tra l'IA e la persona che la interroga, permettendo all'IA memoria di questa relazione supportando quindi le persone con domande mirate alle loro esperienze. Una volta che le persone avvieranno le loro relazioni, il creatore delle AI vedrà la propria community crescere di Follower e potrà osservare i fatti noti raccolti durante le conversazioni.",
   "deepThoughtDisclaimerTitle": "Pensiero profondo abilitato",
   "deepThoughtDisclaimer": "Proseguendo nella conversazione autorizzo il trattamento dei miei dati personali così come specificato nell'informativa di cui dichiaro di aver preso visione.",
+  "knownFacts": {
+    "title": "Fatti noti",
+    "description": "Dettagli delle informazioni condivise tra te e {{memoriName}}",
+    "type": "Tipo",
+    "typeShortTerm": "Breve termine",
+    "typeLongTerm": "Lungo termine",
+    "typeHelper": "Tipi:\n- Breve termine: questo fatto noto è sempre utilizzato durante le conversazioni\n- Lungo termine: questo fatto noto è utilizzato durante le conversazioni solo se rilevante per la domanda corrente",
+    "text": "Testo",
+    "deleteSuccess": "Fatto noto eliminato",
+    "deleteConfirmTitle": "Elimina il fatto noto",
+    "deleteConfirmMessage": "Confermi di voler eliminare questo fatto noto?",
+    "deleteSelectedConfirmTitle": "Elimina i fatti noti selezionati",
+    "deleteSelectedConfirmMessage": "Confermi di voler eliminare i fatti noti selezionati?"
+  },
   "auth": {
     "title": "Autenticazione",
     "useRecoveryTokens": "Utilizza i token di recupero",

package/src/mocks/data.ts

@@ -5,6 +5,7 @@ import {
   Integration,
   Tenant,
   DialogState,
+  KnownFact,
 } from '@memori.ai/memori-api-client/dist/types';
 
 export const sessionID = '131165be-9d1a-42fb-a3ce-e8f86d40c88f';
@@ -290,3 +291,13 @@ export const integration: Integration = {
   creationTimestamp: '2022-06-11T14:13:45.685038Z',
   lastChangeTimestamp: '2022-06-11T14:13:45.685038Z',
 };
+
+export const knownFact: KnownFact = {
+  knownFactID: 'b0b0b0b0-b0b0-b0b0-b0b0-b0b0b0b0b0b3',
+  knownFactType: 'ShortTerm',
+  text: 'I am a known fact. Quisque in ultrices lectus. Nulla at urna diam. Proin sodales lobortis libero eu facilisis.',
+  creationTimestamp: '2023-12-01T13:40:25.235896Z',
+  creationSessionID: '0ce713c0-c8f1-4aed-a2a6-40f81c06854f',
+  lastChangeTimestamp: '2023-12-01T13:44:04.832072Z',
+  lastChangeSessionID: '0ce713c0-c8f1-4aed-a2a6-40f81c06854f',
+};

package/src/styles.css

@@ -6,6 +6,7 @@
 @import url('./components/ui/Spin.css');
 @import url('./components/ui/Tooltip.css');
 @import url('./components/ui/Select.css');
+@import url('./components/ui/Table.css');
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
@@ -36,6 +37,7 @@
 @import url('./components/UploadMenu/UploadMenu.css');
 @import url('./components/DateSelector/DateSelector.css');
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
+@import url('./components/KnownFacts/KnownFacts.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');
@@ -87,4 +89,10 @@ body.sb-show-main #root,
     --memori-modal--width--md: 80%;
     --memori-error-color: #ff4d4f;
     --memori-warning-color: #faad14;
+}
+
+@media (max-width: 768px) {
+    .mobile-hidden {
+        display: none;
+    }
 }