@memori.ai/memori-react 1.0.0-alpha.1

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import cx from 'classnames';
+import './ChatTextArea.css';
+import Button from '../ui/Button';
+import Expand from '../icons/Expand';
+import FullscreenExit from '../icons/FullscreenExit';
+
+export interface Props {
+  disabled?: boolean;
+  value: string;
+  onChange: (value: string) => void;
+  onPressEnter?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (e: React.FocusEvent) => void;
+  onBlur?: (e: React.FocusEvent) => void;
+}
+
+const ChatTextArea: React.FC<Props> = ({
+  disabled = false,
+  value,
+  onChange,
+  onPressEnter,
+  onFocus,
+  onBlur,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div
+      data-testid="chat-textarea"
+      className={cx('memori-chat-textarea', {
+        'memori-chat-textarea--expanded': expanded,
+        'memori-chat-textarea--disabled': disabled,
+      })}
+    >
+      <div className="memori-chat-textarea--inner">
+        <textarea
+          className="memori-chat-textarea--input"
+          disabled={disabled}
+          value={value}
+          onChange={e => {
+            onChange(e.target.value);
+          }}
+          onKeyDownCapture={e => {
+            if (e.key === 'Enter' && !e.shiftKey && onPressEnter) {
+              onPressEnter(e);
+            }
+          }}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+        <div className="memori-chat-textarea--expand">
+          <Button
+            className={cx('memori-chat-textarea--expand-button')}
+            onClick={() => setExpanded(!expanded)}
+            padded={false}
+            ghost
+            icon={expanded ? <FullscreenExit /> : <Expand />}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatTextArea;

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

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ChatTextArea unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat-textarea"
+    data-testid="chat-textarea"
+  >
+    <div
+      class="memori-chat-textarea--inner"
+    >
+      <textarea
+        class="memori-chat-textarea--input"
+      />
+      <div
+        class="memori-chat-textarea--expand"
+      >
+        <button
+          class="memori-chat-textarea--expand-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ChatTextArea with long text unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat-textarea"
+    data-testid="chat-textarea"
+  >
+    <div
+      class="memori-chat-textarea--inner"
+    >
+      <textarea
+        class="memori-chat-textarea--input"
+      >
+        Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur.
+      </textarea>
+      <div
+        class="memori-chat-textarea--expand"
+      >
+        <button
+          class="memori-chat-textarea--expand-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ChatTextArea with value unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat-textarea"
+    data-testid="chat-textarea"
+  >
+    <div
+      class="memori-chat-textarea--inner"
+    >
+      <textarea
+        class="memori-chat-textarea--input"
+      >
+        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </textarea>
+      <div
+        class="memori-chat-textarea--expand"
+      >
+        <button
+          class="memori-chat-textarea--expand-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/CustomGLBModelViewer/ModelViewer.css

@@ -0,0 +1,11 @@
+model-viewer {
+    max-width: 100%;
+    height: 400px;
+    --poster-color: transparent;
+}
+
+@media (max-width: 800px) {
+    model-viewer {
+        height: 300px;
+    }
+}

package/src/components/CustomGLBModelViewer/ModelViewer.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ModelViewer, { Props } from './ModelViewer';
+
+const meta: Meta = {
+  title: 'Custom GLB Avatar',
+  component: ModelViewer,
+  argTypes: {
+    src: {
+      control: {
+        type: 'text',
+      },
+    },
+    poster: {
+      control: {
+        type: 'text',
+      },
+    },
+    alt: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
+    setHydrated(true);
+  }, []);
+
+  return hydrated ? (
+    <ModelViewer
+      {...args}
+      src={args.src + `#${new Date(Date.now()).toISOString()}`}
+      key={Date.now()}
+    />
+  ) : (
+    <></>
+  );
+};
+
+// 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 = {
+  alt: '',
+  src:
+    'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
+  poster:
+    'https://assets.memori.ai/api/v2/asset/596382ce-381a-4a66-9740-c7adc3bfa4a8.png',
+};

package/src/components/CustomGLBModelViewer/ModelViewer.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ModelViewer from './ModelViewer';
+
+it('renders ModelViewer unchanged', () => {
+  const { container } = render(
+    <ModelViewer
+      src="https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb"
+      poster="https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/CustomGLBModelViewer/ModelViewer.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import './ModelViewer.css';
+
+export interface Props {
+  src: string;
+  poster: string;
+  alt?: string;
+}
+
+const ModelViewer = ({ src, poster, alt = '' }: Props) => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src =
+      'https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js';
+    script.type = 'module';
+    document.head.appendChild(script);
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, []);
+  return (
+    <div className="model-viewer">
+      {/* @ts-ignore */}
+      <model-viewer
+        src={src}
+        ios-src=""
+        poster={poster}
+        alt={alt}
+        shadow-intensity="1"
+        disable-zoom
+        camera-controls
+        autoplay
+      />
+    </div>
+  );
+};
+
+export default ModelViewer;

package/src/components/CustomGLBModelViewer/__snapshots__/ModelViewer.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ModelViewer unchanged 1`] = `
+<div>
+  <div
+    class="model-viewer"
+  >
+    <model-viewer
+      alt=""
+      autoplay="true"
+      camera-controls="true"
+      disable-zoom="true"
+      ios-src=""
+      poster="https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png"
+      shadow-intensity="1"
+      src="https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb"
+    />
+  </div>
+</div>
+`;

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,54 @@
+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/ExportHistoryButton/ExportHistoryButton.css

@@ -0,0 +1,22 @@
+.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/ExportHistoryButton/ExportHistoryButton.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ExportHistoryButton, { Props } from './ExportHistoryButton';
+import { memori, history } from '../../mocks/data';
+import Download from '../icons/Download';
+
+const meta: Meta = {
+  title: 'Export History Button',
+  component: ExportHistoryButton,
+  argTypes: {
+    memori: {
+      control: {
+        type: 'object',
+      },
+    },
+    icon: {
+      control: {
+        type: 'object',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => (
+  <div style={{ textAlign: 'right' }}>
+    <ExportHistoryButton {...args} />
+  </div>
+);
+
+const TemplateRight: Story<Props> = args => (
+  <div style={{ textAlign: 'left' }}>
+    <ExportHistoryButton {...args} />
+  </div>
+);
+
+// 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,
+  history,
+};
+
+export const WithCustomIcon = Template.bind({});
+WithCustomIcon.args = {
+  memori,
+  history,
+  icon: <Download />,
+};
+
+export const WithCustomCSSClass = Template.bind({});
+WithCustomCSSClass.args = {
+  memori,
+  history,
+  buttonClassName: 'memori-button--primary',
+};
+
+export const AlignLeft = TemplateRight.bind({});
+AlignLeft.args = {
+  memori,
+  history,
+  align: 'left',
+};

package/src/components/ExportHistoryButton/ExportHistoryButton.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ExportHistoryButton from './ExportHistoryButton';
+import { memori, history } from '../../mocks/data';
+import Download from '../icons/Download';
+
+it('renders ExportHistoryButton unchanged', () => {
+  const { container } = render(
+    <ExportHistoryButton memori={memori} history={[]} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ExportHistoryButton unchanged with history', () => {
+  const { container } = render(
+    <ExportHistoryButton memori={memori} history={history} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ExportHistoryButton unchanged with className', () => {
+  const { container } = render(
+    <ExportHistoryButton memori={memori} history={[]} className="test" />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ExportHistoryButton unchanged disabled', () => {
+  const { container } = render(
+    <ExportHistoryButton memori={memori} history={[]} disabled />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ExportHistoryButton unchanged with custom icon', () => {
+  const { container } = render(
+    <ExportHistoryButton
+      memori={memori}
+      history={history}
+      icon={<Download />}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ExportHistoryButton unchanged with custom button props', () => {
+  const { container } = render(
+    <ExportHistoryButton
+      memori={memori}
+      history={history}
+      icon={<Download />}
+      buttonClassName="test"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ExportHistoryButton unchanged with custom filename', () => {
+  const { container } = render(
+    <ExportHistoryButton
+      memori={memori}
+      history={[]}
+      filename="awanagana.txt"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ExportHistoryButton/ExportHistoryButton.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Memori, Message } from '@memori.ai/memori-api-client/dist/types';
+import { useTranslation } from 'react-i18next';
+import { Popover } from '@headlessui/react';
+import Button from '../ui/Button';
+import MessageIcon from '../icons/Message';
+import cx from 'classnames';
+
+import './ExportHistoryButton.css';
+
+export interface Props {
+  history: Message[];
+  memori: Memori;
+  icon?: React.ReactNode;
+  className?: string;
+  buttonClassName?: string;
+  align?: 'left' | 'right';
+  disabled?: boolean;
+  filename?: string;
+}
+
+const downloadFile = (text: string, filename = 'export-chat.txt') => {
+  const data = new Blob([text], { type: 'text/plain' });
+  const url = URL.createObjectURL(data);
+  const element = document.createElement('a');
+  element.setAttribute('href', url);
+  element.setAttribute('download', filename);
+  element.style.display = 'none';
+
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+};
+
+const ExportHistoryButton = ({
+  history,
+  memori,
+  className,
+  buttonClassName,
+  icon,
+  disabled = false,
+  align = 'right',
+  filename,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const text = `${t(
+    'write_and_speak.conversationStartedLabel'
+  )} ${new Intl.DateTimeFormat('it', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(new Date())}\n\n`.concat(
+    history
+      .map(m => `${m.fromUser ? 'YOU' : memori.name}: ${m.text}`)
+      .join('\n')
+  );
+
+  return (
+    <Popover
+      title={t('write_and_speak.exportChatHistoryMessage')}
+      className={cx('memori-export-history-button', className, {
+        'memori-export-history-button--align-left': align === 'left',
+      })}
+    >
+      {({ close }) => (
+        <>
+          <Popover.Button
+            disabled={disabled}
+            className={cx(
+              'memori-button',
+              'memori-button--circle',
+              'memori-button--icon-only',
+              buttonClassName,
+              {
+                'memori-button--disabled': disabled,
+                'memori-button--primary': !disabled,
+              }
+            )}
+          >
+            <div className="memori-button--icon">{icon || <MessageIcon />}</div>
+          </Popover.Button>
+
+          <Popover.Panel className="memori-export-history-button--panel">
+            <p>{t('write_and_speak.exportChatHistory')}</p>
+            <Button
+              primary
+              onClick={() =>
+                downloadFile(
+                  text,
+                  filename ||
+                    `${memori.name.replace(/\W+/g, '-')}-export-chat.txt`
+                )
+              }
+            >
+              {t('yes') || 'Yes'}
+            </Button>
+            <Button onClick={() => close()}>{t('no') || 'No'}</Button>
+          </Popover.Panel>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export default ExportHistoryButton;