@memori.ai/memori-react 8.31.0 → 8.33.0

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>
   );

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import cx from 'classnames';
 import {
   Memori,
@@ -23,13 +23,12 @@ 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';
+import ChatConsumptionDropdown from './ChatConsumptionDropdown';
 
 const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
 
@@ -106,90 +105,6 @@ const Header: React.FC<Props> = ({
   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);
@@ -307,66 +222,11 @@ 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>
+      {showMessageConsumption && (
+        <ChatConsumptionDropdown
+          history={history}
+          hasSpacedButtons={hasSpacedButtons}
+        />
       )}
       {fullScreenAvailable && (
         <Button

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -1,6 +1,3 @@
-
-
-
 .memori-chat-inputs--mic {
     z-index: 1;
     margin-left: 0.33rem;
@@ -117,6 +114,20 @@
     color: red !important;
 }
 
+.memori-chat-inputs--mic-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content {
+    top: -50%;
+    right: 115%;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    font-size: 0.85em;
+    opacity: 0;
+    text-align: center;
+    /* left: 0; */
+    transform: translateY(-100%);
+}
+
 /* Mobile-specific improvements for listening state */
 @media (hover: none) and (pointer: coarse) {
     .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {

package/src/components/MicrophoneButton/MicrophoneButton.tsx

@@ -49,7 +49,7 @@ const MicrophoneButton = ({
       e.preventDefault();
       e.stopPropagation();
     }
-    
+
     if (intervalRef.current) {
       clearTimeout(intervalRef.current);
       intervalRef.current = null;
@@ -64,13 +64,21 @@ const MicrophoneButton = ({
     e.stopPropagation();
   };
 
-  const handleTouchStart = (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<Element, MouseEvent>) => {
+  const handleTouchStart = (
+    e:
+      | React.TouchEvent<HTMLButtonElement>
+      | React.MouseEvent<Element, MouseEvent>
+  ) => {
     e.preventDefault();
     e.stopPropagation();
     startHold(e);
   };
 
-  const handleTouchEnd = (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<Element, MouseEvent>) => {
+  const handleTouchEnd = (
+    e:
+      | React.TouchEvent<HTMLButtonElement>
+      | React.MouseEvent<Element, MouseEvent>
+  ) => {
     e.preventDefault();
     e.stopPropagation();
     stopHold(e);
@@ -83,6 +91,7 @@ const MicrophoneButton = ({
   return (
     <Tooltip
       visible={!!micBtnTooltip}
+      className="memori-chat-inputs--mic-tooltip"
       content={
         <span>
           {micBtnTooltip ||

package/src/components/icons/GasStation.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+const GasStation = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke="currentColor"
+      strokeWidth={1.5}
+      d="M16 22V8c0-2.828 0-4.243-.879-5.121C14.243 2 12.828 2 10 2H9c-2.828 0-4.243 0-5.121.879C3 3.757 3 5.172 3 8v14"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth={1.5}
+      d="M11 6H8c-.943 0-1.414 0-1.707.293C6 6.586 6 7.057 6 8c0 .943 0 1.414.293 1.707C6.586 10 7.057 10 8 10h3c.943 0 1.414 0 1.707-.293C13 9.414 13 8.943 13 8c0-.943 0-1.414-.293-1.707C12.414 6 11.943 6 11 6Z"
+    />
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth={1.5}
+      d="M7 17h5M17 22H2M19.5 4l1.233.986c.138.11.207.166.27.222a3 3 0 0 1 .992 2.066c.005.084.005.172.005.348V18.5a1.5 1.5 0 0 1-3 0v-.071c0-.79-.64-1.429-1.429-1.429H16"
+    />
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth={1.5}
+      d="M22 8h-1.5A1.5 1.5 0 0 0 19 9.5v2.419a1.5 1.5 0 0 0 1.026 1.423L22 14"
+    />
+  </svg>
+)
+export default GasStation;

package/src/components/ui/Tooltip.tsx

@@ -5,7 +5,13 @@ import cx from 'classnames';
 export interface Props {
   content: string | JSX.Element | React.ReactNode;
   className?: string;
-  align?: 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+  align?:
+    | 'left'
+    | 'right'
+    | 'topLeft'
+    | 'topRight'
+    | 'bottomLeft'
+    | 'bottomRight';
   disabled?: boolean;
   children: React.ReactNode;
   visible?: boolean;
@@ -73,7 +79,10 @@ const Tooltip: FC<Props> = ({
     if (!isOpen) return;
     updatePosition();
     const onScrollOrResize = () => updatePosition();
-    window.addEventListener('scroll', onScrollOrResize, { passive: true, capture: true });
+    window.addEventListener('scroll', onScrollOrResize, {
+      passive: true,
+      capture: true,
+    });
     window.addEventListener('resize', onScrollOrResize);
     return () => {
       window.removeEventListener('scroll', onScrollOrResize, true);
@@ -100,6 +109,7 @@ const Tooltip: FC<Props> = ({
               'memori-tooltip',
               'memori-tooltip--portal',
               `memori-tooltip--align-${align}`,
+              className,
               { 'memori-tooltip--visible': true }
             )}
             style={{
@@ -114,7 +124,6 @@ const Tooltip: FC<Props> = ({
           >
             <div
               className="memori-tooltip--content memori-tooltip--content-portal"
-              style={{ pointerEvents: 'auto' }}
               onMouseEnter={handleContentEnter}
               onMouseLeave={handleContentLeave}
             >

package/src/locales/de.json

@@ -383,6 +383,9 @@
     "co2": "CO2",
     "water": "Wasser",
     "usageBadgesHint": "Klicke auf einen dieser Buttons, um mehr Informationen zu sehen",
+    "totalChatConsumptionTitle": "Gesamter Chat-Verbrauch",
+    "modelUsage": "Modellnutzung",
+    "environmentalImpact": "Umweltbelastung",
     "impactComparisonUnavailable": "Indikativer Vergleich nicht verfuegbar.",
     "impactComparisonEnergy": "Indikativer Vergleich: in etwa wie eine 10-W-LED-Lampe fuer {{duration}} eingeschaltet lassen.",
     "impactComparisonCo2": "Indikativer Vergleich: etwa {{distance}} mit einem durchschnittlichen Benzinauto gefahren.",

package/src/locales/en.json

@@ -454,6 +454,9 @@
     "co2": "CO2",
     "water": "Water",
     "usageBadgesHint": "Click one of these buttons to show more information",
+    "totalChatConsumptionTitle": "Total Chat Consumption",
+    "modelUsage": "Model usage",
+    "environmentalImpact": "Environmental impact",
     "impactComparisonUnavailable": "Indicative comparison unavailable.",
     "impactComparisonEnergy": "Indicative comparison: roughly like keeping a 10 W LED bulb on for {{duration}}.",
     "impactComparisonCo2": "Indicative comparison: about {{distance}} traveled by an average gasoline car.",

package/src/locales/es.json

@@ -410,6 +410,9 @@
     "co2": "CO2",
     "water": "Agua",
     "usageBadgesHint": "Haz clic en uno de estos botones para ver más información",
+    "totalChatConsumptionTitle": "Consumo Total del Chat",
+    "modelUsage": "Uso del modelo",
+    "environmentalImpact": "Impacto ambiental",
     "impactComparisonUnavailable": "Comparacion indicativa no disponible.",
     "impactComparisonEnergy": "Comparacion indicativa: aproximadamente como mantener encendida una bombilla LED de 10 W durante {{duration}}.",
     "impactComparisonCo2": "Comparacion indicativa: aproximadamente {{distance}} recorridos en un coche de gasolina promedio.",

package/src/locales/fr.json

@@ -418,6 +418,9 @@
     "co2": "CO2",
     "water": "Eau",
     "usageBadgesHint": "Cliquez sur un de ces boutons pour afficher plus d'informations",
+    "totalChatConsumptionTitle": "Consommation Totale du Chat",
+    "modelUsage": "Utilisation du modèle",
+    "environmentalImpact": "Impact environnemental",
     "impactComparisonUnavailable": "Comparaison indicative non disponible.",
     "impactComparisonEnergy": "Comparaison indicative : environ comme laisser allumee une ampoule LED de 10 W pendant {{duration}}.",
     "impactComparisonCo2": "Comparaison indicative : environ {{distance}} parcourus en voiture essence moyenne.",

package/src/locales/it.json

@@ -451,6 +451,9 @@
     "co2": "CO2",
     "water": "Acqua",
     "usageBadgesHint": "Clicca uno di questi pulsanti per mostrare maggiori informazioni",
+    "totalChatConsumptionTitle": "Consumo Totale Chat",
+    "modelUsage": "Utilizzo del modello",
+    "environmentalImpact": "Impatto ambientale",
     "impactComparisonUnavailable": "Confronto indicativo non disponibile.",
     "impactComparisonEnergy": "Confronto indicativo: circa quanto tenere accesa una lampadina LED da 10 W per {{duration}}.",
     "impactComparisonCo2": "Confronto indicativo: circa {{distance}} percorsi in auto a benzina media.",

package/src/version.ts

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