Files
paseo/packages/app/src/utils/assistant-image-metadata.test.ts
T
Mohamed Boudra 47223b375f feat(app): show loading and error states for assistant images
Render an activity indicator while image dimensions resolve and an
"Image unavailable" fallback if loading fails, replacing the previous
behavior where the surface stayed blank. Reserves a fixed minimum
height in both states so message layout doesn't shift.
2026-04-29 19:47:01 +07:00

88 lines
2.6 KiB
TypeScript

import { beforeEach, describe, expect, it } from "vitest";
import {
clearAssistantImageMetadataCache,
estimateAssistantMessageHeightFromCache,
extractAssistantImageSources,
getAssistantImageLoadStateFromMetadata,
getAssistantImageMetadata,
setAssistantImageMetadata,
} from "./assistant-image-metadata";
describe("assistant image metadata", () => {
beforeEach(() => {
clearAssistantImageMetadataCache();
});
it("extracts markdown image sources", () => {
expect(
extractAssistantImageSources(
'Before\n\n![local](/tmp/paseo.png)\n\n![remote](https://example.com/test.png "Remote")',
),
).toEqual(["/tmp/paseo.png", "https://example.com/test.png"]);
});
it("reuses cached metadata across canonical and raw source keys", () => {
setAssistantImageMetadata(
{
source: "/tmp/paseo-codex-screenshot.png",
workspaceRoot: "/Users/moboudra/dev/paseo",
serverId: "server-1",
},
{ width: 1200, height: 800 },
);
expect(
getAssistantImageMetadata({
source: "/tmp/paseo-codex-screenshot.png",
}),
).toEqual({
width: 1200,
height: 800,
aspectRatio: 1.5,
});
});
it("maps missing metadata to the image loading state", () => {
expect(getAssistantImageLoadStateFromMetadata(null)).toEqual({ status: "loading" });
});
it("maps cached metadata to the image ready state", () => {
expect(
getAssistantImageLoadStateFromMetadata({
width: 900,
height: 1600,
aspectRatio: 9 / 16,
}),
).toEqual({
status: "ready",
aspectRatio: 9 / 16,
});
});
it("estimates assistant message height from cached image metadata", () => {
setAssistantImageMetadata(
{
source: "https://example.com/landscape.png",
},
{ width: 1200, height: 800 },
);
expect(
estimateAssistantMessageHeightFromCache(
"Here is the screenshot\n\n![Screenshot](https://example.com/landscape.png)",
),
).toBeGreaterThan(220);
});
it("estimates image-only data-image markdown without caching the full payload as text", () => {
const source = `data:image/png;base64,${"a".repeat(512)}`;
setAssistantImageMetadata({ source }, { width: 1200, height: 800 });
const imageOnlyHeight = estimateAssistantMessageHeightFromCache(`![Screenshot](${source})`);
const mixedHeight = estimateAssistantMessageHeightFromCache(`Text\n\n![Screenshot](${source})`);
expect(imageOnlyHeight).toBeGreaterThan(220);
expect(mixedHeight).toBeGreaterThan(imageOnlyHeight ?? 0);
});
});