@memori.ai/memori-react 9.0.0-alpha.23 → 9.0.0-alpha.25

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

@@ -25,36 +25,20 @@ exports[`renders FilePreview with one file 1`] = `
           class="memori--preview-item-trigger"
           type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="lucide lucide-file memori--preview-icon"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-            />
-            <path
-              d="M14 2v4a2 2 0 0 0 2 2h4"
-            />
-          </svg>
           <div
-            class="memori--preview-file-info"
+            class="memori-media-item--document"
           >
-            <span
-              class="memori--preview-filename"
+            <div
+              class="memori-media-item--document-header"
             >
-              test.pdf
-            </span>
+              <div
+                class="memori-media-item--document-title"
+              >
+                test.pdf
+              </div>
+            </div>
             <span
-              class="memori--preview-filetype"
+              class="memori-media-item--document-badge"
             >
               PDF
             </span>
@@ -62,7 +46,7 @@ exports[`renders FilePreview with one file 1`] = `
         </button>
         <button
           aria-label="upload.removeFile"
-          class="memori-button memori-button--danger memori-button--md memori-button--circle memori-button--icon-only memori--remove-button"
+          class="memori-button memori-button--ghost memori-button--sm memori-button--circle memori-button--icon-only memori--remove-button"
           tabindex="0"
           type="button"
         >
@@ -120,36 +104,20 @@ exports[`renders FilePreview with two files 1`] = `
           class="memori--preview-item-trigger"
           type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="lucide lucide-file memori--preview-icon"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-            />
-            <path
-              d="M14 2v4a2 2 0 0 0 2 2h4"
-            />
-          </svg>
           <div
-            class="memori--preview-file-info"
+            class="memori-media-item--document"
           >
-            <span
-              class="memori--preview-filename"
+            <div
+              class="memori-media-item--document-header"
             >
-              test.pdf
-            </span>
+              <div
+                class="memori-media-item--document-title"
+              >
+                test.pdf
+              </div>
+            </div>
             <span
-              class="memori--preview-filetype"
+              class="memori-media-item--document-badge"
             >
               PDF
             </span>
@@ -157,7 +125,7 @@ exports[`renders FilePreview with two files 1`] = `
         </button>
         <button
           aria-label="upload.removeFile"
-          class="memori-button memori-button--danger memori-button--md memori-button--circle memori-button--icon-only memori--remove-button"
+          class="memori-button memori-button--ghost memori-button--sm memori-button--circle memori-button--icon-only memori--remove-button"
           tabindex="0"
           type="button"
         >
@@ -195,36 +163,20 @@ exports[`renders FilePreview with two files 1`] = `
           class="memori--preview-item-trigger"
           type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="lucide lucide-file memori--preview-icon"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-            />
-            <path
-              d="M14 2v4a2 2 0 0 0 2 2h4"
-            />
-          </svg>
           <div
-            class="memori--preview-file-info"
+            class="memori-media-item--document"
           >
-            <span
-              class="memori--preview-filename"
+            <div
+              class="memori-media-item--document-header"
             >
-              test.pdf
-            </span>
+              <div
+                class="memori-media-item--document-title"
+              >
+                test.pdf
+              </div>
+            </div>
             <span
-              class="memori--preview-filetype"
+              class="memori-media-item--document-badge"
             >
               PDF
             </span>
@@ -232,7 +184,7 @@ exports[`renders FilePreview with two files 1`] = `
         </button>
         <button
           aria-label="upload.removeFile"
-          class="memori-button memori-button--danger memori-button--md memori-button--circle memori-button--icon-only memori--remove-button"
+          class="memori-button memori-button--ghost memori-button--sm memori-button--circle memori-button--icon-only memori--remove-button"
           tabindex="0"
           type="button"
         >

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Message } from '@memori.ai/memori-api-client/dist/types';
-import ChatConsumptionDropdown from './ChatConsumptionDropdown';
+import ChatConsumptionDropdown, {
+  ChatConsumptionContent,
+} from './ChatConsumptionDropdown';
 
 type TestMessage = Message & {
   llmUsage?: {
@@ -17,46 +19,42 @@ type TestMessage = Message & {
   };
 };
 
-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 },
-          },
-        },
+const historyWithUsage = [
+  {
+    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' },
-          },
-        },
+    },
+  },
+  {
+    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[];
+    },
+  },
+] as TestMessage[];
 
-    render(<ChatConsumptionDropdown history={history} />);
-
-    fireEvent.click(
-      screen.getByTitle('write_and_speak.showMessageConsumptionLabel')
-    );
+describe('ChatConsumptionContent', () => {
+  it('renders aggregated token and environmental usage', () => {
+    render(<ChatConsumptionContent history={historyWithUsage} />);
 
     expect(screen.getByText('chatLogs.totalChatConsumptionTitle')).toBeTruthy();
     expect(screen.getByText('chatLogs.modelUsage')).toBeTruthy();
@@ -69,7 +67,9 @@ describe('ChatConsumptionDropdown', () => {
     expect(screen.getByText('800 mg')).toBeTruthy();
     expect(screen.getByText('3.5 mL')).toBeTruthy();
   });
+});
 
+describe('ChatConsumptionDropdown', () => {
   it('does not render when the chat has no llm usage data', () => {
     const history = [
       {
@@ -81,33 +81,20 @@ describe('ChatConsumptionDropdown', () => {
     const { container } = render(<ChatConsumptionDropdown history={history} />);
 
     expect(container.firstChild).toBeNull();
-    // expect(
-    //   screen.queryByTitle('write_and_speak.showMessageConsumptionLabel')
-    // ).toBeNull();
   });
 
-  it('supports a custom trigger component', () => {
-    const history = [
-      {
-        text: 'Response',
-        timestamp: '2021-03-01T12:00:00.000Z',
-        llmUsage: {
-          provider: 'OpenAI',
-          model: 'gpt-5',
-          totalInputTokens: 10,
-          outputTokens: 5,
-          energyImpact: {
-            energy: 0.0002,
-            gwp: 0.0001,
-            wcf: 0.0003,
-          },
-        },
-      },
-    ] as TestMessage[];
+  it('renders the default trigger when usage data is present', () => {
+    render(<ChatConsumptionDropdown history={historyWithUsage} />);
+
+    expect(
+      screen.getByTitle('write_and_speak.showMessageConsumptionLabel')
+    ).toBeTruthy();
+  });
 
+  it('supports a custom trigger component', () => {
     render(
       <ChatConsumptionDropdown
-        history={history}
+        history={historyWithUsage}
         trigger={props => (
           <button type="button" {...props}>
             Custom Trigger
@@ -116,39 +103,19 @@ describe('ChatConsumptionDropdown', () => {
       />
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Custom Trigger' }));
-
-    expect(screen.getByText('chatLogs.totalChatConsumptionTitle')).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: 'Custom Trigger' })
+    ).toBeTruthy();
   });
 
   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}
+        history={historyWithUsage}
         trigger={<button type="button">Open usage</button>}
       />
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Open usage' }));
-
-    expect(screen.getByText('chatLogs.totalChatConsumptionTitle')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Open usage' })).toBeTruthy();
   });
 });