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

package/src/components/ChatBubble/ChatBubble.css

@@ -0,0 +1,159 @@
+.memori-chat--bubble-container {
+    display: flex;
+    align-items: flex-end;
+    padding-right: 10px;
+    padding-left: 10px;
+    margin-bottom: 5px;
+}
+
+.memori-chat--bubble-initial {
+    width: 80%;
+    height: 1px;
+    flex-shrink: 0;
+    margin: 1rem auto;
+    background: #c5c6d1;
+}
+
+.memori-chat--bubble {
+    display: inline-flex;
+    max-width: 90%;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px 16px;
+    border-radius: 16px 16px 16px 0;
+    margin: 10px auto 5px 10px;
+    margin-bottom: 5px;
+    background: var(--memori-chat-bubble-bg, #ffffff60);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+    color: #141515;
+    line-height: 1.4em;
+}
+
+.memori-chat--bubble #wave {
+    position: relative;
+    width: 100px;
+    margin-right: auto;
+    margin-left: auto;
+    text-align: center;
+}
+
+.memori-chat--bubble #wave .dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 3px;
+    animation: 'wave' 1.5s linear infinite;
+    background: var(--memori-primary);
+}
+
+.memori-chat--bubble #wave .dot:nth-child(2) {
+    animation-delay: -1.3s;
+}
+
+.memori-chat--bubble #wave .dot:nth-child(3) {
+    animation-delay: -1.1s;
+}
+
+.memori-chat--bubble p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.memori-chat--bubble p+p {
+    margin-top: 0.5em;
+}
+
+.memori-chat--bubble.memori-chat--user-bubble {
+    border-radius: 16px 16px 0 16px;
+    margin: 10px 10px 5px auto;
+    background: var(--memori-primary);
+    box-shadow: 0 1px 6px 0 #d1d3de, 0 1px 3px 0 #c5c6d1;
+    color: var(--memori-primary-text);
+}
+
+.memori-chat--bubble-avatar {
+    display: flex;
+    overflow: hidden;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: inset 0 0 0.25rem rgba(100, 100, 100, 0.2);
+}
+
+.memori-chat--bubble-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.memori-chat--bubble-avatar svg {
+    padding: 0.33rem;
+    fill: #666;
+    font-size: 1.5rem;
+}
+
+.transition {
+    transition-property: all;
+}
+
+.ease-in-out {
+    transition-timing-function: ease-in-out;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.scale-075 {
+    transform: scale(0.75);
+}
+
+.scale-1 {
+    transform: scale(1);
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-1 {
+    opacity: 1;
+}
+
+.translate-x-15 {
+    transform: translateX(15px);
+}
+
+.translate-x--15 {
+    transform: translateX(-15px);
+}
+
+.translate-x-30 {
+    transform: translateX(30px);
+}
+
+.translate-x--30 {
+    transform: translateX(-30px);
+}
+
+.translate-x-0 {
+    transform: translateX(0);
+}
+
+@keyframes wave {
+
+    0%,
+    60%,
+    100% {
+        transform: initial;
+    }
+
+    30% {
+        transform: translateY(-10px);
+    }
+}

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { memori, tenant } from '../../mocks/data';
+import ChatBubble, { Props } from './ChatBubble';
+
+const meta: Meta = {
+  title: 'Widget/Chat bubble',
+  component: ChatBubble,
+  argTypes: {
+    fromUser: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    text: {
+      control: {
+        type: 'text',
+      },
+    },
+    initial: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <ChatBubble {...args} />;
+
+// 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,
+  tenant,
+  message: {
+    fromUser: false,
+    text:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    translatedText:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+};
+
+export const FromUser = Template.bind({});
+FromUser.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: true,
+    text:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    translatedText:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+};

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ChatBubble from './ChatBubble';
+import { memori, tenant } from '../../mocks/data';
+
+it('renders ChatBubble unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      message={{
+        fromUser: false,
+        text:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+        initial: false,
+        translatedText:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatBubble with user msg unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      message={{
+        fromUser: true,
+        text:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+        initial: false,
+        translatedText:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ChatBubble/ChatBubble.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import cx from 'classnames';
+import {
+  Memori,
+  Message,
+  Tenant,
+} from '@memori.ai/memori-api-client/dist/types';
+import { Transition } from '@headlessui/react';
+import { getResourceUrl } from '../../helpers/media';
+import User from '../icons/User';
+
+import './ChatBubble.css';
+
+export interface Props {
+  message: Message;
+  memori: Memori;
+  tenant?: Tenant;
+  baseUrl?: string;
+}
+
+const ChatBubble: React.FC<Props> = ({ message, memori, tenant, baseUrl }) => (
+  <Transition
+    show
+    appear
+    as="div"
+    className={cx('memori-chat--bubble-container', {
+      'memori-chat--bubble-from-user': !!message.fromUser,
+    })}
+  >
+    {message.initial && <div className="memori-chat--bubble-initial" />}
+    {!message.fromUser && (
+      <Transition.Child
+        as="picture"
+        className="memori-chat--bubble-avatar"
+        enter="transition ease-in-out duration-300"
+        enterFrom={`opacity-0 scale-075 ${
+          message.fromUser ? 'translate-x-15' : 'translate-x--15'
+        }`}
+        enterTo="opacity-1 scale-1 translate-x-0"
+        leave="transition ease-in-out duration-300"
+        leaveFrom="opacity-1 scale-1 translate-x-0"
+        leaveTo={`opacity-0 scale-075 ${
+          message.fromUser ? 'translate-x-15' : 'translate-x--15'
+        }`}
+      >
+        <source
+          src={getResourceUrl({
+            type: 'avatar',
+            tenantID: tenant?.id,
+            resourceURI: memori.avatarURL,
+            baseURL: baseUrl,
+          })}
+        />
+        <img
+          className="memori-chat--bubble-avatar-img"
+          alt={memori.name}
+          src={
+            memori.avatarURL && memori.avatarURL.length > 0
+              ? getResourceUrl({
+                  type: 'avatar',
+                  tenantID: tenant?.id,
+                  resourceURI: memori.avatarURL,
+                  baseURL: baseUrl,
+                })
+              : getResourceUrl({
+                  tenantID: tenant?.id,
+                  type: 'avatar',
+                  baseURL: baseUrl || 'https://app.twincreator.com',
+                })
+          }
+        />
+      </Transition.Child>
+    )}
+    <Transition.Child
+      as="div"
+      className={cx('memori-chat--bubble', {
+        'memori-chat--user-bubble': !!message.fromUser,
+      })}
+      enter="transition ease-in-out duration-300"
+      enterFrom={`opacity-0 scale-09 translate-x-${
+        message.fromUser ? '30' : '-30'
+      }`}
+      enterTo="opacity-1 scale-1 translate-x-0"
+      leave="transition ease-in-out duration-300"
+      leaveFrom="opacity-1 scale-1 translate-x-0"
+      leaveTo={`opacity-0 scale-09  translate-x-${
+        message.fromUser ? '30' : '-30'
+      }`}
+    >
+      {(message.translatedText || message.text)
+        .split(/\r\n|\r|\n/)
+        .map((row, index) => (
+          <p key={index}>{row}</p>
+        ))}
+    </Transition.Child>
+
+    {message.fromUser && (
+      <Transition.Child
+        as="div"
+        className="memori-chat--bubble-avatar"
+        enter="transition ease-in-out duration-300"
+        enterFrom={`opacity-0 scale-075 ${
+          message.fromUser ? 'translate-x-15' : 'translate-x--15'
+        }`}
+        enterTo="opacity-1 scale-1 translate-x-0"
+        leave="transition ease-in-out duration-300"
+        leaveFrom="opacity-1 scale-1 translate-x-0"
+        leaveTo={`opacity-0 scale-075 ${
+          message.fromUser ? 'translate-x-15' : 'translate-x--15'
+        }`}
+      >
+        <User />
+      </Transition.Child>
+    )}
+  </Transition>
+);
+
+export default ChatBubble;

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

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ChatBubble unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container"
+  >
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+    >
+      <source
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+      <img
+        alt="Memori"
+        class="memori-chat--bubble-avatar-img"
+        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+      />
+    </picture>
+    <div
+      class="memori-chat--bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+    >
+      <p>
+        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ChatBubble with user msg unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+  >
+    <div
+      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+    >
+      <p>
+        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </p>
+    </div>
+    <div
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/ChatInputs/ChatInputs.css

@@ -0,0 +1,21 @@
+.memori-chat-inputs {
+    position: relative;
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    margin: 0;
+}
+
+.memori-chat-inputs .memori-upload-menu+.memori-send-on-enter-menu {
+    margin-left: 0.33rem;
+}
+
+.memori-chat-inputs .memori--conversation-button {
+    background: #fff;
+    color: var(--memori-text-color, #000);
+}

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ChatInputs, { Props } from './ChatInputs';
+import { dialogState } from '../../mocks/data';
+
+const meta: Meta = {
+  title: 'Widget/Chat inputs (footer)',
+  component: ChatInputs,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [userMessage, setUserMessage] = React.useState(args.userMessage);
+
+  return (
+    <div style={{ paddingTop: '10rem' }}>
+      <ChatInputs
+        {...args}
+        userMessage={userMessage}
+        onChangeUserMessage={setUserMessage}
+      />
+    </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 = {
+  userMessage: '',
+  dialogState,
+  sendMessage: (msg: string) => console.log(msg),
+  onTextareaBlur: () => {},
+  onTextareaFocus: () => {},
+  onTextareaPressEnter: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  userMessage: 'Suspendisse sit amet volutpat velit.',
+  dialogState,
+  sendMessage: (msg: string) => console.log(msg),
+  onTextareaBlur: () => {},
+  onTextareaFocus: () => {},
+  onTextareaPressEnter: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const WithLongText = Template.bind({});
+WithLongText.args = {
+  userMessage:
+    '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.',
+  dialogState,
+  sendMessage: (msg: string) => console.log(msg),
+  onTextareaBlur: () => {},
+  onTextareaFocus: () => {},
+  onTextareaPressEnter: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const Instruct = Template.bind({});
+Instruct.args = {
+  instruct: true,
+  userMessage: 'Suspendisse sit amet volutpat velit.',
+  dialogState: {
+    ...dialogState,
+    acceptsMedia: true,
+  },
+  sendMessage: (msg: string) => console.log(msg),
+  onTextareaBlur: () => {},
+  onTextareaFocus: () => {},
+  onTextareaPressEnter: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  dialogState: {
+    ...dialogState,
+    state: 'X3',
+  },
+  userMessage: 'Suspendisse sit amet volutpat velit.',
+  sendMessage: (msg: string) => console.log(msg),
+  onTextareaBlur: () => {},
+  onTextareaFocus: () => {},
+  onTextareaPressEnter: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};

package/src/components/ChatInputs/ChatInputs.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ChatInputs from './ChatInputs';
+import { dialogState } from '../../mocks/data';
+
+it('renders ChatInputs unchanged', () => {
+  const { container } = render(
+    <ChatInputs
+      dialogState={dialogState}
+      userMessage=""
+      onChangeUserMessage={jest.fn()}
+      sendMessage={jest.fn()}
+      onTextareaPressEnter={jest.fn()}
+      onTextareaFocus={jest.fn()}
+      onTextareaBlur={jest.fn()}
+      setAttachmentsMenuOpen={jest.fn()}
+      setSendOnEnter={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatInputs with user message unchanged', () => {
+  const { container } = render(
+    <ChatInputs
+      userMessage="Lorem ipsum"
+      onChangeUserMessage={jest.fn()}
+      dialogState={dialogState}
+      sendMessage={jest.fn()}
+      onTextareaPressEnter={jest.fn()}
+      onTextareaFocus={jest.fn()}
+      onTextareaBlur={jest.fn()}
+      setAttachmentsMenuOpen={jest.fn()}
+      setSendOnEnter={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatInputs on instruct unchanged', () => {
+  const { container } = render(
+    <ChatInputs
+      userMessage="Lorem ipsum"
+      onChangeUserMessage={jest.fn()}
+      dialogState={{
+        ...dialogState,
+        acceptsMedia: true,
+      }}
+      sendMessage={jest.fn()}
+      onTextareaPressEnter={jest.fn()}
+      onTextareaFocus={jest.fn()}
+      onTextareaBlur={jest.fn()}
+      setAttachmentsMenuOpen={jest.fn()}
+      setSendOnEnter={jest.fn()}
+      instruct
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatInputs disabled unchanged', () => {
+  const { container } = render(
+    <ChatInputs
+      userMessage="Lorem ipsum"
+      onChangeUserMessage={jest.fn()}
+      dialogState={{
+        ...dialogState,
+        state: 'X3',
+      }}
+      sendMessage={jest.fn()}
+      onTextareaPressEnter={jest.fn()}
+      onTextareaFocus={jest.fn()}
+      onTextareaBlur={jest.fn()}
+      setAttachmentsMenuOpen={jest.fn()}
+      setSendOnEnter={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});