@memori.ai/memori-react 6.3.1 → 6.4.0

package/src/components/WhyThisAnswer/WhyThisAnswer.tsx

@@ -0,0 +1,151 @@
+import {
+  SearchMatches,
+  Message,
+} from '@memori.ai/memori-api-client/dist/types';
+import { useCallback, useEffect, useState } from 'react';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import Drawer from '../ui/Drawer';
+import Spin from '../ui/Spin';
+import Expandable from '../ui/Expandable';
+import toast from 'react-hot-toast';
+import { getErrori18nKey } from '../../helpers/error';
+import { useTranslation } from 'react-i18next';
+import Snippet from '../Snippet/Snippet';
+
+export interface Props {
+  apiURL: string;
+  sessionID: string;
+  message: Message;
+  initialMatches?: SearchMatches[];
+  visible?: boolean;
+  closeDrawer: () => void;
+}
+
+const addQuestionMark = (question: string) =>
+  question.endsWith('?') ? question : `${question}?`;
+
+const WhyThisAnswer = ({
+  message,
+  apiURL,
+  sessionID,
+  visible = true,
+  initialMatches = [],
+  closeDrawer,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const client = memoriApiClient(apiURL);
+  const searchMemory = client.search.searchMemory;
+
+  const [matches, setMatches] = useState<SearchMatches[]>(initialMatches);
+  const [loading, setLoading] = useState(false);
+
+  /**
+   * Fetch matching memories
+   */
+  const fetchMemories = useCallback(async () => {
+    setLoading(true);
+
+    try {
+      const { matches, ...response } = await searchMemory(sessionID, {
+        searchType: 'Semantic',
+        numberOfResults: 5,
+        text: message.questionAnswered,
+        date: message.date,
+        placeName: message.placeName,
+        placeLatitude: message.placeLatitude,
+        placeLongitude: message.placeLongitude,
+        placeUncertaintyKm: message.placeUncertaintyKm,
+        contextVars: message.contextVars,
+      });
+
+      if (response.resultCode !== 0) {
+        console.error(response);
+        toast.error(t(getErrori18nKey(response.resultCode)));
+      } else {
+        setMatches(matches ?? []);
+      }
+    } catch (err) {
+      console.error('WHYTHISANSWER/FETCH', err);
+      setMatches(initialMatches ?? []);
+    }
+
+    setLoading(false);
+  }, [message, sessionID]);
+  useEffect(() => {
+    fetchMemories();
+  }, [fetchMemories, message, sessionID]);
+
+  return (
+    <Drawer
+      open={visible}
+      width="80%"
+      animated={false}
+      className="memori-whythisanswer-drawer"
+      onClose={() => closeDrawer()}
+      title={t('whyThisAnswer')}
+    >
+      <p>{t('whyThisAnswerHelper')}</p>
+
+      {message.questionAnswered && (
+        <p className="memori--whythisanswer-question-answered">
+          <strong>{t('question') || 'Question'}:</strong>{' '}
+          {message.questionAnswered}
+        </p>
+      )}
+
+      <Spin spinning={loading}>
+        {!loading && matches.length === 0 && (
+          <p role="info" className="memori--whythisanswer-no-results">
+            {t('nothingFound')}
+          </p>
+        )}
+        {matches.length > 0 && (
+          <ul className="memori--whythisanswer-list">
+            {matches.map(m => (
+              <li key={m.memory.memoryID}>
+                <div className="memori--whythisanswer-title">
+                  <span className="memori--whythisanswer-confidence">
+                    {m.confidenceLevel}
+                  </span>
+                  <div className="memori--whythisanswer-title-text">
+                    <p>
+                      <strong>{addQuestionMark(m.memory.title ?? '')}</strong>
+                    </p>
+                    <p>
+                      {m.memory.titleVariants
+                        ?.map(t => addQuestionMark(t))
+                        ?.join(' | ')}
+                    </p>
+                  </div>
+                </div>
+                {m.memory.answers?.map((a, i) => (
+                  <p key={i} className="memori--whythisanswer-answer">
+                    <Expandable rows={3}>{a.text}</Expandable>
+                  </p>
+                ))}
+
+                {!!m.memory.media?.filter(m => m.mimeType === 'text/plain')
+                  ?.length && (
+                  <Snippet
+                    medium={{
+                      mediumID: m.memory.memoryID,
+                      mimeType: 'text/plain',
+                      content: m.memory.media.filter(
+                        m => m.mimeType === 'text/plain'
+                      )[0].content,
+                    }}
+                    showCopyButton={false}
+                    showLineNumbers={false}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </Spin>
+    </Drawer>
+  );
+};
+
+export default WhyThisAnswer;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders WhyThisAnswer hidden unchanged 1`] = `<div />`;
+
+exports[`renders WhyThisAnswer 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 WhyThisAnswer with data unchanged 1`] = `<div />`;

package/src/components/icons/QuestionHelp.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const QuestionHelp = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"></path>
+    <path d="M12 17L12.01 17"></path>
+  </svg>
+);
+
+export default QuestionHelp;

package/src/components/ui/Expandable.css

@@ -0,0 +1,15 @@
+.memori-expandable {
+    line-height: 1;
+}
+
+.memori-expandable--inner {
+    overflow: hidden;
+    max-height: 9999px;
+    transition: max-height 0.2s ease-in-out;
+}
+
+.memori-expandable>button {
+    color: var(--memori-primary, #333);
+    font-size: 0.9em;
+    text-decoration: underline
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Expandable, { Props } from './Expandable';
+
+import './Expandable.css';
+
+const meta: Meta = {
+  title: 'UI/Expandable',
+  component: Expandable,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => (
+  <Expandable {...args}>
+    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>
+);
+
+// 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 = {
+  rows: 2,
+};
+
+export const DefaultExpanded = Template.bind({});
+DefaultExpanded.args = {
+  rows: 3,
+  defaultExpanded: true,
+};
+
+export const WithCustomProps = Template.bind({});
+WithCustomProps.args = {
+  rows: 3,
+  innerClassName: 'custom-inner-class',
+  btnClassName: 'custom-btn-class',
+  expandSymbol: () => '🔽',
+  collapseSymbol: () => '🔼',
+};

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,97 @@
+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;
+  defaultExpanded?: boolean;
+  expandSymbol?: (lang: string) => React.ReactNode;
+  collapseSymbol?: (lang: string) => React.ReactNode;
+  children: React.ReactNode;
+}
+
+const Expandable = ({
+  rows,
+  className,
+  innerClassName,
+  btnClassName,
+  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
+          ? 1.2 * 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",