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

package/LICENSE

@@ -0,0 +1,18 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2022 Memori Srl
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+

package/README.md

@@ -0,0 +1,55 @@
+# Memori React
+
+[![npm version](https://img.shields.io/github/package-json/v/memori-ai/memori-react)](https://www.npmjs.com/package/@memori.ai/memori-react)
+![Tests](https://github.com/memori-ai/memori-react/workflows/CI/badge.svg?branch=main)
+![TypeScript Support](https://img.shields.io/badge/TypeScript-Support-blue)
+
+Library to integrate a [Memori](https://memori.ai) in a React app.
+
+Platforms:
+
+- [MemoryTwin](https://app.memorytwin.com/en): consumer / creator platform
+- [TwinCreator](https://app.twincreator.com/en): developer-oriented platform
+
+## Work in progress
+
+This library is still in development and is not ready for production.
+
+## Installation
+
+```bash
+yarn add @memori.ai/memori-react
+```
+
+```bash
+npm install @memori.ai/memori-react
+```
+
+## Usage
+
+```tsx
+import Memori from '@memori.ai/memori-react';
+
+const App = () => (
+  <Memori
+    memoriName="Memori"
+    ownerUserName="nunziofiore"
+    tenantID="app.memorytwin.com"
+    apiURL="https://backend.memori.ai"
+    uiLang="it"
+    showShare
+  />
+);
+```
+
+### Props
+
+WIP
+
+### Customization
+
+WIP
+
+## See also
+
+- [memori-api-client](https://github.com/memori-ai/memori-api-client) - API client for Memori

package/dist/components/Auth/Auth.css

@@ -0,0 +1,57 @@
+.memori-auth-widget--form fieldset {
+    padding: 0;
+    border: 0;
+    margin: 0 0 1em;
+}
+
+.memori-auth-widget--form hr {
+    border-top: 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.memori-auth-widget--form label {
+    display: flex;
+    flex-direction: column;
+}
+
+input.memori-auth-widget--input {
+    min-height: 2.5rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.375rem;
+    appearance: none;
+    background: inherit;
+    font-size: 1rem;
+    outline: transparent solid 2px;
+    outline-offset: 2px;
+    padding-inline-end: 1rem;
+    padding-inline-start: 1rem;
+    transition-duration: 0.2s;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+}
+
+input.memori-auth-widget--input::placeholder {
+    color: #bdbdbd;
+}
+
+input.memori-auth-widget--input:hover {
+    border-color: #c0c0c0;
+}
+
+input.memori-auth-widget--input:focus {
+    border-color: var(--memori-primary);
+}
+
+.memori-auth-widget--token {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.memori-auth-widget--error {
+    padding: 1rem 1.5rem;
+    border: 1px solid currentColor;
+    border-radius: 10px;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    background-color: rgba(255, 235, 238, 0.5);
+    color: #f44336;
+}

package/dist/components/Auth/Auth.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import './Auth.css';
+export interface Props {
+    pwdOrTokens: null | 'password' | 'tokens';
+    setPwdOrTokens: (state: 'password' | 'tokens') => void;
+    onFinish?: (values: AuthInputs) => Promise<void>;
+    minimumNumberOfRecoveryTokens?: number;
+    showTokens?: boolean;
+    withModal?: boolean;
+}
+type AuthInputs = {
+    password?: string;
+    tokens?: string[];
+};
+export declare const AuthWidget: ({ pwdOrTokens, setPwdOrTokens, onFinish, minimumNumberOfRecoveryTokens, showTokens, withModal, }: Props) => JSX.Element;
+export default AuthWidget;

package/dist/components/Auth/Auth.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthWidget = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
+const Modal_1 = tslib_1.__importDefault(require("../ui/Modal"));
+const react_hook_form_1 = require("react-hook-form");
+const Plus_1 = tslib_1.__importDefault(require("../icons/Plus"));
+require("./Auth.css");
+function createArrayWithNumbers(length) {
+    return Array.from({ length }, (_, i) => i);
+}
+const AuthWidget = ({ pwdOrTokens, setPwdOrTokens, onFinish, minimumNumberOfRecoveryTokens = 1, showTokens = true, withModal = false, }) => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { register, handleSubmit, formState: { errors }, setError, } = (0, react_hook_form_1.useForm)();
+    const [numTokens, setNumTokens] = (0, react_1.useState)(1);
+    const [showModal, setShowModal] = (0, react_1.useState)(true);
+    const onSubmit = data => {
+        var _a, _b, _c;
+        if ((pwdOrTokens === 'password' && !((_a = data.password) === null || _a === void 0 ? void 0 : _a.length)) ||
+            (pwdOrTokens === 'tokens' &&
+                ((((_b = data === null || data === void 0 ? void 0 : data.tokens) === null || _b === void 0 ? void 0 : _b.length) || 0) < minimumNumberOfRecoveryTokens ||
+                    !((_c = data === null || data === void 0 ? void 0 : data.tokens) === null || _c === void 0 ? void 0 : _c.every(t => t.length))))) {
+            setError('tokens', {
+                type: 'minLength',
+                message: 'Tokens',
+            });
+            return;
+        }
+        if (onFinish) {
+            onFinish(data).then(() => {
+                setShowModal(false);
+            });
+        }
+    };
+    const form = (react_1.default.createElement("form", { name: "memoriAuth", onSubmit: handleSubmit(onSubmit), className: "memori-auth-widget--form" },
+        (pwdOrTokens === 'password' || !showTokens) && (react_1.default.createElement("fieldset", { className: "memori-auth-widget--password-fieldset" },
+            react_1.default.createElement("label", null,
+                "Password:",
+                ' ',
+                react_1.default.createElement("input", { className: "memori-auth-widget--input", required: true, type: "password", placeholder: "Password", ...register('password', { required: true }) })),
+            showTokens && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("hr", null),
+                react_1.default.createElement(Button_1.default, { outlined: true, onClick: () => setPwdOrTokens('tokens') }, t('auth.useRecoveryTokens') || 'Recovery tokens'))))),
+        pwdOrTokens === 'tokens' && showTokens && (react_1.default.createElement("fieldset", { className: "memori-auth-widget--tokens-fieldset", name: "tokens" },
+            react_1.default.createElement("legend", null,
+                t('auth.tokens'),
+                ": "),
+            createArrayWithNumbers(numTokens).map(idx => {
+                return (react_1.default.createElement("label", { className: "memori-auth-widget--token", key: idx },
+                    react_1.default.createElement("input", { type: "password", className: "memori-auth-widget--input", placeholder: "Recovery token", required: true, autoComplete: "off", ...register(`tokens.${idx}`, {
+                            required: true,
+                        }) })));
+            }),
+            react_1.default.createElement(Button_1.default, { onClick: () => setNumTokens(t => t + 1), className: "memori-auth-widget--token-add", icon: react_1.default.createElement(Plus_1.default, null) }, t('auth.addToken') || 'Add token'),
+            react_1.default.createElement("hr", null),
+            react_1.default.createElement(Button_1.default, { outlined: true, onClick: () => setPwdOrTokens('password') }, t('auth.usePassword') || 'Password'))),
+        ((_a = errors.tokens) === null || _a === void 0 ? void 0 : _a.type) === 'minLength' && (react_1.default.createElement("div", { className: "memori-auth-widget--error" },
+            t('auth.atLeast') || 'At least',
+            " ",
+            minimumNumberOfRecoveryTokens)),
+        !withModal && (react_1.default.createElement(Button_1.default, { htmlType: "submit", primary: true, className: "memori-auth-widget--submit" }, t('confirm') || 'Submit'))));
+    return withModal ? (react_1.default.createElement(Modal_1.default, { open: showModal, title: "Authentication", onClose: () => { }, closable: false, footer: react_1.default.createElement(Button_1.default, { htmlType: "submit", primary: true, className: "memori-auth-widget--submit" }, t('auth.submit') || 'Submit') }, form)) : (form);
+};
+exports.AuthWidget = AuthWidget;
+exports.default = exports.AuthWidget;
+//# sourceMappingURL=Auth.js.map

package/dist/components/Auth/Auth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Auth.js","sourceRoot":"","sources":["../../../src/components/Auth/Auth.tsx"],"names":[],"mappings":"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"}

package/dist/components/Auth/Auth.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './Auth';
+declare const meta: Meta;
+export default meta;
+export declare const Password: Story<Props>;
+export declare const WithTokens: Story<Props>;
+export declare const Tokens: Story<Props>;
+export declare const WithModal: Story<Props>;

package/dist/components/Auth/Auth.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithModal = exports.Tokens = exports.WithTokens = exports.Password = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Auth_1 = tslib_1.__importDefault(require("./Auth"));
+const meta = {
+    title: 'Auth Widget',
+    component: Auth_1.default,
+    argTypes: {
+        pwdOrTokens: {
+            control: {
+                type: 'select',
+                options: ['password', 'tokens'],
+            },
+        },
+        showTokens: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+const Template = args => {
+    const [pwdOrTokens, setPwdOrTokens] = (0, react_1.useState)(args.pwdOrTokens);
+    return (react_1.default.createElement(Auth_1.default, { ...args, pwdOrTokens: pwdOrTokens, setPwdOrTokens: setPwdOrTokens }));
+};
+const TemplateWithModal = args => {
+    const [pwdOrTokens, setPwdOrTokens] = (0, react_1.useState)(args.pwdOrTokens);
+    return (react_1.default.createElement(Auth_1.default, { ...args, withModal: true, pwdOrTokens: pwdOrTokens, setPwdOrTokens: setPwdOrTokens }));
+};
+exports.Password = Template.bind({});
+exports.Password.args = {
+    pwdOrTokens: 'password',
+    minimumNumberOfRecoveryTokens: 2,
+    showTokens: false,
+};
+exports.WithTokens = Template.bind({});
+exports.WithTokens.args = {
+    pwdOrTokens: 'password',
+    minimumNumberOfRecoveryTokens: 2,
+    showTokens: true,
+};
+exports.Tokens = Template.bind({});
+exports.Tokens.args = {
+    pwdOrTokens: 'tokens',
+    minimumNumberOfRecoveryTokens: 2,
+    showTokens: true,
+};
+exports.WithModal = TemplateWithModal.bind({});
+exports.WithModal.args = {
+    pwdOrTokens: 'password',
+    minimumNumberOfRecoveryTokens: 2,
+    showTokens: true,
+};
+//# sourceMappingURL=Auth.stories.js.map

package/dist/components/Auth/Auth.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Auth.stories.js","sourceRoot":"","sources":["../../../src/components/Auth/Auth.stories.tsx"],"names":[],"mappings":";;;;AAAA,uDAAwC;AAExC,0DAA2C;AAE3C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAU;IACrB,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;aAChC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;SACF;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC7B;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEpB,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE;IACpC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAC5C,IAAI,CAAC,WAAoC,CAC1C,CAAC;IAEF,OAAO,CACL,8BAAC,cAAU,OACL,IAAI,EACR,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAiB,IAAI,CAAC,EAAE;IAC7C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAC5C,IAAI,CAAC,WAAoC,CAC1C,CAAC;IAEF,OAAO,CACL,8BAAC,cAAU,OACL,IAAI,EACR,SAAS,QACT,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,gBAAQ,CAAC,IAAI,GAAG;IACd,WAAW,EAAE,UAAU;IACvB,6BAA6B,EAAE,CAAC;IAChC,UAAU,EAAE,KAAK;CAClB,CAAC;AAEW,QAAA,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,kBAAU,CAAC,IAAI,GAAG;IAChB,WAAW,EAAE,UAAU;IACvB,6BAA6B,EAAE,CAAC;IAChC,UAAU,EAAE,IAAI;CACjB,CAAC;AAEW,QAAA,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,cAAM,CAAC,IAAI,GAAG;IACZ,WAAW,EAAE,QAAQ;IACrB,6BAA6B,EAAE,CAAC;IAChC,UAAU,EAAE,IAAI;CACjB,CAAC;AAEW,QAAA,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,iBAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,UAAU;IACvB,6BAA6B,EAAE,CAAC;IAChC,UAAU,EAAE,IAAI;CACjB,CAAC"}

package/dist/components/Auth/Auth.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Auth/Auth.test.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Auth_1 = tslib_1.__importDefault(require("./Auth"));
+it('renders Auth unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Auth_1.default, { pwdOrTokens: "password", setPwdOrTokens: () => { }, minimumNumberOfRecoveryTokens: 2, showTokens: false, onFinish: () => Promise.resolve(), withModal: false }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Auth with tokens unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Auth_1.default, { pwdOrTokens: "password", setPwdOrTokens: () => { }, minimumNumberOfRecoveryTokens: 2, showTokens: true, onFinish: () => Promise.resolve(), withModal: false }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Auth on tokens unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Auth_1.default, { pwdOrTokens: "tokens", setPwdOrTokens: () => { }, minimumNumberOfRecoveryTokens: 2, showTokens: true, onFinish: () => Promise.resolve(), withModal: false }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Auth with modal unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Auth_1.default, { pwdOrTokens: "password", setPwdOrTokens: () => { }, minimumNumberOfRecoveryTokens: 2, showTokens: true, onFinish: () => Promise.resolve(), withModal: true }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=Auth.test.js.map

package/dist/components/Auth/Auth.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Auth.test.js","sourceRoot":"","sources":["../../../src/components/Auth/Auth.test.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,kDAAgD;AAChD,0DAA0B;AAE1B,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,cAAI,IACH,WAAW,EAAC,UAAU,EACtB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC,EACxB,6BAA6B,EAAE,CAAC,EAChC,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EACjC,SAAS,EAAE,KAAK,GAChB,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;IAC5C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,cAAI,IACH,WAAW,EAAC,UAAU,EACtB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC,EACxB,6BAA6B,EAAE,CAAC,EAChC,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EACjC,SAAS,EAAE,KAAK,GAChB,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;IAC1C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,cAAI,IACH,WAAW,EAAC,QAAQ,EACpB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC,EACxB,6BAA6B,EAAE,CAAC,EAChC,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EACjC,SAAS,EAAE,KAAK,GAChB,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,cAAI,IACH,WAAW,EAAC,UAAU,EACtB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC,EACxB,6BAA6B,EAAE,CAAC,EAChC,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EACjC,SAAS,EAAE,IAAI,GACf,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC"}

package/dist/components/Avatar/Avatar.css

@@ -0,0 +1,151 @@
+@media (min-width: 870px) {
+    .memori--blob-container {
+        position: relative;
+        top: 50%;
+        width: 100%;
+        margin-bottom: auto;
+    }
+
+    .memori--blob-container .memori-blob {
+        top: 50%;
+        left: 50%;
+        width: 70%;
+        max-width: 300px;
+        height: 70%;
+        max-height: 300px;
+    }
+
+    .memori--blob-container .memori-blob figure {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+    }
+
+    .memori--blob-container .memori-blob .mainDiv {
+        overflow: hidden;
+        width: 100%;
+        height: auto;
+        padding-top: 100%;
+    }
+}
+
+@media (max-width: 870px) {
+    .memori--blob-container {
+        position: static;
+        display: none;
+        width: 100%;
+    }
+
+    .memori--blob-container .memori-blob {
+        position: relative;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori--blob-container {
+        display: none;
+    }
+}
+
+.memori--avatar-wrapper {
+    z-index: 100;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori--avatar-wrapper.hidden {
+    display: none;
+}
+
+@media (max-width: 870px) {
+
+    .memori--avatar-wrapper div,
+    .memori--avatar-wrapper canvas,
+    .memori--avatar-wrapper model-viewer {
+        width: 150px !important;
+        height: 150px !important;
+    }
+
+    .memori--avatar-wrapper model-viewer {
+        margin-top: 2rem;
+    }
+
+    .memori--avatar-wrapper div {
+        top: 1rem;
+    }
+}
+
+@media (orientation: landscape) and (max-width: 870px) {
+    .memori--avatar-wrapper {
+        display: none;
+    }
+}
+
+.memori--avatar-wrapper .avatar-loader figure {
+    width: 100%;
+    height: 300px;
+}
+
+.memori--avatar-wrapper .avatar-loader figure img {
+    width: 250px;
+    height: 250px;
+}
+
+@media (max-width: 870px) {
+    .memori--avatar-wrapper .avatar-loader figure img {
+        width: 150px;
+        height: 150px;
+    }
+}
+
+.memori--avatar-wrapper .avatar-loader figcaption {
+    max-height: 50px;
+    font-size: 0.8em;
+    text-align: center;
+}
+
+.memori--avatar-toggle {
+    position: absolute;
+    z-index: 1001;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    text-align: right;
+}
+
+@media (min-width: 871px) {
+    .memori--avatar-toggle {
+        display: none;
+    }
+}
+
+.memori--avatar-toggle button.memori-button {
+    color: var(--memori-primary, #1890ff);
+}
+
+.memori--avatar-toggle .memori--avatar-toggle-text {
+    font-size: 0.85em;
+}
+
+.memori--avatar-link-to-integrations {
+    position: absolute;
+    z-index: 101;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 2rem;
+}
+
+@media (max-width: 768px) {
+    .memori--avatar-link-to-integrations {
+        display: none;
+    }
+}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Integration, Memori, Tenant } from '@memori.ai/memori-api-client/dist/types';
+import './Avatar.css';
+export interface Props {
+    memori: Memori;
+    integration?: Integration;
+    integrationConfig?: {
+        [key: string]: any;
+    };
+    tenant?: Tenant;
+    instruct?: boolean;
+    hasUserActivatedSpeak?: boolean;
+    avatar3dVisible?: boolean;
+    setAvatar3dVisible: (visible: boolean) => void;
+    isPlayingAudio?: boolean;
+    baseUrl?: string;
+}
+declare const Avatar: React.FC<Props>;
+export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ErrorBoundary_1 = tslib_1.__importDefault(require("../ErrorBoundary/ErrorBoundary"));
+const Tooltip_1 = tslib_1.__importDefault(require("../ui/Tooltip"));
+const AvatarView_1 = tslib_1.__importDefault(require("../AvatarView"));
+const media_1 = require("../../helpers/media");
+const Blob_1 = tslib_1.__importDefault(require("../Blob/Blob"));
+const ModelViewer_1 = tslib_1.__importDefault(require("../CustomGLBModelViewer/ModelViewer"));
+const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
+const react_i18next_1 = require("react-i18next");
+const Eye_1 = tslib_1.__importDefault(require("../icons/Eye"));
+const EyeInvisible_1 = tslib_1.__importDefault(require("../icons/EyeInvisible"));
+const Edit_1 = tslib_1.__importDefault(require("../icons/Edit"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+require("./Avatar.css");
+const Avatar = ({ memori, integration, integrationConfig, tenant, instruct = false, avatar3dVisible = false, setAvatar3dVisible, hasUserActivatedSpeak = false, isPlayingAudio = false, baseUrl, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [isClient, setIsClient] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        ((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar) === 'readyplayerme' ||
+            (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar) === 'customglb') &&
+            (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatarURL) ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, classnames_1.default)('memori--avatar-wrapper', {
+                    hidden: !avatar3dVisible,
+                }) },
+                isClient && integrationConfig.avatar === 'readyplayerme' && (react_1.default.createElement(ErrorBoundary_1.default, { fallback: react_1.default.createElement("div", { className: "memori--blob-container" }, isClient && (react_1.default.createElement(Blob_1.default, { avatar: (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar) === 'userAvatar' &&
+                            memori.avatarURL &&
+                            memori.avatarURL.length > 0
+                            ? (0, media_1.getResourceUrl)({
+                                type: 'avatar',
+                                tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                                resourceURI: memori.avatarURL,
+                                baseURL: baseUrl,
+                            })
+                            : undefined }))) },
+                    react_1.default.createElement(AvatarView_1.default, { url: integrationConfig.avatarURL, fallbackImg: (0, media_1.getResourceUrl)({
+                            type: 'avatar',
+                            tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                            resourceURI: memori.avatarURL,
+                            baseURL: baseUrl,
+                        }), headMovement: true, eyeBlink: true, speaking: isPlayingAudio, style: {
+                            width: '300px',
+                            height: '300px',
+                            backgroundColor: 'none',
+                            borderRadius: '100%',
+                            boxShadow: 'none',
+                        } }))),
+                isClient && integrationConfig.avatar === 'customglb' && (react_1.default.createElement(ModelViewer_1.default, { poster: (0, media_1.getResourceUrl)({
+                        type: 'avatar',
+                        tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                        resourceURI: memori.avatarURL,
+                        baseURL: baseUrl,
+                    }), src: integrationConfig.avatarURL, alt: "" }))),
+            react_1.default.createElement("div", { className: "memori--avatar-toggle" },
+                react_1.default.createElement(Button_1.default, { ghost: true, onClick: () => setAvatar3dVisible(!avatar3dVisible), icon: avatar3dVisible ? react_1.default.createElement(EyeInvisible_1.default, null) : react_1.default.createElement(Eye_1.default, null) },
+                    react_1.default.createElement("span", { className: "memori--avatar-toggle-text" }, avatar3dVisible ? t('hide') : t('show')))))) : (react_1.default.createElement("div", { className: "memori--blob-container" }, isClient && (react_1.default.createElement(Blob_1.default, { avatar: (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar) === 'userAvatar' &&
+                memori.avatarURL &&
+                memori.avatarURL.length > 0
+                ? (0, media_1.getResourceUrl)({
+                    type: 'avatar',
+                    tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                    resourceURI: memori.avatarURL,
+                    baseURL: baseUrl,
+                })
+                : undefined })))),
+        instruct && !hasUserActivatedSpeak && memori.isGiver && (tenant === null || tenant === void 0 ? void 0 : tenant.id) && (react_1.default.createElement("div", { className: "memori--avatar-link-to-integrations" },
+            react_1.default.createElement("a", { className: "memori-button memori-button--circle memori-button--outlined", href: `https://${tenant.id}/${memori.culture === 'it-IT' ? 'it' : 'en'}/${memori.ownerUserName}/${memori.name}/integrations${(integration === null || integration === void 0 ? void 0 : integration.integrationID)
+                    ? `?integration=${integration.integrationID}&openAvatarModal=true`
+                    : ''}` },
+                react_1.default.createElement(Tooltip_1.default, { content: t('widgetgoToIntegrationsToCustomizeAvatar') },
+                    react_1.default.createElement("span", { className: "memori-button--icon" },
+                        react_1.default.createElement(Edit_1.default, null))))))));
+};
+exports.default = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './Avatar';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const AvatarInBlob: Story<Props>;
+export declare const CustomGLBModel: Story<Props>;
+export declare const ReadyPlayerMeAvatar: Story<Props>;