@memori.ai/memori-react 1.1.0 → 1.2.1

package/src/components/PoweredBy/PoweredBy.css

@@ -0,0 +1,45 @@
+.memori--powered-by {
+    position: absolute;
+    z-index: 1000;
+    bottom: 1rem;
+    left: 0;
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: 0.25rem 0.5rem;
+    border-radius: 10px;
+    background-color: var(--memori-inner-bg, transparent);
+    box-shadow: var(--memori-button-box-shadow);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    font-size: 0.7em;
+}
+
+@media (max-width: 768px) {
+    .memori--powered-by {
+        top: 3.5rem;
+        bottom: auto;
+    }
+}
+
+.memori--powered-by img {
+    max-width: 2rem;
+    max-height: 2rem;
+    margin-right: 0.25rem;
+}
+
+.memori--powered-by p {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+.memori--powered-by a {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    text-decoration: underline;
+}
+
+.memori--powered-by a:hover,
+.memori--powered-by a:focus {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    opacity: 0.8;
+    text-decoration: underline;
+}

package/src/components/PoweredBy/PoweredBy.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, Story } from '@storybook/react';
+import PoweredBy, { Props } from './PoweredBy';
+
+import './PoweredBy.css';
+
+const meta: Meta = {
+  title: 'Powered by',
+  component: PoweredBy,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <PoweredBy {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  userLang: 'en',
+};
+
+export const MemoryTwin = Template.bind({});
+MemoryTwin.args = {
+  tenant: {
+    id: 'memorytwin',
+    theme: 'memorytwin',
+    config: {
+      name: 'MemoryTwin',
+      showNewUser: true,
+      requirePosition: false,
+      feedbackURL: '',
+    },
+  },
+};
+
+export const Italian = Template.bind({});
+Italian.args = {
+  userLang: 'it',
+};

package/src/components/PoweredBy/PoweredBy.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PoweredBy from './PoweredBy';
+
+it('renders PoweredBy unchanged', () => {
+  const { container } = render(<PoweredBy />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,34 @@
+import { Tenant } from '@memori.ai/memori-api-client/dist/types';
+
+export interface Props {
+  tenant?: Tenant;
+  userLang?: string;
+}
+
+const PoweredBy = ({ tenant, userLang = 'en' }: Props) => {
+  const tenantId =
+    tenant?.theme === 'memorytwin' ? 'memorytwin' : 'twincreator';
+
+  return (
+    <div className="memori--powered-by">
+      <img
+        src={`https://app.twincreator.com/images/${tenantId}/logo.png`}
+        alt=""
+      />
+      <p>
+        Powered by{' '}
+        <a
+          href={`https://app.${tenantId}.com/${
+            userLang ? userLang.toLowerCase() : ''
+          }`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {tenantId === 'memorytwin' ? 'MemoryTwin' : 'TwinCreator'}
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default PoweredBy;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders PoweredBy unchanged 1`] = `
+<div>
+  <div
+    class="memori--powered-by"
+  >
+    <img
+      alt=""
+      src="https://app.twincreator.com/images/twincreator/logo.png"
+    />
+    <p>
+      Powered by
+       
+      <a
+        href="https://app.twincreator.com/en"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        TwinCreator
+      </a>
+    </p>
+  </div>
+</div>
+`;

package/src/components/StartPanel/StartPanel.css

@@ -7,7 +7,7 @@
     height: 2rem;
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--ant-primary-color);
+    border: 1.5px solid var(--memori-primary);
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
@@ -29,7 +29,7 @@
 }
 
 .memori--start-panel .memori--start-panel-title {
-    color: var(--memori-text-color, var(--ant-primary-color)) !important;
+    color: var(--memori-text-color, var(--memori-primary)) !important;
 }
 
 .memori--start-panel .memori--start-panel-description {
@@ -132,7 +132,7 @@
     height: 2rem;
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--ant-primary-color);
+    border: 1.5px solid var(--memori-primary);
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);

package/src/components/icons/icons.stories.tsx

@@ -48,7 +48,7 @@ const IconsShowcase = (iconProps: IconProps) => {
 };
 
 const meta: Meta = {
-  title: 'Icons',
+  title: 'Definitions/Icons',
   component: IconsShowcase,
   argTypes: {
     children: {

package/src/components/layouts/Default.tsx

@@ -9,6 +9,7 @@ export interface Props {
   integrationStyle?: JSX.Element | null;
   integrationBackground?: JSX.Element | null;
   changeMode?: JSX.Element | null;
+  poweredBy?: JSX.Element | null;
   sessionId?: string;
   hasUserActivatedSpeak?: boolean;
   showInstruct?: boolean;
@@ -27,6 +28,7 @@ const Default: React.FC<Props> = ({
   hasUserActivatedSpeak,
   showInstruct = false,
   loading = false,
+  poweredBy,
 }) => (
   <>
     {integrationStyle}
@@ -44,6 +46,8 @@ const Default: React.FC<Props> = ({
         <div className="memori--grid-column memori--grid-column-right">
           {sessionId && hasUserActivatedSpeak ? chat : startPanel}
         </div>
+
+        {poweredBy}
       </div>
     </Spin>
   </>

package/src/components/ui/Button.css

@@ -1,13 +1,3 @@
-:root,
-#root {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-    --memori-button-radius: 5px;
-    --memori-button-padding: 0.5rem 1.5rem;
-    --memori-button-border-color: #d9d9d9;
-    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
-}
-
 .memori-button {
     display: inline-flex;
     align-items: center;

package/src/components/ui/Checkbox.css

@@ -1,8 +1,4 @@
-:root,
-#root {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-}
+
 
 .memori-checkbox {
     display: inline-flex;

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import '../../styles.css';
+
+const ColorDisplay = ({ color }: { color: string }) => (
+  <div
+    style={{
+      marginTop: '1rem',
+    }}
+  >
+    <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+      --{color}
+    </dt>
+    <dd>
+      <div
+        className={`color-${color}`}
+        style={{
+          width: '100px',
+          height: '100px',
+          boxShadow: '0 0 0.5rem rgba(0, 0, 0, 0.1)',
+          borderRadius: '10px',
+          background: `var(--${color})`,
+        }}
+        title={color}
+      />
+    </dd>
+  </div>
+);
+
+const colors = [
+  'memori-primary',
+  'memori-primary-text',
+  'memori-inner-bg',
+  'memori-chat-bubble-bg',
+  'memori-text-color',
+  'memori-button-bg',
+  'memori-button-text',
+  'memori-button-border-color',
+];
+
+const variables = [
+  'memori-inner-content-pad',
+  'memori-button-padding',
+  'memori-drawer--width',
+  'memori-drawer--width--md',
+  'memori-drawer--width--lg',
+  'memori-modal--width',
+  'memori-modal--width--md',
+];
+
+const Definitions = () => (
+  <div>
+    <h2>Colors</h2>
+    <dl>
+      {colors.map(color => (
+        <ColorDisplay key={color} color={color} />
+      ))}
+    </dl>
+    <h2>Others</h2>
+    <dl>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}
+      >
+        <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+          <p>--memori-button-box-shadow +</p>
+          <p>--memori-button-radius</p>
+        </dt>
+        <dd>
+          <div
+            style={{
+              boxShadow: 'var(--memori-button-box-shadow)',
+              border: '1px solid #f3f3f3',
+              width: '100px',
+              height: '100px',
+              borderRadius: 'var(--memori-button-radius)',
+            }}
+          />
+        </dd>
+      </div>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}
+      >
+        <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+          --memori-blur-background
+        </dt>
+        <dd>
+          <div
+            style={{
+              backgroundColor: '#eee',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: 'cover',
+              backgroundImage:
+                'url(https://app.twincreator.com/images/twincreator/og-image.png)',
+              filter: 'blur(var(--memori-blur-background, 0))',
+              width: '200px',
+              height: '100px',
+              borderRadius: '10px',
+            }}
+          />
+        </dd>
+      </div>
+    </dl>
+    <ul
+      style={{
+        padding: 0,
+        margin: 0,
+        listStyle: 'none',
+      }}
+    >
+      {variables.map(v => (
+        <li
+          key={v}
+          style={{
+            marginTop: '1rem',
+          }}
+        >
+          <p
+            style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}
+          >
+            --{v}
+          </p>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default {
+  title: 'Definitions/CSS Variables',
+  component: Definitions,
+} as ComponentMeta<typeof Definitions>;
+
+const Template: ComponentStory<typeof Definitions> = () => <Definitions />;
+export const Default = Template.bind({});

package/src/styles.css

@@ -31,5 +31,33 @@
 @import url('./components/Snippet/Snippet.css');
 @import url('./components/StartPanel/StartPanel.css');
 @import url('./components/UploadMenu/UploadMenu.css');
+@import url('./components/PoweredBy/PoweredBy.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');
+
+memori-client,
+memori-client #root,
+body.sb-show-main #root,
+.memori-widget {
+    font-family: 'Exo 2', sans-serif;
+    font-size: 16px;
+
+    --memori-primary: rgb(102, 103, 171);
+    --memori-primary-text: #fff;
+    --memori-inner-content-pad: 1rem;
+    --memori-inner-bg: transparent;
+    --memori-chat-bubble-bg: #ffffff60;
+    --memori-text-color: #000;
+    --memori-button-bg: #fff;
+    --memori-button-text: #000;
+    --memori-button-padding: 0.5rem 1.5rem;
+    --memori-button-border-color: #d9d9d9;
+    --memori-button-radius: 5px;
+    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+    --memori-blur-background: 0px;
+    --memori-drawer--width: 100%;
+    --memori-drawer--width--md: 80%;
+    --memori-drawer--width--lg: 60%;
+    --memori-modal--width: 100%;
+    --memori-modal--width--md: 80%;
+}