@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

package/src/components/KnownFacts/KnownFacts.css

@@ -1,58 +0,0 @@
-/* Drawer content layout */
-.memori-known-facts-body {
-    display: flex;
-    height: 100%;
-    min-height: 0;
-    flex-direction: column;
-    padding: 0.25rem 0;
-    gap: 1.25rem;
-}
-
-.memori-known-facts-drawer {
-    .memori-drawer__body {
-        overflow: hidden;
-    }
-}
-
-.memori-known-facts-table-wrapper {
-    .memori-table-scroll {
-        height: 100%;
-    }
-    .memori-table-pagination__range {
-        display: none;
-    }
-}
-
-/* Table wrapper: scroll + spacing (@memori.ai/ui Table root) */
-.memori-known-facts-table-wrapper.memori-table-wrapper {
-    overflow: hidden;
-    min-height: 0;
-    flex: 1 1 auto;
-    border: 1px solid var(--memori-color-border, #e2e8f0);
-    border-radius: 8px;
-}
-
-.memori-known-facts-text-cell {
-    display: block;
-    min-width: 0;
-    overflow-wrap: anywhere;
-    white-space: normal;
-    word-break: break-word;
-}
-
-.memori-known-facts-date-cell {
-    font-variant-numeric: tabular-nums;
-}
-
-/* Modal overlay */
-.memori-known-facts-modal {
-    z-index: 10000;
-}
-
-@media (max-width: 768px) {
-    .memori-known-facts-table-wrapper .memori-table-cell,
-    .memori-known-facts-table-wrapper .memori-table--cell {
-        overflow: visible;
-        white-space: normal;
-    }
-}

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

@@ -1,83 +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';
-import { AlertProvider } from '@memori.ai/ui';
-
-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>
-    <AlertProvider defaultDuration={5000}>
-      <KnownFacts
-        // @ts-ignore-next-line
-        memori={memori}
-        {...args}
-        sessionID={sessionID}
-        closeDrawer={() => {}}
-        apiClient={memoriApiClient()}
-      />
-    </AlertProvider>
-  </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 '../../testUtils';
-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,392 +0,0 @@
-import { KnownFact, Memori } from '@memori.ai/memori-api-client/dist/types';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import memoriApiClient from '@memori.ai/memori-api-client';
-import {
-  Button,
-  Drawer,
-  Spin,
-  Modal,
-  Table,
-  useAlertManager,
-  createAlertOptions,
-} from '@memori.ai/ui';
-import type {
-  ColumnDef,
-  PaginationState,
-  Updater,
-} from '@tanstack/react-table';
-import { getErrori18nKey } from '../../helpers/error';
-import { useTranslation } from 'react-i18next';
-import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
-import { Trash2 } from 'lucide-react';
-
-export interface Props {
-  apiClient: ReturnType<typeof memoriApiClient>;
-  sessionID: string;
-  memori: Memori;
-  initialKnownFacts?: KnownFact[];
-  /** When true, skips API fetching and only shows `initialKnownFacts` (useful for Storybook/mock UIs). */
-  disableFetch?: boolean;
-  visible?: boolean;
-  closeDrawer: () => void;
-}
-
-const KnownFacts = ({
-  apiClient,
-  sessionID,
-  memori,
-  disableFetch = false,
-  visible = true,
-  initialKnownFacts = [],
-  closeDrawer,
-}: Props) => {
-  const surfaceEl = useWidgetSurfaceEl();
-  const { t, i18n } = useTranslation();
-  const { add } = useAlertManager();
-  const { getKnownFactsPaginated, deleteKnownFact } = apiClient.knownFacts;
-  const initialKnownFactsRef = useRef(initialKnownFacts);
-  initialKnownFactsRef.current = initialKnownFacts;
-
-  const [knownFacts, setKnownFacts] = useState<KnownFact[]>(initialKnownFacts);
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-  const [knownFactsCount, setKnownFactsCount] = useState(
-    initialKnownFacts?.length ?? 0
-  );
-  const [loading, setLoading] = useState(false);
-
-  /**
-   * Paginated fetch. Pass `from` / `howMany` when they must not use current `pagination`
-   * (e.g. immediately after resetting page index).
-   */
-  const fetchKnownFacts = useCallback(
-    async (sessionId?: string, from?: number, howMany?: number) => {
-      if (!sessionID && !sessionId) return;
-      setLoading(true);
-      try {
-        const fromParam = from ?? pagination.pageIndex * pagination.pageSize;
-        const howManyParam = howMany ?? pagination.pageSize;
-        const { knownFacts, count, ...response } = await getKnownFactsPaginated(
-          sessionId ?? sessionID,
-          fromParam,
-          howManyParam
-        );
-
-        // When the API returns no items (e.g. after bulk delete), we must clear the table,
-        // not fall back to the initial props which may be stale.
-        setKnownFacts(Array.isArray(knownFacts) ? knownFacts : []);
-        setKnownFactsCount(count ?? 0);
-
-        if (response.resultCode !== 0) {
-          console.error(response);
-          add(
-            createAlertOptions({
-              description: t(getErrori18nKey(response.resultCode)),
-              severity: 'error',
-            })
-          );
-        }
-      } catch (err) {
-        console.error('KNOWN_FACTS/FETCH', err);
-        setKnownFacts([]);
-      }
-
-      setLoading(false);
-    },
-    [
-      add,
-      getKnownFactsPaginated,
-      pagination.pageIndex,
-      pagination.pageSize,
-      sessionID,
-      t,
-    ]
-  );
-
-  useEffect(() => {
-    if (disableFetch) return;
-    void fetchKnownFacts();
-  }, [fetchKnownFacts, disableFetch]);
-
-  const [bulkDeleteModalVisible, setBulkDeleteModalVisible] = useState(false);
-  const [bulkDeleteIds, setBulkDeleteIds] = useState<string[]>([]);
-  const [deleteModalVisibleFor, setDeleteModalVisibleFor] = useState<string>();
-  const selectedRowsLabel = useMemo(
-    () =>
-      t('knownFacts.selectedRows', {
-        count: bulkDeleteIds.length,
-        defaultValue:
-          bulkDeleteIds.length === 1
-            ? '{{count}} row selected'
-            : '{{count}} rows selected',
-      }),
-    [bulkDeleteIds.length, t]
-  );
-
-  const columns = useMemo<ColumnDef<KnownFact>[]>(
-    () => [
-      {
-        accessorKey: 'text',
-        header: () => t('knownFacts.text'),
-        cell: ({ row }) => (
-          <span className="memori-known-facts-text-cell">
-            {row.original.text}
-          </span>
-        ),
-        meta: { disableHiding: true },
-        enableSorting: false
-      },
-      {
-        id: 'createdAt',
-        accessorKey: 'creationTimestamp',
-        header: () => t('createdAt'),
-        cell: ({ row }) => (
-          <span className="memori-known-facts-date-cell memori--table--date mobile-hidden">
-            {row.original.creationTimestamp
-              ? new Intl.DateTimeFormat(i18n.language, {
-                  dateStyle: 'short',
-                  timeStyle: 'short',
-                }).format(new Date(row.original.creationTimestamp))
-              : '-'}
-          </span>
-        ),
-        meta: { disableHiding: true },
-        enableSorting: false
-      },
-    ],
-    [t, i18n.language]
-  );
-
-  /** Keep pagination mounted whenever there is data so page size never fights `enablePagination` toggling. */
-  const showPagination = knownFactsCount > 0;
-
-  return (
-    <Drawer
-      container={surfaceEl ?? undefined}
-      open={visible}
-      anchor="right"
-      className="memori-known-facts-drawer"
-      onOpenChange={() => closeDrawer()}
-      title={t('knownFacts.title')}
-      description={t('knownFacts.description', {
-        memoriName: memori.name,
-      })}
-      size="md"
-    >
-        <div className="memori-known-facts-body">
-          <Modal
-          container={surfaceEl ?? undefined}
-          className="memori-known-facts-modal"
-          open={bulkDeleteModalVisible}
-          closable
-          title={
-            bulkDeleteIds.length > 1
-              ? t('knownFacts.deleteSelectedConfirmTitle')
-              : t('knownFacts.deleteConfirmTitle')
-          }
-          description={
-            bulkDeleteIds.length > 0
-              ? `${selectedRowsLabel}. ${t(
-                  'knownFacts.deleteSelectedConfirmMessage',
-                  {
-                    number: bulkDeleteIds.length,
-                  }
-                )}`
-              : t('knownFacts.deleteConfirmMessage')
-          }
-          onOpenChange={(open: boolean) => {
-            if (!open) {
-              setBulkDeleteModalVisible(false);
-              setBulkDeleteIds([]);
-            }
-          }}
-          footer={
-            <>
-              <Button
-                variant="ghost"
-                onClick={() => {
-                  setBulkDeleteModalVisible(false);
-                  setBulkDeleteIds([]);
-                }}
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                variant="danger"
-                onClick={async () => {
-                  try {
-                    const mutations = bulkDeleteIds.map(knownFactID =>
-                      deleteKnownFact(sessionID, knownFactID)
-                    );
-                    const responses = await Promise.all(mutations);
-                    if (responses.every(r => r.resultCode === 0)) {
-                      add(
-                        createAlertOptions({
-                          description: t('knownFacts.deleteSuccess'),
-                          severity: 'success',
-                        })
-                      );
-                      setBulkDeleteIds([]);
-                      setBulkDeleteModalVisible(false);
-                      if (pagination.pageIndex !== 0) {
-                        setPagination(p => ({ ...p, pageIndex: 0 }));
-                      } else {
-                        await fetchKnownFacts(undefined, 0, pagination.pageSize);
-                      }
-                    } else {
-                      const errored = responses.find(r => r.resultCode !== 0);
-                      console.error(errored);
-                      if (errored?.resultCode !== undefined)
-                        add(
-                          createAlertOptions({
-                            description: t(getErrori18nKey(errored.resultCode)),
-                            severity: 'error',
-                          })
-                        );
-                    }
-                  } catch (_e) {
-                    const error = _e as Error;
-                    add(
-                      createAlertOptions({
-                        description: t('Error') + error.message,
-                        severity: 'error',
-                      })
-                    );
-                  }
-                }}
-              >
-                {t('confirm')}
-              </Button>
-            </>
-          }
-        />
-
-        <Table<KnownFact>
-          className="memori-known-facts-table-wrapper"
-          data={knownFacts}
-          columns={columns}
-          getRowId={row => row.knownFactID}
-          isLoading={loading}
-          rowActionsVariant='inline'
-          maxBodyHeight="75vh"
-          bulkActions={[
-            {
-              label: t('delete'),
-              icon: <Trash2 />,
-              variant: 'danger',
-              onClick: rows => {
-                const ids = rows.map(r => r.original.knownFactID);
-                if (ids.length === 0) return;
-                setBulkDeleteIds(ids);
-                setBulkDeleteModalVisible(true);
-              },
-            },
-          ]}
-          
-          rowActions={[
-            {
-              label: t('delete'),
-              icon: <Trash2 />,
-              variant: 'danger',
-              onClick: row =>
-                setDeleteModalVisibleFor(row.original.knownFactID),
-            },
-          ]}
-          {...(showPagination
-            ? {
-                enablePagination: true,
-                manualPagination: true,
-                
-                rowCount: knownFactsCount,
-                pagination,
-                onPaginationChange: (updater: Updater<PaginationState>) => {
-                  setPagination(
-                    (prev): PaginationState =>
-                      typeof updater === 'function' ? updater(prev) : updater
-                  );
-                },
-                initialPageSize: 10,
-                pageSizeOptions: [10,25,50,100],
-              }
-            : { enablePagination: false })}
-        />
-
-        <Modal
-          container={surfaceEl ?? undefined}
-          className="memori-known-facts-modal"
-          open={deleteModalVisibleFor !== undefined}
-          closable
-          title={t('knownFacts.deleteConfirmTitle')}
-          description={t('knownFacts.deleteConfirmMessage')}
-          onOpenChange={(open: boolean) => {
-            if (!open) {
-              setDeleteModalVisibleFor(undefined);
-            }
-          }}
-          footer={
-            <>
-              <Button
-                variant="ghost"
-                onClick={() => {
-                  setDeleteModalVisibleFor(undefined);
-                }}
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                variant="danger"
-                onClick={async () => {
-                  if (!deleteModalVisibleFor) return;
-                  const kfId = deleteModalVisibleFor;
-                  try {
-                    const response = await deleteKnownFact(sessionID, kfId);
-                    if (response.resultCode === 0) {
-                      add(
-                        createAlertOptions({
-                          description: t('knownFacts.deleteSuccess'),
-                          severity: 'success',
-                        })
-                      );
-                      setDeleteModalVisibleFor(undefined);
-                      await fetchKnownFacts();
-                    } else {
-                      console.error(response);
-                      add(
-                        createAlertOptions({
-                          description: t(getErrori18nKey(response.resultCode), {
-                            ns: 'common',
-                          }),
-                          severity: 'error',
-                        })
-                      );
-                    }
-                  } catch (_e) {
-                    const error = _e as Error;
-                    add(
-                      createAlertOptions({
-                        description: t('Error') + error.message,
-                        severity: 'error',
-                      })
-                    );
-                  }
-                }}
-              >
-                {t('confirm')}
-              </Button>
-            </>
-          }
-        />
-        </div>
-    </Drawer>
-  );
-};
-
-export default KnownFacts;

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

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders KnownFacts 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 KnownFacts visible 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 KnownFacts with data 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>
-`;