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

package/dist/components/MediaWidget/MediaItemWidget.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderMediaItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const media_1 = require("../../helpers/media");
+const translations_1 = require("../../helpers/translations");
+const constants_1 = require("../../helpers/constants");
+const ModelViewer_1 = tslib_1.__importDefault(require("../CustomGLBModelViewer/ModelViewer"));
+const Snippet_1 = tslib_1.__importDefault(require("../Snippet/Snippet"));
+const Card_1 = tslib_1.__importDefault(require("../ui/Card"));
+const File_1 = tslib_1.__importDefault(require("../icons/File"));
+const FilePdf_1 = tslib_1.__importDefault(require("../icons/FilePdf"));
+const FileExcel_1 = tslib_1.__importDefault(require("../icons/FileExcel"));
+const FileWord_1 = tslib_1.__importDefault(require("../icons/FileWord"));
+const react_2 = require("@headlessui/react");
+require("./MediaItemWidget.css");
+const RenderMediaItem = ({ item, sessionID, tenantID, preview = false, }) => {
+    switch (item.mimeType) {
+        case 'image/jpeg':
+        case 'image/png':
+        case 'image/jpg':
+        case 'image/gif':
+            return (react_1.default.createElement("a", { className: "memori-media-item--link", href: item.url, target: "_blank", rel: "noopener noreferrer", title: item.title },
+                react_1.default.createElement(Card_1.default, { hoverable: true, className: "memori-media-item--card memori-media-item--image", cover: react_1.default.createElement("picture", { className: "memori-media-item--figure" },
+                        !preview && (react_1.default.createElement("source", { srcSet: [
+                                (0, media_1.getResourceUrl)({
+                                    resourceURI: item.url,
+                                    sessionID,
+                                    tenantID,
+                                }),
+                                (0, media_1.getResourceUrl)({
+                                    resourceURI: item.content,
+                                    sessionID,
+                                    tenantID,
+                                }),
+                                item.url,
+                                item.content,
+                            ].join(', '), type: item.mimeType })),
+                        react_1.default.createElement("img", { alt: item.title, src: "data:image/png;base64,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" }),
+                        item.title && (react_1.default.createElement("figcaption", { className: "memori-media-item--figure-caption" }, item.title))) })));
+        case 'application/msword':
+        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+            return (react_1.default.createElement("a", { className: "memori-media-item--link", href: item.url, target: "_blank", rel: "noopener noreferrer", title: item.title },
+                react_1.default.createElement(Card_1.default, { hoverable: true, cover: react_1.default.createElement(FileWord_1.default, { className: "memori-media-item--icon" }), title: item.title })));
+        case 'application/vnd.ms-excel':
+        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+            return (react_1.default.createElement("a", { className: "memori-media-item--link", href: item.url, target: "_blank", rel: "noopener noreferrer", title: item.title },
+                react_1.default.createElement(Card_1.default, { hoverable: true, cover: react_1.default.createElement(FileExcel_1.default, { className: "memori-media-item--icon" }), title: item.title })));
+        case 'application/pdf':
+            return (react_1.default.createElement("a", { className: "memori-media-item--link", href: item.url, target: "_blank", rel: "noopener noreferrer", title: item.title },
+                react_1.default.createElement(Card_1.default, { hoverable: true, cover: react_1.default.createElement(FilePdf_1.default, { className: "memori-media-item--icon" }), title: item.title })));
+        case 'video/mp4':
+        case 'video/avi':
+        case 'video/mpeg':
+            return (react_1.default.createElement("a", { className: "memori-media-item--link", href: item.url, target: "_blank", rel: "noopener noreferrer", title: item.title },
+                react_1.default.createElement(Card_1.default, { hoverable: true, cover: react_1.default.createElement("video", { style: { width: '100%', height: '100%' }, controls: true, src: item.url, title: item.title }), title: item.title })));
+        case 'audio/mpeg3':
+        case 'audio/wav':
+        case 'audio/mpeg':
+            return (react_1.default.createElement("a", { className: "memori-media-item--link", href: item.url, target: "_blank", rel: "noopener noreferrer", title: item.title },
+                react_1.default.createElement(Card_1.default, { hoverable: true, cover: react_1.default.createElement("audio", { style: { width: '100%', height: '100%' }, controls: true, src: item.url }), title: item.title })));
+        case 'model/gltf-binary':
+            return (react_1.default.createElement(ModelViewer_1.default, { src: item.url, alt: "", poster: "data:image/png;base64,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" }));
+        default:
+            return (react_1.default.createElement("a", { className: "memori-media-item--link", href: item.url, target: "_blank", rel: "noopener noreferrer", title: item.title },
+                react_1.default.createElement(Card_1.default, { hoverable: true, cover: react_1.default.createElement(File_1.default, { className: "memori-media-item--icon" }), title: item.title })));
+    }
+};
+exports.RenderMediaItem = RenderMediaItem;
+const MediaItemWidget = ({ items, sessionID, tenantID, translateTo, }) => {
+    const [media, setMedia] = (0, react_1.useState)(items);
+    const translateMediaCaptions = (0, react_1.useCallback)(async () => {
+        if (!translateTo)
+            return;
+        const translatedMedia = await Promise.all((items !== null && items !== void 0 ? items : []).map(async (media) => {
+            var _a;
+            if (media.title) {
+                try {
+                    const tTitle = await (0, translations_1.getTranslation)(media.title, translateTo);
+                    return { ...media, title: (_a = tTitle.text) !== null && _a !== void 0 ? _a : media.title };
+                }
+                catch (e) {
+                    console.error(e);
+                    return media;
+                }
+            }
+            else {
+                return media;
+            }
+        }));
+        setMedia(translatedMedia);
+    }, [translateTo, items]);
+    (0, react_1.useEffect)(() => {
+        if (translateTo)
+            translateMediaCaptions();
+    }, [translateTo, translateMediaCaptions]);
+    (0, react_1.useEffect)(() => {
+        let executableScripts = items.filter(m => { var _a; return m.mimeType === 'text/javascript' && !!((_a = m.properties) === null || _a === void 0 ? void 0 : _a.executable); });
+        executableScripts.forEach(s => {
+            var _a;
+            try {
+                new Function((_a = s.content) !== null && _a !== void 0 ? _a : '')();
+            }
+            catch (e) {
+                console.error(e);
+            }
+        });
+    }, []);
+    return (react_1.default.createElement(react_2.Transition, { appear: true, show: true, as: "div", className: "memori-media-items" },
+        react_1.default.createElement("div", { className: "memori-media-items--grid" }, media
+            .filter(m => {
+            var _a;
+            return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.executable) &&
+                !constants_1.prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType);
+        })
+            .sort((a, b) => {
+            return a.creationTimestamp > b.creationTimestamp
+                ? 1
+                : a.creationTimestamp < b.creationTimestamp
+                    ? -1
+                    : 0;
+        })
+            .map((item, index) => (react_1.default.createElement(react_2.Transition.Child, { as: "div", className: "memori-media-item", key: item.url + '&index=' + index, enter: `ease-out duration-500 delay-${index * 100}`, enterFrom: "opacity-0 scale-95", enterTo: "opacity-1 scale-100", leave: "ease-in duration-300", leaveFrom: "opacity-1 scale-100", leaveTo: "opacity-0 scale-95" },
+            react_1.default.createElement(exports.RenderMediaItem, { sessionID: sessionID, tenantID: tenantID, item: {
+                    ...item,
+                    title: item.title,
+                    url: item.url,
+                    content: item.content,
+                } }))))),
+        media
+            .filter(m => {
+            var _a;
+            return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.executable) &&
+                constants_1.prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType);
+        })
+            .map(medium => (react_1.default.createElement(react_2.Transition.Child, { as: "div", className: "memori-media-item--snippet", key: medium.mediumID, enter: "ease-out duration-500", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-1 translate-y-0", leave: "ease-in duration-300", leaveFrom: "opacity-1", leaveTo: "opacity-0" },
+            react_1.default.createElement(Snippet_1.default, { key: medium.mediumID, medium: medium })))),
+        media
+            .filter(m => { var _a; return m.mimeType === 'text/css' && !!((_a = m.properties) === null || _a === void 0 ? void 0 : _a.executable); })
+            .map(medium => (react_1.default.createElement("style", { key: medium.mediumID, dangerouslySetInnerHTML: { __html: medium.content || '' } })))));
+};
+exports.default = MediaItemWidget;
+//# sourceMappingURL=MediaItemWidget.js.map

package/dist/components/MediaWidget/MediaItemWidget.js.map

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

package/dist/components/MediaWidget/MediaItemWidget.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './MediaItemWidget';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const ImagesGrid: Story<Props>;

package/dist/components/MediaWidget/MediaItemWidget.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagesGrid = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const MediaItemWidget_1 = tslib_1.__importDefault(require("./MediaItemWidget"));
+const meta = {
+    title: 'Media Widget/Media',
+    component: MediaItemWidget_1.default,
+    argTypes: {
+        translateTo: {
+            control: {
+                type: 'select',
+                items: ['IT', 'EN', 'DE', 'FR', 'ES', 'PT', 'RU', 'ZH'],
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+const Template = args => react_1.default.createElement(MediaItemWidget_1.default, { ...args });
+exports.Default = Template.bind({});
+exports.Default.args = {
+    items: [
+        {
+            mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+            mimeType: 'text/javascript',
+            title: 'Snippet',
+            content: "console.log('Hello World!');",
+        },
+        {
+            mediumID: '95226d7e-7bae-465e-8b80-995587bb5972',
+            mimeType: 'image/png',
+            title: 'Image',
+            url: 'https://picsum.photos/200/300',
+            content: 'https://picsum.photos/200/300',
+        },
+        {
+            mediumID: '95226d7e-7bae-465e-8b80-995587bb5973',
+            mimeType: 'application/pdf',
+            title: 'PDF',
+            url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+            content: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+        },
+        {
+            mediumID: '95226d7e-7bae-465e-8b80-995587bb5974',
+            mimeType: 'video/mp4',
+            title: 'Video',
+            url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+            content: 'https://www.w3schools.com/html/mov_bbb.mp4',
+        },
+        {
+            mediumID: '95226d7e-7bae-465e-8b80-995587bb5975',
+            mimeType: 'audio/mpeg',
+            title: 'Audio',
+            url: 'https://www.w3schools.com/html/horse.mp3',
+            content: 'https://www.w3schools.com/html/horse.mp3',
+        },
+        {
+            mediumID: '95226d7e-7bae-465e-8b80-995587bb5976',
+            mimeType: 'application/msword',
+            title: 'Word',
+            url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+            content: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+        },
+        {
+            mediumID: '95226d7e-7bae-465e-8b80-995587bb5977',
+            mimeType: 'application/vnd.ms-excel',
+            title: 'Excel',
+            url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+            content: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+        },
+    ],
+};
+exports.ImagesGrid = Template.bind({});
+exports.ImagesGrid.args = {
+    items: Array.from({ length: 9 }, (_, i) => ({
+        mediumID: `95226d7e-7bae-465e-8b80-995587bb597${i}`,
+        mimeType: 'image/png',
+        title: `Image ${i}`,
+        url: `https://picsum.photos/${i % 2 ? '200' : '300'}/${i % 3 ? '300' : '200'}?random=${i}`,
+    })),
+};
+//# sourceMappingURL=MediaItemWidget.stories.js.map

package/dist/components/MediaWidget/MediaItemWidget.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaItemWidget.stories.js","sourceRoot":"","sources":["../../../src/components/MediaWidget/MediaItemWidget.stories.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAE1B,gFAA2D;AAE3D,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,yBAAe;IAC1B,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;aACxD;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,CAAC,8BAAC,yBAAe,OAAK,IAAI,GAAI,CAAC;AAIxD,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE;QACL;YACE,QAAQ,EAAE,sCAAsC;YAChD,QAAQ,EAAE,iBAAiB;YAC3B,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,8BAA8B;SACxC;QACD;YACE,QAAQ,EAAE,sCAAsC;YAChD,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,+BAA+B;YACpC,OAAO,EAAE,+BAA+B;SACzC;QACD;YACE,QAAQ,EAAE,sCAAsC;YAChD,QAAQ,EAAE,iBAAiB;YAC3B,KAAK,EAAE,KAAK;YACZ,GAAG,EACD,yEAAyE;YAC3E,OAAO,EACL,yEAAyE;SAC5E;QACD;YACE,QAAQ,EAAE,sCAAsC;YAChD,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,4CAA4C;YACjD,OAAO,EAAE,4CAA4C;SACtD;QACD;YACE,QAAQ,EAAE,sCAAsC;YAChD,QAAQ,EAAE,YAAY;YACtB,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,0CAA0C;YAC/C,OAAO,EAAE,0CAA0C;SACpD;QACD;YACE,QAAQ,EAAE,sCAAsC;YAChD,QAAQ,EAAE,oBAAoB;YAC9B,KAAK,EAAE,MAAM;YACb,GAAG,EACD,yEAAyE;YAC3E,OAAO,EACL,yEAAyE;SAC5E;QACD;YACE,QAAQ,EAAE,sCAAsC;YAChD,QAAQ,EAAE,0BAA0B;YACpC,KAAK,EAAE,OAAO;YACd,GAAG,EACD,yEAAyE;YAC3E,OAAO,EACL,yEAAyE;SAC5E;KACF;CACF,CAAC;AAEW,QAAA,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,kBAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1C,QAAQ,EAAE,sCAAsC,CAAC,EAAE;QACnD,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,SAAS,CAAC,EAAE;QACnB,GAAG,EAAE,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IACjD,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAClB,WAAW,CAAC,EAAE;KACf,CAAC,CAAC;CACJ,CAAC"}

package/dist/components/MediaWidget/MediaItemWidget.test.d.ts

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

package/dist/components/MediaWidget/MediaItemWidget.test.js

@@ -0,0 +1,90 @@
+"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 data_1 = require("../../mocks/data");
+const MediaItemWidget_1 = tslib_1.__importDefault(require("./MediaItemWidget"));
+it('renders MediaItemWidget unchanged with no media', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [], sessionID: data_1.sessionID }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaItemWidget unchanged with img', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [data_1.medium] }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaItemWidget unchanged with img and sessionID', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [data_1.medium], sessionID: data_1.sessionID }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaItemWidget with imgs in correct order (creation date)', () => {
+    let now = new Date().toISOString();
+    let past = new Date('01/01/1970').toISOString();
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [
+            {
+                ...data_1.medium,
+                url: 'https://memori.ai/now',
+                mediumID: 'now',
+                creationTimestamp: now,
+            },
+            { ...data_1.medium, url: 'https://memori.ai/medium' },
+            {
+                ...data_1.medium,
+                url: 'https://memori.ai/past',
+                mediumID: 'past',
+                creationTimestamp: past,
+            },
+        ] }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaItemWidget unchanged with js snippet to show', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [
+            {
+                mediumID: 'a669fadb-12c0-469b-9b6c-34db22d371ca',
+                mimeType: 'text/javascript',
+                title: 'Snippet',
+                content: 'console.log("Hello World!");',
+            },
+        ] }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaItemWidget unchanged with js snippet to exec', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [
+            {
+                mediumID: 'a669fadb-12c0-469b-9b6c-34db22d371ca',
+                mimeType: 'text/javascript',
+                title: 'Snippet',
+                content: 'console.log("Hello World!");',
+                properties: {
+                    executable: true,
+                },
+            },
+        ] }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaItemWidget unchanged with css snippet to show', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [
+            {
+                mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247927',
+                mimeType: 'text/css',
+                title: 'Snippet',
+                content: 'body{\n  background-color: #f00;\n}',
+            },
+        ] }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaItemWidget unchanged with css snippet to exec', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaItemWidget_1.default, { items: [
+            {
+                mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247927',
+                mimeType: 'text/css',
+                title: 'Snippet',
+                content: 'body{\n  background-color: #f00;\n}',
+                properties: {
+                    executable: true,
+                },
+            },
+        ] }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=MediaItemWidget.test.js.map

package/dist/components/MediaWidget/MediaItemWidget.test.js.map

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

package/dist/components/MediaWidget/MediaWidget.css

@@ -0,0 +1,121 @@
+.actionButton {
+    display: flex;
+    align-items: center;
+    padding: 10px 30px;
+    border-radius: 5px;
+    background-color: var(--ant-primary-color);
+    color: var(--ant-primary-text);
+    transition: all 0.5s ease;
+}
+
+.actionButton:hover {
+    border-color: var(--ant-primary-color) !important;
+    background-color: var(--ant-primary-color);
+    color: var(--light-gray) !important;
+    filter: brightness(1.08);
+}
+
+.actionButton:disabled {
+    background-color: lightgray !important;
+}
+
+.memori-media--hints {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-left: 0;
+    margin-top: 2rem;
+    list-style: none;
+}
+
+.memori-media--hints li {
+    margin-bottom: 0.5rem;
+}
+
+.memori-media--hints li+li {
+    margin-left: 0.5rem;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-500 {
+    transition-duration: 500ms;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.scale-95 {
+    transform: scale(0.95);
+}
+
+.scale-100 {
+    transform: scale(1);
+}
+
+.translate-y-1 {
+    transform: translateY(1em);
+}
+
+.translate-y-0 {
+    transform: translateY(0);
+}
+
+.delay-100 {
+    transition-delay: 100ms;
+}
+
+.delay-200 {
+    transition-delay: 200ms;
+}
+
+.delay-300 {
+    transition-delay: 300ms;
+}
+
+.delay-400 {
+    transition-delay: 400ms;
+}
+
+.delay-500 {
+    transition-delay: 500ms;
+}
+
+.delay-600 {
+    transition-delay: 600ms;
+}
+
+.delay-700 {
+    transition-delay: 700ms;
+}
+
+.delay-800 {
+    transition-delay: 800ms;
+}
+
+.delay-900 {
+    transition-delay: 900ms;
+}
+
+.delay-1000 {
+    transition-delay: 1000ms;
+}

package/dist/components/MediaWidget/MediaWidget.d.ts

@@ -0,0 +1,14 @@
+import { Medium, TranslatedHint } from '@memori.ai/memori-api-client/dist/types';
+import React from 'react';
+import './MediaWidget.css';
+export interface Props {
+    hints?: TranslatedHint[];
+    links?: Medium[];
+    media?: Medium[];
+    simulateUserPrompt?: (item: string, translatedItem?: string) => void;
+    sessionID?: string;
+    baseUrl?: string;
+    translateTo?: string;
+}
+declare const MediaWidget: React.FC<Props>;
+export default MediaWidget;

package/dist/components/MediaWidget/MediaWidget.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
+const LinkItemWidget_1 = tslib_1.__importDefault(require("./LinkItemWidget"));
+const MediaItemWidget_1 = tslib_1.__importDefault(require("./MediaItemWidget"));
+const react_2 = require("@headlessui/react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+require("./MediaWidget.css");
+const MediaWidget = ({ hints = [], links = [], media = [], simulateUserPrompt = () => { }, sessionID, baseUrl, translateTo, }) => {
+    const [showHints, setShowHints] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        setShowHints(true);
+    }, [hints]);
+    return (react_1.default.createElement("div", { className: "memori-media-widget" },
+        (media === null || media === void 0 ? void 0 : media.length) > 0 && (react_1.default.createElement(MediaItemWidget_1.default, { items: media, sessionID: sessionID, translateTo: translateTo })),
+        (links === null || links === void 0 ? void 0 : links.length) > 0 && react_1.default.createElement(LinkItemWidget_1.default, { items: links, baseUrl: baseUrl }),
+        (hints === null || hints === void 0 ? void 0 : hints.length) > 0 && showHints && (react_1.default.createElement(react_2.Transition, { appear: true, show: true, as: "ul", className: "memori-media--hints" }, hints.map((item, index) => (react_1.default.createElement(react_2.Transition.Child, { as: "li", key: item.text + index, enter: "ease-out duration-500", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-1 translate-y-0", leave: "ease-in duration-300", leaveFrom: "opacity-1", leaveTo: "opacity-0" },
+            react_1.default.createElement(Button_1.default, { key: item.text + index, className: (0, classnames_1.default)('memori-media--hint'), primary: true, onClick: () => {
+                    simulateUserPrompt(item.originalText, item.text);
+                    setShowHints(false);
+                }, onTouchEnd: () => {
+                    simulateUserPrompt(item.originalText, item.text);
+                    setShowHints(false);
+                } }, item.text))))))));
+};
+exports.default = MediaWidget;
+//# sourceMappingURL=MediaWidget.js.map

package/dist/components/MediaWidget/MediaWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaWidget.js","sourceRoot":"","sources":["../../../src/components/MediaWidget/MediaWidget.tsx"],"names":[],"mappings":";;;AAIA,uDAAmD;AACnD,kEAAkC;AAClC,8EAA8C;AAC9C,gFAAgD;AAChD,6CAA+C;AAC/C,oEAA4B;AAE5B,6BAA2B;AAY3B,MAAM,WAAW,GAAoB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,EAAE,EACV,kBAAkB,GAAG,GAAG,EAAE,GAAE,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,WAAW,GACL,EAAE,EAAE;IACV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,uCAAK,SAAS,EAAC,qBAAqB;QACjC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC,IAAI,CACpB,8BAAC,yBAAe,IACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,CACH;QACA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC,IAAI,8BAAC,wBAAc,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QACvE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC,IAAI,SAAS,IAAI,CACjC,8BAAC,kBAAU,IAAC,MAAM,QAAC,IAAI,QAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,qBAAqB,IAC5D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,8BAAC,kBAAU,CAAC,KAAK,IACf,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,IAAI,CAAC,IAAI,GAAG,KAAK,EACtB,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAC,yBAAyB,EACjC,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,WAAW,EACrB,OAAO,EAAC,WAAW;YAEnB,8BAAC,gBAAM,IACL,GAAG,EAAE,IAAI,CAAC,IAAI,GAAG,KAAK,EACtB,SAAS,EAAE,IAAA,oBAAE,EAAC,oBAAoB,CAAC,EACnC,OAAO,QACP,OAAO,EAAE,GAAG,EAAE;oBACZ,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;oBACjD,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC,EACD,UAAU,EAAE,GAAG,EAAE;oBACf,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;oBACjD,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC,IAEA,IAAI,CAAC,IAAI,CACH,CACQ,CACpB,CAAC,CACS,CACd,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}

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

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './MediaWidget';
+declare const meta: Meta;
+export default meta;
+export declare const Media: Story<Props>;
+export declare const Links: Story<Props>;
+export declare const Hints: Story<Props>;
+export declare const Combined: Story<Props>;