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

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

@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders MediaWidget as empty unchanged 1`] = `
+<div>
+  <div
+    class="memori-media-widget"
+  />
+</div>
+`;
+
+exports[`renders MediaWidget with hints unchanged 1`] = `
+<div>
+  <div
+    class="memori-media-widget"
+  >
+    <ul
+      class="memori-media--hints"
+    >
+      <li
+        class="ease-out duration-500 opacity-0 translate-y-1"
+      >
+        <button
+          class="memori-media--hint memori-button memori-button--primary memori-button--rounded memori-button--padded"
+        >
+          All right
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`renders MediaWidget with links unchanged 1`] = `
+<div>
+  <div
+    class="memori-media-widget"
+  >
+    <div
+      class="memori-link-items"
+    >
+      <div
+        class="memori-link-items--grid"
+      >
+        <div
+          class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+        >
+          <a
+            class="memori-link-item--link"
+            href="https://memori.ai/en"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <div
+              class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+            >
+              <div
+                class="memori-spin"
+              >
+                <div
+                  class="memori-card--cover"
+                >
+                  <div
+                    class="memori-link-item--card-cover-icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="memori-link-item--icon"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 1024 1024"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="memori-card--content"
+                >
+                  <h3
+                    class="memori-card--title"
+                  >
+                    Memori Srl
+                  </h3>
+                  <div
+                    class="memori-card--children"
+                  />
+                </div>
+                <div
+                  class="memori-spin--spinner"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori-loading-icon"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 1024 1024"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders MediaWidget with media unchanged 1`] = `
+<div>
+  <div
+    class="memori-media-widget"
+  >
+    <div
+      class="memori-media-items"
+    >
+      <div
+        class="memori-media-items--grid"
+      >
+        <div
+          class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
+        >
+          <a
+            class="memori-media-item--link"
+            href="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Game Cover"
+          >
+            <div
+              class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
+            >
+              <div
+                class="memori-spin"
+              >
+                <div
+                  class="memori-card--cover"
+                >
+                  <picture
+                    class="memori-media-item--figure"
+                  >
+                    <source
+                      srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, /images/memoriAvatar.png, https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, "
+                      type="image/jpeg"
+                    />
+                    <img
+                      alt="Game Cover"
+                      src="data:image/png;base64,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"
+                    />
+                    <figcaption
+                      class="memori-media-item--figure-caption"
+                    >
+                      Game Cover
+                    </figcaption>
+                  </picture>
+                </div>
+                <div
+                  class="memori-card--content"
+                >
+                  <div
+                    class="memori-card--children"
+                  />
+                </div>
+                <div
+                  class="memori-spin--spinner"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori-loading-icon"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 1024 1024"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/MemoriWidget/MemoriWidget.css

@@ -0,0 +1,199 @@
+.memori-widget {
+    width: 100%;
+    font-family: 'Exo 2', sans-serif;
+}
+
+.memori-widget,
+.memori-widget * {
+    box-sizing: border-box;
+}
+
+.memori-widget .memori-spin {
+    height: 100%;
+}
+
+.memori--grid {
+    display: flex;
+    height: calc(100% - 104px);
+    align-items: center;
+    justify-content: space-between;
+}
+
+@media (max-width: 870px) {
+    .memori--grid {
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        overflow-x: visible;
+        overflow-y: scroll;
+    }
+}
+
+.memori--preview .memori--grid {
+    height: calc(100% - 104px + 64px);
+}
+
+.memori--embed .memori--grid {
+    height: calc(100% - 56px);
+}
+
+.memori--embed .memori--grid .memori--chat-history {
+    max-height: 100%;
+    overflow-x: visible;
+    overflow-y: scroll;
+}
+
+.memori--grid-column {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.memori--grid-column-left {
+    position: relative;
+    width: 50%;
+    margin-right: 1rem;
+}
+
+@media (max-width: 870px) {
+    .memori--grid-column-left {
+        width: 100%;
+        height: auto;
+        max-height: 200px;
+        margin-right: 0;
+        margin-bottom: 1rem;
+    }
+}
+
+.memori--grid-column-right {
+    width: 50%;
+    margin-left: 1rem;
+}
+
+@media (max-width: 870px) {
+    .memori--grid-column-right {
+        width: 100%;
+        margin-left: 0;
+    }
+}
+
+@media (max-width: 870px) {
+    .memori--active .memori--grid-column-right {
+        overflow-x: hidden;
+        overflow-y: scroll;
+    }
+}
+
+.memori--select {
+    margin-top: 1rem;
+}
+
+.memori--select label {
+    margin: 0.5rem 0 0.25rem;
+    color: var(--dark-gray);
+    font-size: 0.8em;
+}
+
+.memori--select select {
+    display: block;
+    width: 100%;
+}
+
+.memori--global-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    height: 100svh;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.memori--global-background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    height: 100svh;
+    background-color: #eee;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: blur(var(--memori-blur-background, 0));
+}
+
+
+.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);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    font-size: 0.7em;
+}
+
+@media (max-width: 870px) {
+    .memori--powered-by {
+        top: 3rem;
+        bottom: auto;
+    }
+}
+
+.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;
+}
+
+.memori--powered-by img {
+    max-width: 2rem;
+    max-height: 2rem;
+    margin-right: 0.25rem;
+}
+
+.memori--powered-by p {
+    margin-bottom: 0;
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+.memori--conversation-button {
+    z-index: 1;
+}
+
+.memori--conversation-button svg {
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+}
+
+.memori--conversation-button+.memori--conversation-button {
+    margin-left: 0.33rem;
+}
+
+.memori--conversation-button:hover,
+.memori--conversation-button:active,
+.memori--conversation-button:focus {
+    border-color: var(--memori-primary) !important;
+}
+
+.memori--conversation-button:active,
+.memori--conversation-button:focus {
+    box-shadow: 0 0.2rem 0.33rem #b5b6c4 !important;
+    color: var(--memori-primary) !important;
+}

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { memori, integration, tenant } from '../../mocks/data';
+import MemoriWidget, { Props } from './MemoriWidget';
+
+const meta: Meta = {
+  title: 'Widget',
+  component: MemoriWidget,
+  argTypes: {
+    showShare: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <MemoriWidget {...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,
+};
+
+export const WithPosition = Template.bind({});
+WithPosition.args = {
+  memori: {
+    ...memori,
+    needsPosition: true,
+  },
+  tenant,
+};
+
+export const WithPublicPageIntegration = Template.bind({});
+WithPublicPageIntegration.args = {
+  memori,
+  tenant,
+  integration: {
+    ...integration,
+    customData: JSON.stringify({
+      ...JSON.parse(integration.customData ?? '{}'),
+      avatar: 'readyplayerme',
+      avatarURL:
+        'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb' +
+        new Date(Date.now()).getTime(),
+    }),
+  },
+};
+
+export const ShowInstruct = Template.bind({});
+ShowInstruct.args = {
+  memori: {
+    ...memori,
+    isGiver: true,
+  },
+  tenant,
+  showInstruct: true,
+};
+
+export const ShowShare = Template.bind({});
+ShowShare.args = {
+  memori,
+  tenant,
+  showShare: true,
+};