🗂️ feat: Preview Large PowerPoint and Word Outputs from File Storage

api/server/services/Files/Code/process.js

@@ -22,6 +22,7 @@ const {
   codeServerHttpAgent,
   codeServerHttpsAgent,
   extractCodeArtifactText,
+  officePreviewFailure,
   extractCodeArtifactRawText,
   extractCodeArtifactInspectionText,
   prepareCodeOutputBufferForInspection,
@@ -433,12 +434,13 @@ const finalizePreview = async ({
   category,
   file_id,
   previewRevision,
+  officePreview,
 }) => {
   let text = null;
   let previewError;
   try {
     text = await withTimeout(
-      extractCodeArtifactText(buffer, leafName, mimeType, category),
+      extractCodeArtifactText(buffer, leafName, mimeType, category, officePreview),
       PREVIEW_FINALIZE_TIMEOUT_MS,
       `Preview extraction exceeded ${PREVIEW_FINALIZE_TIMEOUT_MS}ms`,
     );
@@ -458,7 +460,7 @@ const finalizePreview = async ({
   const failed = text == null;
   const status = failed ? 'failed' : 'ready';
   if (failed && !previewError) {
-    previewError = 'parser-error';
+    previewError = officePreviewFailure(buffer.length, leafName, mimeType, officePreview);
   }
   try {
     /* Conditional update: commit only if `previewRevision` still

api/server/services/Files/Code/process.spec.js

@@ -48,6 +48,7 @@ const mockExtractCodeArtifactInspectionText = jest.fn(async () => ({
   complete: false,
 }));
 const mockExtractCodeArtifactText = jest.fn(async () => null);
+const mockOfficePreviewFailure = jest.fn(() => 'parser-error');
 const mockExecuteWorkspaceTool = jest.fn();
 const mockGetExtractedTextFormat = jest.fn((_name, _mime, text) => (text == null ? null : 'text'));
 /* `hasOfficeHtmlPath` gates the persist-then-render split: when true, processCodeOutput
@@ -160,6 +161,7 @@ jest.mock('@librechat/api', () => {
     extractCodeArtifactRawText: (...args) => mockExtractCodeArtifactRawText(...args),
     extractCodeArtifactInspectionText: (...args) => mockExtractCodeArtifactInspectionText(...args),
     extractCodeArtifactText: (...args) => mockExtractCodeArtifactText(...args),
+    officePreviewFailure: (...args) => mockOfficePreviewFailure(...args),
     getBoundedCodeOutputByteLimit: (configured) =>
       typeof configured === 'number' && Number.isFinite(configured) && configured > 0
         ? Math.min(configured, 64 * 1024 * 1024)
@@ -1722,6 +1724,7 @@ describe('Code Process', () => {
        * The `hasOfficeHtmlPath` mock is the gate. Other tests keep it
        * at `false` (legacy single-phase path); we flip it on here. */
       const { updateFile } = require('~/models');
+      const pptxMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
 
       beforeEach(() => {
         mockHasOfficeHtmlPath.mockReturnValue(true);
@@ -1810,6 +1813,71 @@ describe('Code Process', () => {
         );
       });
 
+      it('finalize() stores the failure label the helper returns for the buffer size, name, type and setting', async () => {
+        mockAxios.mockResolvedValue({ data: Buffer.alloc(100) });
+        determineFileType.mockResolvedValue({
+          mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        });
+        mockExtractCodeArtifactText.mockResolvedValueOnce(null);
+        mockOfficePreviewFailure.mockReturnValueOnce('too-large');
+
+        const { finalize } = await processCodeOutput({ ...baseParams, name: 'deck.pptx' });
+        await finalize();
+
+        expect(mockOfficePreviewFailure).toHaveBeenCalledWith(
+          100,
+          'deck.pptx',
+          'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+          expect.objectContaining({ enabled: true }),
+        );
+        expect(updateFile).toHaveBeenCalledWith(
+          expect.objectContaining({ status: 'failed', previewError: 'too-large' }),
+          { previewRevision: 'mock-uuid-1234' },
+        );
+      });
+
+      it('finalize() passes the resolved officePreview setting to the extractor', async () => {
+        mockAxios.mockResolvedValue({ data: Buffer.alloc(100) });
+        determineFileType.mockResolvedValue({
+          mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        });
+        mockExtractCodeArtifactText.mockResolvedValueOnce('<html></html>');
+
+        const { finalize } = await processCodeOutput({ ...baseParams, name: 'deck.pptx' });
+        await finalize();
+
+        expect(mockExtractCodeArtifactText).toHaveBeenCalledWith(
+          expect.any(Buffer),
+          'deck.pptx',
+          expect.any(String),
+          expect.any(String),
+          expect.objectContaining({ enabled: true, fileSizeLimit: 25 * 1024 * 1024 }),
+        );
+      });
+
+      it('finalize() hands a yaml fileSizeLimit in megabytes to the extractor and the failure label in bytes', async () => {
+        mockAxios.mockResolvedValue({ data: Buffer.alloc(100) });
+        determineFileType.mockResolvedValue({ mime: pptxMime });
+        mockExtractCodeArtifactText.mockResolvedValueOnce(null);
+        const req = {
+          ...mockReq,
+          config: { ...mockReq.config, fileConfig: { officePreview: { fileSizeLimit: 5 } } },
+        };
+        const merged = { enabled: true, fileSizeLimit: 5 * 1024 * 1024 };
+
+        const { finalize } = await processCodeOutput({ ...baseParams, req, name: 'deck.pptx' });
+        await finalize();
+
+        expect(mockExtractCodeArtifactText).toHaveBeenCalledWith(
+          expect.any(Buffer),
+          'deck.pptx',
+          pptxMime,
+          expect.any(String),
+          merged,
+        );
+        expect(mockOfficePreviewFailure).toHaveBeenCalledWith(100, 'deck.pptx', pptxMime, merged);
+      });
+
       it('finalize() transitions to failed with previewError:timeout when the outer timeout rejects', async () => {
         /* The passthrough `withTimeout` mock at the file scope returns
          * its inner promise unchanged, so the only way the catch branch

client/src/components/Artifacts/ArtifactTabs.test.tsx

@@ -65,6 +65,7 @@ jest.mock('~/data-provider', () => ({
   useGetStartupConfig: (options: unknown) => mockUseGetStartupConfig(options),
   useGetSharedStartupConfig: (shareId: unknown, options: unknown) =>
     mockUseGetSharedStartupConfig(shareId, options),
+  useFilePreviewBlob: () => ({ refetch: jest.fn() }),
 }));
 
 jest.mock('~/hooks/Artifacts/useArtifactProps', () => ({

client/src/components/Artifacts/SandboxArtifactTabs.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
-import { render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { OFFICE_DOC_DATA_SLOT, OFFICE_FILE_SHELL_MARKER } from 'librechat-data-provider';
 import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
 import type { Artifact } from '~/common';
 import SandboxArtifactTabs from './SandboxArtifactTabs';
@@ -12,11 +13,15 @@ interface PreviewProps {
 }
 
 const mockPreview = jest.fn((_props: PreviewProps) => null);
+const mockEditor = jest.fn((_props: { artifact: Artifact }) => null);
+const mockRefetch = jest.fn();
+let mockUseRealShell = false;
 let mockCurrentCode: string | undefined;
+let mockShell: { content: string | undefined; isLoading: boolean } | undefined;
 let mockCodeArtifactId: string | undefined;
 
 jest.mock('./ArtifactCodeEditor', () => ({
-  ArtifactCodeEditor: () => null,
+  ArtifactCodeEditor: (props: { artifact: Artifact }) => mockEditor(props),
 }));
 
 jest.mock('./ArtifactPreview', () => ({
@@ -28,13 +33,27 @@ jest.mock('~/Providers/EditorContext', () => ({
     mockCodeArtifactId === artifactId ? mockCurrentCode : undefined,
 }));
 
+jest.mock('~/hooks/Artifacts/useOfficeFileShell', () => ({
+  __esModule: true,
+  default: (artifact: Artifact) =>
+    mockShell ??
+    (mockUseRealShell
+      ? jest.requireActual('~/hooks/Artifacts/useOfficeFileShell').default(artifact)
+      : { content: artifact.content, isLoading: false }),
+}));
+
+jest.mock('~/hooks', () => ({
+  useLocalize: () => (key: string) => key,
+}));
+
 jest.mock('~/Providers', () => ({
   useShareContext: () => ({ shareId: undefined }),
 }));
 
 jest.mock('~/data-provider', () => ({
   useGetStartupConfig: () => ({ data: {} }),
   useGetSharedStartupConfig: () => ({ data: {} }),
+  useFilePreviewBlob: () => ({ refetch: mockRefetch }),
 }));
 
 const previewRef = {
@@ -134,3 +153,79 @@ describe('SandboxArtifactTabs SVG preview', () => {
     expect(call?.currentCode).toBe('<p>edited</p>');
   });
 });
+
+describe('SandboxArtifactTabs office file shell', () => {
+  const shellArtifact: Artifact = {
+    id: 'deck-1',
+    type: 'text/html',
+    title: 'Deck',
+    content: '<p>shell</p>',
+    lastUpdateTime: 1,
+    download: { file_id: 'file-1', user: 'user-1' },
+  };
+
+  beforeEach(() => {
+    mockCurrentCode = undefined;
+    mockPreview.mockClear();
+  });
+
+  afterEach(() => {
+    mockShell = undefined;
+  });
+
+  it('shows the preparing state instead of the preview while the shell is filled', () => {
+    mockShell = { content: '<p>shell</p>', isLoading: true };
+    renderTabs(shellArtifact);
+    expect(screen.getByText('com_ui_preview_preparing')).toBeInTheDocument();
+    expect(mockPreview).not.toHaveBeenCalled();
+  });
+
+  it('previews the filled document once loading ends', () => {
+    mockShell = { content: '<p>filled</p>', isLoading: false };
+    renderTabs(shellArtifact);
+    expect(screen.queryByText('com_ui_preview_preparing')).not.toBeInTheDocument();
+    expect(lastFiles()['index.html']).toBe('<p>filled</p>');
+  });
+});
+
+describe('SandboxArtifactTabs with a stored office shell', () => {
+  const shell = `<html><head>${OFFICE_FILE_SHELL_MARKER}</head><body>${OFFICE_DOC_DATA_SLOT}</body></html>`;
+  const deck: Artifact = {
+    id: 'deck-2',
+    type: 'text/html',
+    title: 'Deck',
+    content: shell,
+    lastUpdateTime: 1,
+    download: { file_id: 'file-2', user: 'user-1' },
+  };
+
+  beforeEach(() => {
+    mockUseRealShell = true;
+    mockCurrentCode = undefined;
+    mockPreview.mockClear();
+    mockEditor.mockClear();
+    mockRefetch.mockReset();
+  });
+
+  afterEach(() => {
+    mockUseRealShell = false;
+  });
+
+  it('fills only the preview and leaves the editor on the stored shell', async () => {
+    mockRefetch.mockResolvedValue({ data: new Blob(['ABC']) });
+    const { rerender } = renderTabs(deck);
+    expect(screen.getByText('com_ui_preview_preparing')).toBeInTheDocument();
+    expect(mockPreview).not.toHaveBeenCalled();
+
+    await waitFor(() => expect(mockPreview).toHaveBeenCalled());
+    expect(lastFiles()['index.html']).toContain('QUJD');
+    expect(lastFiles()['index.html']).not.toContain(OFFICE_DOC_DATA_SLOT);
+
+    rerender(
+      <Tabs.Root value="code">
+        <SandboxArtifactTabs artifact={deck} previewRef={previewRef} />
+      </Tabs.Root>,
+    );
+    expect(mockEditor.mock.calls.at(-1)?.[0].artifact.content).toBe(shell);
+  });
+});

client/src/components/Artifacts/SandboxArtifactTabs.tsx

@@ -1,24 +1,34 @@
 import { useMemo, useRef } from 'react';
+import { Spinner } from '@librechat/client';
 import * as Tabs from '@radix-ui/react-tabs';
 import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
 import type { editor } from 'monaco-editor';
 import type { Artifact } from '~/common';
 import { useGetSharedStartupConfig, useGetStartupConfig } from '~/data-provider';
+import useOfficeFileShell from '~/hooks/Artifacts/useOfficeFileShell';
 import useArtifactProps from '~/hooks/Artifacts/useArtifactProps';
 import { useArtifactCode } from '~/Providers/EditorContext';
 import { ArtifactCodeEditor } from './ArtifactCodeEditor';
 import { ArtifactPreview } from './ArtifactPreview';
 import { useShareContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
 
 export default function SandboxArtifactTabs({
-  artifact,
+  artifact: storedArtifact,
   previewRef,
   isSharedConvo,
 }: {
   artifact: Artifact;
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
   isSharedConvo?: boolean;
 }) {
+  const localize = useLocalize();
+  const { content, isLoading } = useOfficeFileShell(storedArtifact);
+  const previewArtifact = useMemo(
+    () => ({ ...storedArtifact, content }),
+    [storedArtifact, content],
+  );
+  const artifact = storedArtifact;
   const { shareId } = useShareContext();
   const shouldUseSharedConfig =
     isSharedConvo === true && typeof shareId === 'string' && shareId.length > 0;
@@ -34,7 +44,9 @@ export default function SandboxArtifactTabs({
    * another artifact displaced is just as much this artifact's text. */
   const editedCode = useArtifactCode(artifact.id);
 
-  const { files, fileKey, template, sharedProps, deriveFiles } = useArtifactProps({ artifact });
+  const { files, fileKey, template, sharedProps, deriveFiles } = useArtifactProps({
+    artifact: previewArtifact,
+  });
 
   /* An artifact whose preview entry is derived from its source needs the whole
    * set rebuilt from the editor text; `ArtifactPreview` can only swap the file
@@ -44,6 +56,15 @@ export default function SandboxArtifactTabs({
     [deriveFiles, editedCode, files],
   );
 
+  if (isLoading) {
+    return (
+      <div className="text-text-secondary flex h-full w-full items-center justify-center gap-2 text-sm">
+        <Spinner size={16} />
+        {localize('com_ui_preview_preparing')}
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full w-full flex-col">
       <Tabs.Content

client/src/components/Chat/Messages/Content/Parts/Attachment.tsx

@@ -15,13 +15,14 @@ import {
   renderAttachmentKey,
 } from './attachmentTypes';
 import { useLocalize, useAttachmentPreviewSync, useExpandCollapse } from '~/hooks';
-import FileContainer from '~/components/Chat/Input/Files/FileContainer';
 import { fileToArtifact, TOOL_ARTIFACT_TYPES } from '~/utils/artifacts';
+import FileContainer from '~/components/Chat/Input/Files/FileContainer';
 import Image from '~/components/Chat/Messages/Content/Image';
 import { ROW_GLYPH_SLOT, TOOL_ROW_CLASSES } from '../rows';
 import ToolMermaidArtifact from './ToolMermaidArtifact';
 import ToolArtifactCard from './ToolArtifactCard';
 import { useAttachmentLink } from './LogLink';
+import { fileIdentity } from '~/utils/map';
 import { cn } from '~/utils';
 
 const COLLAPSED_MAX_HEIGHT = 320;
@@ -176,10 +177,22 @@ const FileAttachmentGroup = memo(({ attachments }: { attachments: TAttachment[]
   const panelId = useId();
   const [isExpanded, setIsExpanded] = useState(false);
   const { style: expandStyle, ref: expandRef } = useExpandCollapse(isExpanded);
-  const visibleAttachments = useMemo(
-    () => attachments.filter((attachment) => Boolean(attachment.filepath)),
-    [attachments],
-  );
+  const visibleAttachments = useMemo(() => {
+    // Same file identity can arrive twice (e.g. two tool calls touching
+    // one file in a message) — keep the last occurrence so the folded
+    // row lists it once instead of listing the same name twice.
+    const byIdentity = new Map<string, TAttachment>();
+    let unidentifiedCount = 0;
+    for (const attachment of attachments) {
+      if (!attachment.filepath) {
+        continue;
+      }
+      const key = fileIdentity(attachment) ?? `__unidentified-${unidentifiedCount++}`;
+      byIdentity.delete(key);
+      byIdentity.set(key, attachment);
+    }
+    return Array.from(byIdentity.values());
+  }, [attachments]);
   const count = visibleAttachments.length;
   const summary = useMemo(() => {
     const names = visibleAttachments.map((attachment) => displayFilename(attachment.filename));