@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/Typing/Typing.stories.tsx

@@ -1,130 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import Typing, { Props } from './Typing';
-
-const meta: Meta = {
-  title: 'Widget/Typing',
-  component: Typing,
-  argTypes: {
-    useDefaultSentences: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    lang: {
-      control: {
-        type: 'select',
-        options: ['en', 'it'],
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: false },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <Typing {...args} />
-  </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 = {};
-
-export const WithLoadingTextIT = Template.bind({});
-WithLoadingTextIT.args = {
-  useDefaultSentences: true,
-  lang: 'it',
-};
-
-export const WithLoadingTextEN = Template.bind({});
-WithLoadingTextEN.args = {
-  useDefaultSentences: true,
-  lang: 'en',
-};
-
-export const WithCustomLoadingText = Template.bind({});
-WithCustomLoadingText.args = {
-  sentence: 'Chiedo agli unicorni cosa ne pensano...',
-};
-
-export const WithCustomLoadingTextList = Template.bind({});
-WithCustomLoadingTextList.args = {
-  sentences: {
-    en: [
-      {
-        text: 'I am asking the unicorns what they think about it',
-        delayAfter: 5,
-      },
-      {
-        text: 'I am trying to understand what my cat is saying about it',
-        delayAfter: 10,
-      },
-      {
-        text: 'I am collecting the opinions of the people I know',
-        delayAfter: 2,
-      },
-    ],
-    it: [
-      {
-        text: 'Chiedo agli unicorni cosa ne pensano',
-        delayAfter: 5,
-      },
-      {
-        text: 'Sto cercando di capire cosa ne pensa il mio gatto',
-        delayAfter: 10,
-      },
-      {
-        text: 'Sto raccogliendo le opinioni delle persone che conosco',
-        delayAfter: 2,
-      },
-    ],
-  },
-};
-
-export const WithCustomLoadingTextListAndInitialDelay = Template.bind({});
-WithCustomLoadingTextListAndInitialDelay.args = {
-  sentences: {
-    en: [
-      {
-        text: '',
-        delayAfter: 10,
-      },
-      {
-        text: 'I am asking the unicorns what they think about it',
-        delayAfter: 5,
-      },
-      {
-        text: 'I am trying to understand what my cat is saying about it',
-        delayAfter: 10,
-      },
-      {
-        text: 'I am collecting the opinions of the people I know',
-        delayAfter: 2,
-      },
-    ],
-    it: [
-      {
-        text: '',
-        delayAfter: 10,
-      },
-      {
-        text: 'Chiedo agli unicorni cosa ne pensano',
-        delayAfter: 5,
-      },
-      {
-        text: 'Sto cercando di capire cosa ne pensa il mio gatto',
-        delayAfter: 10,
-      },
-      {
-        text: 'Sto raccogliendo le opinioni delle persone che conosco',
-        delayAfter: 2,
-      },
-    ],
-  },
-};

package/src/components/Typing/Typing.test.tsx

@@ -1,62 +0,0 @@
-import { render } from '@testing-library/react';
-import Typing from './Typing';
-
-it('renders Typing unchanged', () => {
-  const { container } = render(<Typing />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Typing with default loading text unchanged', () => {
-  const { container } = render(<Typing useDefaultSentences lang="en" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Typing with default italian loading text unchanged', () => {
-  const { container } = render(<Typing useDefaultSentences lang="it" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Typing with custom loading text unchanged', () => {
-  const { container } = render(
-    <Typing sentence="Chiedo agli unicorni cosa ne pensano..." />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Typing with custom loading text list unchanged', () => {
-  const { container } = render(
-    <Typing
-      sentences={{
-        en: [
-          {
-            text: 'I am asking the unicorns what they think about it',
-            delayAfter: 5,
-          },
-          {
-            text: 'I am trying to understand what my cat is saying about it',
-            delayAfter: 10,
-          },
-          {
-            text: 'I am collecting the opinions of the people I know',
-            delayAfter: 2,
-          },
-        ],
-        it: [
-          {
-            text: 'Chiedo agli unicorni cosa ne pensano',
-            delayAfter: 5,
-          },
-          {
-            text: 'Sto cercando di capire cosa ne pensa il mio gatto',
-            delayAfter: 10,
-          },
-          {
-            text: 'Sto raccogliendo le opinioni delle persone che conosco',
-            delayAfter: 2,
-          },
-        ],
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/Typing/Typing.tsx

@@ -1,154 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const separator = ' ';
-const defaultDelay = 15;
-const timeoutMs = 20 * 1000;
-const newWordInterval = 50;
-const defaultSentences = {
-  en: [
-    { delayAfter: defaultDelay, text: 'Processing in progress...' },
-    { delayAfter: defaultDelay, text: "I'm thinking..." },
-    { delayAfter: defaultDelay, text: 'Analysing the request...' },
-    { delayAfter: defaultDelay, text: 'Preparing the reply...' },
-    { delayAfter: defaultDelay, text: 'Gathering information...' },
-    { delayAfter: defaultDelay, text: 'Formulating ideas...' },
-    { delayAfter: defaultDelay, text: 'One moment please...' },
-    { delayAfter: defaultDelay, text: 'Almost ready...' },
-    { delayAfter: defaultDelay, text: 'Connecting concepts...' },
-    { delayAfter: defaultDelay, text: 'Organising ideas...' },
-    { delayAfter: defaultDelay, text: 'Evaluating options...' },
-    { delayAfter: defaultDelay, text: 'Looking for the best solution...' },
-    { delayAfter: defaultDelay, text: 'Working for you...' },
-    { delayAfter: defaultDelay, text: 'Please wait...' },
-    { delayAfter: defaultDelay, text: 'Processing data...' },
-    { delayAfter: defaultDelay, text: 'Calculating response...' },
-    { delayAfter: defaultDelay, text: 'Synthesising information...' },
-    { delayAfter: defaultDelay, text: 'Generating content...' },
-    { delayAfter: defaultDelay, text: 'Reflecting on question...' },
-    { delayAfter: defaultDelay, text: 'Refining the answer' },
-  ],
-  it: [
-    { delayAfter: defaultDelay, text: 'Elaborazione in corso...' },
-    { delayAfter: defaultDelay, text: 'Sto pensando...' },
-    { delayAfter: defaultDelay, text: 'Analizzando la richiesta...' },
-    { delayAfter: defaultDelay, text: 'Preparando la risposta...' },
-    { delayAfter: defaultDelay, text: 'Raccogliendo informazioni...' },
-    { delayAfter: defaultDelay, text: 'Formulando idee...' },
-    { delayAfter: defaultDelay, text: 'Un momento per favore...' },
-    { delayAfter: defaultDelay, text: 'Quasi pronto...' },
-    { delayAfter: defaultDelay, text: 'Connettendo i concetti...' },
-    { delayAfter: defaultDelay, text: 'Organizzando le idee...' },
-    { delayAfter: defaultDelay, text: 'Valutando le opzioni...' },
-    { delayAfter: defaultDelay, text: 'Cercando la soluzione migliore...' },
-    { delayAfter: defaultDelay, text: 'Sto lavorando per te...' },
-    { delayAfter: defaultDelay, text: 'Attendere prego...' },
-    { delayAfter: defaultDelay, text: 'Elaborazione dati in corso...' },
-    { delayAfter: defaultDelay, text: 'Calcolando la risposta...' },
-    { delayAfter: defaultDelay, text: 'Sintetizzando informazioni...' },
-    { delayAfter: defaultDelay, text: 'Generando contenuti...' },
-    { delayAfter: defaultDelay, text: 'Sto riflettendo sulla domanda...' },
-    { delayAfter: defaultDelay, text: 'Perfezionando la risposta...' },
-  ],
-};
-
-export interface Props {
-  useDefaultSentences?: boolean;
-  lang?: 'en' | 'it';
-  sentence?: string;
-  sentences?: {
-    [lang: string]: {
-      /**
-       * Sentence to show
-       */
-      text: string;
-      /**
-       * Seconds to wait after the sentence is completed
-       */
-      delayAfter: number;
-    }[];
-  };
-}
-
-const getSeparatorString = (seconds = defaultDelay) =>
-  new Array(seconds * 20).fill(separator).join('');
-
-const Typing = ({
-  useDefaultSentences = false,
-  lang = 'en',
-  sentence,
-  sentences,
-}: Props) => {
-  const [index, setIndex] = useState(0);
-  const [text, setText] = useState(
-    sentences?.[lang]?.length
-      ? `${
-          sentences[lang][0].text.endsWith('...') ||
-          !sentences[lang][0].text.length
-            ? sentences[lang][0].text
-            : `${sentences[lang][0].text}...`
-        }${getSeparatorString(sentences[lang][0].delayAfter)}`
-      : sentence
-      ? `${
-          sentence.endsWith('...') || !sentence.length
-            ? sentence
-            : `${sentence}...`
-        }${getSeparatorString()}`
-      : ''
-  );
-  const [shownText, setShownText] = useState('');
-  const [elapsedTime, setElapsedTime] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setElapsedTime(prev => prev + newWordInterval);
-
-      const letter = text[shownText.length];
-      if (letter !== undefined && text.length > 0) {
-        setShownText(prev => prev + letter);
-      } else if (
-        sentences?.[lang]?.length &&
-        index < sentences[lang].length - 1
-      ) {
-        const nextIndex = index + 1;
-        const sentence = sentences[lang][nextIndex];
-        setText(
-          `${
-            sentence.text.endsWith('...') || !sentence.text.length
-              ? sentence.text
-              : `${sentence.text}...`
-          }${getSeparatorString(sentence.delayAfter)}`
-        );
-        setShownText('');
-        setIndex(nextIndex);
-      } else if (
-        !sentences &&
-        !sentence &&
-        (useDefaultSentences || elapsedTime > timeoutMs)
-      ) {
-        const sentence =
-          defaultSentences[lang][
-            Math.floor(Math.random() * defaultSentences[lang].length)
-          ];
-        setText(`${sentence.text}${getSeparatorString(sentence.delayAfter)}`);
-        setShownText('');
-      }
-    }, newWordInterval);
-
-    return () => clearInterval(interval);
-  });
-
-  return (
-    <div className="memori-chat--bubble">
-      <div className="memori-chat--bubble-typing">
-        <div id="wave">
-          <span className="dot"></span>
-          <span className="dot"></span>
-          <span className="dot"></span>
-        </div>
-        {text.length > 0 && <p>{shownText}</p>}
-      </div>
-    </div>
-  );
-};
-
-export default Typing;

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

@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Typing unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat--bubble"
-  >
-    <div
-      class="memori-chat--bubble-typing"
-    >
-      <div
-        id="wave"
-      >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders Typing with custom loading text list unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat--bubble"
-  >
-    <div
-      class="memori-chat--bubble-typing"
-    >
-      <div
-        id="wave"
-      >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-      </div>
-      <p />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders Typing with custom loading text unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat--bubble"
-  >
-    <div
-      class="memori-chat--bubble-typing"
-    >
-      <div
-        id="wave"
-      >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-      </div>
-      <p />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders Typing with default italian loading text unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat--bubble"
-  >
-    <div
-      class="memori-chat--bubble-typing"
-    >
-      <div
-        id="wave"
-      >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders Typing with default loading text unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat--bubble"
-  >
-    <div
-      class="memori-chat--bubble-typing"
-    >
-      <div
-        id="wave"
-      >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;