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

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combined = exports.Hints = exports.Links = exports.Media = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const MediaWidget_1 = tslib_1.__importDefault(require("./MediaWidget"));
+const meta = {
+    title: 'Media Widget/Wrapper',
+    component: MediaWidget_1.default,
+    argTypes: {
+        hints: {
+            control: {
+                type: 'array',
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+const links = [
+    {
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: 'text/html',
+        title: 'Memori Srl',
+        url: 'https://memori.ai/en',
+    },
+    {
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: 'text/html',
+        title: 'TwinCreator',
+        url: 'https://twincreator.com/en',
+    },
+    {
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: 'text/html',
+        title: 'MemoryTwin',
+        url: 'https://memorytwin.com/en',
+    },
+    {
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: 'text/html',
+        title: 'Introducing Plone Remix | Vimeo',
+        url: 'https://vimeo.com/766468314',
+    },
+    {
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: 'text/html',
+        title: 'A sustainable web: is it possible? - Nicola Zambello | YouTube',
+        url: 'https://www.youtube.com/watch?v=feH26j3rBz8',
+    },
+    {
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: 'text/html',
+        title: 'Memori backend API',
+        url: 'https://backend.memori.ai',
+    },
+];
+const media = [
+    {
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: 'text/javascript',
+        title: 'Snippet',
+        content: "console.log('Hello World!');",
+    },
+    ...Array.from({ length: 3 }, (_, 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}`,
+    })),
+];
+const hints = [
+    {
+        text: 'All right',
+        originalText: 'Va bene',
+    },
+    {
+        text: 'No',
+        originalText: 'No',
+    },
+];
+const Template = args => react_1.default.createElement(MediaWidget_1.default, { ...args });
+exports.Media = Template.bind({});
+exports.Media.args = {
+    media,
+};
+exports.Links = Template.bind({});
+exports.Links.args = {
+    links,
+};
+exports.Hints = Template.bind({});
+exports.Hints.args = {
+    hints,
+};
+exports.Combined = Template.bind({});
+exports.Combined.args = {
+    media,
+    links,
+    hints,
+};
+//# sourceMappingURL=MediaWidget.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaWidget.stories.js","sourceRoot":"","sources":["../../../src/components/MediaWidget/MediaWidget.stories.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAE1B,wEAAmD;AAMnD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,qBAAW;IACtB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;aACd;SACF;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC7B;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEpB,MAAM,KAAK,GAAa;IACtB;QACE,QAAQ,EAAE,sCAAsC;QAChD,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,YAAY;QACnB,GAAG,EAAE,sBAAsB;KAC5B;IACD;QACE,QAAQ,EAAE,sCAAsC;QAChD,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,aAAa;QACpB,GAAG,EAAE,4BAA4B;KAClC;IACD;QACE,QAAQ,EAAE,sCAAsC;QAChD,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,YAAY;QACnB,GAAG,EAAE,2BAA2B;KACjC;IACD;QACE,QAAQ,EAAE,sCAAsC;QAChD,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,iCAAiC;QACxC,GAAG,EAAE,6BAA6B;KACnC;IACD;QACE,QAAQ,EAAE,sCAAsC;QAChD,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,gEAAgE;QACvE,GAAG,EAAE,6CAA6C;KACnD;IACD;QACE,QAAQ,EAAE,sCAAsC;QAChD,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,oBAAoB;QAC3B,GAAG,EAAE,2BAA2B;KACjC;CACF,CAAC;AAEF,MAAM,KAAK,GAAa;IACtB;QACE,QAAQ,EAAE,sCAAsC;QAChD,QAAQ,EAAE,iBAAiB;QAC3B,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,8BAA8B;KACxC;IACD,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACtC,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;AAEF,MAAM,KAAK,GAAqB;IAC9B;QACE,IAAI,EAAE,WAAW;QACjB,YAAY,EAAE,SAAS;KACxB;IACD;QACE,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,IAAI;KACnB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE,CAAC,8BAAC,qBAAW,OAAK,IAAI,GAAI,CAAC;AAIpD,QAAA,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,aAAK,CAAC,IAAI,GAAG;IACX,KAAK;CACN,CAAC;AAEW,QAAA,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,aAAK,CAAC,IAAI,GAAG;IACX,KAAK;CACN,CAAC;AAEW,QAAA,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,aAAK,CAAC,IAAI,GAAG;IACX,KAAK;CACN,CAAC;AAEW,QAAA,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,gBAAQ,CAAC,IAAI,GAAG;IACd,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC"}

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

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

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

@@ -0,0 +1,34 @@
+"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 MediaWidget_1 = tslib_1.__importDefault(require("./MediaWidget"));
+const linkMedium = {
+    mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+    mimeType: 'text/html',
+    title: 'Memori Srl',
+    url: 'https://memori.ai/en',
+};
+const hint = {
+    text: 'All right',
+    originalText: 'Va bene',
+};
+it('renders MediaWidget as empty unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaWidget_1.default, null));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaWidget with links unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaWidget_1.default, { links: [linkMedium] }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaWidget with media unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaWidget_1.default, { media: [data_1.medium] }));
+    expect(container).toMatchSnapshot();
+});
+it('renders MediaWidget with hints unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(MediaWidget_1.default, { hints: [hint] }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=MediaWidget.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaWidget.test.js","sourceRoot":"","sources":["../../../src/components/MediaWidget/MediaWidget.test.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAK1B,kDAAgD;AAChD,2CAA0C;AAC1C,wEAAwC;AAExC,MAAM,UAAU,GAAW;IACzB,QAAQ,EAAE,sCAAsC;IAChD,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,sBAAsB;CAC5B,CAAC;AAEF,MAAM,IAAI,GAAmB;IAC3B,IAAI,EAAE,WAAW;IACjB,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;IAChD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,qBAAW,OAAG,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,qBAAW,IAAC,KAAK,EAAE,CAAC,UAAU,CAAC,GAAI,CAAC,CAAC;IACnE,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,qBAAW,IAAC,KAAK,EAAE,CAAC,aAAM,CAAC,GAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,qBAAW,IAAC,KAAK,EAAE,CAAC,IAAI,CAAC,GAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC"}

package/dist/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/dist/components/MemoriWidget/MemoriWidget.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Memori, Integration, MemoriConfig, Tenant } from '@memori.ai/memori-api-client/dist/types';
+import './MemoriWidget.css';
+declare const getMemoriState: (integrationId?: string | undefined) => object | null;
+declare const typeMessage: (message: string) => void;
+declare global {
+    interface Window {
+        getMemoriState: typeof getMemoriState;
+        typeMessage: typeof typeMessage;
+    }
+}
+export interface Props {
+    memori: Memori;
+    memoriConfigs?: MemoriConfig[];
+    memoriLang?: string;
+    integration?: Integration;
+    showShare?: boolean;
+    showInstruct?: boolean;
+    showInputs?: boolean;
+    showDates?: boolean;
+    showContextPerLine?: boolean;
+    showSettings?: boolean;
+    preview?: boolean;
+    embed?: boolean;
+    secret?: string;
+    baseUrl?: string;
+    apiUrl?: string;
+    initialContextVars?: {
+        [key: string]: string;
+    };
+    initialQuestion?: string;
+    ogImage?: string;
+    sessionID?: string;
+    tenant?: Tenant;
+    personification?: {
+        name?: string;
+        tag: string;
+        pin: string;
+    };
+    AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
+}
+declare const MemoriWidget: ({ memori: initialMemori, memoriConfigs, memoriLang, integration, showInstruct, showShare, preview, embed, showInputs, showDates, showContextPerLine, showSettings, secret, baseUrl, apiUrl, initialContextVars, initialQuestion, ogImage, sessionID: initialSessionID, tenant, personification, AZURE_COGNITIVE_SERVICES_TTS_KEY, }: Props) => JSX.Element;
+export default MemoriWidget;