([^<]*)<\/p>/.exec(html)?.[1];
+ expect(notice).toBe(OVERSIZED_NOTICE);
+ expect(notice).not.toContain('below');
+ expect(html).toContain('id="lc-doc-data"');
+ expect(Buffer.byteLength(html, 'utf-8')).toBeLessThanOrEqual(cap);
+ return notice;
+ };
+
+ test('shows a short notice when a pptx shell drops its oversized fallback', async () => {
+ const zip = await JSZip.loadAsync(readFixture('sample.pptx'));
+ const line = 'x'.repeat(3000);
+ Object.keys(zip.files)
+ .filter((name) => /^ppt\/slides\/slide\d+\.xml$/.test(name))
+ .forEach((name) => zip.remove(name));
+ for (let n = 1; n <= 300; n++) {
+ zip.file(
+ `ppt/slides/slide${n}.xml`,
+ ` fallback
+
+ );
+ }
+
return (
@@ -95,7 +117,7 @@ const ToolMermaidArtifact = memo(({ attachment, text }: ToolMermaidArtifactProps
{file.file_id ? (
) : (
({
+ useLocalize:
+ () =>
+ (key: string): string =>
+ key,
+ useAttachmentPreviewSync: () => ({ status: 'ready', previewError: undefined, isPolling: false }),
+ useExpandCollapse: (isExpanded: boolean) => ({
+ style: { display: 'grid', gridTemplateRows: isExpanded ? '1fr' : '0fr' },
+ ref: { current: null },
+ }),
+}));
+
+jest.mock('../LogLink', () => ({
+ useAttachmentLink: () => ({ handleDownload: jest.fn() }),
+}));
+
+jest.mock('~/components/Chat/Input/Files/FileContainer', () => ({
+ __esModule: true,
+ default: ({ file, displayName }: { file: { filename?: string }; displayName?: string }) => (
+ ![{altText]()
,
+}));
+
+jest.mock('~/components/Messages/Content/Mermaid/Mermaid', () => ({
+ __esModule: true,
+ default: ({ children }: { children: string }) => (
+ ) => classes.filter(Boolean).join(' '),
+ getFileType: () => ({ paths: [], color: '', title: 'Artifact' }),
+ logger: { log: jest.fn(), warn: jest.fn(), error: jest.fn() },
+ isArtifactRoute: () => false,
+}));
+
+const baseAttachment = (overrides: Partial = {}): TAttachment =>
+ ({
+ file_id: 'file-1',
+ filename: 'unset',
+ filepath: '/files/file-1',
+ type: 'application/octet-stream',
+ ...overrides,
+ }) as TAttachment;
+
+const renderWith = (ui: React.ReactElement) => render({ui} );
+
+describe('FileAttachmentGroup identity dedup', () => {
+ it('collapses two attachments sharing a file identity into a single, non-folded chip', () => {
+ const first = baseAttachment({ file_id: 'dup', filename: 'report.pptx', bytes: 100 });
+ const second = baseAttachment({ file_id: 'dup', filename: 'report.pptx', bytes: 100 });
+ const { container } = renderWith(![{altText]()
,
+}));
+
+jest.mock('~/components/Messages/Content/Mermaid/Mermaid', () => ({
+ __esModule: true,
+ default: ({
+ children,
+ artifact,
+ }: {
+ children: string;
+ artifact?: { id: string; title?: string; type?: string; content?: string };
+ }) => (
+ ) => classes.filter(Boolean).join(' '),
+ getFileType: () => ({ paths: [], color: '', title: 'Artifact' }),
+ logger: { log: jest.fn(), warn: jest.fn(), error: jest.fn() },
+ isArtifactRoute: () => false,
+ // `SearchContent` (rendered by the search-result tests below) maps attachments to
+ // their owning tool call with the real implementation.
+ mapAttachments: jest.requireActual('~/utils/map').mapAttachments,
+}));
+
+/**
+ * `SearchContent` routes an `execute_code` tool call through the real
+ * `Part` -> `Parts` barrel -> `ExecuteCode`, whose unconditional
+ * `PtcToolTrace` child needs MCP query hooks (and thus a `QueryClient`)
+ * this suite doesn't set up. Only that one card is replaced with the
+ * same `AttachmentGroup` it renders for real — the file-identity
+ * routing under test (`SearchContent` -> `MessageContext` ->
+ * `AttachmentGroup` -> `ToolArtifactCard`) stays real.
+ */
+jest.mock('..', () => {
+ const actual = jest.requireActual('..');
+ return {
+ __esModule: true,
+ ...actual,
+ ExecuteCode: ({ attachments }: { attachments?: TAttachment[] }) => (
+ = {}): TAttachment =>
+ ({
+ file_id: 'file-1',
+ filename: 'unset',
+ filepath: '/files/file-1',
+ type: 'application/octet-stream',
+ ...overrides,
+ }) as TAttachment;
+
+/** Minimal message context; `isExpanded` is required by the type but unused here. */
+const messageScope = (messageId: string) => ({ messageId, isExpanded: false });
+
+const ArtifactContentProbe = ({
+ artifactId,
+ onSnapshot,
+}: {
+ artifactId: string;
+ onSnapshot: (content: string | null) => void;
+}) => {
+ const artifacts = useRecoilValue(store.artifactsState);
+ React.useEffect(() => {
+ onSnapshot(artifacts?.[artifactId]?.content ?? null);
+ });
+ return null;
+};
+
+describe('ToolArtifactCard message-scoped dedup and newest-version selection', () => {
+ it('shows a card on every message that holds the same file identity', () => {
+ const html = () =>
+ baseAttachment({ file_id: 'shared-file', filename: 'index.html', text: '
+
+
+
+
+ ,
+ );
+ expect(container.querySelectorAll('[data-artifact-trigger]')).toHaveLength(2);
+ expect(screen.getAllByText('index.html')).toHaveLength(2);
+ });
+
+ it('collapses two cards for the same file within one message to one card', () => {
+ const dup = baseAttachment({
+ file_id: 'dup-in-message',
+ filename: 'index.html',
+ text: '
+
+
+ ,
+ );
+ expect(container.querySelectorAll('[data-artifact-trigger]')).toHaveLength(1);
+ });
+
+ it('keeps the panel on the newest version even when the older card mounts after the newer one', () => {
+ const newer = baseAttachment({
+ file_id: 'versioned',
+ filename: 'report.html',
+ text: '
+ {
+ content = snapshot;
+ }}
+ />
+
+
+
+
+ ,
+ );
+ expect(content).toBe('
+
+
+ ,
+ );
+ expect(content).toBe('
+
+
+ ,
+ );
+ expect(content).toBe(' = {};
+ const ArtifactsSnapshotProbe = () => {
+ const artifacts = useRecoilValue(store.artifactsState);
+ React.useEffect(() => {
+ snapshot = artifacts ?? {};
+ });
+ return null;
+ };
+ let currentId: string | null = null;
+ const CurrentArtifactProbe = () => {
+ const id = useRecoilValue(store.currentArtifactId);
+ React.useEffect(() => {
+ currentId = id;
+ });
+ return null;
+ };
+
+ const { container } = render(
+
+
+
+ ,
+ );
+
+ const triggers = container.querySelectorAll('[data-artifact-trigger]');
+ expect(triggers).toHaveLength(2);
+
+ const firstId = 'tool-artifact-/uploads/session-a/index.html';
+ const secondId = 'tool-artifact-/uploads/session-b/index.html';
+ const triggerIds = Array.from(triggers).map((el) => el.getAttribute('data-artifact-trigger'));
+ expect([...triggerIds].sort()).toEqual([firstId, secondId].sort());
+
+ // Both files' own content registers, keyed by their own identity —
+ // a colliding key would have one file's mount overwrite the other's.
+ expect(snapshot[firstId]?.content).toBe('
+
+
+
+
+ ,
+ );
+ expect(screen.getAllByTestId('mermaid-render')).toHaveLength(2);
+ });
+
+ it('collapses two diagram cards for the same file within one message to one', () => {
+ const mmd = baseAttachment({
+ file_id: 'diagram-dup',
+ filename: 'flow.mmd',
+ text: 'graph TD\nA-->B',
+ });
+ render(
+
+
+
+ ,
+ );
+ expect(screen.getAllByTestId('mermaid-render')).toHaveLength(1);
+ });
+});
+
+describe('ToolMermaidArtifact newest-version selection', () => {
+ const mermaidCards = () => screen.getAllByTestId('mermaid-render');
+
+ const ArtifactKeysProbe = ({ onSnapshot }: { onSnapshot: (keys: string[]) => void }) => {
+ const artifacts = useRecoilValue(store.artifactsState);
+ React.useEffect(() => {
+ onSnapshot(Object.keys(artifacts ?? {}));
+ });
+ return null;
+ };
+
+ it('offers the older message card the newer content when the newer message mounts after it', () => {
+ const older = baseAttachment({
+ file_id: 'diagram-mount-order-a',
+ filename: 'flow.mmd',
+ text: 'graph TD\nA-->B',
+ updatedAt: '2024-01-01T00:00:00.000Z',
+ });
+ const newer = baseAttachment({
+ file_id: 'diagram-mount-order-a',
+ filename: 'flow.mmd',
+ text: 'graph TD\nA-->C',
+ updatedAt: '2024-01-02T00:00:00.000Z',
+ });
+ let artifactKeys: string[] = [];
+ render(
+
+ (artifactKeys = keys)} />
+
+
+
+
+ ,
+ );
+ const cards = mermaidCards();
+ expect(cards).toHaveLength(2);
+ // Opening EITHER card — including the older message's — would register
+ // the newest version.
+ cards.forEach((card) => {
+ expect(card).toHaveAttribute('data-artifact-content', 'graph TD\nA-->C');
+ });
+ // Each inline diagram still renders its own message's source.
+ expect(cards[0].textContent).toBe('graph TD\nA-->B');
+ expect(cards[1].textContent).toBe('graph TD\nA-->C');
+ // Mounting alone never writes into artifactsState (navigator unaffected).
+ expect(artifactKeys).toHaveLength(0);
+ });
+
+ it('keeps the newest content when the newer message mounts before the older one', () => {
+ const newer = baseAttachment({
+ file_id: 'diagram-mount-order-b',
+ filename: 'flow.mmd',
+ text: 'graph TD\nA-->C',
+ updatedAt: '2024-01-02T00:00:00.000Z',
+ });
+ const older = baseAttachment({
+ file_id: 'diagram-mount-order-b',
+ filename: 'flow.mmd',
+ text: 'graph TD\nA-->B',
+ updatedAt: '2024-01-01T00:00:00.000Z',
+ });
+ render(
+
+
+
+
+
+ ,
+ );
+ const cards = mermaidCards();
+ expect(cards).toHaveLength(2);
+ cards.forEach((card) => {
+ expect(card).toHaveAttribute('data-artifact-content', 'graph TD\nA-->C');
+ });
+ expect(cards[0].textContent).toBe('graph TD\nA-->C');
+ expect(cards[1].textContent).toBe('graph TD\nA-->B');
+ });
+
+ it('keeps the newer content after the newer card unmounts and the older card mounts fresh', () => {
+ const fileId = 'diagram-remount';
+ const newer = baseAttachment({
+ file_id: fileId,
+ filename: 'flow.mmd',
+ text: 'graph TD\nA-->C',
+ updatedAt: '2024-01-02T00:00:00.000Z',
+ });
+ const older = baseAttachment({
+ file_id: fileId,
+ filename: 'flow.mmd',
+ text: 'graph TD\nA-->B',
+ updatedAt: '2024-01-01T00:00:00.000Z',
+ });
+ const { unmount } = render(
+
+
+
+ ,
+ );
+ expect(screen.getByTestId('mermaid-render')).toHaveAttribute(
+ 'data-artifact-content',
+ 'graph TD\nA-->C',
+ );
+ unmount();
+
+ render(
+
+
+
+ ,
+ );
+ const reopened = screen.getByTestId('mermaid-render');
+ expect(reopened).toHaveAttribute('data-artifact-content', 'graph TD\nA-->C');
+ expect(reopened.textContent).toBe('graph TD\nA-->B');
+ });
+
+ it('settles on one version when two diagrams for the same file share lastUpdateTime (no ping-pong)', () => {
+ const fileId = 'diagram-tie';
+ const versionA = () =>
+ baseAttachment({ file_id: fileId, filename: 'tie.mmd', text: 'graph TD\nA-->B' });
+ const versionB = () =>
+ baseAttachment({ file_id: fileId, filename: 'tie.mmd', text: 'graph TD\nA-->C' });
+
+ const renderPair = () =>
+ render(
+
+
+
+
+
+ ,
+ );
+
+ const { unmount } = renderPair();
+ const firstCards = mermaidCards();
+ const settled = firstCards[0].getAttribute('data-artifact-content');
+ expect(settled).not.toBeNull();
+ expect(['graph TD\nA-->B', 'graph TD\nA-->C']).toContain(settled);
+ expect(firstCards[1]).toHaveAttribute('data-artifact-content', settled as string);
+ unmount();
+
+ renderPair();
+ const secondCards = mermaidCards();
+ expect(secondCards[0]).toHaveAttribute('data-artifact-content', settled as string);
+ expect(secondCards[1]).toHaveAttribute('data-artifact-content', settled as string);
+ });
+});
+
+describe('ToolArtifactCard tied writes settle once and do not ping-pong', () => {
+ const tieId = 'tool-artifact-tie-file';
+ const versionA = () =>
+ baseAttachment({ file_id: 'tie-file', filename: 'tie.html', text: '(undefined);
+ React.useEffect(() => {
+ if (entry !== lastSeen.current) {
+ lastSeen.current = entry;
+ onWrite(entry?.content ?? null);
+ }
+ });
+ return null;
+ };
+
+ it('settles on one version when the second card mounts after the first (sequential)', () => {
+ const cardA = versionA();
+ const cardB = versionB();
+ const writes: (string | null)[] = [];
+ const onWrite = (content: string | null) => writes.push(content);
+
+ const { rerender } = render(
+
+
+
+ ,
+ );
+
+ rerender(
+
+
+
+
+
+ ,
+ );
+
+ expect(writes.length).toBeLessThanOrEqual(2);
+ const settled = writes[writes.length - 1];
+ expect(['
+
+
+
+
+ ,
+ );
+ expect(writes.length).toBeLessThanOrEqual(2);
+ expect(writes[writes.length - 1]).toBe(settled);
+ });
+
+ it('settles on one version when both cards mount together', () => {
+ const cardA = versionA();
+ const cardB = versionB();
+ const writes: (string | null)[] = [];
+ const onWrite = (content: string | null) => writes.push(content);
+
+ const { rerender } = render(
+
+
+
+
+
+ ,
+ );
+
+ expect(writes.length).toBeLessThanOrEqual(2);
+ const settled = writes[writes.length - 1];
+ expect(['
+
+
+
+
+ ,
+ );
+ expect(writes.length).toBeLessThanOrEqual(2);
+ expect(writes[writes.length - 1]).toBe(settled);
+ });
+});
+
+describe('SearchContent places cards per message', () => {
+ const searchMessage = (overrides: Partial = {}): TMessage =>
+ ({ messageId: 'm', text: '', ...overrides }) as TMessage;
+
+ const toolCallPart = (toolCallId: string): TMessageContentParts =>
+ ({
+ type: ContentTypes.TOOL_CALL,
+ [ContentTypes.TOOL_CALL]: { id: toolCallId, name: Tools.execute_code, args: '{}' },
+ }) as unknown as TMessageContentParts;
+
+ it('shows a card under each search-result message that holds the same file identity', () => {
+ const fileAttachment = (toolCallId: string) =>
+ baseAttachment({
+ file_id: 'search-shared-file',
+ filename: 'result.html',
+ text: ');
+
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelectorAll('[data-artifact-trigger]')).toHaveLength(2);
+ expect(screen.getAllByText('result.html')).toHaveLength(2);
+ });
+
+ it('collapses two cards for the same file within one search-result message to one card', () => {
+ const dup = baseAttachment({
+ file_id: 'search-dup-file',
+ filename: 'dup.html',
+ text: ');
+
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelectorAll('[data-artifact-trigger]')).toHaveLength(1);
+ });
+});
diff --git a/client/src/components/Chat/Messages/Content/Parts/__tests__/host.test.tsx b/client/src/components/Chat/Messages/Content/Parts/__tests__/host.test.tsx
index 85237fdf382..1844965cedc 100644
--- a/client/src/components/Chat/Messages/Content/Parts/__tests__/host.test.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/__tests__/host.test.tsx
@@ -136,7 +136,7 @@ describe('message parts host', () => {
(null));
+
+/**
+ * Shared by `ToolArtifactCard`'s self-heal registration and
+ * `ToolMermaidArtifact`/`Mermaid`'s newest-version handling so both use
+ * the same "is `candidate` strictly newer than `other`" rule instead of
+ * two copies that could drift out of sync.
+ */
+export function isStrictlyNewer(
+ candidate: Pick,
+ other: Pick | null | undefined,
+): boolean {
+ return other != null && candidate.lastUpdateTime > other.lastUpdateTime;
+}
diff --git a/client/src/components/Chat/Messages/Content/SearchContent.tsx b/client/src/components/Chat/Messages/Content/SearchContent.tsx
index 127ec3cfdd9..073d1fa8ab2 100644
--- a/client/src/components/Chat/Messages/Content/SearchContent.tsx
+++ b/client/src/components/Chat/Messages/Content/SearchContent.tsx
@@ -70,7 +70,6 @@ const SearchContent = ({
}
const partElement: ReactElement = (
- {partElement}
-
- ) : (
- partElement
- );
+ const rendered: ReactElement = (
+
+ {partElement}
+
+ );
if (!resumesAfterSteer) {
return rendered;
}
diff --git a/client/src/components/Messages/Content/Mermaid/Mermaid.tsx b/client/src/components/Messages/Content/Mermaid/Mermaid.tsx
index 1edb1bb7184..19873f566b7 100644
--- a/client/src/components/Messages/Content/Mermaid/Mermaid.tsx
+++ b/client/src/components/Messages/Content/Mermaid/Mermaid.tsx
@@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom';
import { Button, Spinner } from '@librechat/client';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import type { ProcessedMermaidSvg } from '~/utils/diagram/export';
+import { isStrictlyNewer } from '~/components/Chat/Messages/Content/Parts/claim';
import ArtifactRow from '~/components/Chat/Messages/Content/Parts/ArtifactRow';
import { MERMAID_ARTIFACT_TYPE, type Artifact } from '~/common/artifacts';
import { artifactRowKind } from '~/utils/artifacts';
@@ -81,11 +82,15 @@ const Mermaid: React.FC = memo((props) => {
const artifactId = `mermaid-artifact-${artifactScope}-${id || instanceId}`;
const artifact = useMemo(() => {
if (artifactProp != null) {
+ /* Unlike the no-`artifactProp` branch below, `content` is NOT forced
+ * to `children` here: `ToolMermaidArtifact` may hand this a newer
+ * sibling's content (via `newestToolArtifactFamily`) so opening THIS
+ * card registers that newer version, while `children` below (the
+ * inline diagram) keeps rendering this message's own source. */
return {
...artifactProp,
type: artifactProp.type ?? MERMAID_ARTIFACT_TYPE,
title: artifactProp.title ?? defaultTitle,
- content: children,
messageId: artifactProp.messageId ?? messageId,
};
}
@@ -114,6 +119,13 @@ const Mermaid: React.FC = memo((props) => {
) {
return previousArtifacts;
}
+ // Never downgrade an already-registered version that's strictly
+ // newer than what this instance is about to write — protects
+ // against a stale self-heal re-fire racing a sibling card's newer
+ // write for the same file identity.
+ if (existingArtifact != null && isStrictlyNewer(existingArtifact, artifact)) {
+ return previousArtifacts;
+ }
return { ...(previousArtifacts ?? {}), [artifact.id]: artifact };
});
diff --git a/client/src/hooks/Artifacts/__tests__/useOfficeFileShell.test.ts b/client/src/hooks/Artifacts/__tests__/useOfficeFileShell.test.ts
new file mode 100644
index 00000000000..07dc4882e08
--- /dev/null
+++ b/client/src/hooks/Artifacts/__tests__/useOfficeFileShell.test.ts
@@ -0,0 +1,104 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import {
+ fillOfficeFileShell,
+ OFFICE_DOC_DATA_SLOT,
+ OFFICE_FILE_SHELL_MARKER,
+} from 'librechat-data-provider';
+import type { Artifact } from '~/common';
+import useOfficeFileShell from '../useOfficeFileShell';
+
+const mockRefetch = jest.fn();
+const mockUseFilePreviewBlob = jest.fn((..._args: (string | undefined)[]) => ({
+ refetch: mockRefetch,
+}));
+let mockShareId: string | undefined;
+
+jest.mock('~/data-provider', () => ({
+ useFilePreviewBlob: (...args: (string | undefined)[]) => mockUseFilePreviewBlob(...args),
+}));
+
+jest.mock('~/Providers', () => ({
+ useShareContext: () => ({ shareId: mockShareId }),
+}));
+
+const shell = `${OFFICE_FILE_SHELL_MARKER}${OFFICE_DOC_DATA_SLOT}`;
+
+const shellArtifact: Artifact = {
+ id: 'a1',
+ lastUpdateTime: 1,
+ content: shell,
+ download: { file_id: 'file-1', user: 'user-1' },
+};
+
+describe('useOfficeFileShell', () => {
+ beforeEach(() => {
+ mockRefetch.mockReset();
+ mockUseFilePreviewBlob.mockClear();
+ mockShareId = undefined;
+ });
+
+ it('fills the shell with the fetched bytes as base64 after loading', async () => {
+ mockRefetch.mockResolvedValue({ data: new Blob(['ABC']) });
+ const { result } = renderHook(() => useOfficeFileShell(shellArtifact));
+ expect(result.current.isLoading).toBe(true);
+ await waitFor(() => expect(result.current.isLoading).toBe(false));
+ expect(result.current.content).toBe(fillOfficeFileShell(shell, 'QUJD'));
+ expect(mockRefetch).toHaveBeenCalledTimes(1);
+ expect(mockUseFilePreviewBlob).toHaveBeenCalledWith('user-1', 'file-1', undefined);
+ });
+
+ it('passes the share id so shared viewers use the share-scoped route', async () => {
+ mockShareId = 'share-9';
+ mockRefetch.mockResolvedValue({ data: new Blob(['ABC']) });
+ const { result } = renderHook(() => useOfficeFileShell(shellArtifact));
+ await waitFor(() => expect(result.current.isLoading).toBe(false));
+ expect(mockUseFilePreviewBlob).toHaveBeenCalledWith('user-1', 'file-1', 'share-9');
+ });
+
+ it('keeps the stored shell when the fetch fails', async () => {
+ mockRefetch.mockResolvedValue({ data: undefined, error: new Error('nope') });
+ const { result } = renderHook(() => useOfficeFileShell(shellArtifact));
+ await waitFor(() => expect(result.current.isLoading).toBe(false));
+ expect(result.current.content).toBe(shell);
+ });
+
+ it('keeps the stored shell when the fetch rejects', async () => {
+ mockRefetch.mockRejectedValue(new Error('nope'));
+ const { result } = renderHook(() => useOfficeFileShell(shellArtifact));
+ await waitFor(() => expect(result.current.isLoading).toBe(false));
+ expect(result.current.content).toBe(shell);
+ });
+
+ it('reports loading for a second artifact with an identical shell', async () => {
+ mockRefetch.mockResolvedValueOnce({ data: new Blob(['ABC']) });
+ const { result, rerender } = renderHook(({ artifact }) => useOfficeFileShell(artifact), {
+ initialProps: { artifact: shellArtifact },
+ });
+ await waitFor(() => expect(result.current.isLoading).toBe(false));
+ const filledA = fillOfficeFileShell(shell, 'QUJD');
+ expect(result.current.content).toBe(filledA);
+
+ mockRefetch.mockReturnValueOnce(new Promise(() => undefined));
+ const other: Artifact = {
+ ...shellArtifact,
+ id: 'a2',
+ download: { file_id: 'file-2', user: 'user-1' },
+ };
+ rerender({ artifact: other });
+ expect(result.current.isLoading).toBe(true);
+ expect(result.current.content).toBe(shell);
+ });
+
+ it('does not fetch for a non-shell artifact', () => {
+ const plain: Artifact = { ...shellArtifact, content: 'inline' };
+ const { result } = renderHook(() => useOfficeFileShell(plain));
+ expect(result.current).toEqual({ content: 'inline', isLoading: false });
+ expect(mockRefetch).not.toHaveBeenCalled();
+ });
+
+ it('does not fetch for a null artifact', () => {
+ const { result } = renderHook(() => useOfficeFileShell(null));
+ expect(result.current).toEqual({ content: undefined, isLoading: false });
+ expect(mockRefetch).not.toHaveBeenCalled();
+ });
+});
diff --git a/client/src/hooks/Artifacts/useOfficeFileShell.ts b/client/src/hooks/Artifacts/useOfficeFileShell.ts
new file mode 100644
index 00000000000..e67e2dcc8e6
--- /dev/null
+++ b/client/src/hooks/Artifacts/useOfficeFileShell.ts
@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from 'react';
+import { fillOfficeFileShell, isOfficeFileShell } from 'librechat-data-provider';
+import type { Artifact } from '~/common';
+import { useFilePreviewBlob } from '~/data-provider';
+import { useShareContext } from '~/Providers';
+
+const readBase64 = (blob: Blob): Promise =>
+ new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onload = () =>
+ resolve(String(reader.result).slice(String(reader.result).indexOf(',') + 1));
+ reader.onerror = () => reject(reader.error);
+ reader.readAsDataURL(blob);
+ });
+
+interface FilledShell {
+ key: string;
+ shell: string;
+ content: string;
+}
+
+/** Fills a stored office-preview shell with its file's bytes; a failed fetch leaves the shell as stored. */
+export default function useOfficeFileShell(artifact: Artifact | null): {
+ content: string | undefined;
+ isLoading: boolean;
+} {
+ const { shareId } = useShareContext();
+ const { refetch } = useFilePreviewBlob(
+ artifact?.download?.user,
+ artifact?.download?.file_id,
+ shareId,
+ );
+ const refetchRef = useRef(refetch);
+ refetchRef.current = refetch;
+ const [filled, setFilled] = useState(null);
+
+ const stored = artifact?.content;
+ const isShell =
+ stored != null && artifact?.download?.file_id != null && isOfficeFileShell(stored);
+
+ const key = `${artifact?.id}:${artifact?.download?.file_id}`;
+
+ useEffect(() => {
+ if (!isShell) {
+ return;
+ }
+ let cancelled = false;
+ const settle = (content: string) => {
+ if (!cancelled) {
+ setFilled({ key, shell: stored, content });
+ }
+ };
+ refetchRef
+ .current()
+ .then(({ data }) => (data instanceof Blob ? readBase64(data) : Promise.reject(new Error())))
+ .then((base64) => settle(fillOfficeFileShell(stored, base64)))
+ .catch(() => settle(stored));
+ return () => {
+ cancelled = true;
+ };
+ }, [isShell, stored, key]);
+
+ if (!isShell) {
+ return { content: stored, isLoading: false };
+ }
+ const isCurrent = filled?.key === key && filled.shell === stored;
+ return { content: isCurrent ? filled.content : stored, isLoading: !isCurrent };
+}
diff --git a/client/src/utils/__tests__/artifacts.test.ts b/client/src/utils/__tests__/artifacts.test.ts
index 11d2fedb6de..f221569e7c6 100644
--- a/client/src/utils/__tests__/artifacts.test.ts
+++ b/client/src/utils/__tests__/artifacts.test.ts
@@ -14,6 +14,7 @@ import {
isPreviewOnlyArtifact,
isSvgArtifactType,
languageForFilename,
+ toolArtifactKey,
TOOL_ARTIFACT_TYPES,
} from '../artifacts';
@@ -654,6 +655,35 @@ describe('languageForFilename', () => {
});
});
+describe('toolArtifactKey', () => {
+ it('prefers file_id over filepath and filename', () => {
+ expect(
+ toolArtifactKey({
+ file_id: 'fid-1',
+ filepath: '/uploads/session-a/index.html',
+ filename: 'index.html',
+ }),
+ ).toBe('tool-artifact-fid-1');
+ });
+
+ it('falls back to filepath before filename when file_id is missing', () => {
+ /* Id-less attachments are download fallbacks with a unique per-session
+ * filepath; keying by filename would merge genuinely different files
+ * that happen to share a display name. */
+ expect(
+ toolArtifactKey({ filepath: '/uploads/session-a/index.html', filename: 'index.html' }),
+ ).toBe('tool-artifact-/uploads/session-a/index.html');
+ });
+
+ it('falls back to filename when neither file_id nor filepath is present', () => {
+ expect(toolArtifactKey({ filename: 'index.html' })).toBe('tool-artifact-index.html');
+ });
+
+ it("falls back to 'unknown' when nothing identifies the file", () => {
+ expect(toolArtifactKey({})).toBe('tool-artifact-unknown');
+ });
+});
+
describe('fileToArtifact', () => {
const baseFile = {
file_id: 'fid-1',
diff --git a/client/src/utils/__tests__/map.test.ts b/client/src/utils/__tests__/map.test.ts
index 6dc54dc42b1..25fdc1b4d4d 100644
--- a/client/src/utils/__tests__/map.test.ts
+++ b/client/src/utils/__tests__/map.test.ts
@@ -62,7 +62,110 @@ describe('filterAttachmentsForPart', () => {
describe('mapAttachments', () => {
it('groups by toolCallId and drops unkeyed entries', () => {
- const map = mapAttachments([att({}), att({ toolCallId: 'call_1' }), att({ toolCallId: '' })]);
+ const map = mapAttachments([
+ att({ file_id: 'f1' }),
+ att({ toolCallId: 'call_1', file_id: 'f2' }),
+ att({ toolCallId: '', file_id: 'f3' }),
+ ]);
expect(Object.keys(map).sort()).toEqual(['call_0', 'call_1']);
});
+
+ it('keeps a repeated file_id only under its later toolCallId', () => {
+ const first = att({ toolCallId: 'call_0', file_id: 'f1' });
+ const second = att({ toolCallId: 'call_1', file_id: 'f1' });
+ const map = mapAttachments([first, second]);
+ expect(map['call_0']).toBeUndefined();
+ expect(map['call_1']).toEqual([second]);
+ });
+
+ it('drops an earlier duplicate of the same file within one toolCallId', () => {
+ const first = att({ toolCallId: 'call_0', file_id: 'f1' });
+ const second = att({ toolCallId: 'call_0', file_id: 'f1' });
+ const map = mapAttachments([first, second]);
+ expect(map['call_0']).toEqual([second]);
+ });
+
+ it('keeps two attachments with the same filename but different file_ids', () => {
+ const first = att({ toolCallId: 'call_0', file_id: 'f1', filename: 'data.zip' });
+ const second = att({ toolCallId: 'call_0', file_id: 'f2', filename: 'data.zip' });
+ const map = mapAttachments([first, second]);
+ expect(map['call_0']).toEqual([first, second]);
+ });
+
+ it('keeps every non-file attachment even when they share a toolCallId', () => {
+ const first = att({ toolCallId: 'call_0', file_id: undefined });
+ const second = att({ toolCallId: 'call_0', file_id: undefined });
+ const map = mapAttachments([first, second]);
+ expect(map['call_0']).toEqual([first, second]);
+ });
+
+ it('skips null and undefined entries', () => {
+ const map = mapAttachments([null, att({ toolCallId: 'call_0' }), undefined]);
+ expect(map['call_0']).toHaveLength(1);
+ });
+
+ it('keeps the newer write when copies are already in chronological order', () => {
+ const older = att({ toolCallId: 'call_0', file_id: 'f1', updatedAt: '2024-01-01T00:00:00Z' });
+ const newer = att({ toolCallId: 'call_1', file_id: 'f1', updatedAt: '2024-01-02T00:00:00Z' });
+ const map = mapAttachments([older, newer]);
+ expect(map['call_0']).toBeUndefined();
+ expect(map['call_1']).toEqual([newer]);
+ });
+
+ it('keeps the newer write when an older duplicate sits at a higher array index', () => {
+ const newer = att({ toolCallId: 'call_1', file_id: 'f1', updatedAt: '2024-01-02T00:00:00Z' });
+ const older = att({ toolCallId: 'call_0', file_id: 'f1', updatedAt: '2024-01-01T00:00:00Z' });
+ const map = mapAttachments([newer, older]);
+ expect(map['call_0']).toBeUndefined();
+ expect(map['call_1']).toEqual([newer]);
+ });
+
+ it('breaks a tie in write time by keeping the higher array index', () => {
+ const first = att({ toolCallId: 'call_0', file_id: 'f1', updatedAt: '2024-01-01T00:00:00Z' });
+ const second = att({ toolCallId: 'call_1', file_id: 'f1', updatedAt: '2024-01-01T00:00:00Z' });
+ const map = mapAttachments([first, second]);
+ expect(map['call_0']).toBeUndefined();
+ expect(map['call_1']).toEqual([second]);
+ });
+
+ it('keeps the linked copy when an unlinked duplicate of the same file follows it', () => {
+ const linked = att({ toolCallId: 'call_0', file_id: 'f1' });
+ const unlinked = att({ toolCallId: '', file_id: 'f1' });
+ const map = mapAttachments([linked, unlinked]);
+ expect(map['call_0']).toEqual([linked]);
+ });
+
+ it('keeps two id-less attachments with the same filename but different filepaths', () => {
+ const first = att({
+ toolCallId: 'call_0',
+ file_id: undefined,
+ filename: 'data.zip',
+ filepath: '/uploads/session-a/data.zip',
+ });
+ const second = att({
+ toolCallId: 'call_1',
+ file_id: undefined,
+ filename: 'data.zip',
+ filepath: '/uploads/session-b/data.zip',
+ });
+ const map = mapAttachments([first, second]);
+ expect(map['call_0']).toEqual([first]);
+ expect(map['call_1']).toEqual([second]);
+ });
+
+ it('drops an earlier id-less duplicate at the same filepath', () => {
+ const first = att({
+ toolCallId: 'call_0',
+ file_id: undefined,
+ filepath: '/uploads/session-a/data.zip',
+ });
+ const second = att({
+ toolCallId: 'call_1',
+ file_id: undefined,
+ filepath: '/uploads/session-a/data.zip',
+ });
+ const map = mapAttachments([first, second]);
+ expect(map['call_0']).toBeUndefined();
+ expect(map['call_1']).toEqual([second]);
+ });
});
diff --git a/client/src/utils/artifacts.ts b/client/src/utils/artifacts.ts
index 8c02ee4b744..654dfa44acb 100644
--- a/client/src/utils/artifacts.ts
+++ b/client/src/utils/artifacts.ts
@@ -1106,12 +1106,14 @@ export function detectArtifactTypeFromFile(
* Stable per-file key used for both the artifactsState entry and the
* `toolArtifactClaim` atom that dedups duplicate cards. Same call shape
* everywhere so a panel card and a mermaid card for the same file share
- * the same claim. Falls through `file_id` → `filename` → `filepath` to
- * minimise collision risk for any caller that (rarely) lacks `file_id`.
+ * the same claim. Falls through `file_id` → `filepath` → `filename`:
+ * id-less attachments are download fallbacks with a unique per-session
+ * filepath, so keying them by display name would merge genuinely
+ * different files that happen to share a filename.
*/
export const toolArtifactKey = (
file: Partial>,
-): string => `tool-artifact-${file.file_id ?? file.filename ?? file.filepath ?? 'unknown'}`;
+): string => `tool-artifact-${file.file_id ?? file.filepath ?? file.filename ?? 'unknown'}`;
/**
* Stable epoch fallback (instead of `Date.now()`) when neither timestamp
diff --git a/client/src/utils/map.ts b/client/src/utils/map.ts
index 9f43d5a5023..748d2de6e6b 100644
--- a/client/src/utils/map.ts
+++ b/client/src/utils/map.ts
@@ -1,17 +1,84 @@
import type * as t from 'librechat-data-provider';
import type { TPluginMap } from '~/common';
+import { toolArtifactKey } from './artifacts';
-/** Maps Attachments by `toolCallId` for quick lookup */
+/**
+ * Identity for a file-backed attachment (one with a `file_id` or a
+ * `filepath`), or `null` for anything else (e.g. web search results), which
+ * is never collapsed. For file-backed attachments this is exactly the
+ * artifact card's key, `toolArtifactKey` (`file_id` → `filepath` →
+ * `filename`), so an id-less file keys by its unique per-session filepath
+ * rather than a display name two different files can share. An attachment
+ * with only a `filename` is not treated as a file here, although
+ * `toolArtifactKey` would still key it by that name.
+ */
+export const fileIdentity = (attachment: t.TAttachment): string | null => {
+ const file = attachment as Partial;
+ if (file.file_id != null || file.filepath != null) {
+ return toolArtifactKey(file);
+ }
+ return null;
+};
+
+/** `updatedAt ?? createdAt`, parsed to ms; missing or unparseable → 0. */
+const writeTimeMs = (attachment: t.TAttachment): number => {
+ const file = attachment as Partial;
+ const value = file.updatedAt ?? file.createdAt;
+ if (value == null) {
+ return 0;
+ }
+ const ms = new Date(value as string | number | Date).getTime();
+ return Number.isFinite(ms) ? ms : 0;
+};
+
+/**
+ * Maps Attachments by `toolCallId` for quick lookup. Attachments are assumed
+ * to belong to one message: when the same file repeats — e.g. a tool call
+ * rewrites the file it produced earlier in the message — only the copy with
+ * the newest write time survives (ties keep the higher array index), so a
+ * message never shows the same file twice. Array order isn't chronological
+ * (a background-run harvest can append an older copy after a newer
+ * foreground rewrite), so only entries that will actually be grouped
+ * (non-empty `toolCallId`) compete for survivorship; an unlinked duplicate
+ * is dropped as always but never hides a linked copy. Non-file attachments
+ * (no `file_id`/`filepath`) never collapse.
+ */
export function mapAttachments(attachments: Array) {
const attachmentMap: Record = {};
- for (const attachment of attachments) {
+ const identities = attachments.map((attachment) =>
+ attachment == null ? null : fileIdentity(attachment),
+ );
+ const survivorByIdentity = new Map();
+ attachments.forEach((attachment, index) => {
+ if (attachment == null) {
+ return;
+ }
+ const identity = identities[index];
+ if (identity == null || !attachment.toolCallId) {
+ return;
+ }
+ const time = writeTimeMs(attachment);
+ const current = survivorByIdentity.get(identity);
+ if (!current || time > current.time || (time === current.time && index > current.index)) {
+ survivorByIdentity.set(identity, { index, time });
+ }
+ });
+
+ attachments.forEach((attachment, index) => {
if (attachment === null || attachment === undefined) {
- continue;
+ return;
+ }
+ const identity = identities[index];
+ if (identity != null) {
+ const survivor = survivorByIdentity.get(identity);
+ if (survivor && survivor.index !== index) {
+ return;
+ }
}
const key = attachment.toolCallId || '';
if (key.length === 0) {
- continue;
+ return;
}
if (!attachmentMap[key]) {
@@ -19,7 +86,7 @@ export function mapAttachments(attachments: Array ({
const mockOfficeHtml = jest.fn(
async (_buffer: Buffer, _name: string, _mime: string) => null as string | null,
);
+const mockShellRender = jest.fn(
+ async (_buffer: Buffer, _options: { fileShell?: boolean }) => null as string | null,
+);
jest.mock('~/files/documents/html', () => {
const actual =
jest.requireActual('~/files/documents/html');
return {
+ pptxToHtml: (buffer: Buffer, options: { fileShell?: boolean }) =>
+ mockShellRender(buffer, options),
+ wordDocToHtml: (buffer: Buffer, options: { fileShell?: boolean }) =>
+ mockShellRender(buffer, options),
bufferToOfficeHtml: (buffer: Buffer, name: string, mime: string) =>
mockOfficeHtml(buffer, name, mime),
officeHtmlBucket: actual.officeHtmlBucket,
@@ -855,3 +865,198 @@ describe('resolveMaxTextExtractBytes', () => {
);
});
});
+
+describe('office preview shell routing', () => {
+ const INLINE_CAP = 350 * 1024;
+ const LIMIT = 25 * 1024 * 1024;
+ const pptx = 'deck.pptx';
+ const pptxMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+ const docx = 'report.docx';
+ const docxMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+ const on = { enabled: true, fileSizeLimit: LIMIT };
+
+ beforeEach(() => {
+ mockOfficeHtml.mockReset();
+ mockShellRender.mockReset();
+ mockOfficeHtml.mockResolvedValue('inline');
+ mockShellRender.mockResolvedValue('shell');
+ });
+
+ it('keeps a file of exactly 350 KB on the inline path', async () => {
+ const text = await extractCodeArtifactText(
+ Buffer.alloc(INLINE_CAP),
+ pptx,
+ pptxMime,
+ 'presentation',
+ on,
+ );
+ expect(text).toBe('inline');
+ expect(mockShellRender).not.toHaveBeenCalled();
+ });
+
+ it.each([
+ [pptx, pptxMime, 'presentation'],
+ [docx, docxMime, 'document'],
+ ] as const)('renders a shell for %s at 350 KB + 1 byte', async (name, mime, category) => {
+ const buffer = Buffer.alloc(INLINE_CAP + 1);
+ const text = await extractCodeArtifactText(buffer, name, mime, category, on);
+ expect(text).toBe('shell');
+ expect(mockShellRender).toHaveBeenCalledWith(buffer, { fileShell: true });
+ expect(mockOfficeHtml).not.toHaveBeenCalled();
+ });
+
+ it('renders a shell for a 4 MB deck', async () => {
+ const text = await extractCodeArtifactText(
+ Buffer.alloc(4 * 1024 * 1024),
+ pptx,
+ pptxMime,
+ 'presentation',
+ on,
+ );
+ expect(text).toBe('shell');
+ });
+
+ it('renders a shell at exactly the limit and returns null one byte above', async () => {
+ const atLimit = await extractCodeArtifactText(
+ Buffer.alloc(LIMIT),
+ pptx,
+ pptxMime,
+ 'presentation',
+ on,
+ );
+ const above = await extractCodeArtifactText(
+ Buffer.alloc(LIMIT + 1),
+ pptx,
+ pptxMime,
+ 'presentation',
+ on,
+ );
+ expect(atLimit).toBe('shell');
+ expect(above).toBeNull();
+ expect(mockShellRender).toHaveBeenCalledTimes(1);
+ });
+
+ it('returns null when the shell render fails', async () => {
+ mockShellRender.mockResolvedValueOnce(null);
+ const text = await extractCodeArtifactText(
+ Buffer.alloc(INLINE_CAP + 1),
+ pptx,
+ pptxMime,
+ 'presentation',
+ on,
+ );
+ expect(text).toBeNull();
+ });
+
+ it('restores the 2 MB gate and inline routing when disabled', async () => {
+ const disabled = { enabled: false, fileSizeLimit: LIMIT };
+ const mid = await extractCodeArtifactText(
+ Buffer.alloc(INLINE_CAP + 1),
+ pptx,
+ pptxMime,
+ 'presentation',
+ disabled,
+ );
+ const big = await extractCodeArtifactText(
+ Buffer.alloc(MAX_TEXT_EXTRACT_BYTES + 1),
+ pptx,
+ pptxMime,
+ 'presentation',
+ disabled,
+ );
+ expect(mid).toBe('inline');
+ expect(big).toBeNull();
+ expect(mockShellRender).not.toHaveBeenCalled();
+ });
+
+ it('does not shell spreadsheets above the inline cap', async () => {
+ const text = await extractCodeArtifactText(
+ Buffer.alloc(INLINE_CAP + 1),
+ 'data.xlsx',
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ 'document',
+ on,
+ );
+ expect(text).toBe('inline');
+ expect(mockShellRender).not.toHaveBeenCalled();
+ });
+
+ describe('officePreviewByteLimit', () => {
+ it('is the configured limit for pptx and docx when enabled', () => {
+ expect(officePreviewByteLimit(pptx, pptxMime, on)).toBe(LIMIT);
+ expect(officePreviewByteLimit(docx, docxMime, on)).toBe(LIMIT);
+ });
+
+ it('never drops below the extract ceiling', () => {
+ expect(officePreviewByteLimit(pptx, pptxMime, { enabled: true, fileSizeLimit: 1 })).toBe(
+ MAX_TEXT_EXTRACT_BYTES,
+ );
+ });
+
+ it('is the extract ceiling when disabled, unset, or for other files', () => {
+ expect(officePreviewByteLimit(pptx, pptxMime, { enabled: false, fileSizeLimit: LIMIT })).toBe(
+ MAX_TEXT_EXTRACT_BYTES,
+ );
+ expect(officePreviewByteLimit(pptx, pptxMime)).toBe(MAX_TEXT_EXTRACT_BYTES);
+ expect(officePreviewByteLimit('data.xlsx', 'application/vnd.ms-excel', on)).toBe(
+ MAX_TEXT_EXTRACT_BYTES,
+ );
+ });
+
+ describe('officePreviewFailure', () => {
+ const off = { enabled: false, fileSizeLimit: LIMIT };
+
+ it('is too-large only past the configured limit for an enabled pptx', () => {
+ expect(officePreviewFailure(LIMIT + 1, pptx, pptxMime, on)).toBe('too-large');
+ expect(officePreviewFailure(LIMIT, pptx, pptxMime, on)).toBe('parser-error');
+ expect(officePreviewFailure(1024 * 1024, pptx, pptxMime, on)).toBe('parser-error');
+ });
+
+ it('uses the extract ceiling when the setting is disabled', () => {
+ expect(officePreviewFailure(MAX_TEXT_EXTRACT_BYTES + 1, pptx, pptxMime, off)).toBe(
+ 'too-large',
+ );
+ expect(officePreviewFailure(MAX_TEXT_EXTRACT_BYTES, pptx, pptxMime, off)).toBe(
+ 'parser-error',
+ );
+ });
+
+ it('uses the extract ceiling for files that are not decks or documents', () => {
+ expect(
+ officePreviewFailure(
+ MAX_TEXT_EXTRACT_BYTES + 1,
+ 'data.xlsx',
+ 'application/vnd.ms-excel',
+ on,
+ ),
+ ).toBe('too-large');
+ });
+ });
+ });
+
+ describe('limits set in librechat.yaml', () => {
+ const mb = 1024 * 1024;
+ const fromYaml = (officePreview: { enabled?: boolean; fileSizeLimit?: number }) =>
+ mergeFileConfig({ officePreview }).officePreview;
+ const route = (size: number, setting: ReturnType) =>
+ extractCodeArtifactText(Buffer.alloc(size), pptx, pptxMime, 'presentation', setting);
+
+ it('applies a 5 MB limit given in megabytes as bytes', async () => {
+ const setting = fromYaml({ fileSizeLimit: 5 });
+ expect(setting).toEqual({ enabled: true, fileSizeLimit: 5 * mb });
+ expect(officePreviewByteLimit(pptx, pptxMime, setting)).toBe(5 * mb);
+ expect(officePreviewFailure(5 * mb + 1, pptx, pptxMime, setting)).toBe('too-large');
+ expect(officePreviewFailure(5 * mb, pptx, pptxMime, setting)).toBe('parser-error');
+ expect(await route(4 * mb, setting)).toBe('shell');
+ expect(await route(5 * mb + 1, setting)).toBeNull();
+ });
+
+ it('falls back to the 2 MB ceiling when the preview is turned off', async () => {
+ const setting = fromYaml({ enabled: false });
+ expect(officePreviewByteLimit(pptx, pptxMime, setting)).toBe(MAX_TEXT_EXTRACT_BYTES);
+ expect(officePreviewFailure(3 * mb, pptx, pptxMime, setting)).toBe('too-large');
+ expect(await route(3 * mb, setting)).toBeNull();
+ expect(mockShellRender).not.toHaveBeenCalled();
+ });
+ });
+});
diff --git a/packages/api/src/files/code/extract.ts b/packages/api/src/files/code/extract.ts
index 88b7e7ab3ce..c8cbf15d5ab 100644
--- a/packages/api/src/files/code/extract.ts
+++ b/packages/api/src/files/code/extract.ts
@@ -3,8 +3,14 @@ import * as path from 'path';
import * as fs from 'fs/promises';
import { randomUUID } from 'crypto';
import { logger } from '@librechat/data-schemas';
+import type { TFileConfig } from 'librechat-data-provider';
import type { CodeArtifactCategory } from './classify';
-import { bufferToOfficeHtml, officeHtmlBucket } from '~/files/documents/html';
+import {
+ bufferToOfficeHtml,
+ officeHtmlBucket,
+ pptxToHtml,
+ wordDocToHtml,
+} from '~/files/documents/html';
import { createConcurrencyLimiter, withTimeout } from '~/utils/promise';
import { parseDocument } from '~/files/documents/crud';
import { isBinaryBuffer } from '~/skills/binary';
@@ -43,6 +49,48 @@ export function resolveMaxTextExtractBytes(value: string | undefined): number {
export const MAX_TEXT_EXTRACT_BYTES: number = resolveMaxTextExtractBytes(
process.env.FILE_PREVIEW_MAX_EXTRACT_BYTES,
);
+/** Largest office file whose bytes still ride inside the stored preview HTML. */
+const INLINE_OFFICE_BYTES = 350 * 1024;
+
+export type OfficePreviewSetting = TFileConfig['officePreview'];
+
+const isShellEligible = (
+ name: string,
+ mimeType: string,
+ officePreview?: OfficePreviewSetting,
+): boolean => {
+ const bucket = officeHtmlBucket(name, mimeType);
+ return officePreview?.enabled === true && (bucket === 'docx' || bucket === 'presentation');
+};
+
+/**
+ * Largest buffer a preview is attempted for. Decks and documents may go up to the
+ * configured `officePreview.fileSizeLimit` when the storage-backed path is on;
+ * every other file keeps the extraction ceiling.
+ */
+export function officePreviewByteLimit(
+ name: string,
+ mimeType: string,
+ officePreview?: OfficePreviewSetting,
+): number {
+ if (!isShellEligible(name, mimeType, officePreview)) {
+ return MAX_TEXT_EXTRACT_BYTES;
+ }
+ return Math.max(MAX_TEXT_EXTRACT_BYTES, officePreview?.fileSizeLimit ?? 0);
+}
+
+/** Why a preview came back empty: over the size limit, or the parser gave up. */
+export function officePreviewFailure(
+ byteLength: number,
+ name: string,
+ mimeType: string,
+ officePreview?: OfficePreviewSetting,
+): 'too-large' | 'parser-error' {
+ return byteLength > officePreviewByteLimit(name, mimeType, officePreview)
+ ? 'too-large'
+ : 'parser-error';
+}
+
const DOCUMENT_PARSE_TIMEOUT_MS = 8_000;
const OFFICE_HTML_TIMEOUT_MS = 12_000;
const TRUNCATION_MARKER = '\n\n…[truncated]';
@@ -254,11 +302,20 @@ const renderOfficeHtml = async (
buffer: Buffer,
name: string,
mimeType: string,
+ fileShell = false,
): Promise => {
+ const render = (): Promise => {
+ if (!fileShell) {
+ return bufferToOfficeHtml(buffer, name, mimeType);
+ }
+ return officeHtmlBucket(name, mimeType) === 'docx'
+ ? wordDocToHtml(buffer, { fileShell })
+ : pptxToHtml(buffer, { fileShell });
+ };
try {
const html = await officeHtmlLimit(() =>
withTimeout(
- bufferToOfficeHtml(buffer, name, mimeType),
+ render(),
OFFICE_HTML_TIMEOUT_MS,
`bufferToOfficeHtml exceeded ${OFFICE_HTML_TIMEOUT_MS}ms`,
),
@@ -299,8 +356,9 @@ export async function extractCodeArtifactText(
name: string,
mimeType: string,
category: CodeArtifactCategory,
+ officePreview?: OfficePreviewSetting,
): Promise {
- if (buffer.length > MAX_TEXT_EXTRACT_BYTES) {
+ if (buffer.length > officePreviewByteLimit(name, mimeType, officePreview)) {
return null;
}
try {
@@ -325,8 +383,9 @@ export async function extractCodeArtifactText(
* text gate keep the artifact off the panel and fall back to the
* regular download UI, matching what PPTX already does. */
if (hasOfficeHtmlPath(name, mimeType)) {
- const html = await renderOfficeHtml(buffer, name, mimeType);
- return html;
+ const fileShell =
+ buffer.length > INLINE_OFFICE_BYTES && isShellEligible(name, mimeType, officePreview);
+ return await renderOfficeHtml(buffer, name, mimeType, fileShell);
}
if (category === 'other') {
return null;
diff --git a/packages/api/src/files/code/process.ts b/packages/api/src/files/code/process.ts
index 9aa4d1d9705..6cc03a188b9 100644
--- a/packages/api/src/files/code/process.ts
+++ b/packages/api/src/files/code/process.ts
@@ -5,6 +5,7 @@ import {
fileConfig,
imageExtRegex,
inferMimeType,
+ mergeFileConfig,
mergeCodeEnvRef,
} from 'librechat-data-provider';
import type { CodeEnvRef, FileSources, getEndpointFileConfig } from 'librechat-data-provider';
@@ -17,9 +18,9 @@ import type {
CodeOutputDownloadFallback,
ProcessPublishedCodeOutputInput,
} from './publication';
+import type { hasOfficeHtmlPath, getExtractedTextFormat, OfficePreviewSetting } from './extract';
import type { sanitizeArtifactPath, flattenArtifactPath } from '~/utils/files';
import type { classifyCodeArtifact, CodeArtifactCategory } from './classify';
-import type { hasOfficeHtmlPath, getExtractedTextFormat } from './extract';
import type { RetentionExpiry } from '~/files/retention';
import type { extractCodeArtifactText } from './extract';
import type { logAxiosError } from '~/utils/axios';
@@ -97,6 +98,7 @@ export interface CodeOutputProcessorDeps {
category: CodeArtifactCategory;
file_id: string;
previewRevision?: string | null;
+ officePreview?: OfficePreviewSetting;
}) => Promise;
hasOfficeHtmlPath: typeof hasOfficeHtmlPath;
sanitizeArtifactPath: typeof sanitizeArtifactPath;
@@ -535,6 +537,7 @@ export async function processCodeOutput(
category,
file_id: file.file_id,
previewRevision: file.previewRevision,
+ officePreview: mergeFileConfig(req.config?.fileConfig).officePreview,
}),
),
previewRevision: file.previewRevision,
diff --git a/packages/api/src/files/documents/html.spec.ts b/packages/api/src/files/documents/html.spec.ts
index e320abddf9c..a46a6682788 100644
--- a/packages/api/src/files/documents/html.spec.ts
+++ b/packages/api/src/files/documents/html.spec.ts
@@ -1,7 +1,14 @@
import path from 'path';
import * as fs from 'fs';
import JSZip from 'jszip';
-import { megabyte } from 'librechat-data-provider';
+import { randomBytes } from 'crypto';
+import {
+ megabyte,
+ isOfficeFileShell,
+ fillOfficeFileShell,
+ OFFICE_DOC_DATA_SLOT,
+ OFFICE_FILE_SHELL_MARKER,
+} from 'librechat-data-provider';
import {
_internal,
bufferToOfficeHtml,
@@ -618,6 +625,52 @@ describe('Office HTML producers', () => {
* on resize never measures an already-transformed box. */
expect(html).toContain('lcNativeW');
});
+
+ test('initializes pptx-preview with only a width so it never boxes the deck into a fixed-height viewport', async () => {
+ /* Passing `height` bounded the librarys own render box, which
+ * produced a nested scroll region for multi-slide decks instead
+ * of letting the panel itself scroll to the last slide. Width
+ * alone is enough — the wrap+scale step above fits each slide
+ * to the panel. */
+ const pptx = await buildPptx([{ title: 'A' }]);
+ const html = await _internal.pptxToHtmlViaCdn(
+ pptx,
+ ' => {
+ const zip = await JSZip.loadAsync(readFixture(fixture));
+ zip.file(entry, randomBytes(bytes), { compression: 'STORE' });
+ return zip.generateAsync({ type: 'nodebuffer' });
+ };
+ const cap = _internal.OFFICE_HTML_OUTPUT_CAP;
+
+ test('builds a pptx shell with an empty slot', async () => {
+ const pptx = await padded('sample.pptx', 'ppt/media/padding.bin', megabyte);
+ const html = await pptxToHtml(pptx, { fileShell: true });
+ expect(isOfficeFileShell(html)).toBe(true);
+ expect(html).toContain(OFFICE_FILE_SHELL_MARKER);
+ expect(html.split(OFFICE_DOC_DATA_SLOT)).toHaveLength(2);
+ expect(html).toContain('class="lc-pptx-list"');
+ expect(Buffer.byteLength(html, 'utf-8')).toBeLessThanOrEqual(cap);
+ });
+
+ test('builds a docx shell with an empty slot', async () => {
+ const docx = await padded('sample.docx', 'word/media/padding.bin', megabyte);
+ const html = await wordDocToHtml(docx, { fileShell: true });
+ expect(isOfficeFileShell(html)).toBe(true);
+ expect(html).toContain(OFFICE_FILE_SHELL_MARKER);
+ expect(html.split(OFFICE_DOC_DATA_SLOT)).toHaveLength(2);
+ expect(html).toContain('');
+ expect(Buffer.byteLength(html, 'utf-8')).toBeLessThanOrEqual(cap);
+ });
+
+ test('keeps small files inline', async () => {
+ const pptx = readFixture('sample.pptx');
+ const docx = readFixture('sample.docx');
+ const pptxHtml = await pptxToHtml(pptx);
+ const docxHtml = await wordDocToHtml(docx);
+ expect(isOfficeFileShell(pptxHtml)).toBe(false);
+ expect(isOfficeFileShell(docxHtml)).toBe(false);
+ expect(pptxHtml).toContain(pptx.toString('base64'));
+ expect(docxHtml).toContain(docx.toString('base64'));
+ });
+
+ test('trims an oversized fallback in a shell', async () => {
+ const zip = await JSZip.loadAsync(readFixture('sample.pptx'));
+ const line = 'x'.repeat(3000);
+ const slideXml = (n: number) =>
+ `Slide ${n} ${line}
{displayName ?? file.filename ?? ''}
+ ),
+}));
+
+jest.mock('~/components/Chat/Input/Files/FilePreview', () => ({
+ __esModule: true,
+ default: () => ,
+}));
+
+jest.mock('~/components/Chat/Messages/Content/Image', () => ({
+ __esModule: true,
+ default: ({ altText }: { altText?: string }) => {children}
+ ),
+}));
+
+jest.mock('~/utils', () => ({
+ cn: (...classes: Array{displayName ?? file.filename ?? ''}
+ ),
+}));
+
+jest.mock('~/components/Chat/Input/Files/FilePreview', () => ({
+ __esModule: true,
+ default: () => ,
+}));
+
+jest.mock('~/components/Chat/Messages/Content/Image', () => ({
+ __esModule: true,
+ default: ({ altText }: { altText?: string }) =>
+ {children}
+
+ ),
+}));
+
+jest.mock('~/utils', () => ({
+ cn: (...classes: Arrayhi
' }); + const { container } = render( +v1
', + }); + const { container } = render( +v2 (newer)
', + updatedAt: '2024-01-02T00:00:00.000Z', + }); + const older = baseAttachment({ + file_id: 'versioned', + filename: 'report.html', + text: 'v1 (older)
', + updatedAt: '2024-01-01T00:00:00.000Z', + }); + let content: string | null = null; + render( +v2 (newer)
'); + }); + + it('keeps the newer content after the newer card unmounts and the older card mounts fresh', () => { + const newer = baseAttachment({ + file_id: 'remount', + filename: 'notes.html', + text: 'v2 (newer)
', + updatedAt: '2024-01-02T00:00:00.000Z', + }); + const older = baseAttachment({ + file_id: 'remount', + filename: 'notes.html', + text: 'v1 (older)
', + updatedAt: '2024-01-01T00:00:00.000Z', + }); + let content: string | null = null; + const onSnapshot = (snapshot: string | null) => { + content = snapshot; + }; + const { rerender } = render( +v2 (newer)
'); + + rerender( +v2 (newer)
'); + }); +}); + +describe('ToolArtifactCard file identity for id-less attachments', () => { + it('renders two card triggers for two id-less files sharing a filename but differing by filepath, each opening its own content', () => { + const first = baseAttachment({ + file_id: undefined, + filename: 'index.html', + filepath: '/uploads/session-a/index.html', + text: 'A
', + }); + const second = baseAttachment({ + file_id: undefined, + filename: 'index.html', + filepath: '/uploads/session-b/index.html', + text: 'B
', + }); + + let snapshot: RecordA
'); + expect(snapshot[secondId]?.content).toBe('B
'); + + const firstTrigger = container.querySelector(`[data-artifact-trigger="${firstId}"]`); + const secondTrigger = container.querySelector(`[data-artifact-trigger="${secondId}"]`); + expect(firstTrigger).not.toBeNull(); + expect(secondTrigger).not.toBeNull(); + + fireEvent.click(firstTrigger as HTMLElement); + expect(currentId).toBe(firstId); + + fireEvent.click(secondTrigger as HTMLElement); + expect(currentId).toBe(secondId); + }); +}); + +describe('ToolMermaidArtifact message-scoped dedup', () => { + it('shows a diagram card on every message that holds the same file identity', () => { + const mmd = () => + baseAttachment({ file_id: 'diagram', filename: 'flow.mmd', text: 'graph TD\nA-->B' }); + render( +version A
' }); + const versionB = () => + baseAttachment({ file_id: 'tie-file', filename: 'tie.html', text: 'version B
' }); + + /** Records each distinct object identity `artifactsState[tieId]` takes on, + * i.e. one entry per real write — not one per render. */ + const WriteHistoryProbe = ({ onWrite }: { onWrite: (content: string | null) => void }) => { + const artifacts = useRecoilValue(store.artifactsState); + const entry = artifacts?.[tieId]; + const lastSeen = React.useRefversion A
', 'version B
']).toContain(settled); + + // Flush again with an unchanged tree — must not drift or write again. + rerender( +version A
', 'version B
']).toContain(settled); + + // Flush again with an unchanged tree — must not drift or write again. + rerender( +result
', + toolCallId, + } as Partialdup
', + toolCallId: 'call-dup', + } as Partial- fb
- fb
- fb
)[\s\S]*?(<\/div>\s*
+${fileShell ? OFFICE_DOC_DATA_SLOT : ``}
+${fileShell ? OFFICE_DOC_DATA_SLOT : ``}