@memori.ai/memori-react 8.29.0 → 8.30.0

package/src/components/BlockedMemoriBadge/__snapshots__/BlockedMemoriBadge.test.tsx.snap

@@ -5,11 +5,6 @@ exports[`renders BlockedMemoriBadge for not enough credits unchanged 1`] = `
   <div
     class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--content"
-    >
-      notEnoughCredits
-    </div>
     <div
       class="memori-tooltip--trigger"
     >
@@ -45,11 +40,6 @@ exports[`renders BlockedMemoriBadge unchanged 1`] = `
   <div
     class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--content"
-    >
-      memoriBlockedAnon
-    </div>
     <div
       class="memori-tooltip--trigger"
     >
@@ -85,15 +75,6 @@ exports[`renders BlockedMemoriBadge with giver info unchanged 1`] = `
   <div
     class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--content"
-    >
-      memoriBlockedUntil
-       memoriBlockedReasonExceedChats
-      <br />
-      
-memoriBlockedGiverHelper
-    </div>
     <div
       class="memori-tooltip--trigger"
     >
@@ -129,11 +110,6 @@ exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
   <div
     class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--content"
-    >
-      memoriBlockedAnon
-    </div>
     <div
       class="memori-tooltip--trigger"
     >
@@ -169,11 +145,6 @@ exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
   <div
     class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--content"
-    >
-      memoriBlockedAnon
-    </div>
     <div
       class="memori-tooltip--trigger"
     >

package/src/components/Chat/Chat.css

@@ -6,15 +6,6 @@
     flex-direction: column;
 }
 
-.memori-chat-wrapper--expanded {
-    /* Ensure proper spacing when textarea is expanded */
-}
-
-/* Handle the focused chat state on mobile */
-.memori-chat--wrapper.chat-focused {
-    /* Mobile keyboard adjustment */
-}
-
 @media (max-width: 768px) {
     .memori-chat--wrapper.chat-focused {
         padding-bottom: 0;
@@ -181,4 +172,114 @@
     font-size: 1.2rem;
     font-weight: 500;
     text-align: center;
+}
+
+.memori-chat--llm-usage {
+    margin-top: 0.625rem;
+}
+
+.memori-chat--usage-inside-bubble {
+    margin-top: 0.25rem;
+}
+
+.memori-chat--llm-usage-hr {
+    border: 0;
+    border-top: 1px solid rgba(148, 163, 184, 0.35);
+    margin: 0 0 0.5rem;
+}
+
+.memori-chat--llm-usage-hint {
+    margin: 0 0 0.5rem;
+    color: #64748b;
+    font-size: 0.75rem;
+}
+
+.memori-chat--llm-usage-badges {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+    gap: 0.375rem;
+}
+
+.memori-chat--usage-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.35rem 0.5rem;
+    border: 1px solid #d4d8dd;
+    border-radius: 999px;
+    background: #fff;
+    color: #1f2937;
+    cursor: pointer;
+    font-size: 0.75rem;
+    gap: 0.25rem;
+    line-height: 1;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.memori-chat--usage-badge:hover {
+    border-color: var(--memori-primary,#1890ff);
+    background-color: #f8fafc;
+    color: var(--memori-primary,#1890ff);
+}
+
+.memori-chat--usage-badge:focus-visible {
+    outline: 2px solid var(--memori-primary);
+    outline-offset: 2px;
+}
+
+.memori-chat--usage-badge-value {
+    font-weight: 600;
+}
+
+.memori-chat--usage-modal .memori-modal--panel {
+    min-width: 20rem;
+    max-width: 30rem;
+}
+
+.memori-chat--usage-details {
+    margin: 0;
+}
+
+.memori-chat--usage-details div {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.375rem 0;
+    gap: 1rem;
+}
+
+.memori-chat--usage-details dt {
+    color: #64748b;
+    font-size: 0.875rem;
+}
+
+.memori-chat--usage-details dd {
+    margin: 0;
+    color: #111827;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-align: right;
+}
+
+.memori-chat--usage-educational-content {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0.25rem;
+    gap: 0.5rem;
+}
+
+.memori-chat--usage-metric-value {
+    display: block;
+    margin: 0;
+    color: #111827;
+    font-size: 1.125rem;
+}
+
+.memori-chat--usage-comparable {
+    margin: 0;
+    color: #374151;
+    font-size: 0.875rem;
+}
+
+.memori-chat--usage-educational-content p {
+    margin: 0;
 }

package/src/components/Chat/Chat.stories.tsx

@@ -100,6 +100,48 @@ WithHints.args = {
   setSendOnEnter: () => {},
 };
 
+export const WithMessageConsumption = Template.bind({});
+WithMessageConsumption.args = {
+  memori,
+  tenant,
+  sessionID,
+  dialogState,
+  layout: 'DEFAULT',
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+  showMessageConsumption: true,
+  history: [
+    ...history.slice(0, Math.max(0, history.length - 2)),
+    // Add one AI message with llmUsage for the badges
+    {
+      ...(history.find(m => !m.fromUser) ?? history[history.length - 1]),
+      fromUser: false,
+      text: 'Risposta di esempio con consumo LLM.',
+      llmUsage: {
+        provider: 'openai',
+        model: 'gpt-4.1-mini',
+        totalInputTokens: 123,
+        inputCacheReadTokens: 10,
+        inputCacheWriteTokens: 5,
+        outputTokens: 456,
+        durationMs: 2345,
+        energyImpact: {
+          energy: 0.00012,
+          energyUnit: 'kWh',
+          gwp: 0.00009,
+          gwpUnit: 'kgCO2eq',
+          wcf: 0.02,
+          wcfUnit: 'L',
+        },
+      },
+    } as any,
+  ],
+};
+
 export const WithArtifacts = Template.bind({});
 WithArtifacts.args = {
   memori,

package/src/components/Chat/Chat.test.tsx

@@ -225,6 +225,53 @@ it('renders Chat with context vars unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders Chat with message consumption unchanged', () => {
+  const { container } = render(
+    <ArtifactProvider>
+      <Chat
+        memori={memori}
+        tenant={tenant}
+        dialogState={dialogState}
+        layout="DEFAULT"
+        client={client}
+        history={[
+          ...(history as any),
+          {
+            text: 'AI message with usage',
+            fromUser: false,
+            timestamp: new Date().toISOString(),
+            llmUsage: {
+              provider: 'openai',
+              model: 'gpt-4.1-mini',
+              totalInputTokens: 10,
+              outputTokens: 20,
+              durationMs: 1000,
+              energyImpact: { energy: 0.001, energyUnit: 'kWh' },
+            },
+          } as any,
+        ]}
+        pushMessage={jest.fn()}
+        sessionID={sessionID}
+        simulateUserPrompt={jest.fn()}
+        setAttachmentsMenuOpen={jest.fn()}
+        setSendOnEnter={jest.fn()}
+        userMessage=""
+        onChangeUserMessage={jest.fn()}
+        sendMessage={jest.fn()}
+        stopListening={jest.fn()}
+        isPlayingAudio={false}
+        stopAudio={jest.fn()}
+        showMicrophone={false}
+        listening={false}
+        startListening={jest.fn()}
+        setEnableFocusChatInput={jest.fn()}
+        showMessageConsumption
+      />
+    </ArtifactProvider>
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders Chat with user unchanged', () => {
   const { container } = render(
     <ArtifactProvider

package/src/components/Chat/Chat.tsx

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, memo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  memo,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import cx from 'classnames';
 import {
   DialogState,
@@ -23,7 +30,21 @@ import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
 import ArtifactHandler from '../MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler';
 import { DocumentIcon } from '../icons/Document';
 import { useTranslation } from 'react-i18next';
-import { maxDocumentsPerMessage, maxTotalMessagePayloadDefault, maxDocumentContentLength, pasteAsCardLineThreshold, pasteAsCardCharThreshold } from '../../helpers/constants';
+import { maxDocumentsPerMessage, maxDocumentContentLength, pasteAsCardLineThreshold, pasteAsCardCharThreshold } from '../../helpers/constants';
+import Modal from '../ui/Modal';
+import Tooltip from '../ui/Tooltip';
+import {
+  BADGE_EMOJI,
+  buildLlmUsageHtml,
+  formatDuration,
+  formatImpactWithApiUnit,
+  formatIntegerValue,
+  getImpactComparison,
+  getMetricValue,
+  LlmUsageLabels,
+  LlmUsageOnLine,
+  UsageBadgeType,
+} from '../../helpers/llmUsage';
 export interface Props {
   memori: Memori;
   tenant?: Tenant;
@@ -46,6 +67,7 @@ export interface Props {
   showTranslationOriginal?: boolean;
   showWhyThisAnswer?: boolean;
   showReasoning?: boolean;
+  showMessageConsumption?: boolean;
   client?: ReturnType<typeof memoriApiClient>;
   preview?: boolean;
   microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
@@ -83,6 +105,12 @@ export interface Props {
 
 }
 
+type MessageWithLlmUsage = Message & { llmUsage?: LlmUsageOnLine };
+interface UsageBadgeModalState {
+  type: UsageBadgeType;
+  usage: LlmUsageOnLine;
+}
+
 const Chat: React.FC<Props> = ({
   memori,
   tenant,
@@ -105,6 +133,7 @@ const Chat: React.FC<Props> = ({
   showCopyButton = true,
   showTranslationOriginal = false,
   showReasoning = false,
+  showMessageConsumption = false,
   preview = false,
   instruct = false,
   showInputs = true,
@@ -138,7 +167,50 @@ const Chat: React.FC<Props> = ({
 
   const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
+  const [activeUsageBadge, setActiveUsageBadge] =
+    useState<UsageBadgeModalState | null>(null);
+  const chatWrapperRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
+  const locale = (translateTo || memori.culture || 'it-IT').replace('_', '-');
+
+  const llmUsageLabels = useMemo<LlmUsageLabels>(
+    () => ({
+      llm: t('chatLogs.llm', { defaultValue: 'LLM' }),
+      model: t('chatLogs.model', { defaultValue: 'Model' }),
+      provider: t('chatLogs.provider', { defaultValue: 'Provider' }),
+      tokens: t('chatLogs.tokens', { defaultValue: 'Tokens' }),
+      input: t('chatLogs.input', { defaultValue: 'Input' }),
+      output: t('chatLogs.output', { defaultValue: 'Output' }),
+      cacheRead: t('chatLogs.cacheRead', { defaultValue: 'Cache read' }),
+      cacheWrite: t('chatLogs.cacheWrite', { defaultValue: 'Cache write' }),
+      duration: t('chatLogs.duration', { defaultValue: 'Duration' }),
+      energy: t('chatLogs.energy', { defaultValue: 'Energy' }),
+      co2: t('chatLogs.co2', { defaultValue: 'CO2' }),
+      water: t('chatLogs.water', { defaultValue: 'Water' }),
+      usageBadgesHint: t('chatLogs.usageBadgesHint', {
+        defaultValue: 'Click one of these buttons to show more information',
+      }),
+    }),
+    [t],
+  );
+
+  const usageHtmlByIndex = useMemo(
+    () =>
+      history.map((message, index) => {
+        const messageWithUsage = message as MessageWithLlmUsage;
+        return showMessageConsumption &&
+          !message.fromUser &&
+          messageWithUsage.llmUsage
+          ? buildLlmUsageHtml(
+              messageWithUsage.llmUsage,
+              llmUsageLabels,
+              index,
+              locale,
+            )
+          : '';
+      }),
+    [history, llmUsageLabels, locale, showMessageConsumption],
+  );
   const scrollToBottom = useCallback(() => {
     if (isHistoryView) return;
     setTimeout(() => {
@@ -269,8 +341,40 @@ const Chat: React.FC<Props> = ({
     };
   }, [showUpload]);
 
+  useEffect(() => {
+    const wrapper = chatWrapperRef.current;
+    if (!wrapper || !showMessageConsumption) return;
+
+    const handleUsageBadgeClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+      const button = target?.closest<HTMLElement>(
+        '[data-llm-badge-type][data-line-index]',
+      );
+      if (!button) return;
+
+      const lineIndex = Number(button.dataset.lineIndex);
+      const badgeType = button.dataset.llmBadgeType as UsageBadgeType | undefined;
+      if (!Number.isInteger(lineIndex) || !badgeType) return;
+
+      const line = (history?.[lineIndex] as MessageWithLlmUsage) ?? null;
+      if (!line?.llmUsage) return;
+
+      event.preventDefault();
+      setActiveUsageBadge({
+        type: badgeType,
+        usage: line.llmUsage,
+      });
+    };
+
+    wrapper.addEventListener('click', handleUsageBadgeClick);
+    return () => {
+      wrapper.removeEventListener('click', handleUsageBadgeClick);
+    };
+  }, [history, showMessageConsumption]);
+
   return (
     <div
+      ref={chatWrapperRef}
       className={cx('memori-chat--wrapper', {
         'memori-chat-wrapper--translate': translateTo,
         'memori-chat-wrapper--expanded': isTextareaExpanded,
@@ -423,6 +527,7 @@ const Chat: React.FC<Props> = ({
                 useMathFormatting={useMathFormatting}
                 showFunctionCache={showFunctionCache}
                 showReasoning={showReasoning}
+                usageHtml={usageHtmlByIndex[index]}
               />
 
               {showDates && !!message.timestamp && (
@@ -552,9 +657,7 @@ const Chat: React.FC<Props> = ({
           isPlayingAudio={isPlayingAudio}
           showMicrophone={showMicrophone}
           memoriID={memori?.memoriID}
-          maxTotalMessagePayload={
-            maxTotalMessagePayload ?? maxTotalMessagePayloadDefault
-          }
+          maxTotalMessagePayload={maxTotalMessagePayload}
           maxTextareaCharacters={maxTextareaCharacters}
           maxDocumentsPerMessage={maxDocumentsPerMessage}
           maxDocumentContentLength={maxDocumentContentLength}
@@ -562,6 +665,136 @@ const Chat: React.FC<Props> = ({
           pasteAsCardCharThreshold={pasteAsCardCharThreshold}
         />
       )}
+
+      <Modal
+        open={!!activeUsageBadge}
+        onClose={() => setActiveUsageBadge(null)}
+        title={
+          activeUsageBadge?.type
+            ? `${BADGE_EMOJI[activeUsageBadge.type]} ${
+                llmUsageLabels[activeUsageBadge.type]
+              }`
+            : undefined
+        }
+        className="memori-chat--usage-modal"
+      >
+        {activeUsageBadge?.type === 'llm' && (
+          <dl className="memori-chat--usage-details">
+            <div>
+              <dt>{llmUsageLabels.provider}</dt>
+              <dd>{activeUsageBadge.usage.provider ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>{llmUsageLabels.model}</dt>
+              <dd>{activeUsageBadge.usage.model ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>
+                {llmUsageLabels.tokens} {llmUsageLabels.input}
+              </dt>
+              <dd>
+                {formatIntegerValue(
+                  activeUsageBadge.usage.totalInputTokens ?? 0,
+                  locale,
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>
+                {llmUsageLabels.tokens} {llmUsageLabels.output}
+              </dt>
+              <dd>
+                {formatIntegerValue(activeUsageBadge.usage.outputTokens ?? 0, locale)}
+              </dd>
+            </div>
+          </dl>
+        )}
+
+        {activeUsageBadge?.type === 'energy' && (
+          <div className="memori-chat--usage-educational-content">
+            <strong className="memori-chat--usage-metric-value">
+              {formatImpactWithApiUnit(
+                getMetricValue(activeUsageBadge.usage.energyImpact?.energy) ?? 0,
+                activeUsageBadge.usage.energyImpact?.energyUnit,
+                'kWh',
+                'energy',
+                locale,
+              )}
+            </strong>
+            <Tooltip
+              content={t('chatLogs.approximateValuesTooltip', {
+                defaultValue: 'These values are approximate.',
+              })}
+            >
+              <p className="memori-chat--usage-comparable">
+                {getImpactComparison(
+                  getMetricValue(activeUsageBadge.usage.energyImpact?.energy) ?? 0,
+                  'energy',
+                  locale,
+                  t,
+                )}
+              </p>
+            </Tooltip>
+            <p>{t('chatLogs.energyImpactDescription')}</p>
+          </div>
+        )}
+        {activeUsageBadge?.type === 'co2' && (
+          <div className="memori-chat--usage-educational-content">
+            <strong className="memori-chat--usage-metric-value">
+              {formatImpactWithApiUnit(
+                getMetricValue(activeUsageBadge.usage.energyImpact?.gwp) ?? 0,
+                activeUsageBadge.usage.energyImpact?.gwpUnit,
+                'kgCO2eq',
+                'co2',
+                locale,
+              )}
+            </strong>
+            <Tooltip
+              content={t('chatLogs.approximateValuesTooltip', {
+                defaultValue: 'These values are approximate.',
+              })}
+            >
+              <p className="memori-chat--usage-comparable">
+                {getImpactComparison(
+                  getMetricValue(activeUsageBadge.usage.energyImpact?.gwp) ?? 0,
+                  'co2',
+                  locale,
+                  t,
+                )}
+              </p>
+            </Tooltip>
+            <p>{t('chatLogs.co2ImpactDescription')}</p>
+          </div>
+        )}
+        {activeUsageBadge?.type === 'water' && (
+          <div className="memori-chat--usage-educational-content">
+            <strong className="memori-chat--usage-metric-value">
+              {formatImpactWithApiUnit(
+                getMetricValue(activeUsageBadge.usage.energyImpact?.wcf) ?? 0,
+                activeUsageBadge.usage.energyImpact?.wcfUnit,
+                'L',
+                'water',
+                locale,
+              )}
+            </strong>
+            <Tooltip
+              content={t('chatLogs.approximateValuesTooltip', {
+                defaultValue: 'These values are approximate.',
+              })}
+            >
+              <p className="memori-chat--usage-comparable">
+                {getImpactComparison(
+                  getMetricValue(activeUsageBadge.usage.energyImpact?.wcf) ?? 0,
+                  'water',
+                  locale,
+                  t,
+                )}
+              </p>
+            </Tooltip>
+            <p>{t('chatLogs.waterImpactDescription')}</p>
+          </div>
+        )}
+      </Modal>
     </div>
   );
 };