@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/layouts/totem.css

@@ -0,0 +1,148 @@
+.memori-widget.memori-layout-totem {
+    height: 100vh !important;
+}
+
+.memori-widget.memori-layout-totem .memori--global-background.no-background-image {
+    background: linear-gradient(#333, #eee);
+}
+
+.memori-widget > .memori-spin.memori-totem-layout {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    /* --memori-text-color: #fff; */
+}
+
+.memori-totem-layout--header {
+    text-align: right;
+}
+
+.memori-totem-layout--avatar {
+    flex: 1;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper {
+    position: fixed;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100%;
+}
+
+.memori-totem-layout .memori-header {
+    position: relative;
+    z-index: 100;
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    flex-direction: column;
+}
+
+.memori-totem-layout .memori-header .memori-share-button,
+.memori-totem-layout .memori-header .memori-header--button + .memori-header--button {
+    margin-top: 0.25rem;
+    margin-left: 0;
+}
+
+.memori-totem-layout .memori-chat--cover {
+    display: none;
+}
+
+.memori-totem-layout .memori--cover {
+    padding: 0;
+    background: none;
+}
+
+.memori-totem-layout .memori--powered-by {
+    top: 0;
+    bottom: auto;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper > div {
+    overflow: visible !important;
+    /* width: 100% !important;
+    height: 100% !important; */
+    width: auto !important;
+    height: 90vh !important;
+    max-height: 90vh;
+    border-radius: 0;
+    transform: scale(1.7) translate(0px, 10vh);
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper canvas {
+    width: auto !important;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
+}
+
+.memori-totem-layout--controls {
+    position: relative;
+    z-index: 5;
+}
+
+.memori-totem-layout--controls .memori--start-panel,
+.memori-totem-layout--controls .memori-chat--history,
+.memori-totem-layout--controls .memori-chat--content {
+    background: transparent;
+}
+
+.memori-totem-layout--controls .memori--start-panel,
+.memori-totem-layout--controls .memori-chat--wrapper {
+    width: 80vw;
+    max-width: 800px;
+    padding: 1rem;
+    margin: 0 auto;
+}
+
+.memori-totem-layout .memori--avatar-toggle {
+    display: none;
+    width: 100%;
+    justify-content: center;
+}
+
+.memori-totem-layout .memori--title,
+.memori-totem-layout .memori--description,
+.memori-totem-layout .memori--needsPosition {
+    color: var(--memori-text-color);
+}
+
+.memori-totem-layout .memori--global-background-image {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0.8));
+}
+
+.memori-widget.memori-controls-center .memori-totem-layout--controls  {
+    position: absolute;
+    top: 40%;
+    width: 100%;
+}
+
+.memori-totem-layout .memori-chat-inputs--mic {
+    font-size: 125%;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper > div canvas + div {
+    position: absolute !important;
+    width: 100%;
+    height: 100%;
+    transform: none !important;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    transform: none !important;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
+    text-align: center;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
+    background: none;
+}

package/src/components/ui/Button.css

@@ -118,6 +118,10 @@
     line-height: 1;
 }
 
+.memori-button--icon svg[fill="none"] {
+    fill: none;
+}
+
 .memori-button--with-icon .memori-button--icon {
     margin-right: 0.5em;
 }

package/src/components/ui/Checkbox.tsx

@@ -5,6 +5,8 @@ export interface Props extends React.HTMLAttributes<HTMLInputElement> {
   label: string;
   checked?: boolean;
   disabled?: boolean;
+  name?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const Checkbox: FC<Props> = ({
@@ -13,6 +15,8 @@ const Checkbox: FC<Props> = ({
   disabled = false,
   checked,
   children,
+  onChange,
+  name,
   ...props
 }) => (
   <label
@@ -24,9 +28,11 @@ const Checkbox: FC<Props> = ({
       <input
         type="checkbox"
         {...props}
+        name={name}
         disabled={disabled}
         defaultChecked={checked}
         className="memori-checkbox--input"
+        onChange={onChange}
       />
       <span className="memori-checkbox--inner" />
     </span>

package/src/components/ui/Drawer.css

@@ -1,6 +1,6 @@
 .memori-drawer {
     position: relative;
-    z-index: 60;
+    z-index: 1000;
 }
 
 .memori-drawer--backdrop {
@@ -34,7 +34,9 @@
     position: relative;
     width: var(--memori-drawer--width, 100%);
     height: 100%;
-    padding: 1.5rem 2rem;
+    height: 100vh;
+    box-sizing: border-box;
+    padding: 3rem 2rem 1.5rem;
     margin-right: 0;
     margin-left: auto;
     background-color: #fff;
@@ -44,6 +46,7 @@
 @media (min-width: 768px) {
     .memori-drawer--panel {
         width: var(--memori-drawer--width--md, 80%);
+        padding-top: 1.5rem;
     }
 }
 
@@ -77,16 +80,35 @@
     padding: 0.5rem;
 }
 
+@media (max-width: 767px) {
+    .memori-drawer--close {
+        left: 0.5rem;
+    }
+}
+
 .memori-drawer--close button {
     border-color: #fff;
     color: #fff;
 }
 
+@media (max-width: 767px) {
+    .memori-drawer--close button {
+        color: #000;
+    }
+}
+
 .memori-drawer--panel-left .memori-drawer--close {
     right: -3.5rem;
     left: auto;
 }
 
+@media (max-width: 767px) {
+    .memori-drawer--panel-left .memori-drawer--close {
+        right: 0.5rem;
+        left: auto;
+    }
+}
+
 .memori-drawer--footer {
     position: sticky;
     bottom: 0;

package/src/components/ui/Select.css

@@ -0,0 +1,135 @@
+.memori-select {
+    max-width: 240px;
+    min-height: 38px;
+}
+
+.memori-select--button {
+    position: relative;
+    width: 100%;
+    min-height: 38px;
+    padding-top: .5rem;
+    padding-right: 2.5rem;
+    padding-bottom: .5rem;
+    padding-left: .75rem;
+    border: 1px solid #e5e7eb;
+    border-radius: .5rem;
+    background: #fff;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
+    cursor: pointer;
+    text-align: left;
+}
+
+.memori-select--button:focus {
+    border-color: #cbd5e0;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori-select--button:focus-visible {
+    border-color: #63b3ed;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori-select--button:hover {
+    border-color: #e2e8f0;
+}
+
+.memori-select--button:active {
+    border-color: #e2e8f0;
+}
+
+.memori-select--button:disabled {
+    border-color: #e2e8f0;
+    background-color: #f7fafc;
+    color: #a0aec0;
+    cursor: not-allowed;
+}
+
+@media (min-width: 640px) {
+    .memori-select--button {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+.memori-select--label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+}
+
+.memori-select--value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-select--value.memori-select--value-placeholder {
+    color: #a0aec0;
+}
+
+.memori-select--icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding-right: .5rem;
+    pointer-events: none;
+}
+
+.memori-select--icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: rgb(156 163 175/1);
+}
+
+ul.memori-select--options {
+    position: absolute;
+    z-index: 1;
+    overflow: auto;
+    width: 100%;
+    max-width: min(18rem, 30%);
+    max-height: 15rem;
+    padding-top: .25rem;
+    padding-right: 0;
+    padding-bottom: .25rem;
+    padding-left: 0;
+    border-radius: .375rem;
+    margin-top: .25rem;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    background: #fff;
+    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
+    list-style: none;
+}
+
+@media (min-width: 640px) {
+    .memori-select--options {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+li.memori-select--option {
+    position: relative;
+    padding-top: .5rem;
+    padding-right: 1rem;
+    padding-bottom: .5rem;
+    padding-left: 1rem;
+    color: rgb(17 24 39/1);
+    cursor: pointer;
+    user-select: none;
+}
+
+li.memori-select--option:hover,
+li.memori-select--option:focus {
+    background-color: #f7fafc;
+}
+
+li.memori-select--option:focus {
+    outline: 2px solid #63b3ed;
+    outline-offset: 2px;
+}
+

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Select, { Props } from './Select';
+import './Select.css';
+
+const meta: Meta = {
+  title: 'UI/Select',
+  component: Select,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <Select {...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 = {
+  label: 'Select me',
+  options: [
+    { value: '1', label: '1' },
+    { value: '2', label: '2' },
+    { value: '3', label: '3' },
+  ],
+};
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  label: 'Select me',
+  placeholder: 'Select me',
+  options: [
+    { value: '1', label: '1' },
+    { value: '2', label: '2' },
+    { value: '3', label: '3' },
+  ],
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  label: 'Select me',
+  value: '2',
+  options: [
+    { value: '1', label: '1' },
+    { value: '2', label: '2' },
+    { value: '3', label: '3' },
+  ],
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: `You can't select me`,
+  options: [
+    { value: '1', label: '1' },
+    { value: '2', label: '2' },
+    { value: '3', label: '3' },
+  ],
+  value: 2,
+  disabled: true,
+};

package/src/components/ui/Select.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Select from './Select';
+
+it('renders Select unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      onChange={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Select with placeholder unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      placeholder="Select me"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      onChange={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Select with value unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      value="2"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      onChange={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Select with custom value display unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      value="2"
+      displayValue="Two"
+      options={[
+        { value: '1', label: 'One' },
+        { value: '2', label: 'Two' },
+        { value: '3', label: 'Three' },
+      ]}
+      onChange={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Select disabled unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      value="2"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      disabled
+      onChange={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Select.tsx

@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+import cx from 'classnames';
+import { Listbox, Transition } from '@headlessui/react';
+import SelectIcon from '../icons/SelectIcon';
+
+export interface Props<T = any> {
+  className?: string;
+  value?: T;
+  displayValue?: string;
+  onChange: (value: T) => void;
+  options: { value: T; label: any }[];
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+}
+
+const Select = ({
+  className,
+  value,
+  displayValue,
+  options,
+  onChange,
+  disabled = false,
+  label,
+  placeholder,
+}: Props) => {
+  return (
+    <div className={cx('memori-select', className)}>
+      <Listbox
+        value={value}
+        onChange={value => {
+          onChange(value);
+        }}
+        disabled={disabled}
+        name="day"
+      >
+        <Listbox.Label className="memori-select--label">{label}:</Listbox.Label>
+        <Listbox.Button aria-label={label} className="memori-select--button">
+          <span
+            className={cx('memori-select--value', {
+              'memori-select--value-placeholder': !value,
+            })}
+          >
+            {value ? displayValue || value : placeholder}
+          </span>
+          <span className="memori-select--icon">
+            <SelectIcon />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="memori-select--options">
+            {options.map(opt => (
+              <Listbox.Option
+                key={opt.value}
+                value={opt.value}
+                className="memori-select--option"
+              >
+                {opt.label}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </Listbox>
+    </div>
+  );
+};
+
+export default Select;

package/src/components/ui/Spin.css

@@ -21,7 +21,9 @@
 
 .memori-spin--spinner svg {
     width: 30%;
+    max-width: 5rem;
     height: 30%;
+    max-height: 5rem;
 }
 
 .memori-spin--primary svg {