@memori.ai/memori-react 6.3.1 → 6.4.1

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

@@ -0,0 +1,107 @@
+import { render } from '@testing-library/react';
+import Expandable from './Expandable';
+
+it('renders Expandable unchanged', () => {
+  const { container } = render(<Expandable rows={1}>Test</Expandable>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with long text unchanged', () => {
+  const { container } = render(
+    <Expandable rows={1}>
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
+      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
+      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
+      nisi.
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with multiple rows unchanged', () => {
+  const { container } = render(
+    <Expandable rows={3}>
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
+      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
+      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
+      nisi.
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with custom wrapper CSS class unchanged', () => {
+  const { container } = render(
+    <Expandable rows={1} className="test">
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
+      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
+      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
+      nisi.
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with custom inner CSS class unchanged', () => {
+  const { container } = render(
+    <Expandable rows={1} innerClassName="test">
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
+      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
+      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
+      nisi.
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with custom button CSS class unchanged', () => {
+  const { container } = render(
+    <Expandable rows={1} btnClassName="test">
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
+      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
+      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
+      nisi.
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with custom expand symbol unchanged', () => {
+  const { container } = render(
+    <Expandable rows={1} expandSymbol={() => 'test'}>
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
+      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
+      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
+      nisi.
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with custom collapse symbol unchanged', () => {
+  const { container } = render(
+    <Expandable rows={1} collapseSymbol={() => 'test collapse'} defaultExpanded>
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla,
+      sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse
+      a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper
+      nisi.
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Expandable with JSX markup unchanged', () => {
+  const { container } = render(
+    <Expandable rows={1}>
+      <h1>Lorem ipsum</h1>
+      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
+      <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
+      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
+      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
+      <button>Dolor sit amet</button>
+      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
+      <p>Suspendisse a sodales nulla, sed semper nisi.</p>
+    </Expandable>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Expandable.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Button from './Button';
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+export interface Props {
+  rows: number;
+  className?: string;
+  innerClassName?: string;
+  btnClassName?: string;
+  lineHeightMultiplier?: number;
+  defaultExpanded?: boolean;
+  expandSymbol?: (lang: string) => React.ReactNode;
+  collapseSymbol?: (lang: string) => React.ReactNode;
+  children: React.ReactNode;
+}
+
+const Expandable = ({
+  rows,
+  className,
+  innerClassName,
+  btnClassName,
+  lineHeightMultiplier = 1.2,
+  defaultExpanded = false,
+  expandSymbol = () => '...',
+  collapseSymbol = (lang: string) =>
+    lang === 'it' ? 'Mostra meno' : 'Show less',
+  children,
+}: Props) => {
+  const { i18n } = useTranslation();
+  const lang = i18n.language;
+  const collapseSymbolText = collapseSymbol(lang);
+  const expandSymbolText = expandSymbol(lang);
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const [needsExpanding, setNeedsExpanding] = useState(false);
+  const [rowHeight, setRowHeight] = useState(16);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      let height = (ref.current as HTMLElement).getBoundingClientRect().height;
+      let computedStyle = getComputedStyle(ref.current as HTMLElement);
+      let elLineHeight = computedStyle.lineHeight;
+      let lineHeight =
+        elLineHeight === 'normal' || !elLineHeight?.length
+          ? lineHeightMultiplier * parseInt(computedStyle.fontSize, 10)
+          : parseInt(elLineHeight, 10);
+
+      console.table({
+        rows,
+        lineHeight,
+        height,
+        maxHeight: rows * lineHeight,
+        needsExpanding: height > rows * lineHeight,
+      });
+      setRowHeight(lineHeight);
+      if (height && height > rows * lineHeight) {
+        setNeedsExpanding(true);
+      }
+    }
+  }, [rows, ref.current]);
+
+  return (
+    <div className={cx('memori-expandable', className)}>
+      <div
+        ref={ref}
+        className={cx('memori-expandable--inner', innerClassName)}
+        style={{
+          maxHeight:
+            expanded || !needsExpanding ? '9999px' : `${rowHeight * rows}px`,
+        }}
+      >
+        {children}
+      </div>
+      {needsExpanding && !expanded && (
+        <Button
+          ghost
+          padded={false}
+          className={btnClassName}
+          onClick={() => setExpanded(true)}
+        >
+          {expandSymbolText}
+        </Button>
+      )}
+      {needsExpanding && expanded && (
+        <Button
+          ghost
+          padded={false}
+          className={btnClassName}
+          onClick={() => setExpanded(false)}
+        >
+          {collapseSymbolText}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Expandable;

package/src/components/ui/Table.css

@@ -1,6 +1,6 @@
 table.memori--table {
     --memori-table-spacing: 1rem;
-    --memori-table-border-color: hsl(205, 20%, 94%);
+    --memori-table-border-color: rgb(237, 240, 243);
     --memori-table-bg-color: rgb(246, 248, 249);
 
     margin: 1rem 0;
@@ -110,4 +110,4 @@ table.memori--table td.memori--table--column-right {
 
 .memori--table--date {
     white-space: nowrap;
-}
+}

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

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Expandable unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with JSX markup unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      <h1>
+        Lorem ipsum
+      </h1>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <h2>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </h2>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <button>
+        Dolor sit amet
+      </button>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+      <p>
+        Suspendisse a sodales nulla, sed semper nisi.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom button CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom collapse symbol unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom expand symbol unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom inner CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner test"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with custom wrapper CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable test"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with long text unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Expandable with multiple rows unchanged 1`] = `
+<div>
+  <div
+    class="memori-expandable"
+  >
+    <div
+      class="memori-expandable--inner"
+      style="max-height: 9999px;"
+    >
+      Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.
+    </div>
+  </div>
+</div>
+`;

package/src/locales/en.json

@@ -33,6 +33,7 @@
   "showTranslatedText": "Show translation",
   "exactPosition": "Exact position",
   "uncertain": "Uncertain",
+  "question": "Question",
   "nothingFound": "Nothing found",
   "venue": "Venue",
   "searchVenue": "Search venue...",
@@ -42,6 +43,8 @@
   "memoriBlockedReasonExceedChats": "because it has exceeded the monthly threshold of allowed chats.",
   "memoriBlockedGiverHelper": "You can still manage it as administrator, but other users will not be able to interact with it.",
   "generatedByAI": "Answer generated by AI, may occasionally generate incorrect informations",
+  "whyThisAnswer": "Why this answer?",
+  "whyThisAnswerHelper": "This answer was generated automatically by an artificial intelligence based on these verified contents.",
   "completionsEnabled": "Advanced AI, can respond with automatically generated answers that may sometimes contain incorrect information",
   "completionProviderDown": "This Twin is integrated with a generative AI from {{provider}}, but it is currently unavailable. Try again later.",
   "completionProviderFallbackName": "an external provider",

package/src/locales/it.json

@@ -33,6 +33,7 @@
   "showTranslatedText": "Mostra traduzione",
   "exactPosition": "Posizione esatta",
   "uncertain": "Incertezza",
+  "question": "Domanda",
   "nothingFound": "Nessun risultato",
   "venue": "Luogo",
   "searchVenue": "Cerca luogo...",
@@ -42,6 +43,8 @@
   "memoriBlockedReasonExceedChats": "perchè ha superato la soglia mensile di chat ammesse.",
   "memoriBlockedGiverHelper": "Puoi sempre gestirlo in qualità di amministratore, ma altri utenti non potranno interrogarlo.",
   "generatedByAI": "Risposta generata da IA, può talvolta generare informazioni non corrette",
+  "whyThisAnswer": "Perché questa risposta?",
+  "whyThisAnswerHelper": "Questa risposta è stata generata automaticamente da un'intelligenza artificiale sulla base di questi contenuti verificati.",
   "completionsEnabled": "IA evoluta, può rispondere con risposte generate automaticamente che talvolta potrebbero contenere informazioni non corrette",
   "completionProviderDown": "Questo Twin è integrato con una IA generativa di {{provider}}, ma al momento non è disponibile. Riprova più tardi.",
   "completionProviderFallbackName": "un provider esterno",

package/src/mocks/data.ts

@@ -2,6 +2,7 @@ import {
   Medium,
   Memori,
   Message,
+  Memory,
   Integration,
   Tenant,
   DialogState,
@@ -334,3 +335,60 @@ export const venue: Venue = {
   placeName: 'Altedo, Bologna, Italy',
   uncertainty: 2,
 };
+
+export const memoryQuestion: Memory = {
+  memoryID: '08c0697d-f7f3-4a47-9970-aff75f01fb6c',
+  memoryType: 'Question',
+  lastRead: undefined,
+  readOccurrences: undefined,
+  receiverID: undefined,
+  receiverTag: undefined,
+  receiverName: undefined,
+  media: [
+    {
+      mediumID: 'c6851968-5d4d-409a-ae75-f22ec077efcd',
+      mimeType: 'text/html',
+      url: 'https://rawmaterial.it/it',
+      title: 'RawMaterial',
+    },
+  ],
+  title: 'sei umano',
+  titleVariants: ['sei reale'],
+  answers: [
+    {
+      text: 'se ti dico si ci credi?',
+      preformatted: false,
+      creationTimestamp: '2022-03-23T09:37:25.410377',
+      creationName: '6cfec2bd-a73f-4a21-b7ff-dd92d6db59c4',
+      lastChangeTimestamp: '2022-03-23T09:37:25.410406',
+      lastChangeName: '6cfec2bd-a73f-4a21-b7ff-dd92d6db59c4',
+    },
+    {
+      text: 'probabilmente lo sono più di te',
+      preformatted: false,
+      creationTimestamp: '2022-03-23T09:37:36.957656',
+      creationName: '6cfec2bd-a73f-4a21-b7ff-dd92d6db59c4',
+      lastChangeTimestamp: '2022-03-23T09:37:36.957657',
+      lastChangeName: '6cfec2bd-a73f-4a21-b7ff-dd92d6db59c4',
+    },
+  ],
+  date: undefined,
+  dateUncertaintyDays: undefined,
+  placeName: undefined,
+  placeLatitude: undefined,
+  placeLongitude: undefined,
+  placeUncertaintyKm: undefined,
+  preformatted: false,
+  conclusive: false,
+  notPickable: false,
+  contextVarsToSet: {
+    SUBJECT: 'TRAVEL',
+  },
+  contextVarsToMatch: {
+    SUBJECT: 'TRANSPORTS',
+  },
+  creationTimestamp: '2022-03-23T09:37:16.568149',
+  creationName: '6cfec2bd-a73f-4a21-b7ff-dd92d6db59c4',
+  lastChangeTimestamp: '2022-03-23T09:37:36.957695',
+  lastChangeName: '6cfec2bd-a73f-4a21-b7ff-dd92d6db59c4',
+};

package/src/styles.css

@@ -7,6 +7,7 @@
 @import url('./components/ui/Tooltip.css');
 @import url('./components/ui/Select.css');
 @import url('./components/ui/Table.css');
+@import url('./components/ui/Expandable.css');
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
@@ -41,6 +42,7 @@
 @import url('./components/KnownFacts/KnownFacts.css');
 @import url('./components/LoginDrawer/LoginDrawer.css');
 @import url('./components/VenueWidget/VenueWidget.css');
+@import url('./components/WhyThisAnswer/WhyThisAnswer.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=lexend-deca:200,400,700');
@@ -76,11 +78,12 @@ body.sb-show-main #root,
     --memori-chat-bubble-bg: #fff;
     --memori-chat-user-bubble-bg: var(--memori-primary);
     --memori-text-color: #000;
+    --memori-border-radius: 5px;
     --memori-button-bg: #fff;
     --memori-button-text: #000;
     --memori-button-padding: 0.5rem 1.5rem;
     --memori-button-border-color: #d9d9d9;
-    --memori-button-radius: 5px;
+    --memori-button-radius: var(--memori-border-radius);
     --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
     --memori-blur-background: 0px;
     --memori-drawer--width: 80%;
@@ -99,4 +102,4 @@ body.sb-show-main #root,
     .mobile-hidden {
         display: none;
     }
-}
+}