@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Component, ErrorInfo, ReactNode } from 'react';
-import Button from '../ui/Button';
-import { withTranslation, WithTranslation } from 'react-i18next';
-
-interface Props extends WithTranslation {
-  fallback?: ReactNode;
-  children: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-}
-
-class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-  };
-
-  public static getDerivedStateFromError(_: Error): State {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return this.props.fallback ? (
-        this.props.fallback
-      ) : (
-        <div
-          style={{
-            background: 'rgba(255, 255, 255, 0.4)',
-            color: '#000',
-            padding: '2rem',
-            borderRadius: '10px',
-          }}
-        >
-          <h2>{this.props.t('error.generic')}</h2>
-          <Button primary onClick={() => this.setState({ hasError: false })}>
-            {this.props.t('error.tryAgain') || 'Try again'}
-          </Button>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default withTranslation(['common'])(ErrorBoundary);

package/src/components/ExpertsDrawer/ExpertsDrawer.css

@@ -1,67 +0,0 @@
-.memori--experts-drawer {
-    z-index: 1000;
-}
-
-.memori--experts-drawer .memori-drawer--panel {
-    --memori-drawer--width: 100%;
-    --memori-drawer--width--md: 60%;
-    --memori-drawer--width--lg: 40%;
-}
-
-h2.memori--experts-drawer--title {
-    margin: 0;
-    font-size: inherit;
-    font-weight: 400;
-    line-height: inherit;
-}
-
-ul.memori--experts-drawer--list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-}
-
-li.memori--experts-drawer--item {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-}
-
-figure.memori--experts-drawer--avatar {
-    display: flex;
-    overflow: hidden;
-    width: 1.5rem;
-    height: 1.5rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin: 0 0.5rem 0 0;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
-figure.memori--experts-drawer--avatar img {
-    min-width: 100%;
-    min-height: 100%;
-    object-fit: cover;
-    object-position: center;
-}
-
-.memori--experts-drawer--content {
-    flex: 1;
-}
-
-h3.memori--experts-drawer--name {
-    margin: 0;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.25rem;
-}
-
-p.memori--experts-drawer--description {
-    margin: 0;
-    font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 1rem;
-}

package/src/components/ExpertsDrawer/ExpertsDrawer.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import ExpertsDrawer, { Props } from './ExpertsDrawer';
-import { tenant, expertReference } from '../../mocks/data';
-import './ExpertsDrawer.css';
-
-const meta: Meta = {
-  title: 'Widget/ExpertsDrawer',
-  component: ExpertsDrawer,
-  argTypes: {
-    open: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  return (
-    <I18nWrapper>
-      <ExpertsDrawer
-        {...args}
-        baseUrl="https://aisuru.com"
-        apiUrl="https://backend.memori.ai"
-        tenant={tenant}
-        experts={[
-          expertReference,
-          {
-            ...expertReference,
-            expertID: '2',
-            name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-            description:
-              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-          },
-        ]}
-      />
-    </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 = {
-  open: true,
-  onClose: () => {},
-};

package/src/components/ExpertsDrawer/ExpertsDrawer.test.tsx

@@ -1,53 +0,0 @@
-import { render } from '@testing-library/react';
-import ExpertsDrawer from './ExpertsDrawer';
-import React from 'react';
-import { tenant, expertReference } from '../../mocks/data';
-
-beforeEach(() => {
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-});
-
-it('renders ExpertsDrawer unchanged', () => {
-  const { container } = render(
-    <ExpertsDrawer
-      onClose={jest.fn()}
-      baseUrl="https://aisuru.com"
-      apiUrl="https://backend.memori.ai"
-      tenant={tenant}
-      experts={[
-        expertReference,
-        {
-          ...expertReference,
-          expertID: '2',
-        },
-      ]}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ExpertsDrawer open unchanged', () => {
-  const { container } = render(
-    <ExpertsDrawer
-      open
-      onClose={jest.fn()}
-      baseUrl="https://aisuru.com"
-      apiUrl="https://backend.memori.ai"
-      tenant={tenant}
-      experts={[
-        expertReference,
-        {
-          ...expertReference,
-          expertID: '2',
-        },
-      ]}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -1,69 +0,0 @@
-import {
-  ExpertReference,
-  Tenant,
-} from '@memori.ai/memori-api-client/dist/types';
-import Drawer from '../ui/Drawer';
-import { useTranslation } from 'react-i18next';
-import { getResourceUrl } from '../../helpers/media';
-
-export interface Props {
-  experts: ExpertReference[];
-  baseUrl: string;
-  apiUrl: string;
-  tenant?: Tenant;
-  open?: boolean;
-  onClose: () => void;
-}
-
-const ExpertsDrawer = ({
-  open = false,
-  baseUrl,
-  apiUrl,
-  tenant,
-  experts,
-  onClose,
-}: Props) => {
-  const { t } = useTranslation();
-
-  return (
-    <Drawer
-      open={open}
-      onClose={onClose}
-      className="memori--experts-drawer"
-      title={
-        <h2 className="memori--experts-drawer--title">
-          {t('widget.expertsInTheBoard')}
-        </h2>
-      }
-    >
-      <ul className="memori--experts-drawer--list">
-        {experts.map(expert => (
-          <li key={expert.expertID} className="memori--experts-drawer--item">
-            <figure className="memori--experts-drawer--avatar">
-              <img
-                src={`${new URL(apiUrl).origin}/api/v1/memoriai/memori/avatar/${
-                  expert.expertMemoriID
-                }`}
-                alt={expert.name}
-                onError={e => {
-                  e.currentTarget.src = getResourceUrl({
-                    tenantID: tenant?.name,
-                    type: 'avatar',
-                    baseURL: baseUrl,
-                  });
-
-                  e.currentTarget.onerror = null;
-                }}
-              />
-            </figure>
-            <div className="memori--experts-drawer--content">
-              <h3 className="memori--experts-drawer--name">{expert.name}</h3>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </Drawer>
-  );
-};
-
-export default ExpertsDrawer;

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

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

package/src/components/ExportHistoryButton/ExportHistoryButton.css

@@ -1,22 +0,0 @@
-.memori-export-history-button--panel {
-    position: absolute;
-    z-index: 10;
-    right: 0.5rem;
-    padding: var(--memori-button-padding);
-    border: 1px solid var(--memori-button-border-color);
-    border-radius: var(--memori-button-radius);
-    margin-top: 0.5rem;
-    background: #fff;
-    box-shadow: var(--memori-button-box-shadow);
-    color: #000;
-    text-align: left;
-}
-
-.memori-export-history-button--panel button + button {
-    margin-left: 0.5rem;
-}
-
-.memori-export-history-button--align-left .memori-export-history-button--panel {
-    right: auto;
-    left: 0.5rem;
-}

package/src/components/FeedbackButtons/FeedbackButtons.css

@@ -1,107 +0,0 @@
-.memori-chat--feedback button {
-    padding: 0.5em;
-    color: #333;
-    transition: all 0.3s ease-in-out;
-}
-
-.memori-chat--feedback button:hover,
-.memori-chat--feedback button:focus {
-    opacity: 1;
-}
-
-.memori-chat--feedback button .memori-button--icon svg.memori-chat--feedback-clicked {
-    color: var(--memori-primary);
-    fill: var(--memori-primary);
-}
-
-.memori-chat--feedback-menu {
-    position: relative;
-    display: inline-flex;
-    text-align: left;
-}
-
-.transition {
-    transition-duration: 0.15s;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.ease-out {
-    transition-timing-function: ease-out;
-}
-
-.ease-in {
-    transition-timing-function: ease-in;
-}
-
-.duration-100 {
-    transition-duration: 100ms;
-}
-
-.duration-200 {
-    transition-duration: 200ms;
-}
-
-.opacity-0 {
-    opacity: 0;
-}
-
-.opacity-100 {
-    opacity: 1;
-}
-
-.scale-95 {
-    transform: scale(0.95);
-}
-
-.scale-100 {
-    transform: scale(1);
-}
-
-.memori-chat--feedback-menu-items {
-    position: absolute;
-    top: calc(100% - 0.25rem);
-    right: -2rem;
-    width: 14rem;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    border-radius: 0.375rem;
-    margin-top: 0.5rem;
-    background-color: #fff;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    outline: none;
-    transform-origin: top right;
-}
-
-.memori-chat--feedback-menu-items:focus {
-    outline: none;
-}
-
-.memori-chat--feedback-menu-items-container {
-    padding: 0.25rem;
-}
-
-.memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    padding: 0.5rem;
-    border: none;
-    border-radius: 0.375rem;
-    margin: 0;
-    background: none;
-    box-shadow: none;
-    color: #333;
-    cursor: pointer;
-    font-family: inherit;
-    font-size: 0.75em;
-    font-weight: inherit;
-    line-height: inherit;
-}
-
-.memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:hover,
-.memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:focus,
-.memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:active,
-.memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item.memori-chat--feedback-menu-item-active {
-    background-color: var(--memori-primary, rgb(102, 103, 171));
-    color: var(--memori-primary-text, #fff);
-}

package/src/components/FeedbackButtons/FeedbackButtons.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import FeedbackButtons, { Props } from './FeedbackButtons';
-import { memori } from '../../mocks/data';
-
-import './FeedbackButtons.css';
-
-const meta: Meta = {
-  title: 'Feedback Buttons',
-  component: FeedbackButtons,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-  },
-  decorators: [
-    Story => (
-      <div style={{ textAlign: 'right', padding: '0 3rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <FeedbackButtons {...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 = {
-  memori,
-  onNegativeClick: () => {},
-};
-
-export const Toggle = Template.bind({});
-Toggle.args = {
-  memori,
-  toggle: true,
-  onNegativeClick: () => {},
-};
-
-export const Dropdown = Template.bind({});
-Dropdown.args = {
-  memori,
-  dropdown: true,
-  onNegativeClick: () => {},
-};

package/src/components/FeedbackButtons/FeedbackButtons.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { memori } from '../../mocks/data';
-import FeedbackButtons from './FeedbackButtons';
-
-it('renders FeedbackButtons unchanged', () => {
-  const { container } = render(
-    <FeedbackButtons memori={memori} onNegativeClick={jest.fn()} />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/FeedbackButtons/FeedbackButtons.tsx

@@ -1,152 +0,0 @@
-import { Memori } from '@memori.ai/memori-api-client/dist/types';
-import React, { useState } from 'react';
-import { Menu, Transition } from '@headlessui/react';
-import Tooltip from '../ui/Tooltip';
-import Button from '../ui/Button';
-import Feedback from '../icons/Feedback';
-
-const feedbackMsgs = {
-  'it-IT': 'Non è quello che ti ho chiesto',
-  'fr-FR': "Ce n'est pas ce que je t'ai demandé",
-  'en-GB': "It's not what I asked",
-};
-
-const feedbackMsgsHelpers = {
-  'it-IT': 'La risposta non era corretta',
-  'fr-FR': "La réponse n'était pas correcte",
-  'en-GB': 'The answer was not correct',
-};
-
-const dislikeMsgs = {
-  'it-IT': 'Non mi è piaciuta la risposta',
-  'fr-FR': "Je n'ai pas aimé la réponse",
-  'en-GB': "I didn't like the answer",
-};
-
-export interface Props {
-  memori: Memori;
-  onNegativeClick: (msg?: string) => void;
-  className?: string;
-  toggle?: boolean;
-  dropdown?: boolean;
-}
-
-const FeedbackButtons = ({
-  memori,
-  className,
-  onNegativeClick,
-  toggle = false,
-  dropdown = false,
-}: Props) => {
-  const [clicked, setClicked] = useState<'up' | 'down'>();
-  const culture =
-    memori.culture === 'it-IT'
-      ? 'it-IT'
-      : memori.culture === 'fr-FR'
-      ? 'fr-FR'
-      : 'en-GB';
-  const feedbackMsg = feedbackMsgs[culture];
-  const feedbackMsgHelper = feedbackMsgsHelpers[culture];
-  const dislikeMsg = dislikeMsgs[culture];
-
-  return (
-    <div className={`memori-chat--feedback${className ? ` ${className}` : ''}`}>
-      {dropdown ? (
-        <Menu as="div" className="memori-chat--feedback-menu">
-          <Menu.Button as={React.Fragment}>
-            <Button
-              ghost
-              shape="circle"
-              title="Feedback"
-              className="memori-chat--feedback-menu-button"
-              disabled={!!clicked}
-              icon={
-                <Feedback
-                  className={
-                    clicked ? 'memori-chat--feedback-clicked' : undefined
-                  }
-                />
-              }
-            />
-          </Menu.Button>
-          <Transition
-            as={React.Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="memori-chat--feedback-menu-items">
-              <div className="memori-chat--feedback-menu-items-container">
-                <Menu.Item key="ok">
-                  {({ active }) => (
-                    <button
-                      className={`memori-chat--feedback-menu-item${
-                        active ? ' memori-chat--feedback-menu-item-active' : ''
-                      }`}
-                      onClick={() => {
-                        if (clicked === 'up' && !!toggle) {
-                          setClicked(undefined);
-                        } else {
-                          setClicked('up');
-                        }
-                      }}
-                    >
-                      {dislikeMsg}
-                    </button>
-                  )}
-                </Menu.Item>
-                <Menu.Item key="no">
-                  {({ active }) => (
-                    <button
-                      className={`memori-chat--feedback-menu-item${
-                        active ? ' memori-chat--feedback-menu-item-active' : ''
-                      }`}
-                      onClick={() => {
-                        if (clicked === 'down' && !!toggle) {
-                          setClicked(undefined);
-                        } else {
-                          setClicked('down');
-                        }
-                        onNegativeClick(feedbackMsg);
-                      }}
-                    >
-                      {feedbackMsgHelper}
-                    </button>
-                  )}
-                </Menu.Item>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>
-      ) : (
-        <Tooltip align="left" content="Feedback">
-          <Button
-            title="Feedback"
-            onClick={() => {
-              if (clicked === 'down' && !!toggle) {
-                setClicked(undefined);
-              } else {
-                setClicked('down');
-              }
-              onNegativeClick(feedbackMsg);
-            }}
-            ghost
-            shape="circle"
-            icon={
-              <Feedback
-                className={
-                  clicked ? 'memori-chat--feedback-clicked' : undefined
-                }
-              />
-            }
-          />
-        </Tooltip>
-      )}
-    </div>
-  );
-};
-
-export default FeedbackButtons;

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

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders FeedbackButtons unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat--feedback"
-  >
-    <div
-      class="memori-tooltip memori-tooltip--align-left"
-    >
-      <div
-        class="memori-tooltip--trigger"
-      >
-        <button
-          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only"
-          title="Feedback"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0 0h24v24H0V0z"
-                fill="none"
-              />
-              <path
-                d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17l-.59.59-.58.58V4h16v12zm-9-4h2v2h-2zm0-6h2v4h-2z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;