@memori.ai/memori-react 8.32.0 → 8.33.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.32.0",
+  "version": "8.33.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -297,7 +297,7 @@
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.5.1",
-    "dompurify": "^3.3.3",
+    "dompurify": "^3.4.0",
     "ellipsed": "1.6.0",
     "i18next": "22.0.6",
     "katex": "^0.16.11",

package/src/components/Header/ChatConsumptionDropdown.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Message } from '@memori.ai/memori-api-client/dist/types';
+import ChatConsumptionDropdown from './ChatConsumptionDropdown';
+
+type TestMessage = Message & {
+  llmUsage?: {
+    provider?: string;
+    model?: string;
+    totalInputTokens?: number;
+    outputTokens?: number;
+    energyImpact?: {
+      energy?: number | { parsedValue?: number };
+      gwp?: number | { parsedValue?: number; source?: string };
+      wcf?: number | { parsedValue?: number; source?: string };
+    };
+  };
+};
+
+describe('ChatConsumptionDropdown', () => {
+  it('renders aggregated token and environmental usage', () => {
+    const history = [
+      {
+        text: 'First response',
+        timestamp: '2021-03-01T12:00:00.000Z',
+        llmUsage: {
+          provider: 'OpenAI',
+          model: 'gpt-5',
+          totalInputTokens: 1000,
+          outputTokens: 200,
+          energyImpact: {
+            energy: { parsedValue: 0.0012 },
+            gwp: { parsedValue: 0.00045 },
+            wcf: { parsedValue: 0.0021 },
+          },
+        },
+      },
+      {
+        text: 'Second response',
+        timestamp: '2021-03-01T12:01:00.000Z',
+        llmUsage: {
+          provider: 'Anthropic',
+          model: 'claude-3',
+          totalInputTokens: 250,
+          outputTokens: 50,
+          energyImpact: {
+            energy: 0.0008,
+            gwp: { source: '0.00035' },
+            wcf: { source: '0.0014' },
+          },
+        },
+      },
+    ] as TestMessage[];
+
+    render(<ChatConsumptionDropdown history={history} />);
+
+    fireEvent.click(screen.getByTitle('write_and_speak.showMessageConsumptionLabel'));
+
+    expect(screen.getByText('chatLogs.totalChatConsumptionTitle')).toBeTruthy();
+    expect(screen.getByText('chatLogs.modelUsage')).toBeTruthy();
+    expect(screen.getByText('chatLogs.environmentalImpact')).toBeTruthy();
+    expect(screen.getByText('1,250')).toBeTruthy();
+    expect(screen.getByText('250')).toBeTruthy();
+    expect(screen.getByText('OpenAI · gpt-5')).toBeTruthy();
+    expect(screen.getByText('Anthropic · claude-3')).toBeTruthy();
+    expect(screen.getByText('2 Wh')).toBeTruthy();
+    expect(screen.getByText('800 mg')).toBeTruthy();
+    expect(screen.getByText('3.5 mL')).toBeTruthy();
+  });
+
+  it('does not render when the chat has no llm usage data', () => {
+    const history = [
+      {
+        text: 'Plain message',
+        timestamp: '2021-03-01T12:00:00.000Z',
+      },
+    ] as TestMessage[];
+
+    const { container } = render(<ChatConsumptionDropdown history={history} />);
+
+    expect(container.firstChild).toBeNull();
+    expect(
+      screen.queryByTitle('write_and_speak.showMessageConsumptionLabel')
+    ).toBeNull();
+  });
+});

package/src/components/Header/ChatConsumptionDropdown.tsx

@@ -0,0 +1,266 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import { Message } from '@memori.ai/memori-api-client/dist/types';
+import { useTranslation } from 'react-i18next';
+import Button from '../ui/Button';
+import Dropdown from '../ui/Dropdown';
+import GasStation from '../icons/GasStation';
+import { BADGE_EMOJI } from '../../helpers/llmUsage';
+
+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 };
+};
+
+type MessageLlmUsage = {
+  provider?: string;
+  model?: string;
+  totalInputTokens?: number;
+  outputTokens?: number;
+  energyImpact?: LlmUsageEnergyImpact;
+};
+
+export interface ChatConsumptionDropdownProps {
+  history: Message[];
+  hasSpacedButtons?: boolean;
+}
+
+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 formatCountValue = (value: number, locale: string): string =>
+  new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 0,
+  }).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 ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
+  history,
+  hasSpacedButtons = false,
+}) => {
+  const { t, i18n } = useTranslation();
+
+  const currentLocale = i18n.language || navigator.language || 'en';
+  const chatLog = useMemo(() => ({ lines: history }), [history]);
+
+  const chatConsumptionTotals = useMemo(() => {
+    const totals = {
+      totalInputTokens: 0,
+      totalOutputTokens: 0,
+      energy: 0,
+      gwp: 0,
+      wcf: 0,
+      models: new Set<string>(),
+    };
+
+    (chatLog?.lines ?? []).forEach(line => {
+      const llmUsage = (line as Message & {
+        llmUsage?: MessageLlmUsage;
+      }).llmUsage;
+
+      if (!llmUsage) return;
+
+      totals.totalInputTokens += llmUsage.totalInputTokens ?? 0;
+      totals.totalOutputTokens += llmUsage.outputTokens ?? 0;
+
+      if (llmUsage.provider || llmUsage.model) {
+        totals.models.add(
+          [llmUsage.provider, llmUsage.model].filter(Boolean).join(' · ')
+        );
+      }
+
+      if (!llmUsage.energyImpact) return;
+
+      const impact = llmUsage.energyImpact;
+      totals.energy += getMetricValue(impact.energy) ?? 0;
+      totals.gwp += getMetricValue(impact.gwp) ?? 0;
+      totals.wcf += getMetricValue(impact.wcf) ?? 0;
+    });
+
+    return totals;
+  }, [chatLog]);
+
+  const llmUsageModels = useMemo(
+    () => Array.from(chatConsumptionTotals.models),
+    [chatConsumptionTotals.models]
+  );
+
+  const hasConsumptionData = useMemo(
+    () =>
+      (chatLog?.lines ?? []).some(
+        line =>
+          !!(line as Message & { llmUsage?: MessageLlmUsage }).llmUsage
+      ),
+    [chatLog]
+  );
+
+  if (!hasConsumptionData) return null;
+
+  return (
+    <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={<GasStation className="memori-header--button--sustainability-icon" />}
+        />
+      }
+    >
+      <div className="memori-dropdown--sustainability">
+        <h4 className="memori-dropdown--sustainability-title">
+          {t('chatLogs.totalChatConsumptionTitle') || 'Consumo Totale Chat'}
+        </h4>
+        <div className="memori-dropdown--sustainability-section">
+          <h5 className="memori-dropdown--sustainability-section-title">
+            {t('chatLogs.modelUsage') || 'Model usage'}
+          </h5>
+          <div className="memori-dropdown--sustainability-summary">
+            <div className="memori-dropdown--sustainability-stat">
+              <span className="memori-dropdown--sustainability-stat-label">
+                {t('chatLogs.input') || 'Input'}
+              </span>
+              <strong className="memori-dropdown--sustainability-stat-value">
+                {formatCountValue(chatConsumptionTotals.totalInputTokens, currentLocale)}
+              </strong>
+              <span className="memori-dropdown--sustainability-stat-meta">
+                {t('chatLogs.tokens') || 'Tokens'}
+              </span>
+            </div>
+            <div className="memori-dropdown--sustainability-stat">
+              <span className="memori-dropdown--sustainability-stat-label">
+                {t('chatLogs.output') || 'Output'}
+              </span>
+              <strong className="memori-dropdown--sustainability-stat-value">
+                {formatCountValue(chatConsumptionTotals.totalOutputTokens, currentLocale)}
+              </strong>
+              <span className="memori-dropdown--sustainability-stat-meta">
+                {t('chatLogs.tokens') || 'Tokens'}
+              </span>
+            </div>
+          </div>
+          {llmUsageModels.length > 0 && (
+            <div className="memori-dropdown--sustainability-row memori-dropdown--sustainability-row--stacked">
+              <span className="memori-dropdown--sustainability-label">
+                {t('chatLogs.provider') || 'Provider'} /{' '}
+                {t('chatLogs.model') || 'Model'}
+              </span>
+              <div className="memori-dropdown--sustainability-tags">
+                {llmUsageModels.map(modelLabel => (
+                  <span
+                    key={modelLabel}
+                    className="memori-dropdown--sustainability-tag"
+                  >
+                    {modelLabel}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="memori-dropdown--sustainability-metrics">
+          <h5 className="memori-dropdown--sustainability-section-title">
+            {t('chatLogs.environmentalImpact') || 'Environmental impact'}
+          </h5>
+          <div className="memori-dropdown--sustainability-row">
+            <span className="memori-dropdown--sustainability-label">
+              <span aria-hidden="true">{BADGE_EMOJI.energy}</span>{' '}
+              {t('chatLogs.energy') || 'Energy'}
+            </span>
+            <strong className="memori-dropdown--sustainability-value">
+              {formatImpactInReadableUnit(
+                chatConsumptionTotals.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('chatLogs.co2') || 'CO2'}
+            </span>
+            <strong className="memori-dropdown--sustainability-value">
+              {formatImpactInReadableUnit(
+                chatConsumptionTotals.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('chatLogs.water') || 'Water'}
+            </span>
+            <strong className="memori-dropdown--sustainability-value">
+              {formatImpactInReadableUnit(
+                chatConsumptionTotals.wcf,
+                'water',
+                currentLocale
+              )}
+            </strong>
+          </div>
+        </div>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default ChatConsumptionDropdown;

package/src/components/Header/Header.css

@@ -105,12 +105,11 @@
     margin-right: 0;
 }
 
-.memori-header--button--sustainability{
+.memori-header--button--sustainability {
     max-height: 37px;
 }
 
-
-.memori-dropdown--avatar-input{
+.memori-dropdown--avatar-input {
     position: absolute;
     top: 20px;
     left: 15px;
@@ -120,60 +119,164 @@
     opacity: 0;
 }
 
-
-
-.memori-dropdown--avatar:hover, .memori-dropdown--avatar-initial:hover, .memori-dropdown--avatar-input:hover{
+.memori-dropdown--avatar:hover,
+.memori-dropdown--avatar-initial:hover,
+.memori-dropdown--avatar-input:hover {
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
     cursor: pointer;
     pointer-events: cursor;
     transform: scale(1.05);
 }
 
-.memori-dropdown--avatar-initial:hover + .memori-dropdown--avatar-input,.memori-dropdown--avatar:hover + .memori-dropdown--avatar-input{
+.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%);
+    min-width: 300px;
+    padding: 0.85rem;
+    border: 1px solid color-mix(in srgb, var(--memori-button-border-color, #d9d9d9) 75%, white);
+    border-radius: 12px;
+    background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(245, 248, 252, 0.98) 100%);
+    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
 }
 
 .memori-dropdown--sustainability-title {
-    margin: 0 0 0.5rem 0;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+    margin: 0.2rem 0.2rem 1rem;
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 92%, #36506b);
     font-size: 0.95rem;
     font-weight: 700;
     line-height: 1.2;
-    text-align: center;
+    text-align: left;
 }
 
+.memori-dropdown--sustainability-section,
 .memori-dropdown--sustainability-metrics {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
 }
 
+.memori-dropdown--sustainability-section-title {
+    margin: 0 0 0.1rem;
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 62%, #64748b);
+    font-size: 0.71rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    line-height: 1.2;
+    text-transform: uppercase;
+}
+
+.memori-dropdown--sustainability-section {
+    padding-bottom: 0.65rem;
+    margin-bottom: 0.65rem;
+    /* border-bottom: 1px solid rgba(15, 23, 42, 0.08); */
+}
+
+.memori-dropdown--sustainability-summary {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.memori-dropdown--sustainability-stat {
+    display: flex;
+    flex-direction: column;
+    padding: 0.55rem 0.65rem;
+    border: 1px solid rgba(15, 23, 42, 0.07);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.78);
+    gap: 0.15rem;
+}
+
+.memori-dropdown--sustainability-stat-label,
+.memori-dropdown--sustainability-stat-meta {
+    font-size: 0.72rem;
+    line-height: 1.2;
+}
+
+.memori-dropdown--sustainability-stat-label {
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 68%, #6b7280);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+.memori-dropdown--sustainability-stat-value {
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 94%, #1d4ed8);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.1;
+}
+
+.memori-dropdown--sustainability-stat-meta {
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 55%, #64748b);
+}
+
 .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);
+    padding: 0.5rem 0.6rem;
+    border: 1px solid rgba(15, 23, 42, 0.05);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.72);
     gap: 1rem;
 }
 
+.memori-dropdown--sustainability-row--stacked {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.45rem;
+}
+
 .memori-dropdown--sustainability-label {
     display: inline-flex;
     align-items: center;
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 76%, #64748b);
     font-size: 0.82rem;
-    font-weight: 500;
+    font-weight: 600;
     gap: 0.35rem;
-    opacity: 0.9;
 }
 
 .memori-dropdown--sustainability-value {
-    font-size: 0.85rem;
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 96%, black);
+    font-size: 0.88rem;
+    font-weight: 700;
     white-space: nowrap;
 }
+
+.memori-dropdown--sustainability-value--multiline {
+    width: 100%;
+    overflow-wrap: anywhere;
+    white-space: normal;
+}
+
+.memori-dropdown--sustainability-tags {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+
+.memori-dropdown--sustainability-tag {
+    display: inline-flex;
+    min-height: 1.75rem;
+    align-items: center;
+    padding: 0.2rem 0.55rem;
+    /* border: 1px solid rgba(15, 23, 42, 0.08); */
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.88);
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 85%, #475569);
+    font-size: 0.76rem;
+    font-weight: 600;
+    line-height: 1.1;
+}
+
+@media (max-width: 480px) {
+    .memori-dropdown--sustainability {
+        min-width: min(300px, calc(100vw - 2rem));
+    }
+}

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

@@ -4,7 +4,7 @@ import { memori, tenant, history } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import Header, { Props } from './Header';
 import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
-import LoginDrawer from '../LoginDrawer/LoginDrawer'; 
+import LoginDrawer from '../LoginDrawer/LoginDrawer';
 import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 import './Header.css';
@@ -42,6 +42,13 @@ const historyWithConsumption = [
     ...history[history.length - 1],
     text: 'Second sustainability sample',
     llmUsage: {
+      provider: 'OpenAI',
+      model: 'gpt-5',
+      totalInputTokens: 19168,
+      inputCacheReadTokens: 0,
+      inputCacheWriteTokens: 0,
+      outputTokens: 588,
+      durationMs: 13697,
       energyImpact: {
         energy: 0.0008,
         gwp: { source: '0.00035' },
@@ -64,46 +71,46 @@ const Template: Story<Props> = args => {
   return (
     <I18nWrapper>
       <ArtifactProvider>
-      <Header
-        {...args}
-        speakerMuted={speakerMuted}
-        setSpeakerMuted={setSpeakerMuted}
-        showSettings
-        setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
-        setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)}
-        setShowExpertsDrawer={() => setShowExpertsDrawer(true)}
-        setShowLoginDrawer={() => setShowLoginDrawer(true)}
-      />
-      <SettingsDrawer
-        open={!!showSettingsDrawer}
-        onClose={() => setShowSettingsDrawer(false)}
-        microphoneMode="HOLD_TO_TALK"
-        setMicrophoneMode={() => {}}
-        continuousSpeechTimeout={2}
-        setContinuousSpeechTimeout={() => {}}
-        controlsPosition="bottom"
-        setControlsPosition={() => {}}
-        hideEmissions={false}
-        setHideEmissions={() => {}}
-        setAvatarType={() => {}}
-        setEnablePositionControls={() => {}}
-      />
-      <LoginDrawer
-        setUser={() => {}}
-        tenant={tenant}
-        open={!!showLoginDrawer}
-        onClose={() => setShowLoginDrawer(false)}
-        onLogin={(user, token) => {
-          console.log(user, token);
-          setShowLoginDrawer(false);
-        }}
-        onLogout={() => setShowLoginDrawer(false)}
-        apiClient={
-          {
-            backend: {},
-          } as any
-        }
-      />
+        <Header
+          {...args}
+          speakerMuted={speakerMuted}
+          setSpeakerMuted={setSpeakerMuted}
+          showSettings
+          setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
+          setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)}
+          setShowExpertsDrawer={() => setShowExpertsDrawer(true)}
+          setShowLoginDrawer={() => setShowLoginDrawer(true)}
+        />
+        <SettingsDrawer
+          open={!!showSettingsDrawer}
+          onClose={() => setShowSettingsDrawer(false)}
+          microphoneMode="HOLD_TO_TALK"
+          setMicrophoneMode={() => {}}
+          continuousSpeechTimeout={2}
+          setContinuousSpeechTimeout={() => {}}
+          controlsPosition="bottom"
+          setControlsPosition={() => {}}
+          hideEmissions={false}
+          setHideEmissions={() => {}}
+          setAvatarType={() => {}}
+          setEnablePositionControls={() => {}}
+        />
+        <LoginDrawer
+          setUser={() => {}}
+          tenant={tenant}
+          open={!!showLoginDrawer}
+          onClose={() => setShowLoginDrawer(false)}
+          onLogin={(user, token) => {
+            console.log(user, token);
+            setShowLoginDrawer(false);
+          }}
+          onLogout={() => setShowLoginDrawer(false)}
+          apiClient={
+            {
+              backend: {},
+            } as any
+          }
+        />
       </ArtifactProvider>
     </I18nWrapper>
   );