@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/KnownFacts/KnownFacts.css

@@ -1,19 +0,0 @@
-.memori-known-facts-modal {
-    z-index: 10000;
-}
-
-.memori-known-facts-actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    margin: 1rem 0;
-}
-
-.memori-known-facts-actions .memori-button[disabled] {
-    opacity: 0.4;
-}
-
-.memori-known-facts-delete-selected {
-    margin-left: auto;
-}

package/src/components/KnownFacts/KnownFacts.stories.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { memori, sessionID, knownFact } from '../../mocks/data';
-import I18nWrapper from '../../I18nWrapper';
-import KnownFacts, { Props } from './KnownFacts';
-import memoriApiClient from '@memori.ai/memori-api-client';
-
-import './KnownFacts.css';
-
-const meta: Meta = {
-  title: 'Known Facts',
-  component: KnownFacts,
-  argTypes: {
-    visible: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <KnownFacts
-      // @ts-ignore-next-line
-      memori={memori}
-      {...args}
-      sessionID={sessionID}
-      closeDrawer={() => {}}
-      apiClient={memoriApiClient()}
-    />
-  </I18nWrapper>
-);
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  visible: true,
-};
-
-export const WithData = Template.bind({});
-WithData.args = {
-  visible: true,
-  initialKnownFacts: [knownFact],
-};
-
-export const WithPaginatedData = Template.bind({});
-WithPaginatedData.args = {
-  visible: true,
-  initialKnownFacts: new Array(26).fill(knownFact).map((fact, index) => ({
-    ...fact,
-    knownFactID: fact.knownFactID + index,
-  })),
-};
-
-export const WithRealDataLocalhost = Template.bind({});
-WithRealDataLocalhost.args = {
-  visible: true,
-  sessionID: '5841f5f9-3315-4a5a-9b62-33b13d5a27fd',
-  memori: {
-    memoriName: 'test memori',
-    ownerUserName: 'nicola',
-    memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
-    ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
-    tenantID: 'app.memorytwin.com',
-    apiURL: 'http://localhost:7778',
-    baseURL: 'http://localhost:3000',
-    uiLang: 'EN',
-    lang: 'IT',
-    layout: 'FULLPAGE',
-    showShare: 'true',
-    integrationID: '82f017cc-450b-4c47-acf5-47910d336ce9',
-  },
-};

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import KnownFacts from './KnownFacts';
-import { knownFact, memori, sessionID } from '../../mocks/data';
-import memoriApiClient from '@memori.ai/memori-api-client';
-
-beforeEach(() => {
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-});
-
-const client = memoriApiClient();
-
-it('renders KnownFacts hidden unchanged', () => {
-  const { container } = render(
-    <KnownFacts
-      apiClient={client}
-      memori={memori}
-      sessionID={sessionID}
-      visible={false}
-      closeDrawer={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders KnownFacts visible unchanged', () => {
-  const { container } = render(
-    <KnownFacts
-      apiClient={client}
-      memori={memori}
-      sessionID={sessionID}
-      visible={true}
-      closeDrawer={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders KnownFacts with data unchanged', () => {
-  const { container } = render(
-    <KnownFacts
-      apiClient={client}
-      memori={memori}
-      sessionID={sessionID}
-      visible={true}
-      initialKnownFacts={[knownFact]}
-      closeDrawer={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/KnownFacts/KnownFacts.tsx

@@ -1,376 +0,0 @@
-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 {
-  apiClient: ReturnType<typeof memoriApiClient>;
-  sessionID: string;
-  memori: Memori;
-  initialKnownFacts?: KnownFact[];
-  visible?: boolean;
-  closeDrawer: () => void;
-}
-
-const KnownFacts = ({
-  apiClient,
-  sessionID,
-  memori,
-  visible = true,
-  initialKnownFacts = [],
-  closeDrawer,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const { getKnownFactsPaginated, deleteKnownFact } = apiClient.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 ?? initialKnownFacts);
-      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)[]>(
-    []
-  );
-
-  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 || pageIndex < numberOfResults}
-                  padded={false}
-                  title={t('previous') || 'Previous'}
-                  icon={<ChevronLeft />}
-                  onClick={() => {
-                    let from =
-                      (pageIndex / numberOfResults - 1) * numberOfResults;
-                    setPageIndex(from);
-                    fetchKnownFacts(undefined, from, numberOfResults);
-                  }}
-                />
-                <span className="memori--table--pagination--pages--current">
-                  {Math.ceil(pageIndex / numberOfResults) + 1} /{' '}
-                  {Math.ceil(knownFactsCount / numberOfResults)}
-                </span>
-                <Button
-                  shape="circle"
-                  padded={false}
-                  title={t('next') || 'Next'}
-                  icon={<ChevronRight />}
-                  disabled={
-                    (pageIndex / numberOfResults + 1) * numberOfResults >=
-                    knownFactsCount
-                  }
-                  onClick={() => {
-                    let from =
-                      (pageIndex / numberOfResults + 1) * numberOfResults;
-                    setPageIndex(from);
-                    fetchKnownFacts(undefined, from, 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);
-                setPageIndex(0);
-                fetchKnownFacts(undefined, 0, 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

@@ -1,19 +0,0 @@
-// 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>
-`;