@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/dist/components/MemoriWidget/MemoriWidget.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChatStyles = getChatStyles;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ArtifactAPI_1 = require("../MemoriArtifactSystem/utils/ArtifactAPI");
@@ -9,8 +10,7 @@ const react_i18next_1 = require("react-i18next");
 const memori_api_client_1 = tslib_1.__importDefault(require("@memori.ai/memori-api-client"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const luxon_1 = require("luxon");
-const react_hot_toast_1 = tslib_1.__importDefault(require("react-hot-toast"));
-const PositionDrawer_1 = tslib_1.__importDefault(require("../PositionDrawer/PositionDrawer"));
+const ui_1 = require("@memori.ai/ui");
 const Auth_1 = tslib_1.__importDefault(require("../Auth/Auth"));
 const Chat_1 = tslib_1.__importDefault(require("../Chat/Chat"));
 const StartPanel_1 = tslib_1.__importDefault(require("../StartPanel/StartPanel"));
@@ -22,12 +22,12 @@ const SettingsDrawer_1 = tslib_1.__importDefault(require("../SettingsDrawer/Sett
 const KnownFacts_1 = tslib_1.__importDefault(require("../KnownFacts/KnownFacts"));
 const ExpertsDrawer_1 = tslib_1.__importDefault(require("../ExpertsDrawer/ExpertsDrawer"));
 const LoginDrawer_1 = tslib_1.__importDefault(require("../LoginDrawer/LoginDrawer"));
-const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
-const Close_1 = tslib_1.__importDefault(require("../icons/Close"));
+const ui_2 = require("@memori.ai/ui");
+const lucide_react_1 = require("lucide-react");
 const FullPage_1 = tslib_1.__importDefault(require("../layouts/FullPage"));
 const Totem_1 = tslib_1.__importDefault(require("../layouts/Totem"));
 const Chat_2 = tslib_1.__importDefault(require("../layouts/Chat"));
-const WebsiteAssistant_1 = tslib_1.__importDefault(require("../layouts/WebsiteAssistant"));
+const WebsiteAssistant_1 = tslib_1.__importDefault(require("../layouts/WebsiteAssistant/WebsiteAssistant"));
 const HiddenChat_1 = tslib_1.__importDefault(require("../layouts/HiddenChat"));
 const ZoomedFullBody_1 = tslib_1.__importDefault(require("../layouts/ZoomedFullBody"));
 const translations_1 = require("../../helpers/translations");
@@ -164,9 +164,34 @@ window.typeBatchMessages = typeBatchMessages;
 let audioContext;
 let memoriPassword;
 let userToken;
+function getChatStyles(config) {
+    var _a;
+    const primary = config === null || config === void 0 ? void 0 : config.buttonBgColor;
+    if (!primary)
+        return {};
+    const primaryContent = (_a = config === null || config === void 0 ? void 0 : config.buttonTextColor) !== null && _a !== void 0 ? _a : '#ffffff';
+    return {
+        '--memori-primary-color': primary,
+        '--memori-primary': primary,
+        '--memori-primary-content': primaryContent,
+        '--memori-primary-hover': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, black) 15%)',
+        '--memori-primary-active': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, black) 25%)',
+        '--memori-primary-disabled': 'color-mix(in oklch, var(--memori-primary), transparent 60%)',
+        '--memori-primary-subtle': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 60%)',
+        '--memori-primary-subtle-hover': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 50%)',
+        '--memori-border-primary': 'color-mix(in oklch, var(--memori-primary), transparent 70%)',
+        '--memori-border-primary-hover': 'color-mix(in oklch, var(--memori-primary), transparent 50%)',
+        '--memori-focus-ring-color': 'color-mix(in oklch, var(--memori-primary), transparent 80%)',
+        '--memori-focus-ring': '0 0 0 3px var(--memori-focus-ring-color)',
+        '--memori-shadow-primary': '0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%)',
+        '--memori-skeleton-base': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 85%)',
+        '--memori-skeleton-highlight': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 75%)',
+    };
+}
 const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenantID, memoriLang, uiLang, spokenLang, multilingual, integration, layout, customLayout, showShare, preview = false, embed = false, showCopyButton = true, showTranslationOriginal = false, showInputs = true, showDates = false, showContextPerLine = false, showMessageConsumption = false, showSettings, showTypingText = false, showClear = false, showLogin = false, showUpload, showOnlyLastMessages, showChatHistory, showReasoning, avatar3dHidden, height = '100vh', secret, baseUrl = 'https://aisuru-staging.aclambda.online', apiURL = 'https://backend-staging.memori.ai', engineURL = 'https://engine-staging.memori.ai', initialContextVars, initialQuestion, ttsProvider, ogImage, sessionID: initialSessionID, tenant, personification, authToken, enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, additionalInfo, additionalSettings, customMediaRenderer, userAvatar, __WEBCOMPONENT__ = false, useMathFormatting = false, autoStart = false, applyVarsToRoot = false, showFunctionCache = false, maxTotalMessagePayload, maxTextareaCharacters, }) => {
-    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
+    const { add, close } = (0, ui_1.useAlertManager)();
     const [isClient, setIsClient] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         setIsClient(true);
@@ -175,6 +200,26 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     const { initSession, deleteSession, postTextEnteredEvent, postPlaceChangedEvent, postDateChangedEvent, postTagChangedEvent, getSession, getExpertReferences, getSessionChatLogs, } = client;
     const [instruct, setInstruct] = (0, react_1.useState)(false);
     const [enableFocusChatInput, setEnableFocusChatInput] = (0, react_1.useState)(true);
+    const widgetRootRef = (0, react_1.useRef)(null);
+    const [isDarkTheme, setIsDarkTheme] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const el = widgetRootRef.current;
+        if (!el)
+            return;
+        const check = () => {
+            setIsDarkTheme(!!el.closest('[data-theme="dark"]'));
+        };
+        check();
+        const observer = new MutationObserver(check);
+        const parent = (_a = el.parentElement) !== null && _a !== void 0 ? _a : document.body;
+        observer.observe(parent, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+            subtree: true,
+        });
+        return () => observer.disconnect();
+    }, []);
     const [loginToken, setLoginToken] = (0, react_1.useState)((_a = additionalInfo === null || additionalInfo === void 0 ? void 0 : additionalInfo.loginToken) !== null && _a !== void 0 ? _a : authToken);
     const [user, setUser] = (0, react_1.useState)({
         avatarURL: typeof userAvatar === 'string' ? userAvatar : undefined,
@@ -240,19 +285,53 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     const [typingText, setTypingText] = (0, react_1.useState)();
     const layoutName = typeof layout === 'string'
         ? layout
-        : typeof (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === 'string'
-            ? integrationConfig.layout
-            : (_q = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === null || _q === void 0 ? void 0 : _q.name;
-    const selectedLayout = layoutName || 'DEFAULT';
-    const piiDetection = typeof (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === 'object' &&
-        (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) !== null &&
-        ((_s = (_r = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === null || _r === void 0 ? void 0 : _r.piiDetection) === null || _s === void 0 ? void 0 : _s.enabled)
-        ? integrationConfig.layout.piiDetection
-        : undefined;
-    const defaultEnableAudio = (_t = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _t !== void 0 ? _t : true;
+        : layout &&
+            typeof layout === 'object' &&
+            layout !== null &&
+            'name' in layout &&
+            typeof layout.name === 'string'
+            ? layout.name
+            : typeof (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === 'string'
+                ? integrationConfig.layout
+                : (_q = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === null || _q === void 0 ? void 0 : _q.name;
+    const selectedLayout = (() => {
+        if (typeof layoutName === 'string') {
+            const lower = layoutName.toLowerCase();
+            if (lower === 'fullpage' || lower === 'fullscreen' || lower === '2')
+                return 'FULLPAGE';
+            if (lower === 'totem')
+                return 'TOTEM';
+            if (lower === 'chat')
+                return 'CHAT';
+            if (lower === 'website_assistant')
+                return 'WEBSITE_ASSISTANT';
+            if (lower === 'hidden_chat')
+                return 'HIDDEN_CHAT';
+            if (lower === 'zoomed_full_body')
+                return 'ZOOMED_FULL_BODY';
+            if (lower === 'default')
+                return 'DEFAULT';
+            return layoutName;
+        }
+        if (layoutName === 2 || layoutName === '2')
+            return 'FULLPAGE';
+        return 'DEFAULT';
+    })();
+    const piiDetection = layout &&
+        typeof layout === 'object' &&
+        layout !== null &&
+        'piiDetection' in layout &&
+        ((_r = layout.piiDetection) === null || _r === void 0 ? void 0 : _r.enabled)
+        ? layout.piiDetection
+        : typeof (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === 'object' &&
+            (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) !== null &&
+            ((_t = (_s = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) === null || _s === void 0 ? void 0 : _s.piiDetection) === null || _t === void 0 ? void 0 : _t.enabled)
+            ? integrationConfig.layout.piiDetection
+            : undefined;
+    const defaultEnableAudio = (_u = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _u !== void 0 ? _u : true;
     const [hasUserActivatedListening, setHasUserActivatedListening] = (0, react_1.useState)(false);
     const [hasUserTypedMessage, setHasUserTypedMessage] = (0, react_1.useState)(false);
-    const [showPositionDrawer, setShowPositionDrawer] = (0, react_1.useState)(false);
+    const [positionPopoverOpen, setPositionPopoverOpenState] = (0, react_1.useState)(false);
     const [showSettingsDrawer, setShowSettingsDrawer] = (0, react_1.useState)(false);
     const [showChatHistoryDrawer, setShowChatHistoryDrawer] = (0, react_1.useState)(false);
     const [showKnownFactsDrawer, setShowKnownFactsDrawer] = (0, react_1.useState)(false);
@@ -311,11 +390,16 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     const [authModalState, setAuthModalState] = (0, react_1.useState)(null);
     const [position, _setPosition] = (0, react_1.useState)();
     const hasUserProvidedPosition = (0, react_1.useCallback)((venue) => {
+        var _a, _b;
         if (!venue)
             return false;
-        if (venue.placeName === 'Position' &&
-            venue.latitude === 0 &&
-            venue.longitude === 0) {
+        const hasOptOutCoordinates = Number(venue.latitude) === 0 && Number(venue.longitude) === 0;
+        const hasEmptyPlaceName = !((_a = venue.placeName) === null || _a === void 0 ? void 0 : _a.trim());
+        const isLegacyOptOutPlaceName = venue.placeName === 'Position';
+        const hasNoUncertainty = Number((_b = venue.uncertainty) !== null && _b !== void 0 ? _b : 0) === 0;
+        if (hasOptOutCoordinates &&
+            (hasEmptyPlaceName || isLegacyOptOutPlaceName) &&
+            hasNoUncertainty) {
             return false;
         }
         return true;
@@ -324,14 +408,12 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         if (!venue)
             return undefined;
         const place = {};
-        if (venue.latitude != null &&
-            venue.longitude != null) {
+        if (venue.latitude != null && venue.longitude != null) {
             place.latitude = venue.latitude;
             place.longitude = venue.longitude;
             if (venue.placeName)
                 place.placeName = venue.placeName;
-            if (venue.uncertainty != null &&
-                venue.uncertainty > 0)
+            if (venue.uncertainty != null && venue.uncertainty > 0)
                 place.uncertaintyKm = venue.uncertainty;
         }
         else if (venue.placeName) {
@@ -808,7 +890,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             }
             else if (session === null || session === void 0 ? void 0 : session.resultMessage.startsWith('This Memori is aged restricted')) {
                 console.warn(session);
-                react_hot_toast_1.default.error(t('underageTwinSession', { age: minAge }));
+                add((0, ui_1.createAlertOptions)({
+                    description: t('underageTwinSession', { age: minAge }),
+                    severity: 'error',
+                }));
                 setGotErrorInOpening(true);
             }
             else if ((session === null || session === void 0 ? void 0 : session.resultCode) === 403) {
@@ -818,9 +903,11 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             }
             else {
                 console.warn(session);
-                react_hot_toast_1.default.error(tst => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: t((0, error_1.getErrori18nKey)(session === null || session === void 0 ? void 0 : session.resultCode)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { outlined: true, padded: false, onClick: () => react_hot_toast_1.default.dismiss(tst.id), icon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), children: t('close') })] })), {
-                    duration: Infinity,
-                });
+                const toastId = add((0, ui_1.createAlertOptions)({
+                    description: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: t((0, error_1.getErrori18nKey)(session === null || session === void 0 ? void 0 : session.resultCode)) }), (0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "outline", onClick: () => close(toastId), "aria-label": String(t('close', { defaultValue: 'Close' })), icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { "aria-hidden": true }) })] })),
+                    severity: 'error',
+                    duration: 0,
+                }));
                 setGotErrorInOpening(true);
                 return session;
             }
@@ -940,7 +1027,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             }
             else if (response === null || response === void 0 ? void 0 : response.resultMessage.startsWith('This Memori is aged restricted')) {
                 console.error('[REOPEN_SESSION] Age restriction error:', response);
-                react_hot_toast_1.default.error(t('underageTwinSession', { age: minAge }));
+                add((0, ui_1.createAlertOptions)({
+                    description: t('underageTwinSession', { age: minAge }),
+                    severity: 'error',
+                }));
                 setGotErrorInOpening(true);
             }
             else if ((response === null || response === void 0 ? void 0 : response.resultCode) === 403) {
@@ -950,7 +1040,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             }
             else {
                 console.error('[REOPEN_SESSION] Other error:', response);
-                react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(response.resultCode)));
+                add((0, ui_1.createAlertOptions)({
+                    description: t((0, error_1.getErrori18nKey)(response.resultCode)),
+                    severity: 'error',
+                }));
                 setGotErrorInOpening(true);
             }
         }
@@ -1086,7 +1179,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         apiUrl: `${baseUrl}/api/tts`,
         continuousSpeech: continuousSpeech,
         preview: preview,
-    }, autoStart, defaultEnableAudio, (_u = defaultSpeakerActive !== null && defaultSpeakerActive !== void 0 ? defaultSpeakerActive : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.defaultSpeakerActive) !== null && _u !== void 0 ? _u : true);
+    }, autoStart, defaultEnableAudio, (_v = defaultSpeakerActive !== null && defaultSpeakerActive !== void 0 ? defaultSpeakerActive : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.defaultSpeakerActive) !== null && _v !== void 0 ? _v : true);
     const shouldPlayAudio = (text) => {
         const currentSpeakerMuted = (0, configuration_1.getLocalConfig)('muteSpeaker', !defaultEnableAudio);
         console.log('[MemoriWidget] shouldPlayAudio', currentSpeakerMuted);
@@ -1220,53 +1313,43 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     const globalBackgroundUrl = globalBackground
         ? `url(${globalBackground})`
         : null;
-    const integrationProperties = (integration
-        ? {
-            '--memori-chat-bubble-bg': '#fff',
-            ...(integrationConfig && !instruct
-                ? { '--memori-text-color': (_v = integrationConfig.textColor) !== null && _v !== void 0 ? _v : '#000' }
-                : {}),
-            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.buttonBgColor)
-                ? {
-                    '--memori-button-bg': integrationConfig.buttonBgColor,
-                    '--memori-primary': integrationConfig.buttonBgColor,
-                }
-                : {}),
-            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.buttonTextColor)
-                ? {
-                    '--memori-button-text': integrationConfig.buttonTextColor,
-                }
-                : {}),
-            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.blurBackground)
-                ? {
-                    '--memori-blur-background': '5px',
-                }
-                : {
-                    '--memori-blur-background': '0px',
-                }),
-            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgColor)
-                ? {
-                    '--memori-inner-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
-                        ? '0, 0, 0'
-                        : '255, 255, 255'}, ${(_w = integrationConfig.innerBgAlpha) !== null && _w !== void 0 ? _w : 0.4})`,
-                    '--memori-inner-content-pad': '1.5rem',
-                    '--memori-nav-bg-image': 'none',
-                    '--memori-nav-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
-                        ? '0, 0, 0'
-                        : '255, 255, 255'}, ${(_x = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgAlpha) !== null && _x !== void 0 ? _x : 0.4})`,
-                }
-                : {
-                    '--memori-inner-content-pad': '0px',
-                }),
-        }
-        : {});
-    const integrationStylesheet = `
-    ${preview ? '#preview, ' : applyVarsToRoot ? ':root, ' : ''}memori-client, .memori-widget, .memori-drawer, .memori-modal {
-      ${Object.entries(integrationProperties)
+    const integrationProperties = (integration ? getChatStyles(integrationConfig) : {});
+    const integrationSelectors = [
+        preview ? '#preview' : null,
+        applyVarsToRoot ? ':root' : null,
+        integration ? 'body' : null,
+        '.memori-client',
+        '.memori-widget',
+        '.memori-drawer',
+        '.memori-modal',
+        '.memori-header',
+        '.memori-dropdown',
+        '.memori-select',
+    ]
+        .filter(Boolean)
+        .join(', ');
+    const integrationCssBlock = Object.entries(integrationProperties)
         .map(([key, value]) => `${key}: ${value};`)
-        .join('\n')}
+        .join('\n    ');
+    const integrationStylesheetParts = [];
+    if (integrationCssBlock) {
+        integrationStylesheetParts.push(`${integrationSelectors} {
+    ${integrationCssBlock}
+  }`);
+        integrationStylesheetParts.push(`[data-theme="dark"] .memori-widget,
+  .memori-widget[data-theme="dark"],
+  [data-theme="dark"] memori-client .memori-widget,
+  memori-client[data-theme="dark"] .memori-widget {
+    ${integrationCssBlock}
+  }`);
     }
-  `;
+    if (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.blurBackground) {
+        integrationStylesheetParts.push('.memori-widget .memori--global-background { filter: blur(5px); }');
+    }
+    const integrationStylesheet = `@layer integration {
+  ${integrationStylesheetParts.join('\n  ')}
+}
+`;
     const showAIicon = (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showAIicon) === undefined
         ? true
         : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showAIicon;
@@ -1366,7 +1449,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             birth = '1970-01-01T10:24:03.845Z';
         const localPosition = (0, configuration_1.getLocalConfig)('position', undefined);
         if (autoStart && !localPosition && memori.needsPosition) {
-            setShowPositionDrawer(true);
+            setPositionPopoverOpenState(true);
             return;
         }
         if (!sessionID && !!minAge && !birth) {
@@ -1607,6 +1690,12 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             await translateAndSpeak(dialogState, userLang);
         }
     }, [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]);
+    const setPositionPopoverOpen = (0, react_1.useCallback)((open) => {
+        setPositionPopoverOpenState(open);
+        if (!open && autoStart) {
+            onClickStart();
+        }
+    }, [autoStart, onClickStart]);
     (0, react_1.useEffect)(() => {
         if (!clickedStart && autoStart && selectedLayout !== 'HIDDEN_CHAT') {
             onClickStart();
@@ -1718,35 +1807,37 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         ? selectedLayout !== 'TOTEM' && selectedLayout !== 'WEBSITE_ASSISTANT'
         : !showOnlyLastMessages;
     const canShowLoginButton = !(tenant === null || tenant === void 0 ? void 0 : tenant.ssoLogin) &&
-        ((_y = showLogin !== null && showLogin !== void 0 ? showLogin : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showLogin) !== null && _y !== void 0 ? _y : memori.requireLoginToken);
+        ((_w = showLogin !== null && showLogin !== void 0 ? showLogin : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showLogin) !== null && _w !== void 0 ? _w : memori.requireLoginToken);
     const headerProps = {
         memori: {
             ...memori,
-            ownerUserID: (_0 = (_z = memori.ownerUserID) !== null && _z !== void 0 ? _z : ownerUserID) !== null && _0 !== void 0 ? _0 : undefined,
+            ownerUserID: (_y = (_x = memori.ownerUserID) !== null && _x !== void 0 ? _x : ownerUserID) !== null && _y !== void 0 ? _y : undefined,
         },
         apiClient: client,
         tenant,
         history,
-        showShare: (_1 = showShare !== null && showShare !== void 0 ? showShare : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showShare) !== null && _1 !== void 0 ? _1 : true,
+        showShare: (_z = showShare !== null && showShare !== void 0 ? showShare : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showShare) !== null && _z !== void 0 ? _z : true,
         position,
         layout: selectedLayout,
         additionalSettings,
-        setShowPositionDrawer,
+        setVenue: setPosition,
+        positionPopoverOpen,
+        setPositionPopoverOpen,
         setShowSettingsDrawer,
         setShowKnownFactsDrawer,
         setShowExpertsDrawer,
-        enableAudio: (_2 = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _2 !== void 0 ? _2 : true,
+        enableAudio: (_0 = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _0 !== void 0 ? _0 : true,
         speakerMuted: speakerMuted !== null && speakerMuted !== void 0 ? speakerMuted : false,
         setSpeakerMuted: (mute) => {
             toggleMute(mute);
         },
         setShowChatHistoryDrawer,
-        showSettings: (_3 = showSettings !== null && showSettings !== void 0 ? showSettings : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showSettings) !== null && _3 !== void 0 ? _3 : true,
-        showChatHistory: (_4 = showChatHistory !== null && showChatHistory !== void 0 ? showChatHistory : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showChatHistory) !== null && _4 !== void 0 ? _4 : true,
+        showSettings: (_1 = showSettings !== null && showSettings !== void 0 ? showSettings : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showSettings) !== null && _1 !== void 0 ? _1 : true,
+        showChatHistory: (_2 = showChatHistory !== null && showChatHistory !== void 0 ? showChatHistory : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showChatHistory) !== null && _2 !== void 0 ? _2 : true,
         showMessageConsumption: enableMessageConsumption,
         hasUserActivatedSpeak,
         showReload: selectedLayout === 'TOTEM',
-        showClear: (_5 = showClear !== null && showClear !== void 0 ? showClear : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showClear) !== null && _5 !== void 0 ? _5 : false,
+        showClear: (_3 = showClear !== null && showClear !== void 0 ? showClear : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showClear) !== null && _3 !== void 0 ? _3 : false,
         clearHistory: () => setHistory(h => h.slice(-1)),
         showLogin: canShowLoginButton,
         setShowLoginDrawer,
@@ -1777,7 +1868,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         hasUserActivatedSpeak,
         isPlayingAudio: isPlayingAudio &&
             !speakerMuted &&
-            ((_6 = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _6 !== void 0 ? _6 : true),
+            ((_4 = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _4 !== void 0 ? _4 : true),
         loading: !!memoriTyping,
         baseUrl,
         apiUrl: client.constants.BACKEND_URL,
@@ -1794,7 +1885,8 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         baseUrl: baseUrl,
         apiUrl: client.constants.BACKEND_URL,
         position: position,
-        openPositionDrawer: () => setShowPositionDrawer(true),
+        setVenue: setPosition,
+        openPositionPopover: () => setPositionPopoverOpen(true),
         integrationConfig: integrationConfig,
         instruct: instruct,
         sessionId: sessionId,
@@ -1806,6 +1898,8 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         notEnoughCredits: needsCredits && !hasEnoughCredits,
         showLogin: canShowLoginButton,
         setShowLoginDrawer,
+        showChatHistory: (_5 = showChatHistory !== null && showChatHistory !== void 0 ? showChatHistory : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showChatHistory) !== null && _5 !== void 0 ? _5 : true,
+        setShowChatHistoryDrawer,
         user,
     };
     const chatProps = {
@@ -1814,7 +1908,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         tenant,
         translateTo: isMultilanguageEnabled &&
             userLang.toUpperCase() !==
-                ((_11 = ((_10 = (_9 = (_8 = (_7 = memori.culture) === null || _7 === void 0 ? void 0 : _7.split('-')) === null || _8 === void 0 ? void 0 : _8[0]) !== null && _9 !== void 0 ? _9 : i18n.language) !== null && _10 !== void 0 ? _10 : 'IT')) === null || _11 === void 0 ? void 0 : _11.toUpperCase())
+                ((_10 = ((_9 = (_8 = (_7 = (_6 = memori.culture) === null || _6 === void 0 ? void 0 : _6.split('-')) === null || _7 === void 0 ? void 0 : _7[0]) !== null && _8 !== void 0 ? _8 : i18n.language) !== null && _9 !== void 0 ? _9 : 'IT')) === null || _10 === void 0 ? void 0 : _10.toUpperCase())
             ? userLang
             : undefined,
         baseUrl,
@@ -1822,9 +1916,9 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         layout,
         memoriTyping,
         typingText,
-        showTypingText: (_12 = showTypingText !== null && showTypingText !== void 0 ? showTypingText : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showTypingText) !== null && _12 !== void 0 ? _12 : false,
+        showTypingText: (_11 = showTypingText !== null && showTypingText !== void 0 ? showTypingText : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showTypingText) !== null && _11 !== void 0 ? _11 : false,
         history: showFullHistory ? history : history.slice(-2),
-        authToken: (_14 = (_13 = loginToken !== null && loginToken !== void 0 ? loginToken : userToken) !== null && _13 !== void 0 ? _13 : additionalInfo === null || additionalInfo === void 0 ? void 0 : additionalInfo.loginToken) !== null && _14 !== void 0 ? _14 : authToken,
+        authToken: (_13 = (_12 = loginToken !== null && loginToken !== void 0 ? loginToken : userToken) !== null && _12 !== void 0 ? _12 : additionalInfo === null || additionalInfo === void 0 ? void 0 : additionalInfo.loginToken) !== null && _13 !== void 0 ? _13 : authToken,
         dialogState: currentDialogState,
         pushMessage,
         simulateUserPrompt,
@@ -1835,8 +1929,8 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         showUpload: enableUpload,
         showReasoning: enableReasoning,
         showWhyThisAnswer,
-        showCopyButton: (_15 = showCopyButton !== null && showCopyButton !== void 0 ? showCopyButton : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showCopyButton) !== null && _15 !== void 0 ? _15 : true,
-        showTranslationOriginal: (_16 = showTranslationOriginal !== null && showTranslationOriginal !== void 0 ? showTranslationOriginal : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showTranslationOriginal) !== null && _16 !== void 0 ? _16 : false,
+        showCopyButton: (_14 = showCopyButton !== null && showCopyButton !== void 0 ? showCopyButton : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showCopyButton) !== null && _14 !== void 0 ? _14 : true,
+        showTranslationOriginal: (_15 = showTranslationOriginal !== null && showTranslationOriginal !== void 0 ? showTranslationOriginal : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showTranslationOriginal) !== null && _15 !== void 0 ? _15 : false,
         client,
         instruct,
         preview,
@@ -1846,7 +1940,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         attachmentsMenuOpen,
         setAttachmentsMenuOpen,
         showInputs,
-        showMicrophone: !!ttsProvider && ((_17 = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _17 !== void 0 ? _17 : true),
+        showMicrophone: !!ttsProvider && ((_16 = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _16 !== void 0 ? _16 : true),
         showFunctionCache,
         userMessage,
         onChangeUserMessage,
@@ -1873,9 +1967,12 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         useMathFormatting: applyMathFormatting,
         maxTotalMessagePayload,
         maxTextareaCharacters,
+        isChatlogPanel: (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.artifactChatLogPanel) === true,
     };
     const integrationBackground = integration && globalBackgroundUrl ? ((0, jsx_runtime_1.jsx)("div", { className: "memori--global-background", children: (0, jsx_runtime_1.jsx)("div", { className: "memori--global-background-image", style: { backgroundImage: globalBackgroundUrl } }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "memori--global-background no-background-image" }));
-    const integrationStyle = integration ? ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: integrationStylesheet } })) : null;
+    const integrationStyle = integration &&
+        (Object.keys(integrationProperties).length > 0 ||
+            (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.blurBackground)) ? ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: integrationStylesheet } })) : null;
     const poweredBy = ((0, jsx_runtime_1.jsx)(PoweredBy_1.default, { tenant: tenant, userLang: userLang, integrationID: integration === null || integration === void 0 ? void 0 : integration.integrationID, memoriHash: `${memori.ownerTenantName}-${memori.ownerUserName}-${memori.name}` }));
     const Layout = customLayout
         ? customLayout
@@ -1892,7 +1989,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                             : selectedLayout === 'ZOOMED_FULL_BODY'
                                 ? ZoomedFullBody_1.default
                                 : FullPage_1.default;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('memori', 'memori-widget', `memori-layout-${selectedLayout.toLowerCase()}`, `memori-controls-${controlsPosition.toLowerCase()}`, `memori--avatar-${(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar) || 'default'}`, {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: widgetRootRef, className: (0, classnames_1.default)('memori', 'memori-widget', `memori-layout-${String(selectedLayout).toLowerCase()}`, `memori-controls-${String(controlsPosition).toLowerCase()}`, `memori--avatar-${(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar) || 'default'}`, {
             'memori--auto-start': autoStart,
             'memori--preview': preview,
             'memori--embed': embed,
@@ -1901,7 +1998,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             'memori--active': hasUserActivatedSpeak,
             'memori--hide-emissions': hideEmissions,
             'memori--has-active-session': !!sessionId,
-        }), "data-memori-name": memori === null || memori === void 0 ? void 0 : memori.name, "data-memori-id": memori === null || memori === void 0 ? void 0 : memori.engineMemoriID, "data-memori-secondary-id": memori === null || memori === void 0 ? void 0 : memori.memoriID, "data-memori-session-id": sessionId, "data-memori-integration": integration === null || integration === void 0 ? void 0 : integration.integrationID, "data-memori-engine-state": JSON.stringify({
+        }), "data-theme": (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.theme) === 'light' ||
+            (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.theme) === 'dark'
+            ? integrationConfig.theme
+            : undefined, "data-memori-name": memori === null || memori === void 0 ? void 0 : memori.name, "data-memori-id": memori === null || memori === void 0 ? void 0 : memori.engineMemoriID, "data-memori-secondary-id": memori === null || memori === void 0 ? void 0 : memori.memoriID, "data-memori-session-id": sessionId, "data-memori-integration": integration === null || integration === void 0 ? void 0 : integration.integrationID, "data-memori-engine-state": JSON.stringify({
             ...currentDialogState,
             sessionID: sessionId,
         }), style: { height }, children: [(0, jsx_runtime_1.jsx)(Layout, { Header: Header_1.default, headerProps: headerProps, Avatar: Avatar_1.default, avatarProps: avatarProps, Chat: Chat_1.default, chatProps: chatProps, StartPanel: StartPanel_1.default, startPanelProps: startPanelProps, integrationStyle: integrationStyle, integrationBackground: integrationBackground, poweredBy: poweredBy, autoStart: autoStart, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, loading: loading, avatar3dHidden: avatar3dHidden !== null && avatar3dHidden !== void 0 ? avatar3dHidden : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar_3d_hidden }), (0, jsx_runtime_1.jsx)(ArtifactAPI_1.ArtifactAPIBridge, { pushMessage: (message) => {
@@ -1951,7 +2051,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                         }
                         throw error;
                     });
-                }, minimumNumberOfRecoveryTokens: (_18 = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _18 !== void 0 ? _18 : 1 })), isClient && ((0, jsx_runtime_1.jsx)(AgeVerificationModal_1.default, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
+                }, minimumNumberOfRecoveryTokens: (_17 = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _17 !== void 0 ? _17 : 1 })), isClient && ((0, jsx_runtime_1.jsx)(AgeVerificationModal_1.default, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
                     var _a, _b, _c, _d;
                     if (birthDate) {
                         setBirthDate(birthDate);
@@ -1980,14 +2080,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     setChatLogID(chatLog.chatLogID);
                     onClickStart(undefined, false, chatLog);
                     setShowChatHistoryDrawer(false);
-                }, apiClient: client, sessionId: sessionId || '', memori: memori, baseUrl: baseUrl, history: history, apiUrl: client.constants.BACKEND_URL, loginToken: loginToken, language: language, userLang: userLang, isMultilanguageEnabled: isMultilanguageEnabled })), showPositionDrawer && ((0, jsx_runtime_1.jsx)(PositionDrawer_1.default, { memori: memori, open: !!showPositionDrawer, venue: position, setVenue: setPosition, onClose: () => {
-                    setShowPositionDrawer(false);
-                    if (autoStart) {
-                        onClickStart();
-                    }
-                }, drawerClassName: selectedLayout === 'WEBSITE_ASSISTANT'
-                    ? 'memori-drawer--above-website-assistant'
-                    : undefined })), showKnownFactsDrawer && sessionId && ((0, jsx_runtime_1.jsx)(KnownFacts_1.default, { apiClient: client, memori: memori, sessionID: sessionId, visible: showKnownFactsDrawer, closeDrawer: () => setShowKnownFactsDrawer(false) })), showExpertsDrawer && !!experts && ((0, jsx_runtime_1.jsx)(ExpertsDrawer_1.default, { apiUrl: client.constants.BACKEND_URL, baseUrl: baseUrl, tenant: tenant, experts: experts, open: showExpertsDrawer, onClose: () => setShowExpertsDrawer(false) })), showLoginDrawer && (tenant === null || tenant === void 0 ? void 0 : tenant.name) && ((0, jsx_runtime_1.jsx)(LoginDrawer_1.default, { tenant: tenant, apiClient: client, open: !!showLoginDrawer, user: user, loginToken: loginToken, onClose: () => setShowLoginDrawer(false), drawerClassName: selectedLayout === 'WEBSITE_ASSISTANT'
+                }, apiClient: client, sessionId: sessionId || '', memori: memori, baseUrl: baseUrl, history: history, apiUrl: client.constants.BACKEND_URL, loginToken: loginToken, language: language, userLang: userLang, isMultilanguageEnabled: isMultilanguageEnabled })), showKnownFactsDrawer && sessionId && ((0, jsx_runtime_1.jsx)(KnownFacts_1.default, { apiClient: client, memori: memori, sessionID: sessionId, visible: showKnownFactsDrawer, closeDrawer: () => setShowKnownFactsDrawer(false) })), showExpertsDrawer && !!experts && ((0, jsx_runtime_1.jsx)(ExpertsDrawer_1.default, { apiUrl: client.constants.BACKEND_URL, baseUrl: baseUrl, tenant: tenant, experts: experts, open: showExpertsDrawer, onClose: () => setShowExpertsDrawer(false) })), showLoginDrawer && (tenant === null || tenant === void 0 ? void 0 : tenant.name) && ((0, jsx_runtime_1.jsx)(LoginDrawer_1.default, { tenant: tenant, apiClient: client, open: !!showLoginDrawer, user: user, loginToken: loginToken, onClose: () => setShowLoginDrawer(false), drawerClassName: selectedLayout === 'WEBSITE_ASSISTANT'
                     ? 'memori-drawer--above-website-assistant'
                     : undefined, onLogin: (user, token) => {
                     var _a, _b, _c, _d;