@memori.ai/memori-react 8.30.0 → 8.31.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.30.0",
+  "version": "8.31.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -234,7 +234,6 @@
     "@release-it/conventional-changelog": "5.1.1",
     "@size-limit/preset-small-lib": "8.1.0",
     "@storybook/addon-essentials": "7.4.0",
-    "@storybook/addon-info": "5.3.21",
     "@storybook/addon-links": "7.4.0",
     "@storybook/addon-mdx-gfm": "7.4.0",
     "@storybook/addons": "7.4.0",
@@ -279,7 +278,7 @@
     "release-it": "15.5.0",
     "rimraf": "3.0.2",
     "size-limit": "8.1.0",
-    "storybook": "7.4.0",
+    "storybook": "7.6.21",
     "stylelint": "14.15.0",
     "stylelint-config-idiomatic-order": "9.0.0",
     "stylelint-config-prettier": "9.0.4",
@@ -298,7 +297,7 @@
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.5.1",
-    "dompurify": "^3.2.1",
+    "dompurify": "^3.3.3",
     "ellipsed": "1.6.0",
     "i18next": "22.0.6",
     "katex": "^0.16.11",

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: () => (

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx

@@ -13,6 +13,7 @@ import Code from '../../../icons/Code';
 import { PreviewIcon } from '../../../icons/Preview';
 import Snippet from '../../../Snippet/Snippet';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
+import { renderMsg } from '../../../../helpers/message';
 
 const ArtifactPreview: React.FC<{
   artifact: ArtifactData;
@@ -41,15 +42,22 @@ const ArtifactPreview: React.FC<{
           />
         );
 
-      case 'markdown':
+      case 'markdown': {
+        const { text: renderedMarkdown } = renderMsg(
+          artifact.content,
+          false,
+          'Reasoning...',
+          false
+        );
         return (
           <div
             className="memori-artifact-preview-markdown"
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(artifact.content),
+              __html: renderedMarkdown,
             }}
           />
         );
+      }
         
       default:
         return (
@@ -63,28 +71,6 @@ const ArtifactPreview: React.FC<{
     }
   }, [artifact]);
 
-  /**
-   * Basic markdown rendering
-   */
-  const renderMarkdown = useCallback((markdown: string): string => {
-    return markdown
-      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-      .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
-      .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
-      .replace(/^###### (.*$)/gim, '<h6>$1</h6>')
-      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-      .replace(/\*(.*?)\*/g, '<em>$1</em>')
-      .replace(/`(.*?)`/g, '<code>$1</code>')
-      .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
-      .replace(
-        /\[([^\]]+)\]\(([^)]+)\)/g,
-        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
-      )
-      .replace(/\n/g, '<br>');
-  }, []);
-
   const mapArtifactMimeTypeToSnippetMimeType = useCallback(
     (mimeType: string) => {
       switch (mimeType) {

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -2896,6 +2896,7 @@ const MemoriWidget = ({
     showSettings: showSettings ?? integrationConfig?.showSettings ?? true,
     showChatHistory:
       showChatHistory ?? integrationConfig?.showChatHistory ?? true,
+    showMessageConsumption: enableMessageConsumption,
     hasUserActivatedSpeak,
     showReload: selectedLayout === 'TOTEM',
     showClear: showClear ?? integrationConfig?.showClear ?? false,

package/src/components/layouts/chat.css

@@ -18,6 +18,16 @@
     transition: all 0.05s ease-in-out;
 }
 
+.memori-chat-layout--header .memori-header {
+    display: inline-flex;
+    width: calc(50% - 1rem);
+    max-width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.2rem;
+}
+
 .memori-chat-layout--header-with-artifact {
     display: none;
 }
@@ -144,6 +154,10 @@
 }
 
 @media (max-width: 870px) {
+    .memori-chat-layout--header .memori-header {
+        width: 100%;
+    }
+
     .memori-chat-layout .memori--powered-by {
         top: 3.5rem;
         bottom: auto;

package/src/components/layouts/layouts.stories.tsx

@@ -52,6 +52,7 @@ DefaultLayout.args = {
   showLogin: true,
   multilingual: true,
   avatar3dHidden: true,
+  showMessageConsumption: true,
 };
 
 
@@ -227,18 +228,17 @@ HiddenChat.args = {
 export const ZoomedFullBody = Template.bind({});
 ZoomedFullBody.args = {
   ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  showAudio: true,
-  enableAudio: true,
-  integration: {
-    
-  },
-  memori: {
-    ...memori,
-    voiceType: 'FEMALE',
-  },
-  tenant,
-  layout: 'ZOOMED_FULL_BODY',
+  memoriName: "Layout Storybook",
+  ownerUserName: "Andrea-Patini",
+  memoriID: "ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e",
+  ownerUserID: "91dbc9ba-b684-4fbe-9828-b5980af6cda9",
+  tenantID: "aisuru-staging.aclambda.online",
+  engineURL: "https://engine-staging.memori.ai/memori/v2",
+  apiURL: "https://backend-staging.memori.ai/api/v2",
+  baseURL: "http://localhost:3000",
+  layout: "FULLPAGE",
+  uiLang: "IT",
+  spokenLang: "IT",
+  integrationID: "32922e14-24d6-4f5f-a06b-d963da14a658",
+  showSettings: true
 };

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.30.0';
+export const version = '8.31.0';