diff --git a/packages/appkit-ui/src/react/genie/__tests__/genie-chat-message.test.tsx b/packages/appkit-ui/src/react/genie/__tests__/genie-chat-message.test.tsx
index 862d24d57..c247b24df 100644
--- a/packages/appkit-ui/src/react/genie/__tests__/genie-chat-message.test.tsx
+++ b/packages/appkit-ui/src/react/genie/__tests__/genie-chat-message.test.tsx
@@ -2,8 +2,15 @@ import { cleanup, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, test, vi } from "vitest";
vi.mock("../genie-query-visualization", () => ({
- GenieQueryVisualization: (props: { chartImageUrl?: string }) => (
-
+ GenieQueryVisualization: (props: {
+ chartImageUrl?: string;
+ chartImageAlt?: string;
+ }) => (
+
),
}));
@@ -81,6 +88,55 @@ describe("GenieChatMessage", () => {
expect(screen.queryByTestId("query-result")).toBeNull();
});
+ test("describes a chat-mode chart by its query's description", () => {
+ render(
+ ,
+ );
+
+ expect(
+ screen.getByRole("img", {
+ name: "You want to see the number of franchises by size.",
+ }),
+ ).toBeTruthy();
+ });
+
+ test("names a chat-mode chart in the result by its query's title first", () => {
+ render(
+ ,
+ );
+
+ expect(
+ screen.getByTestId("query-result").getAttribute("data-chart-alt"),
+ ).toBe("Franchises");
+ });
+
test("leaves the query result alone for a query without a visualization", () => {
render(
[att.attachmentId, att.query]),
+ );
const visualizations: Visualization[] = message.attachments.flatMap((att) => {
const url =
att.attachmentId && message.visualizationUrls?.[att.attachmentId];
- return att.viz && url ? [{ url, ...att.viz }] : [];
+ if (!att.viz || !url) return [];
+ const query = queryById.get(att.viz.queryAttachmentId);
+ // Chat-mode charts have no title; describe them by the query they plot.
+ const title = att.viz.title || query?.title || query?.description;
+ return [{ url, ...att.viz, title }];
});
- const queryIds = new Set(queryAttachments.map((att) => att.attachmentId));
// Charts whose query isn't among the attachments still get shown, after the queries.
const unmatchedVisualizations = visualizations.filter(
- (viz) => !queryIds.has(viz.queryAttachmentId),
+ (viz) => !queryById.has(viz.queryAttachmentId),
);
const html = useMemo(
() =>