@memori.ai/memori-react 8.30.1 → 8.31.0

package/esm/components/layouts/fullpage.css

@@ -0,0 +1,119 @@
+/* FullPage layout – spacing, typography and structure using global design tokens */
+
+.memori-widget.memori-layout-fullpage {
+    max-width: var(--memori-layout-max-width);
+    padding: var(--memori-spacing-md);
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.memori-widget.memori-layout-fullpage > .memori-spin {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    gap: var(--memori-spacing-lg);
+}
+
+/* Header spacing */
+.memori-widget.memori-layout-fullpage .memori-chat-layout--header {
+    min-width: 100%;
+    flex-shrink: 0;
+    border-radius: var(--memori-radius-box);
+    margin-bottom: var(--memori-spacing-md);
+}
+
+/* Grid: main + left column (avatar) */
+.memori-widget.memori-layout-fullpage .memori--grid {
+    display: flex;
+    height: auto;
+    height: 95vh;
+    min-height: 0;
+    flex: 1 1 auto;
+    align-items: stretch;
+    justify-content: center;
+    gap: var(--memori-spacing-xl);
+}
+
+.memori-widget.memori-layout-fullpage .memori--grid-column-left {
+    width: 50%;
+    max-width: 420px;
+    flex-shrink: 0;
+    margin-right: 0;
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-layout--main {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-layout--controls {
+    display: flex;
+    width: 100%;
+    max-width: 720px;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--memori-spacing-md);
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori--start-panel,
+.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat--wrapper {
+    width: 100%;
+    max-width: 100%;
+    padding: 0 !important;
+    margin-right: 0;
+    margin-left: 0;
+}
+
+/* Typography: title and description in fullpage left column */
+.memori-widget.memori-layout-fullpage .memori--title {
+    margin-bottom: var(--memori-spacing-xs);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-heading-large);
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: var(--memori-text-line-tight);
+}
+
+.memori-widget.memori-layout-fullpage .memori--description,
+.memori-widget.memori-layout-fullpage .memori--needsPosition {
+    padding: var(--memori-spacing-lg);
+    padding-top: var(--memori-spacing-xs);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-base);
+    line-height: var(--memori-text-line-relaxed);
+}
+
+/* Powered-by position in fullpage */
+.memori-widget.memori-layout-fullpage .memori--powered-by {
+    flex-shrink: 0;
+    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    border-radius: var(--memori-radius-box);
+    font-size: var(--memori-text-size-small);
+}
+
+@media (max-width: 870px) {
+    .memori-widget.memori-layout-fullpage {
+        padding: var(--memori-spacing-sm);
+    }
+
+    .memori-widget.memori-layout-fullpage > .memori-spin {
+        gap: var(--memori-spacing-md);
+    }
+
+    .memori-widget.memori-layout-fullpage .memori--grid-column-left {
+        display: none;
+    }
+
+    .memori-widget.memori-layout-fullpage .memori-chat-layout--controls {
+        padding: var(--memori-spacing-sm);
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-widget.memori-layout-fullpage .memori-chat-layout--controls {
+        padding: var(--memori-spacing-xs);
+    }
+}

package/esm/helpers/userMessage.d.ts

@@ -0,0 +1,2 @@
+export declare function sanitizeUserMessageInput(raw: string): string;
+export declare function formatUserBubbleHtml(cleanText: string): string;

package/esm/helpers/userMessage.js

@@ -0,0 +1,18 @@
+import DOMPurify from 'dompurify';
+import { escapeHTML } from './utils';
+import { truncateMessagePlain } from './message';
+export function sanitizeUserMessageInput(raw) {
+    if (raw == null || typeof raw !== 'string') {
+        return '';
+    }
+    const stripped = DOMPurify.sanitize(raw, {
+        ALLOWED_TAGS: [],
+        ALLOWED_ATTR: [],
+    });
+    return stripped.trim();
+}
+export function formatUserBubbleHtml(cleanText) {
+    const truncated = truncateMessagePlain(cleanText);
+    return escapeHTML(truncated).replace(/\n/g, '<br />');
+}
+//# sourceMappingURL=userMessage.js.map

package/esm/helpers/userMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"userMessage.js","sourceRoot":"","sources":["../../src/helpers/userMessage.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAMjD,MAAM,UAAU,wBAAwB,CAAC,GAAW;IAClD,IAAI,GAAG,IAAI,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC3C,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE;QACvC,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE,EAAE;KACjB,CAAC,CAAC;IACH,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;AACzB,CAAC;AAGD,MAAM,UAAU,oBAAoB,CAAC,SAAiB;IACpD,MAAM,SAAS,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAClD,OAAO,UAAU,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AACxD,CAAC"}

package/esm/icons/FacebookIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const FacebookIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default FacebookIcon;

package/esm/icons/FacebookIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FacebookIcon = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 800, height: 800, fill: "currentColor", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { fill: "currentColor", d: "M17.3 9.6a1 1 0 1 0-1.6-1.2l-2.308 3.078-2.185-2.185A1 1 0 0 0 9.7 9.4l-3 4a1 1 0 0 0 1.6 1.2l2.308-3.078 2.185 2.185A1 1 0 0 0 14.3 13.6l3-4Z" }), _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 23c-1.224 0-1.9-.131-3-.5l-2.106 1.053A2 2 0 0 1 4 21.763V19.5c-2.153-2.008-3-4.323-3-7.5C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm-6-4.37-.636-.593C3.691 16.477 3 14.733 3 12a9 9 0 1 1 9 9c-.986 0-1.448-.089-2.364-.396l-.788-.264L6 21.764V18.63Z", clipRule: "evenodd" })] }));
+export default FacebookIcon;
+//# sourceMappingURL=FacebookIcon.js.map

package/esm/icons/FacebookIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacebookIcon.js","sourceRoot":"","sources":["../../src/icons/FacebookIcon.tsx"],"names":[],"mappings":";AACA,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE,CAAC,CAC7D,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,KACf,KAAK,aAET,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,gJAAgJ,GAClJ,EACF,eACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uQAAuQ,EACzQ,QAAQ,EAAC,SAAS,GAClB,IACE,CACP,CAAA;AACD,eAAe,YAAY,CAAA"}

package/esm/icons/LinkedinIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const LinkedinIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default LinkedinIcon;

package/esm/icons/LinkedinIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LinkedinIcon = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 800, height: 800, fill: "currentColor", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { fill: "currentColor", d: "M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-8ZM11 19h1a1 1 0 0 0 1-1v-4.5c0-1.5 3-2.5 3-.5v5a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1Z" }), _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16Z", clipRule: "evenodd" })] }));
+export default LinkedinIcon;
+//# sourceMappingURL=LinkedinIcon.js.map

package/esm/icons/LinkedinIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkedinIcon.js","sourceRoot":"","sources":["../../src/icons/LinkedinIcon.tsx"],"names":[],"mappings":";AACA,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE,CAAC,CAC7D,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,KACf,KAAK,aAET,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sRAAsR,GACxR,EACF,eACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,iJAAiJ,EACnJ,QAAQ,EAAC,SAAS,GAClB,IACE,CACP,CAAA;AACD,eAAe,YAAY,CAAA"}

package/esm/icons/TelegramIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const TelegramIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default TelegramIcon;

package/esm/icons/TelegramIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TelegramIcon = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 800, height: 800, fill: "currentColor", viewBox: "0 0 24 24", ...props, children: _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M23.112 4.494c.318-1.55-1.205-2.837-2.68-2.267L2.342 9.216c-1.647.637-1.72 2.941-.117 3.682l3.94 1.818 1.873 6.559a1 1 0 0 0 1.67.432l2.886-2.887 4.043 3.033a2 2 0 0 0 3.16-1.198l3.315-16.16ZM3.063 11.082l18.09-6.99-3.316 16.161L13.1 16.7a1 1 0 0 0-1.307.093l-1.236 1.236.371-2.043 7.28-7.279a1 1 0 0 0-1.204-1.575L6.95 12.876l-3.888-1.794Zm5.114 3.397.606 2.123.233-1.281a1 1 0 0 1 .277-.528l2.22-2.22-3.336 1.906Z", clipRule: "evenodd" }) }));
+export default TelegramIcon;
+//# sourceMappingURL=TelegramIcon.js.map

package/esm/icons/TelegramIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelegramIcon.js","sourceRoot":"","sources":["../../src/icons/TelegramIcon.tsx"],"names":[],"mappings":";AACA,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE,CAAC,CAC7D,cACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,KACf,KAAK,YAET,eACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,iaAAia,EACna,QAAQ,EAAC,SAAS,GAClB,GACE,CACP,CAAA;AACD,eAAe,YAAY,CAAA"}

package/esm/icons/TwitterIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const TwitterIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default TwitterIcon;

package/esm/icons/TwitterIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TwitterIcon = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 800, height: 800, fill: "currentColor", viewBox: "0 0 100 100", ...props, children: [_jsx("path", { fill: "currentColor", d: "M69.7 8.7H30.4C18.7 8.7 9.1 18.2 9.1 30v41.2c0 11.7 9.5 21.3 21.3 21.3h39.4c11.7 0 21.3-9.5 21.3-21.3V29.9C91 18.2 81.5 8.7 69.7 8.7zm7.1 69.6H61.4c-.1 0-.2 0-.2-.1L46.8 57.3h-.1C40.9 64 35.2 70.6 29.6 77.1c-.3.4-.7.7-1 1-.1.1-.2.1-.3.1h-4.2c-.1 0-.2 0-.1-.1l20.5-23.8c.1-.1.1-.2 0-.3L24.1 24.3v-.1h15.5c.1 0 .1 0 .2.1L53.4 44h.1l16.9-19.7c.1-.1.2-.1.3-.1h4.2c.2 0 .2.1.1.2L55.6 46.9c-.1.1-.1.2 0 .3l21.3 31s0 .1-.1.1z" }), _jsx("path", { d: "M37.8 27.8h-6.7c-.1 0-.1.1-.1.2l32.2 46.7H69.9c.1 0 .1-.1.1-.2L37.8 27.8z" })] }));
+export default TwitterIcon;
+//# sourceMappingURL=TwitterIcon.js.map

package/esm/icons/TwitterIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwitterIcon.js","sourceRoot":"","sources":["../../src/icons/TwitterIcon.tsx"],"names":[],"mappings":";AACA,MAAM,WAAW,GAAG,CAAC,KAAoC,EAAE,EAAE,CAAC,CAC5D,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAC,cAAc,EAAC,OAAO,EAAC,aAAa,KAAK,KAAK,aAClH,eAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,oaAAoa,GAAG,EACnc,eAAM,CAAC,EAAC,2EAA2E,GAAG,IAClF,CACP,CAAA;AACD,eAAe,WAAW,CAAA"}

package/esm/icons/WhatsappIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const WhatsappIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default WhatsappIcon;

package/esm/icons/WhatsappIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const WhatsappIcon = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 800, height: 800, fill: "currentColor", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { fill: "currentColor", d: "M6.014 8.006c.114-.904 1.289-2.132 2.22-1.996V6.01c.907.172 1.625 1.734 2.03 2.436.286.509.1 1.025-.167 1.243-.361.29-.926.692-.808 1.095C9.5 11.5 12 14 13.23 14.711c.466.269.804-.44 1.092-.804.21-.28.726-.447 1.234-.171.759.442 1.474.956 2.135 1.534.33.276.408.684.179 1.115-.403.76-1.569 1.76-2.415 1.557C13.976 17.587 8 15.27 6.08 8.558c-.108-.318-.08-.438-.066-.552Z" }), _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 23c-1.224 0-1.9-.131-3-.5l-2.106 1.053A2 2 0 0 1 4 21.763V19.5c-2.153-2.008-3-4.323-3-7.5C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm-6-4.37-.636-.593C3.691 16.477 3 14.733 3 12a9 9 0 1 1 9 9c-.986 0-1.448-.089-2.364-.396l-.788-.264L6 21.764V18.63Z", clipRule: "evenodd" })] }));
+export default WhatsappIcon;
+//# sourceMappingURL=WhatsappIcon.js.map

package/esm/icons/WhatsappIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WhatsappIcon.js","sourceRoot":"","sources":["../../src/icons/WhatsappIcon.tsx"],"names":[],"mappings":";AACA,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE,CAAC,CAC7D,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,KACf,KAAK,aAET,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,oXAAoX,GACtX,EACF,eACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uQAAuQ,EACzQ,QAAQ,EAAC,SAAS,GAClB,IACE,CACP,CAAA;AACD,eAAe,YAAY,CAAA"}

package/esm/testUtils.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderOptions, RenderResult } from '@testing-library/react';
+declare function render(ui: React.ReactElement, options?: Omit<RenderOptions, 'wrapper'>): RenderResult;
+export * from '@testing-library/react';
+export { render };

package/esm/testUtils.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render as rtlRender, } from '@testing-library/react';
+import { AlertProvider, AlertViewport } from '@memori.ai/ui';
+function AlertProviderWrapper({ children }) {
+    return (_jsxs(AlertProvider, { children: [children, _jsx(AlertViewport, {})] }));
+}
+function render(ui, options) {
+    return rtlRender(ui, {
+        wrapper: AlertProviderWrapper,
+        ...options,
+    });
+}
+export * from '@testing-library/react';
+export { render };
+//# sourceMappingURL=testUtils.js.map

package/esm/testUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testUtils.js","sourceRoot":"","sources":["../src/testUtils.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,MAAM,IAAI,SAAS,GAGpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM7D,SAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAiC;IACvE,OAAO,CACL,MAAC,aAAa,eACX,QAAQ,EACT,KAAC,aAAa,KAAG,IACH,CACjB,CAAC;AACJ,CAAC;AAUD,SAAS,MAAM,CACb,EAAsB,EACtB,OAAwC;IAExC,OAAO,SAAS,CAAC,EAAE,EAAE;QACnB,OAAO,EAAE,oBAAoB;QAC7B,GAAG,OAAO;KACX,CAAC,CAAC;AACL,CAAC;AAGD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.30.1";
+export declare const version = "8.31.0";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '8.30.1';
+export const version = '8.31.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.30.1",
+  "version": "8.31.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Header/Header.css

@@ -124,3 +124,48 @@
 .memori-dropdown--avatar-initial:hover + .memori-dropdown--avatar-input,.memori-dropdown--avatar:hover + .memori-dropdown--avatar-input{
     display: block;
 }
+
+.memori-dropdown--sustainability {
+    min-width: 260px;
+    padding: 0.625rem 0.75rem;
+    border-radius: 8px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 249, 252, 0.96) 100%);
+}
+
+.memori-dropdown--sustainability-title {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+    line-height: 1.2;
+    text-align: center;
+}
+
+.memori-dropdown--sustainability-metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.memori-dropdown--sustainability-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0.5rem;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.8);
+    gap: 1rem;
+}
+
+.memori-dropdown--sustainability-label {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.82rem;
+    font-weight: 500;
+    gap: 0.35rem;
+    opacity: 0.9;
+}
+
+.memori-dropdown--sustainability-value {
+    font-size: 0.85rem;
+    white-space: nowrap;
+}

package/src/components/Header/Header.stories.tsx

@@ -26,6 +26,31 @@ const meta: Meta = {
 
 export default meta;
 
+const historyWithConsumption = [
+  ...history,
+  {
+    ...history[history.length - 1],
+    llmUsage: {
+      energyImpact: {
+        energy: { parsedValue: 0.0012 },
+        gwp: { parsedValue: 0.00045 },
+        wcf: { parsedValue: 0.0021 },
+      },
+    },
+  },
+  {
+    ...history[history.length - 1],
+    text: 'Second sustainability sample',
+    llmUsage: {
+      energyImpact: {
+        energy: 0.0008,
+        gwp: { source: '0.00035' },
+        wcf: { source: '0.0014' },
+      },
+    },
+  },
+] as any;
+
 const Template: Story<Props> = args => {
   const [speakerMuted, setSpeakerMuted] = React.useState(args.speakerMuted);
   const [showSettingsDrawer, setShowSettingsDrawer] = React.useState(false);
@@ -283,3 +308,24 @@ WithLogin.args = {
   hasUserActivatedSpeak: false,
   showLogin: true,
 };
+
+export const WithSustainabilityPopover = Template.bind({});
+WithSustainabilityPopover.args = {
+  memori,
+  history: historyWithConsumption,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  setShowChatHistoryDrawer: () => {},
+  setShowKnownFactsDrawer: () => {},
+  setShowExpertsDrawer: () => {},
+  setShowLoginDrawer: () => {},
+  clearHistory: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: true,
+  showShare: false,
+  showSettings: false,
+  showMessageConsumption: true,
+  apiClient: {
+    backend: {},
+  } as any,
+};

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import {
   Memori,
@@ -23,11 +23,13 @@ import DeepThought from '../icons/DeepThought';
 import Group from '../icons/Group';
 import UserIcon from '../icons/User';
 import MessageIcon from '../icons/Message';
+import Info from '../icons/Info';
 import Logout from '../icons/Logout';
 import { getErrori18nKey } from '../../helpers/error';
 import toast from 'react-hot-toast';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
+import { BADGE_EMOJI } from '../../helpers/llmUsage';
 
 const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
 
@@ -63,6 +65,7 @@ export interface Props {
   apiClient: ReturnType<typeof memoriApiClient>;
   layout?: WidgetProps['layout'];
   additionalSettings?: WidgetProps['additionalSettings'];
+  showMessageConsumption?: boolean;
 }
 
 const Header: React.FC<Props> = ({
@@ -97,11 +100,96 @@ const Header: React.FC<Props> = ({
   apiClient,
   layout,
   additionalSettings,
+  showMessageConsumption = false,
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { uploadAsset, pwlUpdateUser } = apiClient.backend;
   const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
   const [fullScreen, setFullScreen] = useState(false);
+
+  type ImpactMetricType = 'energy' | 'co2' | 'water';
+
+  type LlmUsageEnergyImpact = {
+    energy?: number | { source?: string; parsedValue?: number };
+    gwp?: number | { source?: string; parsedValue?: number };
+    wcf?: number | { source?: string; parsedValue?: number };
+  };
+
+  const getMetricValue = (
+    metric?: number | { source?: string; parsedValue?: number },
+  ): number | undefined => {
+    if (typeof metric === 'number' && Number.isFinite(metric)) return metric;
+    if (!metric || typeof metric !== 'object') return undefined;
+    if (
+      typeof metric.parsedValue === 'number' &&
+      Number.isFinite(metric.parsedValue)
+    ) {
+      return metric.parsedValue;
+    }
+    if (typeof metric.source === 'string') {
+      const parsed = Number(metric.source);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+    return undefined;
+  };
+
+  const formatMetricValue = (value: number, locale: string): string =>
+    new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: Math.abs(value) >= 1 ? 3 : 4,
+    }).format(value);
+
+  const formatImpactInReadableUnit = (
+    value: number,
+    metricType: ImpactMetricType,
+    locale: string,
+  ): string => {
+    const absValue = Math.abs(value);
+
+    if (metricType === 'energy') {
+      if (absValue >= 1) return `${formatMetricValue(value, locale)} kWh`;
+      const wh = value * 1000;
+      if (Math.abs(wh) >= 1) return `${formatMetricValue(wh, locale)} Wh`;
+      return `${formatMetricValue(wh * 1000, locale)} mWh`;
+    }
+
+    if (metricType === 'co2') {
+      if (absValue >= 1) return `${formatMetricValue(value, locale)} kg`;
+      const g = value * 1000;
+      if (Math.abs(g) >= 1) return `${formatMetricValue(g, locale)} g`;
+      return `${formatMetricValue(g * 1000, locale)} mg`;
+    }
+
+    if (absValue >= 1) return `${formatMetricValue(value, locale)} L`;
+    const ml = value * 1000;
+    if (Math.abs(ml) >= 1) return `${formatMetricValue(ml, locale)} mL`;
+    return `${formatMetricValue(ml * 1000, locale)} μL`;
+  };
+
+  const currentLocale = i18n.language || navigator.language || 'en';
+  const chatLog = useMemo(() => ({ lines: history }), [history]);
+  const sustainabilityTotals = useMemo(() => {
+    const totals = { energy: 0, gwp: 0, wcf: 0 };
+    (chatLog?.lines ?? []).forEach(line => {
+      const energyImpact = (line as Message & {
+        llmUsage?: { energyImpact?: LlmUsageEnergyImpact };
+      }).llmUsage?.energyImpact;
+      if (!energyImpact) return;
+      totals.energy += getMetricValue(energyImpact.energy) ?? 0;
+      totals.gwp += getMetricValue(energyImpact.gwp) ?? 0;
+      totals.wcf += getMetricValue(energyImpact.wcf) ?? 0;
+    });
+    return totals;
+  }, [chatLog]);
+  const hasSustainabilityData = useMemo(
+    () =>
+      (chatLog?.lines ?? []).some(
+        line =>
+          !!(line as Message & { llmUsage?: { energyImpact?: LlmUsageEnergyImpact } })
+            .llmUsage?.energyImpact
+      ),
+    [chatLog]
+  );
   useEffect(() => {
     if (document.fullscreenEnabled) {
       setFullScreenAvailable(true);
@@ -219,6 +307,67 @@ const Header: React.FC<Props> = ({
           onClick={() => setShowChatHistoryDrawer(true)}
         />
       )}
+      {showMessageConsumption && hasSustainabilityData && (
+        <Dropdown
+          placement="bottom-right"
+          trigger={
+            <Button
+              primary
+              shape="circle"
+              className={cx('memori-header--button', 'memori-header--button--sustainability', hasSpacedButtons && 'memori-header--button-spaced')}
+              title={t('write_and_speak.showMessageConsumptionLabel') || 'LLM consumption'}
+              icon={<Info />}
+            />
+          }
+        >
+          <div className="memori-dropdown--sustainability">
+            <h4 className="memori-dropdown--sustainability-title">
+              Consumo Totale Chat
+            </h4>
+            <div className="memori-dropdown--sustainability-metrics">
+              <div className="memori-dropdown--sustainability-row">
+                <span className="memori-dropdown--sustainability-label">
+                  <span aria-hidden="true">{BADGE_EMOJI.energy}</span>{' '}
+                  {t('energy') || 'Energy'}
+                </span>
+                <strong className="memori-dropdown--sustainability-value">
+                  {formatImpactInReadableUnit(
+                    sustainabilityTotals.energy,
+                    'energy',
+                    currentLocale
+                  )}
+                </strong>
+              </div>
+              <div className="memori-dropdown--sustainability-row">
+                <span className="memori-dropdown--sustainability-label">
+                  <span aria-hidden="true">{BADGE_EMOJI.co2}</span>{' '}
+                  {t('co2') || 'CO2'}
+                </span>
+                <strong className="memori-dropdown--sustainability-value">
+                  {formatImpactInReadableUnit(
+                    sustainabilityTotals.gwp,
+                    'co2',
+                    currentLocale
+                  )}
+                </strong>
+              </div>
+              <div className="memori-dropdown--sustainability-row">
+                <span className="memori-dropdown--sustainability-label">
+                  <span aria-hidden="true">{BADGE_EMOJI.water}</span>{' '}
+                  {t('water') || 'Water'}
+                </span>
+                <strong className="memori-dropdown--sustainability-value">
+                  {formatImpactInReadableUnit(
+                    sustainabilityTotals.wcf,
+                    'water',
+                    currentLocale
+                  )}
+                </strong>
+              </div>
+            </div>
+          </div>
+        </Dropdown>
+      )}
       {fullScreenAvailable && (
         <Button
           primary

package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx

@@ -790,6 +790,43 @@ function hello() {
 This project helps you build amazing applications.
 </output>`;
 
+const markdownCustomArtifact = `<output class="memori-artifact" data-mimetype="markdown" data-title="CUSTOM_MARKDOWN_TEST.md">
+# Custom Markdown Rendering Test
+
+## Text formatting
+Use **bold**, *italic*, and \`inline code\` in the same sentence.
+
+## Checklist
+- [x] Parse headings
+- [x] Render lists
+- [ ] Verify custom table support
+
+## Table
+| Feature | Expected |
+| --- | --- |
+| Link rendering | Opens in a new tab |
+| Code block | Preserves indentation |
+| Blockquote | Styled correctly |
+
+## Blockquote
+> This is a quoted note to verify markdown styling in preview mode.
+
+## Code block
+\`\`\`ts
+type User = {
+  id: string;
+  name: string;
+  active: boolean;
+};
+
+const toLabel = (user: User) => \`\${user.name} (\${user.id})\`;
+\`\`\`
+
+## Links
+- [Memori website](https://memori.ai)
+- [Example docs](https://example.com/docs)
+</output>`;
+
 const cssArtifact = `<output class="memori-artifact" data-mimetype="css">
 /* Modern CSS Grid Layout */
 .container {
@@ -1112,6 +1149,40 @@ This includes all the essential sections for a project README with proper format
   ),
 };
 
+export const MarkdownCustomRendering: Story = {
+  args: {},
+  render: () => (
+    <Chat
+      memori={mockMemori}
+      tenant={mockTenant}
+      sessionID="test-session"
+      history={[
+        {
+          text: `I generated a custom markdown artifact to validate rendering behavior:
+
+${markdownCustomArtifact}
+
+Please check preview and code tabs to verify the output.`,
+          fromUser: false,
+          timestamp: new Date().toISOString(),
+        },
+      ]}
+      pushMessage={mockPushMessage}
+      simulateUserPrompt={mockSimulateUserPrompt}
+      onChangeUserMessage={mockOnChangeUserMessage}
+      sendMessage={mockSendMessage}
+      setEnableFocusChatInput={mockSetEnableFocusChatInput}
+      stopAudio={mockStopAudio}
+      startListening={mockStartListening}
+      stopListening={mockStopListening}
+      setSendOnEnter={mockSetSendOnEnter}
+      setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
+      showInputs={false}
+      isChatlogPanel={false}
+    />
+  ),
+};
+
 export const CSSStyles: Story = {
   args: {},
   render: () => (