@memori.ai/memori-react 8.45.2 → 8.45.4

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

@@ -1,185 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders FilePreview unchanged 1`] = `<div />`;
-
-exports[`renders FilePreview with one file 1`] = `
-<div>
-  <div
-    class="memori--preview-container"
-  >
-    <div
-      class="memori--preview-list"
-    >
-      <div
-        class="memori--preview-item memori--preview-item--document"
-      >
-        <svg
-          aria-hidden="true"
-          class="memori--preview-icon"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
-          />
-        </svg>
-        <div
-          class="memori--preview-file-info"
-        >
-          <span
-            class="memori--preview-filename"
-          >
-            test.pdf
-          </span>
-          <span
-            class="memori--preview-filetype"
-          >
-            PDF
-          </span>
-        </div>
-        <button
-          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                fill="currentColor"
-                stroke="none"
-                stroke-width="0"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders FilePreview with two files 1`] = `
-<div>
-  <div
-    class="memori--preview-container"
-  >
-    <div
-      class="memori--preview-list"
-    >
-      <div
-        class="memori--preview-item memori--preview-item--document"
-      >
-        <svg
-          aria-hidden="true"
-          class="memori--preview-icon"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
-          />
-        </svg>
-        <div
-          class="memori--preview-file-info"
-        >
-          <span
-            class="memori--preview-filename"
-          >
-            test.pdf
-          </span>
-          <span
-            class="memori--preview-filetype"
-          >
-            PDF
-          </span>
-        </div>
-        <button
-          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                fill="currentColor"
-                stroke="none"
-                stroke-width="0"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="memori--preview-item memori--preview-item--document"
-      >
-        <svg
-          aria-hidden="true"
-          class="memori--preview-icon"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
-          />
-        </svg>
-        <div
-          class="memori--preview-file-info"
-        >
-          <span
-            class="memori--preview-filename"
-          >
-            test.pdf
-          </span>
-          <span
-            class="memori--preview-filetype"
-          >
-            PDF
-          </span>
-        </div>
-        <button
-          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                fill="currentColor"
-                stroke="none"
-                stroke-width="0"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,117 +0,0 @@
-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();
-  });
-
-  it('supports a custom trigger node', () => {
-    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 },
-          },
-        },
-      },
-    ] as TestMessage[];
-
-    render(
-      <ChatConsumptionDropdown
-        history={history}
-        trigger={<button type="button">Open usage</button>}
-      />
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: 'Open usage' }));
-
-    expect(screen.getByText('chatLogs.totalChatConsumptionTitle')).toBeTruthy();
-  });
-});

package/src/components/Header/ChatConsumptionDropdown.tsx

@@ -1,275 +0,0 @@
-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;
-  trigger?: React.ReactNode;
-}
-
-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,
-  trigger,
-}) => {
-  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={
-        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;