{attachments.map((file, index) => {
const uploadState = uploadStates?.get(file);
const previewUrl = previewUrls?.get(file) ?? "";
+ const textContent = textContents?.get(file);
+ const textFileId =
+ uploadState?.status === "uploaded" ? uploadState.fileId : undefined;
+ const hasTextAttachment =
+ file.type === "text/plain" &&
+ (textContent !== undefined || textFileId !== undefined);
return (
;
@@ -150,6 +196,109 @@ export const UserMessageWithFileIdImage: Story = {
},
};
+export const UserMessageWithTextAttachment: Story = {
+ args: {
+ ...defaultArgs,
+ parsedMessages: parseMessagesWithMergedTools([
+ {
+ ...baseMessage,
+ id: 1,
+ role: "user",
+ content: [
+ { type: "text", text: "Here is some context from our docs:" },
+ {
+ type: "file",
+ file_id: "storybook-test-text",
+ media_type: "text/plain",
+ },
+ ],
+ },
+ ]),
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const textButton = await canvas.findByRole("button", {
+ name: "View text attachment",
+ });
+ expect(textButton).toBeInTheDocument();
+ expect(textButton).toHaveTextContent(/Pasted text/i);
+ await userEvent.click(textButton);
+ expect(
+ await canvas.findByText(/Quarterly revenue increased 18%/i),
+ ).toBeInTheDocument();
+ },
+};
+
+export const UserMessageWithMultipleTextAttachments: Story = {
+ args: {
+ ...defaultArgs,
+ parsedMessages: parseMessagesWithMergedTools([
+ {
+ ...baseMessage,
+ id: 1,
+ created_at: "2025-01-15T10:00:00Z",
+ role: "user",
+ content: [
+ { type: "text", text: "Here are several context files:" },
+ {
+ type: "file",
+ file_id: "storybook-text-1",
+ media_type: "text/plain",
+ },
+ {
+ type: "file",
+ file_id: "storybook-text-2",
+ media_type: "text/plain",
+ },
+ {
+ type: "file",
+ file_id: "storybook-text-3",
+ media_type: "text/plain",
+ },
+ ],
+ },
+ ]),
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const textButtons = await canvas.findAllByRole("button", {
+ name: "View text attachment",
+ });
+ expect(textButtons).toHaveLength(3);
+ },
+};
+
+export const UserMessageWithTextAttachmentOnly: Story = {
+ args: {
+ ...defaultArgs,
+ parsedMessages: parseMessagesWithMergedTools([
+ {
+ ...baseMessage,
+ id: 1,
+ role: "user",
+ content: [
+ {
+ type: "file",
+ file_id: "storybook-text-only",
+ media_type: "text/plain",
+ },
+ ],
+ },
+ ]),
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const textButton = await canvas.findByRole("button", {
+ name: "View text attachment",
+ });
+ expect(textButton).toHaveTextContent(/Pasted text/i);
+ await userEvent.click(textButton);
+ expect(
+ await canvas.findByText(/Runbook note: restart the worker/i),
+ ).toBeInTheDocument();
+ },
+};
+
/** Text-only messages must not produce spurious image thumbnails. */
export const UserMessageTextOnly: Story = {
args: {
diff --git a/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx b/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx
index 15738d26e5..17dc421d88 100644
--- a/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx
+++ b/site/src/pages/AgentsPage/components/AgentDetail/ConversationTimeline.tsx
@@ -17,12 +17,13 @@ import {
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
-import { PencilIcon } from "lucide-react";
+import { FileTextIcon, PencilIcon } from "lucide-react";
import {
type FC,
Fragment,
memo,
type ReactNode,
+ useEffect,
useLayoutEffect,
useRef,
useState,
@@ -30,9 +31,15 @@ import {
import { Link } from "react-router";
import type { UrlTransform } from "streamdown";
import { cn } from "utils/cn";
+import {
+ decodeInlineTextAttachment,
+ fetchTextAttachmentContent,
+ formatTextAttachmentPreview,
+} from "../../utils/fetchTextAttachment";
import type { ChatDetailError } from "../../utils/usageLimitMessage";
import { ImageThumbnail } from "../AgentChatInput";
import { ImageLightbox } from "../ImageLightbox";
+import { TextPreviewDialog } from "../TextPreviewDialog";
import { useSmoothStreamingText } from "./SmoothText";
import type {
MergedTool,
@@ -92,6 +99,7 @@ type RenderBlockListParams = {
subagentTitles?: Map;
subagentStatusOverrides?: Map;
onImageClick?: (src: string) => void;
+ onTextFileClick?: (content: string) => void;
urlTransform?: UrlTransform;
};
@@ -112,6 +120,140 @@ const SmoothedResponse: FC<{
return {visibleText} ;
};
+const InlineTextAttachmentButton: FC<{
+ content: string;
+ onPreview?: (content: string) => void;
+}> = ({ content, onPreview }) => {
+ return (
+
+ );
+};
+
+const TextAttachmentButton: FC<{
+ fileId: string;
+ onPreview?: (content: string) => void;
+}> = ({ fileId, onPreview }) => {
+ const [content, setContent] = useState(null);
+ const controllerRef = useRef(null);
+
+ useEffect(() => {
+ return () => controllerRef.current?.abort();
+ }, []);
+
+ return (
+ {
+ if (content !== null) {
+ onPreview?.(content);
+ return;
+ }
+
+ controllerRef.current?.abort();
+ const controller = new AbortController();
+ controllerRef.current = controller;
+
+ let fetchedContent: string;
+ try {
+ fetchedContent = await fetchTextAttachmentContent(
+ fileId,
+ controller.signal,
+ );
+ } catch (err) {
+ if (controllerRef.current === controller) {
+ controllerRef.current = null;
+ }
+ if (err instanceof Error && err.name === "AbortError") {
+ return;
+ }
+ console.error("Failed to load text attachment:", err);
+ return;
+ }
+
+ if (controllerRef.current === controller) {
+ controllerRef.current = null;
+ }
+ setContent(fetchedContent);
+ onPreview?.(fetchedContent);
+ }}
+ />
+ );
+};
+
+type FileRenderBlock = Extract;
+
+type RenderFileBlockParams = {
+ block: FileRenderBlock;
+ key: string;
+ onImageClick?: (src: string) => void;
+ onTextFileClick?: (content: string) => void;
+};
+
+const renderFileBlock = ({
+ block,
+ key,
+ onImageClick,
+ onTextFileClick,
+}: RenderFileBlockParams): ReactNode => {
+ if (block.media_type === "text/plain") {
+ if (block.file_id) {
+ return (
+ ;
@@ -125,6 +267,7 @@ function renderBlockList({
subagentTitles,
subagentStatusOverrides,
onImageClick,
+ onTextFileClick,
urlTransform,
}: RenderBlockListParams): RenderBlockListResult {
const renderedToolIDs = new Set();
@@ -207,30 +350,12 @@ function renderBlockList({
);
}
case "file":
- if (block.media_type.startsWith("image/")) {
- const src = block.file_id
- ? `/api/experimental/chats/files/${block.file_id}`
- : `data:${block.media_type};base64,${block.data}`;
- return (
-
- );
- }
- return null;
+ return renderFileBlock({
+ block,
+ key: `${keyPrefix}-file-${block.file_id ?? index}`,
+ onImageClick,
+ onTextFileClick,
+ });
case "sources":
return (
(null);
+ const [previewText, setPreviewText] = useState(null);
const toolByID = new Map(parsed.tools.map((tool) => [tool.id, tool]));
if (
@@ -316,6 +442,16 @@ const ChatMessageItem = memo<{
)
: [];
+ const userFileBlocks = isUser
+ ? parsed.blocks.filter(
+ (b): b is Extract => b.type === "file",
+ )
+ : [];
+
+ const hasUserMessageBody =
+ userInlineContent.length > 0 || Boolean(parsed.markdown?.trim());
+ const hasFileBlocks = userFileBlocks.length > 0;
+
const conversationItemProps: { role: "user" | "assistant" } = {
role: isUser ? "user" : "assistant",
};
@@ -324,6 +460,7 @@ const ChatMessageItem = memo<{
toolByID,
keyPrefix: String(message.id),
onImageClick: setPreviewImage,
+ onTextFileClick: (content) => setPreviewText(content),
urlTransform,
});
const remainingTools = parsed.tools.filter(
@@ -355,93 +492,89 @@ const ChatMessageItem = memo<{
}
>
{file.name.split(".").pop()?.toUpperCase() || "FILE"}
)}
+ {hasTextAttachment && (
+
+ )}
{uploadState?.status === "uploading" && (
- =>
- b.type === "file" && b.media_type.startsWith("image/"),
- );
- if (imageBlocks.length === 0) return null;
- return (
- = ({
})();
const {
attachments,
+ textContents,
uploadStates,
previewUrls,
handleAttach,
@@ -290,7 +291,7 @@ export const AgentDetailInput: FC = ({
);
const files = fileBlocks.map((block, i) => {
const mt = block.media_type ?? "application/octet-stream";
- const ext = mt.split("/")[1] ?? "png";
+ const ext = mt === "text/plain" ? "txt" : (mt.split("/")[1] ?? "png");
// Empty File used as a Map key only, its content is never
// read because the existing file_id is reused at send time.
return new File([], `attachment-${i}.${ext}`, { type: mt });
@@ -358,6 +359,7 @@ export const AgentDetailInput: FC = ({
onRemoveAttachment={handleRemoveAttachment}
uploadStates={uploadStates}
previewUrls={previewUrls}
+ textContents={textContents}
inputRef={inputRef}
initialValue={initialValue}
onContentChange={onContentChange}
diff --git a/site/src/pages/AgentsPage/components/AttachmentPreview.stories.tsx b/site/src/pages/AgentsPage/components/AttachmentPreview.stories.tsx
index 6bf43ead99..decf1e6210 100644
--- a/site/src/pages/AgentsPage/components/AttachmentPreview.stories.tsx
+++ b/site/src/pages/AgentsPage/components/AttachmentPreview.stories.tsx
@@ -1,13 +1,13 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn, userEvent, within } from "storybook/test";
+import { expect, fn, userEvent, within } from "storybook/test";
import { AttachmentPreview, type UploadState } from "./AgentChatInput";
// Tiny 1x1 transparent PNG as data URI for previews.
const TINY_PNG =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
-const createMockFile = (name: string, type: string) =>
- new File(["mock-data"], name, { type });
+const createMockFile = (name: string, type: string, size = 9) =>
+ new File([new Uint8Array(size)], name, { type });
const meta: Meta = {
title: "pages/AgentsPage/AttachmentPreview",
@@ -22,6 +22,7 @@ const meta: Meta = {
args: {
onRemove: fn(),
onPreview: fn(),
+ onTextPreview: fn(),
},
};
@@ -39,6 +40,13 @@ export const SingleImage: Story = {
previewUrls: new Map([[file, TINY_PNG]]),
};
})(),
+ play: async ({ args, canvasElement }) => {
+ const canvas = within(canvasElement);
+ const thumbnail = await canvas.findByRole("img", { name: "photo.png" });
+ expect(thumbnail).toBeInTheDocument();
+ await userEvent.click(canvas.getByRole("button", { name: "photo.png" }));
+ expect(args.onPreview).toHaveBeenCalledWith(TINY_PNG);
+ },
};
export const MultipleImages: Story = {
@@ -69,6 +77,10 @@ export const Uploading: Story = {
previewUrls: new Map([[file, TINY_PNG]]),
};
})(),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ expect(await canvas.findByTitle("Loading spinner")).toBeInTheDocument();
+ },
};
export const UploadError: Story = {
@@ -82,6 +94,18 @@ export const UploadError: Story = {
previewUrls: new Map([[file, TINY_PNG]]),
};
})(),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const overlay = canvas.getByLabelText("Upload error");
+ expect(overlay).toBeInTheDocument();
+ await userEvent.hover(overlay);
+ // After hover, the tooltip renders the error message. Use
+ // getAllByText because the text appears in both the tooltip
+ // trigger overlay and the tooltip content popover.
+ const body = within(canvasElement.ownerDocument.body);
+ const matches = await body.findAllByText(/Upload failed: server error/i);
+ expect(matches.length).toBeGreaterThanOrEqual(1);
+ },
};
export const FileTooLarge: Story = {
@@ -120,6 +144,152 @@ export const NonImageFile: Story = {
})(),
};
+export const TextAttachment: Story = {
+ args: (() => {
+ const file = createMockFile("clipboard.txt", "text/plain", 2048);
+ return {
+ attachments: [file],
+ uploadStates: new Map([
+ [file, { status: "uploaded", fileId: "file-1" }],
+ ]),
+ previewUrls: new Map(),
+ textContents: new Map([
+ [
+ file,
+ "This is the pasted text content.\nIt has multiple lines.\nAnd should be displayed in a readable card format.",
+ ],
+ ]),
+ };
+ })(),
+ play: async ({ args, canvasElement }) => {
+ const canvas = within(canvasElement);
+ const textCard = await canvas.findByRole("button", {
+ name: "View text attachment",
+ });
+ expect(textCard).toHaveTextContent(/This is the pasted text content\./i);
+ await userEvent.click(textCard);
+ expect(args.onTextPreview).toHaveBeenCalledWith(
+ "This is the pasted text content.\nIt has multiple lines.\nAnd should be displayed in a readable card format.",
+ "clipboard.txt",
+ );
+ },
+};
+
+export const ThreeTextAttachments: Story = {
+ args: (() => {
+ const file1 = createMockFile("paste-1.txt", "text/plain", 2048);
+ const file2 = createMockFile("paste-2.txt", "text/plain", 3072);
+ const file3 = createMockFile("paste-3.txt", "text/plain", 1024);
+ return {
+ attachments: [file1, file2, file3],
+ uploadStates: new Map([
+ [file1, { status: "uploaded", fileId: "file-1" }],
+ [file2, { status: "uploaded", fileId: "file-2" }],
+ [file3, { status: "uploaded", fileId: "file-3" }],
+ ]),
+ previewUrls: new Map(),
+ textContents: new Map([
+ [
+ file1,
+ "First pasted document with several lines of content.\nLine 2 of the first document.\nLine 3 continues here.",
+ ],
+ [
+ file2,
+ "Second pasted text is a log file:\n[INFO] Server started on port 8080\n[WARN] Memory usage at 85%\n[ERROR] Connection timeout after 30s",
+ ],
+ [
+ file3,
+ "Third paste is a short config:\nhost=localhost\nport=5432\ndb=myapp",
+ ],
+ ]),
+ };
+ })(),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ expect(
+ await canvas.findAllByRole("button", { name: "View text attachment" }),
+ ).toHaveLength(3);
+ expect(
+ canvas.getByText(
+ /First pasted document with several lines of content\./i,
+ ),
+ ).toBeInTheDocument();
+ },
+};
+
+export const ThreeMixedAttachments: Story = {
+ args: (() => {
+ const imageFile = createMockFile("screenshot.png", "image/png");
+ const textFile1 = createMockFile("logs.txt", "text/plain", 2048);
+ const textFile2 = createMockFile("config.txt", "text/plain", 1024);
+ return {
+ attachments: [imageFile, textFile1, textFile2],
+ uploadStates: new Map([
+ [imageFile, { status: "uploaded", fileId: "img-1" }],
+ [textFile1, { status: "uploaded", fileId: "txt-1" }],
+ [textFile2, { status: "uploaded", fileId: "txt-2" }],
+ ]),
+ previewUrls: new Map([[imageFile, TINY_PNG]]),
+ textContents: new Map([
+ [
+ textFile1,
+ "[2025-01-15 10:30:00] Application started\n[2025-01-15 10:30:01] Connected to database\n[2025-01-15 10:30:02] Listening on :8080",
+ ],
+ [
+ textFile2,
+ "DATABASE_URL=postgres://localhost/myapp\nREDIS_URL=redis://localhost:6379\nSECRET_KEY=abc123",
+ ],
+ ]),
+ };
+ })(),
+};
+
+export const MixedImageAndText: Story = {
+ args: (() => {
+ const imageFile = createMockFile("photo.png", "image/png");
+ const textFile = createMockFile("clipboard.txt", "text/plain", 2048);
+ return {
+ attachments: [imageFile, textFile],
+ uploadStates: new Map([
+ [imageFile, { status: "uploaded", fileId: "file-1" }],
+ [textFile, { status: "uploaded", fileId: "file-2" }],
+ ]),
+ previewUrls: new Map([[imageFile, TINY_PNG]]),
+ textContents: new Map([
+ [
+ textFile,
+ "This is some pasted text content that appears alongside an image attachment.",
+ ],
+ ]),
+ };
+ })(),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ expect(
+ await canvas.findByRole("img", { name: "photo.png" }),
+ ).toBeInTheDocument();
+ expect(
+ canvas.getByRole("button", { name: "View text attachment" }),
+ ).toBeInTheDocument();
+ },
+};
+
+export const TextAttachmentUploading: Story = {
+ args: (() => {
+ const file = createMockFile("clipboard.txt", "text/plain", 2048);
+ return {
+ attachments: [file],
+ uploadStates: new Map([
+ [file, { status: "uploading" }],
+ ]),
+ previewUrls: new Map(),
+ textContents: new Map([
+ [file, "Uploading text content..."],
+ ]),
+ };
+ })(),
+};
+
export const MixedStates: Story = {
args: (() => {
const uploaded = createMockFile("done.png", "image/png");
diff --git a/site/src/pages/AgentsPage/components/TextPreviewDialog.stories.tsx b/site/src/pages/AgentsPage/components/TextPreviewDialog.stories.tsx
new file mode 100644
index 0000000000..0bb7e771f5
--- /dev/null
+++ b/site/src/pages/AgentsPage/components/TextPreviewDialog.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { TextPreviewDialog } from "./TextPreviewDialog";
+
+const meta: Meta = {
+ title: "pages/AgentsPage/TextPreviewDialog",
+ component: TextPreviewDialog,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ content:
+ "This is some pasted text content.\nIt has multiple lines.\nAnd should be displayed in a readable format.",
+ onClose: () => {},
+ },
+ play: async ({ canvasElement }) => {
+ const body = within(canvasElement.ownerDocument.body);
+ const dialog = await body.findByRole("dialog");
+ expect(dialog).toBeInTheDocument();
+ expect(
+ within(dialog).getByText(/This is some pasted text content\./i),
+ ).toBeInTheDocument();
+ },
+};
+
+export const LongContent: Story = {
+ args: {
+ content: Array(100)
+ .fill(
+ "This is a line of pasted text that demonstrates how the dialog handles very long content.",
+ )
+ .join("\n"),
+ onClose: () => {},
+ },
+ play: async ({ canvasElement }) => {
+ const body = within(canvasElement.ownerDocument.body);
+ const dialog = await body.findByRole("dialog");
+ const content = within(dialog).getByText(
+ /This is a line of pasted text that demonstrates how the dialog handles very long content\./i,
+ );
+ expect(content).toBeInTheDocument();
+ expect(content.parentElement).toHaveClass("overflow-auto");
+ },
+};
+
+export const NoFileName: Story = {
+ args: {
+ content: "Some pasted content without a filename.",
+ onClose: () => {},
+ },
+ play: async ({ canvasElement }) => {
+ const body = within(canvasElement.ownerDocument.body);
+ const dialog = await body.findByRole("dialog");
+ expect(within(dialog).getByText("Pasted text")).toBeInTheDocument();
+ },
+};
diff --git a/site/src/pages/AgentsPage/components/TextPreviewDialog.tsx b/site/src/pages/AgentsPage/components/TextPreviewDialog.tsx
new file mode 100644
index 0000000000..3784c20c4c
--- /dev/null
+++ b/site/src/pages/AgentsPage/components/TextPreviewDialog.tsx
@@ -0,0 +1,32 @@
+import { Dialog, DialogContent, DialogTitle } from "components/Dialog/Dialog";
+import type { FC } from "react";
+
+interface TextPreviewDialogProps {
+ content: string;
+ fileName?: string;
+ onClose: () => void;
+}
+
+export const TextPreviewDialog: FC = ({
+ content,
+ fileName,
+ onClose,
+}) => {
+ return (
+
+ );
+};
diff --git a/site/src/pages/AgentsPage/hooks/useFileAttachments.ts b/site/src/pages/AgentsPage/hooks/useFileAttachments.ts
index 0f19ef9a65..faeb01733d 100644
--- a/site/src/pages/AgentsPage/hooks/useFileAttachments.ts
+++ b/site/src/pages/AgentsPage/hooks/useFileAttachments.ts
@@ -11,10 +11,11 @@ import type { UploadState } from "../components/AgentChatInput";
interface UseFileAttachmentsReturn {
attachments: File[];
+ textContents: Map;
uploadStates: Map;
previewUrls: Map;
handleAttach: (files: File[]) => void;
- handleRemoveAttachment: (index: number) => void;
+ handleRemoveAttachment: (attachment: number | File) => void;
startUpload: (file: File) => void;
resetAttachments: () => void;
setAttachments: Dispatch>;
@@ -30,6 +31,9 @@ export function useFileAttachments(
() => new Map(),
);
const [previewUrls, setPreviewUrls] = useState(() => new Map());
+ const [textContents, setTextContents] = useState(
+ () => new Map(),
+ );
// Revoke blob URLs on unmount to prevent memory leaks.
const previewUrlsRef = useRef(previewUrls);
@@ -67,12 +71,13 @@ export function useFileAttachments(
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}`);
+ // Pre-warm the browser HTTP cache for images so the
+ // timeline can render them instantly after send. We
+ // intentionally skip text attachments because the
+ // composer already has the text content locally.
+ if (file.type.startsWith("image/")) {
+ void fetch(`/api/experimental/chats/files/${result.id}`);
+ }
} catch (err: unknown) {
const message = getErrorMessage(err, "Upload failed");
const detail = getErrorDetail(err);
@@ -93,10 +98,33 @@ export function useFileAttachments(
setPreviewUrls((prev) => {
const next = new Map(prev);
for (const file of files) {
- next.set(file, URL.createObjectURL(file));
+ if (file.type !== "text/plain") {
+ next.set(file, URL.createObjectURL(file));
+ }
}
return next;
});
+ // Read text content for preview, but skip oversized files.
+ for (const file of files) {
+ if (file.type === "text/plain" && file.size <= maxSize) {
+ // Defensive: some test environments lack File.prototype.text().
+ const readText =
+ typeof file.text === "function"
+ ? file.text()
+ : new Response(file).text();
+ void readText
+ .then((content) => {
+ setTextContents((prev) => {
+ const next = new Map(prev);
+ next.set(file, content);
+ return next;
+ });
+ })
+ .catch((err) => {
+ console.error("Failed to read text file content:", err);
+ });
+ }
+ }
for (const file of files) {
if (file.size > maxSize) {
setUploadStates((prev) =>
@@ -111,23 +139,32 @@ export function useFileAttachments(
}
};
- const handleRemoveAttachment = (index: number) => {
+ const handleRemoveAttachment = (attachment: number | File) => {
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;
- });
+ const index =
+ typeof attachment === "number" ? attachment : prev.indexOf(attachment);
+ if (index === -1) {
+ return prev;
}
+
+ const removed = prev[index];
+ 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;
+ });
+ setTextContents((prevContents) => {
+ const next = new Map(prevContents);
+ next.delete(removed);
+ return next;
+ });
return prev.filter((_, i) => i !== index);
});
};
@@ -137,12 +174,14 @@ export function useFileAttachments(
if (url.startsWith("blob:")) URL.revokeObjectURL(url);
}
setPreviewUrls(new Map());
+ setTextContents(new Map());
setUploadStates(new Map());
setAttachments([]);
};
return {
attachments,
+ textContents,
uploadStates,
previewUrls,
handleAttach,
diff --git a/site/src/pages/AgentsPage/utils/fetchTextAttachment.test.ts b/site/src/pages/AgentsPage/utils/fetchTextAttachment.test.ts
new file mode 100644
index 0000000000..f437e84307
--- /dev/null
+++ b/site/src/pages/AgentsPage/utils/fetchTextAttachment.test.ts
@@ -0,0 +1,54 @@
+import {
+ decodeInlineTextAttachment,
+ formatTextAttachmentPreview,
+} from "./fetchTextAttachment";
+
+const encodeUtf8Base64 = (value: string) => {
+ const bytes = new TextEncoder().encode(value);
+ return btoa(String.fromCharCode(...bytes));
+};
+
+describe("formatTextAttachmentPreview", () => {
+ it('returns "Pasted text" for empty content', () => {
+ expect(formatTextAttachmentPreview("")).toBe("Pasted text");
+ expect(formatTextAttachmentPreview(" \n\t ")).toBe("Pasted text");
+ });
+
+ it("truncates longer text to the requested limit", () => {
+ expect(formatTextAttachmentPreview("abcdefgh", 5)).toBe("abcde");
+ });
+
+ it("normalizes whitespace before building the preview", () => {
+ expect(
+ formatTextAttachmentPreview(" hello\n\nworld\tfrom\t tests "),
+ ).toBe("hello world from tests");
+ });
+
+ it("preserves whole unicode code points when truncating emoji", () => {
+ expect(formatTextAttachmentPreview("πππ", 2)).toBe("ππ");
+ });
+
+ it("returns text shorter than the limit unchanged", () => {
+ expect(formatTextAttachmentPreview("short text", 20)).toBe("short text");
+ });
+});
+
+describe("decodeInlineTextAttachment", () => {
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ it("decodes base64-encoded UTF-8 text", () => {
+ const text = "Hello π cafΓ©";
+
+ expect(decodeInlineTextAttachment(encodeUtf8Base64(text))).toBe(text);
+ });
+
+ it("falls back to the raw string when base64 decoding fails", () => {
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+ const raw = "not-base64!";
+
+ expect(decodeInlineTextAttachment(raw)).toBe(raw);
+ expect(warn).toHaveBeenCalled();
+ });
+});
diff --git a/site/src/pages/AgentsPage/utils/fetchTextAttachment.ts b/site/src/pages/AgentsPage/utils/fetchTextAttachment.ts
new file mode 100644
index 0000000000..846a9cbbec
--- /dev/null
+++ b/site/src/pages/AgentsPage/utils/fetchTextAttachment.ts
@@ -0,0 +1,46 @@
+/**
+ * Roughly 1-2 lines of typical code at normal terminal width.
+ * Short enough to fit in attachment previews without excessive wrapping.
+ */
+const TEXT_ATTACHMENT_PREVIEW_LENGTH = 150;
+
+export function formatTextAttachmentPreview(
+ text: string,
+ maxLength = TEXT_ATTACHMENT_PREVIEW_LENGTH,
+): string {
+ // Truncate before normalizing to keep cost bounded for large files.
+ const truncated = text.slice(0, maxLength * 4);
+ const normalized = truncated.replace(/\s+/g, " ").trim();
+ const preview = Array.from(normalized).slice(0, maxLength).join("");
+ return preview || "Pasted text";
+}
+
+/**
+ * Decodes inline text attachment data encoded as base64 UTF-8.
+ */
+export function decodeInlineTextAttachment(content: string): string {
+ try {
+ const decoded = atob(content);
+ const bytes = Uint8Array.from(decoded, (char) => char.charCodeAt(0));
+ return new TextDecoder().decode(bytes);
+ } catch (err) {
+ console.warn("Failed to decode inline text attachment:", err);
+ return content;
+ }
+}
+
+/**
+ * Fetches the text content of a chat file attachment by its ID.
+ */
+export async function fetchTextAttachmentContent(
+ fileId: string,
+ signal?: AbortSignal,
+): Promise {
+ const response = await fetch(`/api/experimental/chats/files/${fileId}`, {
+ signal,
+ });
+ if (!response.ok) {
+ throw new Error("Failed to fetch file");
+ }
+ return response.text();
+}
diff --git a/site/src/pages/AgentsPage/utils/pasteHelpers.test.ts b/site/src/pages/AgentsPage/utils/pasteHelpers.test.ts
new file mode 100644
index 0000000000..3a2f7401e4
--- /dev/null
+++ b/site/src/pages/AgentsPage/utils/pasteHelpers.test.ts
@@ -0,0 +1,150 @@
+// Tests for pasteHelpers utility functions (pure logic, no DOM).
+import { beforeAll, describe, expect, it } from "vitest";
+import {
+ createPasteFile,
+ getPasteDataTransfer,
+ getPastedPlainText,
+ isLargePaste,
+} from "../../../components/ChatMessageInput/pasteHelpers";
+
+beforeAll(() => {
+ if (typeof File.prototype.text !== "function") {
+ Object.defineProperty(File.prototype, "text", {
+ configurable: true,
+ value: function () {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onload = () => resolve(String(reader.result));
+ reader.onerror = () => reject(reader.error);
+ reader.readAsText(this);
+ });
+ },
+ });
+ }
+});
+
+type DataTransferLike = Pick;
+
+const createDataTransfer = (
+ values: Record = {},
+): DataTransfer => {
+ const input = document.createElement("input");
+ input.type = "file";
+ return {
+ getData: (type: string) => values[type] ?? "",
+ files: input.files!,
+ } as DataTransfer;
+};
+
+const createClipboardPasteEvent = (
+ clipboardData: DataTransferLike,
+): ClipboardEvent => {
+ const event = new Event("paste") as ClipboardEvent;
+ Object.defineProperty(event, "clipboardData", {
+ value: clipboardData,
+ });
+ return event;
+};
+
+const createBeforeInputEvent = (
+ data?: string,
+ dataTransfer?: DataTransferLike,
+): InputEvent => {
+ const event = new Event("beforeinput") as InputEvent;
+ Object.defineProperty(event, "data", {
+ value: data ?? null,
+ });
+ if (dataTransfer) {
+ Object.defineProperty(event, "dataTransfer", {
+ value: dataTransfer,
+ });
+ }
+ return event;
+};
+
+describe("getPasteDataTransfer", () => {
+ it("prefers clipboardData from clipboard events", () => {
+ const clipboardData = createDataTransfer({
+ "text/plain": "from clipboard",
+ });
+ const event = createClipboardPasteEvent(clipboardData);
+ expect(getPasteDataTransfer(event)).toBe(clipboardData);
+ });
+
+ it("falls back to dataTransfer for beforeinput paste events", () => {
+ const dataTransfer = createDataTransfer({
+ "text/plain": "from beforeinput",
+ });
+ const event = createBeforeInputEvent(undefined, dataTransfer);
+ expect(getPasteDataTransfer(event)).toBe(dataTransfer);
+ });
+});
+
+describe("getPastedPlainText", () => {
+ it("reads plain text from clipboard data when available", () => {
+ const dataTransfer = createDataTransfer({
+ "text/plain": "clipboard",
+ });
+ const event = createClipboardPasteEvent(dataTransfer);
+ expect(getPastedPlainText(event, dataTransfer)).toBe("clipboard");
+ });
+
+ it("falls back to InputEvent.data for plain-text paste shortcuts", () => {
+ const event = createBeforeInputEvent("paste as plain text");
+ expect(getPastedPlainText(event, null)).toBe("paste as plain text");
+ });
+
+ it("returns empty string when no plain text is available", () => {
+ const dataTransfer = createDataTransfer();
+ const event = createBeforeInputEvent();
+ expect(getPastedPlainText(event, dataTransfer)).toBe("");
+ });
+});
+
+describe("isLargePaste", () => {
+ it("returns false for short single-line text", () => {
+ expect(isLargePaste("Hello world")).toBe(false);
+ });
+
+ it("returns false for 9 lines of short text", () => {
+ const text = Array(9).fill("short line").join("\n");
+ expect(isLargePaste(text)).toBe(false);
+ });
+
+ it("returns true for 10+ lines", () => {
+ const text = Array(10).fill("line").join("\n");
+ expect(isLargePaste(text)).toBe(true);
+ });
+
+ it("returns true for 1000+ characters even on one line", () => {
+ const text = "x".repeat(1000);
+ expect(isLargePaste(text)).toBe(true);
+ });
+
+ it("returns false for 999 characters on one line", () => {
+ const text = "x".repeat(999);
+ expect(isLargePaste(text)).toBe(false);
+ });
+
+ it("returns true for text meeting both thresholds", () => {
+ const text = Array(15).fill("x".repeat(100)).join("\n");
+ expect(isLargePaste(text)).toBe(true);
+ });
+});
+
+describe("createPasteFile", () => {
+ it("creates a File with text/plain type", () => {
+ const file = createPasteFile("hello");
+ expect(file.type).toBe("text/plain");
+ expect(file.name).toMatch(
+ /^pasted-text-\d{4}-\d{2}-\d{2}-\d{2}-\d{2}-\d{2}\.txt$/,
+ );
+ });
+
+ it("preserves the text content", async () => {
+ const text = "Hello\nWorld";
+ const file = createPasteFile(text);
+ const content = await file.text();
+ expect(content).toBe(text);
+ });
+});
-
- {userInlineContent.length > 0
- ? userInlineContent.map((block, i) =>
- block.type === "response" ? (
- {block.text}
- ) : (
-
-
-
-
- Edit message
-
- )}
-
- {(() => {
- const imageBlocks = parsed.blocks.filter(
- (b): b is Extract
- {imageBlocks.map((block, i) => {
- const src = block.file_id
- ? `/api/experimental/chats/files/${block.file_id}`
- : `data:${block.media_type};base64,${block.data}`;
- return (
+ {(hasUserMessageBody || hasFileBlocks) && (
+ setPreviewText(null)}
+ />
+ )}
);
},
diff --git a/site/src/pages/AgentsPage/components/AgentDetailContent.tsx b/site/src/pages/AgentsPage/components/AgentDetailContent.tsx
index de71a715e5..265215775a 100644
--- a/site/src/pages/AgentsPage/components/AgentDetailContent.tsx
+++ b/site/src/pages/AgentsPage/components/AgentDetailContent.tsx
@@ -266,6 +266,7 @@ export const AgentDetailInput: FC
+ {hasUserMessageBody && (
+
+ {userInlineContent.length > 0
+ ? userInlineContent.map((block, i) =>
+ block.type === "response" ? (
+ {block.text}
+ ) : (
+
+
- );
- })}
+
+
+ Edit message
+
+
+ )}
+
+ )}
+ {(() => {
+ if (userFileBlocks.length === 0) return null;
+ return (
+
+ {userFileBlocks.map((block, i) =>
+ renderFileBlock({
+ block,
+ key: `user-file-${block.file_id ?? i}`,
+ onImageClick: setPreviewImage,
+ onTextFileClick: setPreviewText,
+ }),
+ )}
);
})()}
@@ -488,6 +621,12 @@ const ChatMessageItem = memo<{
onClose={() => setPreviewImage(null)}
/>
)}
+ {previewText !== null && (
+