+ {attachments.map((file, index) => {
+ const uploadState = uploadStates?.get(file);
+ const previewUrl = previewUrls?.get(file) ?? "";
+ return (
+
+ );
+});
+AttachmentPreview.displayName = "AttachmentPreview";
+
export const AgentChatInput = memo
+ {file.type.startsWith("image/") && previewUrl ? (
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+
+ );
+ })}
+
+ {file.name.split(".").pop()?.toUpperCase() || "FILE"}
+
+ )}
+ {uploadState?.status === "uploading" && (
+
+
+ )}
+ {uploadState?.status === "error" && (
+
+
+ + {uploadState.error ?? "Upload failed"} +
+
{editingQueuedMessageID !== null && (
(
{contextUsage !== undefined && (
);
- return content;
+ return (
+ <>
+ {content}
+ {previewImage && (
+
@@ -388,8 +580,18 @@ export const AgentChatInput = memo(
)}
+ {onRemoveAttachment && (
+
- {parsed.markdown || ""}
- {isSavingMessage && (
-
+
+ {isUser ? (
+
+ {
+ const fileBlocks = parsed.blocks.filter(
+ (b): b is Extract =>
+ b.type === "file" &&
+ b.mediaType.startsWith("image/"),
+ );
+ onEditUserMessage(
+ message.id,
+ parsed.markdown || "",
+ fileBlocks.length > 0 ? fileBlocks : undefined,
+ );
+ }
+ : undefined
+ }
+ >
+ =>
+ b.type === "file" && b.mediaType.startsWith("image/"),
+ );
+ if (imageBlocks.length === 0) return null;
+ return (
+
- {fadeFromBottom && (
-
- )}
-
+
+ {parsed.markdown || ""}
+
+ {isSavingMessage && (
+
+ {(() => {
+ const imageBlocks = parsed.blocks.filter(
+ (b): b is Extract
+ {imageBlocks.map((block, i) => {
+ const src = block.fileId
+ ? `/api/experimental/chats/files/${block.fileId}`
+ : `data:${block.mediaType};base64,${block.data}`;
+ return (
+
+ );
+ })}
+
+ );
+ })()}
+ {fadeFromBottom && (
+
)}
-
- {orderedBlocks}
- {remainingTools.map((tool) => (
-
-
- Message has no renderable content.
-
- )}
-
+ {orderedBlocks}
+ {remainingTools.map((tool) => (
+
+
+ Message has no renderable content.
+
+ )}
+
@@ -886,7 +937,7 @@ export const AgentsEmptyState: FC = ({
)}
= ({
hasModelOptions={hasModelOptions}
inputStatusText={inputStatusText}
modelCatalogStatusMessage={modelCatalogStatusMessage}
+ attachments={attachments}
+ onAttach={handleAttach}
+ onRemoveAttachment={handleRemoveAttachment}
+ uploadStates={uploadStates}
+ previewUrls={previewUrls}
leftActions={
+ new File(["mock-data"], name, { type });
+
+const meta: Meta = {
+ title: "pages/AgentsPage/AttachmentPreview",
+ component: AttachmentPreview,
+ decorators: [
+ (Story) => (
+ ;
+
+export const SingleImage: Story = {
+ args: (() => {
+ const file = createMockFile("photo.png", "image/png");
+ return {
+ attachments: [file],
+ uploadStates: new Map([
+ [file, { status: "uploaded", fileId: "file-1" }],
+ ]),
+ previewUrls: new Map([[file, TINY_PNG]]),
+ };
+ })(),
+};
+
+export const MultipleImages: Story = {
+ args: (() => {
+ const files = [
+ createMockFile("photo-1.png", "image/png"),
+ createMockFile("photo-2.jpg", "image/jpeg"),
+ createMockFile("photo-3.png", "image/png"),
+ ];
+ return {
+ attachments: files,
+ uploadStates: new Map(
+ files.map((f) => [f, { status: "uploaded", fileId: f.name }]),
+ ),
+ previewUrls: new Map(files.map((f) => [f, TINY_PNG])),
+ };
+ })(),
+};
+
+export const Uploading: Story = {
+ args: (() => {
+ const file = createMockFile("uploading.png", "image/png");
+ return {
+ attachments: [file],
+ uploadStates: new Map([
+ [file, { status: "uploading" }],
+ ]),
+ previewUrls: new Map([[file, TINY_PNG]]),
+ };
+ })(),
+};
+
+export const UploadError: Story = {
+ args: (() => {
+ const file = createMockFile("broken.png", "image/png");
+ return {
+ attachments: [file],
+ uploadStates: new Map([
+ [file, { status: "error", error: "Upload failed: server error" }],
+ ]),
+ previewUrls: new Map([[file, TINY_PNG]]),
+ };
+ })(),
+};
+
+export const FileTooLarge: Story = {
+ args: (() => {
+ const file = createMockFile("huge-screenshot.png", "image/png");
+ return {
+ attachments: [file],
+ uploadStates: new Map([
+ [
+ file,
+ {
+ status: "error",
+ error: "File too large (12.4 MB). Maximum is 10 MB.",
+ },
+ ],
+ ]),
+ previewUrls: new Map([[file, TINY_PNG]]),
+ };
+ })(),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const overlay = canvas.getByLabelText("Upload error");
+ await userEvent.hover(overlay);
+ },
+};
+
+export const NonImageFile: Story = {
+ args: (() => {
+ const file = createMockFile("readme.txt", "text/plain");
+ return {
+ attachments: [file],
+ uploadStates: new Map([
+ [file, { status: "uploaded", fileId: "file-txt" }],
+ ]),
+ };
+ })(),
+};
+
+export const MixedStates: Story = {
+ args: (() => {
+ const uploaded = createMockFile("done.png", "image/png");
+ const uploading = createMockFile("pending.jpg", "image/jpeg");
+ const errored = createMockFile("failed.png", "image/png");
+ const attachments = [uploaded, uploading, errored];
+ return {
+ attachments,
+ uploadStates: new Map([
+ [uploaded, { status: "uploaded", fileId: "file-ok" }],
+ [uploading, { status: "uploading" }],
+ [errored, { status: "error", error: "Network timeout" }],
+ ]),
+ previewUrls: new Map([
+ [uploaded, TINY_PNG],
+ [uploading, TINY_PNG],
+ [errored, TINY_PNG],
+ ]),
+ };
+ })(),
+};
diff --git a/site/src/pages/AgentsPage/ImageLightbox.stories.tsx b/site/src/pages/AgentsPage/ImageLightbox.stories.tsx
new file mode 100644
index 0000000000..6bc3bc9b27
--- /dev/null
+++ b/site/src/pages/AgentsPage/ImageLightbox.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ImageLightbox } from "./ImageLightbox";
+
+// Tiny 1x1 colored PNG so the lightbox has something visible to display.
+const TINY_PNG =
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+
+const meta: Meta = {
+ title: "pages/AgentsPage/ImageLightbox",
+ component: ImageLightbox,
+ decorators: [
+ (Story) => (
+ ;
+
+export const Default: Story = {
+ args: {
+ src: TINY_PNG,
+ onClose: fn(),
+ },
+};
diff --git a/site/src/pages/AgentsPage/ImageLightbox.tsx b/site/src/pages/AgentsPage/ImageLightbox.tsx
new file mode 100644
index 0000000000..a6a2ae8b2b
--- /dev/null
+++ b/site/src/pages/AgentsPage/ImageLightbox.tsx
@@ -0,0 +1,25 @@
+import { Dialog, DialogContent, DialogTitle } from "components/Dialog/Dialog";
+import type { FC } from "react";
+
+interface ImageLightboxProps {
+ src: string;
+ onClose: () => void;
+}
+
+export const ImageLightbox: FC = ({ src, onClose }) => {
+ return (
+
+ );
+};
diff --git a/site/src/pages/AgentsPage/useFileAttachments.ts b/site/src/pages/AgentsPage/useFileAttachments.ts
new file mode 100644
index 0000000000..2c1a7b6228
--- /dev/null
+++ b/site/src/pages/AgentsPage/useFileAttachments.ts
@@ -0,0 +1,160 @@
+import { API } from "api/api";
+import { getErrorDetail, getErrorMessage } from "api/errors";
+import {
+ type Dispatch,
+ type SetStateAction,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from "react";
+import type { UploadState } from "./AgentChatInput";
+
+interface UseFileAttachmentsReturn {
+ attachments: File[];
+ uploadStates: Map;
+ previewUrls: Map;
+ handleAttach: (files: File[]) => void;
+ handleRemoveAttachment: (index: number) => void;
+ startUpload: (file: File) => void;
+ resetAttachments: () => void;
+ setAttachments: Dispatch>;
+ setPreviewUrls: Dispatch>>;
+ setUploadStates: Dispatch>>;
+}
+
+export function useFileAttachments(
+ organizationId: string | undefined,
+): UseFileAttachmentsReturn {
+ const [attachments, setAttachments] = useState([]);
+ const [uploadStates, setUploadStates] = useState(
+ () => new Map(),
+ );
+ const [previewUrls, setPreviewUrls] = useState(() => new Map());
+
+ // Revoke blob URLs on unmount to prevent memory leaks.
+ const previewUrlsRef = useRef(previewUrls);
+ previewUrlsRef.current = previewUrls;
+ useEffect(() => {
+ return () => {
+ for (const [, url] of previewUrlsRef.current) {
+ if (url.startsWith("blob:")) URL.revokeObjectURL(url);
+ }
+ };
+ }, []);
+
+ const startUpload = useCallback(
+ (file: File) => {
+ if (!organizationId) {
+ setUploadStates((prev) =>
+ new Map(prev).set(file, {
+ status: "error",
+ error: "Unable to upload: no organization context.",
+ }),
+ );
+ return;
+ }
+ setUploadStates((prev) =>
+ new Map(prev).set(file, { status: "uploading" }),
+ );
+ void (async () => {
+ try {
+ const result = await API.uploadChatFile(file, organizationId);
+ setUploadStates((prev) =>
+ new Map(prev).set(file, {
+ status: "uploaded",
+ fileId: result.id,
+ }),
+ );
+ // Pre-warm the browser HTTP cache so the timeline
+ // can render this image instantly after send. The
+ // server responds with Cache-Control: private,
+ // immutable, so the ![]()
never hits the
+ // network again.
+ void fetch(`/api/experimental/chats/files/${result.id}`);
+ } catch (err: unknown) {
+ const message = getErrorMessage(err, "Upload failed");
+ const detail = getErrorDetail(err);
+ const errorMessage = detail ? `${message} ${detail}` : message;
+ setUploadStates((prev) =>
+ new Map(prev).set(file, {
+ status: "error",
+ error: errorMessage,
+ }),
+ );
+ }
+ })();
+ },
+ [organizationId],
+ );
+
+ const handleAttach = useCallback(
+ (files: File[]) => {
+ const maxSize = 10 * 1024 * 1024; // 10 MB
+ setAttachments((prev) => [...prev, ...files]);
+ setPreviewUrls((prev) => {
+ const next = new Map(prev);
+ for (const file of files) {
+ next.set(file, URL.createObjectURL(file));
+ }
+ return next;
+ });
+ for (const file of files) {
+ if (file.size > maxSize) {
+ setUploadStates((prev) =>
+ new Map(prev).set(file, {
+ status: "error" as const,
+ error: `File too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Maximum is 10 MB.`,
+ }),
+ );
+ } else {
+ startUpload(file);
+ }
+ }
+ },
+ [startUpload],
+ );
+
+ const handleRemoveAttachment = useCallback((index: number) => {
+ setAttachments((prev) => {
+ const removed = prev[index];
+ if (removed) {
+ setUploadStates((prevStates) => {
+ const next = new Map(prevStates);
+ next.delete(removed);
+ return next;
+ });
+ setPreviewUrls((prevUrls) => {
+ const url = prevUrls.get(removed);
+ if (url?.startsWith("blob:")) URL.revokeObjectURL(url);
+ const next = new Map(prevUrls);
+ next.delete(removed);
+ return next;
+ });
+ }
+ return prev.filter((_, i) => i !== index);
+ });
+ }, []);
+
+ const resetAttachments = useCallback(() => {
+ for (const [, url] of previewUrlsRef.current) {
+ if (url.startsWith("blob:")) URL.revokeObjectURL(url);
+ }
+ setPreviewUrls(new Map());
+ setUploadStates(new Map());
+ setAttachments([]);
+ }, []);
+
+ return {
+ attachments,
+ uploadStates,
+ previewUrls,
+ handleAttach,
+ handleRemoveAttachment,
+ startUpload,
+ resetAttachments,
+ setAttachments,
+ setPreviewUrls,
+ setUploadStates,
+ };
+}
+
+ ),
+ ],
+ args: {
+ onRemove: fn(),
+ onPreview: fn(),
+ },
+};
+
+export default meta;
+type Story = StoryObj
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObjBackground content behind the lightbox overlay
+