@memori.ai/memori-react 8.29.1 → 8.30.1

package/src/components/ChatBubble/ChatBubble.tsx

@@ -61,6 +61,7 @@ export interface Props {
   experts?: ExpertReference[];
   showFunctionCache?: boolean;
   showReasoning?: boolean;
+  usageHtml?: string;
 }
 
 const ChatBubble: React.FC<Props> = ({
@@ -84,6 +85,7 @@ const ChatBubble: React.FC<Props> = ({
   experts,
   showFunctionCache = false,
   showReasoning = false,
+  usageHtml = '',
 }) => {
   const { t, i18n } = useTranslation();
   const lang = i18n.language || 'en';
@@ -455,6 +457,13 @@ const ChatBubble: React.FC<Props> = ({
             />
           )}
 
+          {!!usageHtml && (
+            <div
+              className="memori-chat--usage-inside-bubble"
+              dangerouslySetInnerHTML={{ __html: usageHtml }}
+            />
+          )}
+
           {(shouldShowCopyButtons ||
             (message.generatedByAI && showAIicon) ||
             (message.generatedByAI && showFunctionCache) ||

package/src/components/ChatInputs/ChatInputs.tsx

@@ -269,8 +269,10 @@ const ChatInputs: React.FC<Props> = ({
         return;
       }
 
-      const totalPayloadLimit = maxTotalMessagePayload ?? 200000;
-      const perDocumentLimit = maxDocumentContentLength ?? 200000;
+      // Only enforce a per-document limit. `maxTotalMessagePayload` is kept for backward compatibility
+      // and now acts as the per-document content length override.
+      const perDocumentLimit =
+        maxTotalMessagePayload ?? maxDocumentContentLength ?? 300000;
 
       if (text.length > perDocumentLimit) {
         e.preventDefault();
@@ -281,19 +283,6 @@ const ChatInputs: React.FC<Props> = ({
         return;
       }
 
-      const currentTotal = documentPreviewFiles.reduce(
-        (sum, f) => sum + f.content.length,
-        0
-      );
-      if (currentTotal + text.length > totalPayloadLimit) {
-        e.preventDefault();
-        toast(t('upload.pasteContentExceedsLimit', {
-          defaultValue:
-            'Pasted content exceeds the size limit. Try shortening the text or splitting it into smaller parts.',
-        }), { icon: '⚠️' });
-        return;
-      }
-
       e.preventDefault();
       const displayName = t('upload.pastedText') || 'pasted-text';
       const wrappedContent = `<document_attachment filename="pasted-text.txt" type="text/plain">

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -400,6 +400,7 @@ export interface Props {
   showInputs?: boolean;
   showDates?: boolean;
   showContextPerLine?: boolean;
+  showMessageConsumption?: boolean;
   showSettings?: boolean;
   showClear?: boolean;
   showOnlyLastMessages?: boolean;
@@ -469,6 +470,7 @@ const MemoriWidget = ({
   showInputs = true,
   showDates = false,
   showContextPerLine = false,
+  showMessageConsumption = false,
   showSettings,
   showTypingText = false,
   showClear = false,
@@ -662,6 +664,8 @@ const MemoriWidget = ({
     null
   );
   const [hideEmissions, setHideEmissions] = useState(false);
+  const [runtimeShowMessageConsumption, setRuntimeShowMessageConsumption] =
+    useState(false);
 
   const speechSynthesizerRef = useRef<any | null>(null);
   const [memoriSpeaking, setMemoriSpeaking] = useState(false);
@@ -700,6 +704,12 @@ const MemoriWidget = ({
     );
     setAvatarType(getLocalConfig('avatarType', 'avatar3d'));
     setHideEmissions(getLocalConfig('hideEmissions', false));
+    setRuntimeShowMessageConsumption(
+      getLocalConfig(
+        'showMessageConsumption',
+        showMessageConsumption ?? integrationConfig?.showMessageConsumption ?? false
+      )
+    );
 
     if (!additionalInfo?.loginToken && !authToken) {
       setLoginToken(getLocalConfig<typeof loginToken>('loginToken', undefined));
@@ -999,6 +1009,7 @@ const MemoriWidget = ({
               text: emission,
               emitter: currentState.emitter,
               media: currentState.emittedMedia ?? currentState.media,
+              llmUsage: (currentState as any).llmUsage,
               fromUser: false,
               questionAnswered: msg,
               generatedByAI: !!currentState.completion,
@@ -1010,7 +1021,7 @@ const MemoriWidget = ({
               placeUncertaintyKm: currentState.currentUncertaintyKm,
               tag: currentState.currentTag,
               memoryTags: currentState.memoryTags,
-            });
+            } as any);
             if (emission && shouldPlayAudio(emission)) {
               handleSpeak(emission);
             }
@@ -1097,7 +1108,7 @@ const MemoriWidget = ({
     const emission = state?.emission ?? currentDialogState?.emission;
 
     let translatedState = { ...state };
-    let translatedMsg = null;
+    let translatedMsg: any = null;
 
     // Skip translation if not needed
     if (
@@ -1113,6 +1124,7 @@ const MemoriWidget = ({
           text: emission,
           emitter: state.emitter,
           media: state.emittedMedia ?? state.media,
+          llmUsage: (state as any).llmUsage,
           fromUser: false,
           questionAnswered: msg,
           contextVars: state.contextVars,
@@ -1170,6 +1182,7 @@ const MemoriWidget = ({
             translatedText: t.text,
             emitter: state.emitter,
             media: state.emittedMedia ?? state.media,
+            llmUsage: (state as any).llmUsage,
             fromUser: false,
             questionAnswered: msg,
             generatedByAI: !!state.completion,
@@ -1190,6 +1203,7 @@ const MemoriWidget = ({
           text: emission,
           emitter: state.emitter,
           media: state.emittedMedia ?? state.media,
+          llmUsage: (state as any).llmUsage,
           fromUser: false,
           questionAnswered: msg,
           contextVars: state.contextVars,
@@ -2184,6 +2198,7 @@ const MemoriWidget = ({
   const enableUpload = !!(showUpload ?? integrationConfig?.showUpload);
 
   const enableReasoning = !!(showReasoning ?? integrationConfig?.showReasoning);
+  const enableMessageConsumption = !!runtimeShowMessageConsumption;
 
   const showWhyThisAnswer =
     integrationConfig?.showWhyThisAnswer === undefined
@@ -2431,6 +2446,7 @@ const MemoriWidget = ({
                       ...m,
                     })),
                   fromUser: l.inbound,
+                  llmUsage: (l as any).llmUsage,
                   timestamp: l.timestamp,
                   emitter: l.emitter,
                   initial: i === 0,
@@ -2615,6 +2631,7 @@ const MemoriWidget = ({
                       ...m,
                     })),
                   fromUser: l.inbound,
+                  llmUsage: (l as any).llmUsage,
                   timestamp: l.timestamp,
                   emitter: l.emitter,
                   initial: i === 0,
@@ -2977,6 +2994,7 @@ const MemoriWidget = ({
     simulateUserPrompt,
     showDates,
     showContextPerLine,
+    showMessageConsumption: enableMessageConsumption,
     showAIicon,
     showUpload: enableUpload,
     showReasoning: enableReasoning,

package/src/components/UploadButton/UploadButton.stories.tsx

@@ -120,9 +120,9 @@ A unified upload button that supports both images and documents with the followi
 
 ## Limits
 
-- **Images**: Maximum 5 images, 10MB per file, formats: .jpg, .jpeg, .png
-- **Documents**: Maximum 5 documents, 10MB per file, formats: .pdf, .txt, .json, .xlsx, .csv, .md
-- **Content**: Document content is limited to 200,000 characters per document (truncated if exceeded)
+- **Images**: Maximum 5 images, 15MB per file, formats: .jpg, .jpeg, .png
+- **Documents**: Maximum 5 documents, 15MB per file, formats: .pdf, .txt, .json, .xlsx, .csv, .md
+- **Content**: Document content is limited to 300,000 characters per document (truncated if exceeded)
         `,
       },
     },

package/src/components/UploadButton/UploadButton.tsx

@@ -25,7 +25,7 @@ interface UploadManagerProps {
     type?: string;
   }[];
   memoriID?: string;
-  /** Override total document payload limit (character count). */
+  /** Override per-document content length limit (character count). */
   maxTotalMessagePayload?: number;
   /** Max attachments (docs + images) per message. */
   maxDocumentsPerMessage?: number;
@@ -43,8 +43,10 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   memoriID = '',
   maxTotalMessagePayload,
   maxDocumentsPerMessage = 10,
-  maxDocumentContentLength = 200000,
+  maxDocumentContentLength = 300000,
 }) => {
+  const effectivePerDocumentLimit =
+    maxTotalMessagePayload ?? maxDocumentContentLength ?? 300000;
   // State
   const [isLoading, setIsLoading] = useState(false);
   const [errors, setErrors] = useState<
@@ -411,7 +413,7 @@ ${file.content}
       '.md',
       '.html',
     ];
-    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+    const MAX_FILE_SIZE = 15 * 1024 * 1024; // 15MB
 
     if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
       addError({
@@ -438,29 +440,13 @@ ${file.content}
 
   // Validate total payload size. Returns result so caller can avoid showing this error when truncation was already shown.
   const validatePayloadSize = (
-    newDocuments: {
+    _newDocuments: {
       name: string;
       id: string;
       content: string;
       mimeType: string;
     }[]
   ): { valid: boolean; message?: string } => {
-    const limit = maxTotalMessagePayload ?? 200000;
-
-    const existingDocuments = documentPreviewFiles.filter(
-      (file: any) => file.type === 'document'
-    );
-
-    const allDocuments = [...existingDocuments, ...newDocuments];
-    const totalPayloadSize = allDocuments.reduce(
-      (total, doc) => total + doc.content.length,
-      0
-    );
-
-    if (totalPayloadSize > limit) {
-      return { valid: false, message: '' };
-    }
-
     return { valid: true };
   };
 
@@ -476,7 +462,7 @@ ${file.content}
   const validateImageFile = (file: File): boolean => {
     const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
     const ALLOWED_FILE_TYPES = ['.jpg', '.jpeg', '.png'];
-    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+    const MAX_FILE_SIZE = 15 * 1024 * 1024; // 15MB
 
     if (
       !ALLOWED_FILE_TYPES.includes(fileExt) &&
@@ -580,8 +566,7 @@ ${file.content}
           onDocumentError={handleDocumentError}
           onValidateFile={validateDocumentFile}
           onValidatePayloadSize={validatePayloadSize}
-          maxTotalMessagePayload={maxTotalMessagePayload}
-          maxDocumentContentLength={maxDocumentContentLength}
+          maxDocumentContentLength={effectivePerDocumentLimit}
         />
       </div>
 

package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx

@@ -51,8 +51,6 @@ interface UploadDocumentsProps {
       mimeType: string;
     }[]
   ) => boolean | { valid: boolean; message?: string };
-  /** Same as total payload: overrides per-document content limit (character count). */
-  maxTotalMessagePayload?: number;
   /** Per-document content character limit. */
   maxDocumentContentLength?: number;
 }
@@ -65,8 +63,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   onDocumentError,
   onValidateFile,
   onValidatePayloadSize,
-  maxTotalMessagePayload,
-  maxDocumentContentLength = 200000,
+  maxDocumentContentLength = 300000,
 }) => {
   const { t } = useTranslation();
 
@@ -307,11 +304,6 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       mimeType: string;
     }[] = [];
     let hadTruncation = false;
-    let skippedDueToPayload = 0;
-    const payloadLimit = maxTotalMessagePayload ?? 200000;
-    const existingTotal = documentPreviewFiles
-      .filter((f: any) => f.type === 'document')
-      .reduce((sum: number, f: any) => sum + (f.content?.length ?? 0), 0);
 
     for (const file of filesToProcess) {
       if (!validateDocumentFile(file)) {
@@ -325,14 +317,6 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         if (wasTruncated) hadTruncation = true;
 
         if (text) {
-          const processedSum = processedFiles.reduce(
-            (s, d) => s + d.content.length,
-            0
-          );
-          if (existingTotal + processedSum + text.length > payloadLimit) {
-            skippedDueToPayload += 1;
-            continue;
-          }
           processedFiles.push({
             name: file.name,
             id: fileId,
@@ -351,16 +335,6 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       }
     }
 
-    if (skippedDueToPayload > 0) {
-      onDocumentError?.({
-        message: t('upload.documentsNotAddedContextSize', {
-          count: skippedDueToPayload,
-          defaultValue: `${skippedDueToPayload} document(s) not added (context size limit).`,
-        }),
-        severity: 'warning',
-      });
-    }
-
     // Add new documents to existing ones (only those that fit within payload)
     if (processedFiles.length > 0) {
       const existingDocuments = documentPreviewFiles.filter(

package/src/helpers/constants.ts

@@ -207,7 +207,6 @@ export const MAX_MSG_CHARS = 4000;
 export const MAX_MSG_WORDS = 300;
 
 export const maxDocumentsPerMessage = 10;
-export const maxTotalMessagePayloadDefault = 200000;
-export const maxDocumentContentLength = 200000;
+export const maxDocumentContentLength = 300000;
 export const pasteAsCardLineThreshold = 100;
 export const pasteAsCardCharThreshold = 4200;

package/src/helpers/llmUsage.ts

@@ -0,0 +1,328 @@
+export interface LlmUsageOnLine {
+  provider?: string;
+  model?: string;
+  totalInputTokens?: number;
+  inputCacheReadTokens?: number;
+  inputCacheWriteTokens?: number;
+  outputTokens?: number;
+  durationMs?: number;
+  energyImpact?: {
+    energy?: number | { source?: string; parsedValue?: number };
+    energyUnit?: string;
+    gwp?: number | { source?: string; parsedValue?: number };
+    gwpUnit?: string;
+    wcf?: number | { source?: string; parsedValue?: number };
+    wcfUnit?: string;
+  };
+}
+
+export type UsageBadgeType = 'llm' | 'energy' | 'co2' | 'water';
+type NumericMetric = number | { source?: string; parsedValue?: number };
+type ImpactMetricType = 'energy' | 'co2' | 'water';
+type TranslateFn = (key: string, options?: { [key: string]: unknown }) => string;
+
+export interface LlmUsageLabels {
+  llm: string;
+  model: string;
+  provider: string;
+  tokens: string;
+  input: string;
+  output: string;
+  cacheRead: string;
+  cacheWrite: string;
+  duration: string;
+  energy: string;
+  co2: string;
+  water: string;
+  usageBadgesHint: string;
+}
+
+export const BADGE_EMOJI: Record<UsageBadgeType, string> = {
+  llm: '🤖',
+  energy: '⚡',
+  co2: '🌍',
+  water: '💧',
+};
+
+export const escapeHtml = (value: string): string =>
+  value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+
+export const getMetricValue = (metric?: NumericMetric): 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 = 'it-IT'): string => {
+  if (!Number.isFinite(value)) return '—';
+  if (value === 0) return '0';
+
+  const absValue = Math.abs(value);
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: absValue >= 1 ? 3 : 4,
+  }).format(value);
+};
+
+export const formatIntegerValue = (value: number, locale = 'it-IT'): string => {
+  if (!Number.isFinite(value)) return '0';
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(
+    value,
+  );
+};
+
+export const formatDuration = (durationMs?: number, locale = 'it-IT'): string => {
+  if (typeof durationMs !== 'number' || !Number.isFinite(durationMs)) {
+    return '—';
+  }
+  if (durationMs < 1000) return `${formatIntegerValue(durationMs, locale)} ms`;
+  return `${formatMetricValue(durationMs / 1000, locale)} s`;
+};
+
+const floorToSingleDecimal = (value: number): number =>
+  Math.floor(value * 10) / 10;
+
+const formatComparisonNumber = (value: number, locale = 'it-IT'): string =>
+  new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(floorToSingleDecimal(value));
+
+const formatReadableDuration = (seconds: number, locale = 'it-IT'): string => {
+  if (!Number.isFinite(seconds) || seconds <= 0) return '0 s';
+  if (seconds < 60) return `${formatComparisonNumber(seconds, locale)} s`;
+
+  const minutes = seconds / 60;
+  if (minutes < 60) return `${formatComparisonNumber(minutes, locale)} min`;
+
+  return `${formatComparisonNumber(minutes / 60, locale)} h`;
+};
+
+const formatReadableDistance = (meters: number, locale = 'it-IT'): string => {
+  if (!Number.isFinite(meters) || meters <= 0) return '0 m';
+  if (meters < 1000) return `${formatComparisonNumber(meters, locale)} m`;
+  return `${formatComparisonNumber(meters / 1000, locale)} km`;
+};
+
+const getApiUnitToBaseFactor = (
+  unitFromApi: string | undefined,
+  metricType: ImpactMetricType,
+): number => {
+  const u = (unitFromApi ?? '').trim().toLowerCase();
+  if (metricType === 'energy') {
+    if (u === 'kwh') return 1;
+    if (u === 'wh') return 0.001;
+    if (u === 'mwh') return 0.000001;
+    return 1;
+  }
+  if (metricType === 'co2') {
+    if (u === 'kg' || u === 'kgco2eq') return 1;
+    if (u === 'g') return 0.001;
+    if (u === 'mg') return 0.000001;
+    return 1;
+  }
+  if (u === 'l') return 1;
+  if (u === 'ml') return 0.001;
+  if (u === 'μl' || u === 'ul') return 0.000001;
+  return 1;
+};
+
+export const formatImpactInReadableUnit = (
+  value: number,
+  metricType: ImpactMetricType,
+  locale = 'it-IT',
+): string => {
+  const absValue = Math.abs(value);
+
+  if (metricType === 'energy') {
+    if (absValue >= 1) return `${formatMetricValue(value, locale)} kWh`;
+    const wattHours = value * 1000;
+    if (Math.abs(wattHours) >= 1) return `${formatMetricValue(wattHours, locale)} Wh`;
+    return `${formatMetricValue(wattHours * 1000, locale)} mWh`;
+  }
+
+  if (metricType === 'co2') {
+    if (absValue >= 1) return `${formatMetricValue(value, locale)} kg`;
+    const grams = value * 1000;
+    if (Math.abs(grams) >= 1) return `${formatMetricValue(grams, locale)} g`;
+    return `${formatMetricValue(grams * 1000, locale)} mg`;
+  }
+
+  if (absValue >= 1) return `${formatMetricValue(value, locale)} L`;
+  const milliliters = value * 1000;
+  if (Math.abs(milliliters) >= 1) return `${formatMetricValue(milliliters, locale)} mL`;
+  return `${formatMetricValue(milliliters * 1000, locale)} μL`;
+};
+
+export const formatImpactWithApiUnit = (
+  value: number,
+  unitFromApi: string | undefined,
+  fallbackUnit: string,
+  metricType: ImpactMetricType,
+  locale = 'it-IT',
+): string => {
+  const factor = getApiUnitToBaseFactor(
+    unitFromApi ?? fallbackUnit,
+    metricType,
+  );
+  const baseValue = value * factor;
+  return formatImpactInReadableUnit(baseValue, metricType, locale);
+};
+
+export const getImpactComparison = (
+  value: number,
+  metricType: ImpactMetricType,
+  locale = 'it-IT',
+  t: TranslateFn,
+): string => {
+  if (!Number.isFinite(value) || value <= 0) {
+    return t('chatLogs.impactComparisonUnavailable');
+  }
+
+  if (metricType === 'energy') {
+    const ledSeconds = (value * 1000 * 3600) / 10;
+    return t('chatLogs.impactComparisonEnergy', {
+      duration: formatReadableDuration(ledSeconds, locale),
+    });
+  }
+
+  if (metricType === 'co2') {
+    const averageCarMeters = (value / 0.12) * 1000;
+    return t('chatLogs.impactComparisonCo2', {
+      distance: formatReadableDistance(averageCarMeters, locale),
+    });
+  }
+
+  const drops = (value * 1000) / 0.05;
+  return t('chatLogs.impactComparisonWater', {
+    count: formatComparisonNumber(drops, locale),
+  });
+};
+
+const buildUsageBadgeHtml = ({
+  badgeType,
+  badgeClassName,
+  label,
+  value,
+  lineIndex,
+  emoji,
+}: {
+  badgeType: UsageBadgeType;
+  badgeClassName: string;
+  label: string;
+  value?: string;
+  lineIndex: number;
+  emoji: string;
+}): string => {
+  const escapedLabel = escapeHtml(label);
+  const valueHtml = value
+    ? `<span class="memori-chat--usage-badge-value">${value}</span>`
+    : '';
+  const content =
+    valueHtml ||
+    `<span class="memori-chat--usage-badge-label">${escapedLabel}</span>`;
+
+  return `<button type="button" class="memori-chat--usage-badge ${badgeClassName}" data-llm-badge-type="${badgeType}" data-line-index="${lineIndex}" aria-label="${escapedLabel}">${emoji} ${content}</button>`;
+};
+
+export const buildLlmUsageHtml = (
+  usage: LlmUsageOnLine,
+  labels: LlmUsageLabels,
+  lineIndex: number,
+  locale = 'it-IT',
+): string => {
+  const badges = [
+    buildUsageBadgeHtml({
+      badgeType: 'llm',
+      badgeClassName: 'memori-chat--usage-badge-llm',
+      label: labels.llm,
+      lineIndex,
+      emoji: BADGE_EMOJI.llm,
+    }),
+  ];
+
+  const energy = getMetricValue(usage.energyImpact?.energy);
+  const gwp = getMetricValue(usage.energyImpact?.gwp);
+  const wcf = getMetricValue(usage.energyImpact?.wcf);
+
+  if (typeof energy === 'number') {
+    const energyFormatted = formatImpactWithApiUnit(
+      energy,
+      usage.energyImpact?.energyUnit,
+      'kWh',
+      'energy',
+      locale,
+    );
+    badges.push(
+      buildUsageBadgeHtml({
+        badgeType: 'energy',
+        badgeClassName: 'memori-chat--usage-badge-energy',
+        label: `${labels.energy} ${energyFormatted}`,
+        value: escapeHtml(energyFormatted),
+        lineIndex,
+        emoji: BADGE_EMOJI.energy,
+      }),
+    );
+  }
+
+  if (typeof gwp === 'number') {
+    const co2Formatted = formatImpactWithApiUnit(
+      gwp,
+      usage.energyImpact?.gwpUnit,
+      'kgCO2eq',
+      'co2',
+      locale,
+    );
+    badges.push(
+      buildUsageBadgeHtml({
+        badgeType: 'co2',
+        badgeClassName: 'memori-chat--usage-badge-co2',
+        label: `${labels.co2} ${co2Formatted}`,
+        value: escapeHtml(co2Formatted),
+        lineIndex,
+        emoji: BADGE_EMOJI.co2,
+      }),
+    );
+  }
+
+  if (typeof wcf === 'number') {
+    const waterFormatted = formatImpactWithApiUnit(
+      wcf,
+      usage.energyImpact?.wcfUnit,
+      'L',
+      'water',
+      locale,
+    );
+    badges.push(
+      buildUsageBadgeHtml({
+        badgeType: 'water',
+        badgeClassName: 'memori-chat--usage-badge-water',
+        label: `${labels.water} ${waterFormatted}`,
+        value: escapeHtml(waterFormatted),
+        lineIndex,
+        emoji: BADGE_EMOJI.water,
+      }),
+    );
+  }
+
+  return `<div class="memori-chat--llm-usage" data-llm-usage><hr class="memori-chat--llm-usage-hr" /><p class="memori-chat--llm-usage-hint">${escapeHtml(
+    labels.usageBadgesHint,
+  )}</p><div class="memori-chat--llm-usage-badges">${badges.join(
+    '',
+  )}</div></div>`;
+};

package/src/index.stories.tsx

@@ -86,8 +86,8 @@ WithChatHistory.args = {
   showChatHistory: true,
 };
 
-export const WithUploadWithMaxTotalMessagePayload = Template.bind({});
-WithUploadWithMaxTotalMessagePayload.args = {
+export const WithUploadNoTotalPayloadLimit = Template.bind({});
+WithUploadNoTotalPayloadLimit.args = {
   ownerUserName: 'nzambello',
   memoriName: 'Nicola',
   tenantID: 'www.aisuru.com',
@@ -98,7 +98,6 @@ WithUploadWithMaxTotalMessagePayload.args = {
   spokenLang: 'IT',
   enableAudio: true,
   showUpload: true,
-  maxTotalMessagePayload: 300000,
 };
 
 export const WithMaxTextareaCharacters = Template.bind({});