feat: add image attachments to the chat composer

Support pasting (Ctrl/Cmd+V), drag-and-drop, and an Attach button to add
PNG/JPEG/GIF/WebP images to a message, with thumbnail previews and
multi-image support.

Attachments are delivered to the session using pi's native ImageContent
format and are run through pi's own resizeImage so they match pi's inline
image limits exactly. Image content now renders inline in the transcript.

A per-message delivery toggle also lets users save attachments into the
workspace `.pi-web/paste` folder and reference them so the agent reads
them with its own tools.

The accepted HTTP upload size is configurable via PI_WEB_MAX_UPLOAD_BYTES
or the maxUploadBytes config value (default 64 MB).

Closes #13
This commit is contained in:
Federico Jaramillo Martinez
2026-06-13 13:49:39 +02:00
parent 847510e240
commit d17050e144
29 changed files with 776 additions and 46 deletions
+38
View File
@@ -3,6 +3,7 @@ export type MachineStatus = "unknown" | "online" | "offline" | "error";
export const PI_WEB_CAPABILITIES = {
sessionsDeleteArchived: "sessions.deleteArchived",
promptAttachments: "prompt.attachments",
} as const;
export type PiWebCapability = typeof PI_WEB_CAPABILITIES[keyof typeof PI_WEB_CAPABILITIES];
@@ -55,6 +56,8 @@ export interface PiWebConfigValues {
allowedHosts?: string[] | true;
shortcuts?: PiWebShortcutConfig;
plugins?: PiWebPluginConfigMap;
/** Maximum accepted HTTP request body size in bytes (uploads/attachments). */
maxUploadBytes?: number;
}
export type PiWebPluginScope = "bundled" | "local" | "user" | "project";
@@ -141,6 +144,41 @@ export interface QueuedSessionMessage {
text: string;
}
/**
* A binary attachment carried with a prompt. The wire format mirrors pi's own
* `ImageContent` shape (`{ type: "image", data, mimeType }`) so attachments are
* fully compatible with the underlying pi coding agent.
*/
export interface PromptAttachment {
/** Kind of attachment. Only images are supported by pi today. */
kind: "image";
/** IANA mime type (for example "image/png"). */
mimeType: string;
/** Base64-encoded binary payload (no data: URL prefix). */
data: string;
/** Optional original filename, used for previews and folder-mode filenames. */
name?: string;
}
/**
* How prompt attachments should be delivered to the session.
* - "inline": send the binary to pi as native image content (multimodal input).
* - "folder": save the file into the workspace and reference it from the prompt
* text so the agent reads it with its own tools.
*/
export type PromptAttachmentDelivery = "inline" | "folder";
export interface SavedPromptAttachment {
/** Workspace-relative path the attachment was written to. */
path: string;
mimeType: string;
size: number;
}
export interface SaveAttachmentsResponse {
attachments: SavedPromptAttachment[];
}
export interface SessionModel {
provider?: string;
id?: string;