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.
88 lines
2.6 KiB
TypeScript
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\n\n',
|
|
),
|
|
).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",
|
|
),
|
|
).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(``);
|
|
const mixedHeight = estimateAssistantMessageHeightFromCache(`Text\n\n`);
|
|
|
|
expect(imageOnlyHeight).toBeGreaterThan(220);
|
|
expect(mixedHeight).toBeGreaterThan(imageOnlyHeight ?? 0);
|
|
});
|
|
});
|