@narumitw/pi-webui 0.20.2 → 0.22.0

package/src/web/image-drag.js

@@ -0,0 +1,86 @@
+const IMAGE_DRAG_TYPE = "application/x-pi-webui-image";
+
+export function createImageDragController(previews, { isLocked, onDrop }) {
+	let draggedId = "";
+
+	function clearDropTargets() {
+		previews.classList.remove("vertical-drop");
+		for (const candidate of previews.children) {
+			candidate.classList.remove("drag-before", "drag-after");
+		}
+	}
+
+	function setDropTarget(item, after, vertical) {
+		previews.classList.toggle("vertical-drop", vertical);
+		for (const candidate of previews.children) {
+			candidate.classList.toggle("drag-before", candidate === item && !after);
+			candidate.classList.toggle("drag-after", candidate === item && after);
+		}
+	}
+
+	function focus(id) {
+		requestAnimationFrame(() => {
+			const escapedId = CSS.escape(id);
+			const item = previews.querySelector(`[data-image-id="${escapedId}"]`);
+			(item?.tabIndex === 0 ? item : item?.querySelector(".remove-image"))?.focus();
+		});
+	}
+
+	function bind(item, { id, orderingLocked }) {
+		item.addEventListener("dragstart", (event) => {
+			if (isLocked() || orderingLocked || !event.dataTransfer) return;
+			draggedId = id;
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData(IMAGE_DRAG_TYPE, id);
+			item.classList.add("dragging");
+		});
+		item.addEventListener("dragend", () => {
+			draggedId = "";
+			item.classList.remove("dragging");
+			clearDropTargets();
+		});
+		item.addEventListener("dragover", (event) => {
+			const sourceId = draggedId || event.dataTransfer?.getData(IMAGE_DRAG_TYPE);
+			if (isLocked() || orderingLocked || !sourceId) return;
+			if (sourceId === id) {
+				clearDropTargets();
+				return;
+			}
+			event.preventDefault();
+			if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+			const vertical = imagesStackVertically(previews.children);
+			setDropTarget(item, dropAfterTarget(event, item, vertical), vertical);
+		});
+		item.addEventListener("dragleave", (event) => {
+			if (event.relatedTarget && item.contains(event.relatedTarget)) return;
+			item.classList.remove("drag-before", "drag-after");
+		});
+		item.addEventListener("drop", (event) => {
+			const sourceId = draggedId || event.dataTransfer?.getData(IMAGE_DRAG_TYPE);
+			if (isLocked() || orderingLocked || !sourceId || sourceId === id) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const vertical = imagesStackVertically(previews.children);
+			const after = dropAfterTarget(event, item, vertical);
+			draggedId = "";
+			clearDropTargets();
+			onDrop({ sourceId, targetId: id, after });
+		});
+	}
+
+	return { bind, clearDropTargets, focus };
+}
+
+export function imagesStackVertically(items) {
+	const list = [...items];
+	return !list.some((item, index) =>
+		list.slice(index + 1).some((candidate) => Math.abs(item.offsetTop - candidate.offsetTop) < 2),
+	);
+}
+
+export function dropAfterTarget(event, item, vertical) {
+	const bounds = item.getBoundingClientRect();
+	return vertical
+		? event.clientY >= bounds.top + bounds.height / 2
+		: event.clientX >= bounds.left + bounds.width / 2;
+}

package/src/web/index.html

@@ -55,8 +55,15 @@
 					rows="1"
 					placeholder="Ask Pi to do something…"
 				></textarea>
+				<p id="attachment-summary" class="attachment-summary" hidden></p>
 				<ul id="image-previews" class="image-previews" aria-label="Attached images"></ul>
-				<p id="attachment-status" class="attachment-status" role="status" aria-live="polite" hidden></p>
+				<p
+					id="attachment-announcement"
+					class="visually-hidden"
+					role="status"
+					aria-live="polite"
+					aria-atomic="true"
+				></p>
 				<p id="composer-error" class="composer-error" role="alert" hidden></p>
 				<div class="composer-bottom">
 					<div class="composer-support">
@@ -64,11 +71,14 @@
 						<input
 							id="image-input"
 							type="file"
-							accept="image/png,image/jpeg,image/webp,image/gif"
+							accept="image/png,image/jpeg,image/webp,image/gif,image/bmp,image/tiff,image/heic,image/heif,image/avif,.bmp,.tif,.tiff,.heic,.heif,.avif"
 							multiple
 							hidden
 						/>
 						<span class="image-hint">Paste, drop, or choose images.</span>
+						<button id="clear-attachments" class="button secondary" type="button" hidden>
+							Clear attachments
+						</button>
 					</div>
 					<div class="send-actions">
 						<button id="steer" class="button secondary" type="button" hidden>Steer</button>
@@ -91,6 +101,19 @@
 			</details>
 		</footer>
 
+		<dialog id="clear-attachments-dialog" class="confirmation-dialog" aria-labelledby="clear-attachments-title">
+			<form method="dialog">
+				<h2 id="clear-attachments-title">Clear attachments?</h2>
+				<p id="clear-attachments-message">Remove all unsent image attachments? Message text will be kept.</p>
+				<div class="dialog-actions">
+					<button type="submit" value="cancel">Cancel</button>
+					<button id="confirm-clear-attachments" class="danger" type="submit" value="confirm">
+						Clear attachments
+					</button>
+				</div>
+			</form>
+		</dialog>
+
 		<dialog id="image-preview-dialog" class="image-preview-dialog" aria-labelledby="image-preview-title">
 			<div class="image-preview-content">
 				<header>

package/src/web/state.js

@@ -13,6 +13,20 @@ export function initialState() {
 		readingImages: 0,
 		leaseClaimed: false,
 		leaseGeneration: 0,
+		draftRevision: 0,
+		authoritativeText: "",
+		textDirty: false,
+		attachmentRevision: 0,
+		attachmentPhase: "empty",
+		imageLimits: undefined,
+		sentImages: {
+			revision: 0,
+			enabled: false,
+			items: [],
+			totalBytes: 0,
+			maxImages: 0,
+			maxBytes: 0,
+		},
 		following: true,
 		unseenUpdateIds: [],
 		text: "",
@@ -22,17 +36,130 @@ export function initialState() {
 }
 
 export function applySnapshot(current, snapshot) {
-	if (!Number.isSafeInteger(snapshot?.sequence) || snapshot.sequence < current.sequence)
+	let next = current;
+	if (Number.isSafeInteger(snapshot?.sequence) && snapshot.sequence >= current.sequence) {
+		next = {
+			...current,
+			sequence: snapshot.sequence,
+			session: snapshot.session,
+			messages: Array.isArray(snapshot.messages) ? snapshot.messages : [],
+			tools: Array.isArray(snapshot.tools) ? snapshot.tools : [],
+			activity: snapshot.activity ?? "idle",
+			closed: Boolean(snapshot.closed),
+			needsSnapshot: false,
+		};
+	}
+	return applySentImages(
+		applyImageLimits(
+			applyAttachments(applyDraft(next, snapshot?.draft), snapshot?.attachments),
+			snapshot?.imageLimits,
+		),
+		snapshot?.sentImages,
+	);
+}
+
+export function applyDraft(current, draft) {
+	if (
+		!Number.isSafeInteger(draft?.revision) ||
+		draft.revision < current.draftRevision ||
+		typeof draft.text !== "string"
+	) {
 		return current;
+	}
+	const preserveLocal = current.textDirty && current.text !== draft.text;
 	return {
 		...current,
-		sequence: snapshot.sequence,
-		session: snapshot.session,
-		messages: Array.isArray(snapshot.messages) ? snapshot.messages : [],
-		tools: Array.isArray(snapshot.tools) ? snapshot.tools : [],
-		activity: snapshot.activity ?? "idle",
-		closed: Boolean(snapshot.closed),
-		needsSnapshot: false,
+		draftRevision: draft.revision,
+		authoritativeText: draft.text,
+		text: preserveLocal ? current.text : draft.text,
+		textDirty: preserveLocal,
+	};
+}
+
+export function editDraftText(current, text) {
+	return invalidateSendAttempt({
+		...current,
+		text,
+		textDirty: text !== current.authoritativeText,
+		error: "",
+	});
+}
+
+export function acknowledgeDraftText(current, draft, submittedText) {
+	if (current.text === submittedText) {
+		return applyDraft({ ...current, textDirty: false }, draft);
+	}
+	return applyDraft(current, draft);
+}
+
+export function applyImageLimits(current, limits) {
+	if (
+		!limits ||
+		!["maxImages", "maxImageBytes", "maxBatchBytes", "maxImagePixels"].every(
+			(key) => Number.isSafeInteger(limits[key]) && limits[key] > 0,
+		)
+	) {
+		return current;
+	}
+	return {
+		...current,
+		imageLimits: {
+			maxImages: limits.maxImages,
+			maxImageBytes: limits.maxImageBytes,
+			maxBatchBytes: limits.maxBatchBytes,
+			maxImagePixels: limits.maxImagePixels,
+		},
+	};
+}
+
+export function applySentImages(current, sentImages) {
+	if (
+		!Number.isSafeInteger(sentImages?.revision) ||
+		sentImages.revision < current.sentImages.revision ||
+		!Array.isArray(sentImages.items)
+	) {
+		return current;
+	}
+	return {
+		...current,
+		sentImages: {
+			revision: sentImages.revision,
+			enabled: Boolean(sentImages.enabled),
+			items: sentImages.items
+				.filter((item) => item && typeof item.id === "string")
+				.map((item) => ({ ...item })),
+			totalBytes: Number.isSafeInteger(sentImages.totalBytes) ? sentImages.totalBytes : 0,
+			maxImages: Number.isSafeInteger(sentImages.maxImages) ? sentImages.maxImages : 0,
+			maxBytes: Number.isSafeInteger(sentImages.maxBytes) ? sentImages.maxBytes : 0,
+		},
+	};
+}
+
+export function applyAttachments(current, attachments) {
+	if (
+		!Number.isSafeInteger(attachments?.revision) ||
+		attachments.revision < current.attachmentRevision ||
+		!Array.isArray(attachments.items)
+	) {
+		return current;
+	}
+	const revisionChanged = attachments.revision !== current.attachmentRevision;
+	const images = attachments.items
+		.filter((item) => item && typeof item.id === "string" && typeof item.status === "string")
+		.map((item) => ({
+			...item,
+			notes: Array.isArray(item.notes) ? [...item.notes] : [],
+		}));
+	return {
+		...current,
+		attachmentRevision: attachments.revision,
+		attachmentPhase: typeof attachments.phase === "string" ? attachments.phase : "blocked",
+		images,
+		readingImages: images.filter(
+			(image) => image.status === "uploading" || image.status === "processing",
+		).length,
+		outbox: revisionChanged ? undefined : current.outbox,
+		lastDelivery: revisionChanged ? undefined : current.lastDelivery,
 	};
 }
 
@@ -82,6 +209,9 @@ export function prepareSend(current, requestId, delivery = "next") {
 	const attempt = current.outbox ?? {
 		requestId,
 		text: current.text,
+		draftRevision: current.draftRevision,
+		attachmentRevision: current.attachmentRevision,
+		attachmentIds: current.images.map((image) => image.id),
 		images: [...current.images],
 		delivery,
 	};
@@ -117,6 +247,10 @@ export function invalidateSendAttempt(current) {
 	return { ...current, outbox: undefined, lastDelivery: undefined };
 }
 
+export function clearDraftImages(current) {
+	return invalidateSendAttempt({ ...current, images: [], error: "" });
+}
+
 export function setNearBottom(current, nearBottom) {
 	if (!nearBottom) return current.following ? { ...current, following: false } : current;
 	if (current.following && current.unseenUpdateIds.length === 0) return current;
@@ -132,6 +266,41 @@ export function followLatest(current) {
 	return { ...current, following: true, unseenUpdateIds: [] };
 }
 
+export function moveImage(images, id, direction) {
+	const from = images.findIndex((image) => image.id === id);
+	if (from === -1) return [...images];
+	const to = Math.max(0, Math.min(images.length - 1, from + direction));
+	if (to === from) return [...images];
+	const next = [...images];
+	const [image] = next.splice(from, 1);
+	if (image) next.splice(to, 0, image);
+	return next;
+}
+
+export function moveImageBefore(images, id, targetId) {
+	if (id === targetId) return [...images];
+	const from = images.findIndex((image) => image.id === id);
+	const target = images.findIndex((image) => image.id === targetId);
+	if (from === -1 || target === -1) return [...images];
+	const next = images.filter((image) => image.id !== id);
+	const targetIndex = next.findIndex((image) => image.id === targetId);
+	if (targetIndex === -1) return [...images];
+	next.splice(targetIndex, 0, images[from]);
+	return next;
+}
+
+export function moveImageAfter(images, id, targetId) {
+	if (id === targetId) return [...images];
+	const from = images.findIndex((image) => image.id === id);
+	const target = images.findIndex((image) => image.id === targetId);
+	if (from === -1 || target === -1) return [...images];
+	const next = images.filter((image) => image.id !== id);
+	const targetIndex = next.findIndex((image) => image.id === targetId);
+	if (targetIndex === -1) return [...images];
+	next.splice(targetIndex + 1, 0, images[from]);
+	return next;
+}
+
 export function upsertById(items, value) {
 	const index = items.findIndex((item) => item.id === value.id);
 	if (index < 0) return [...items, value];
@@ -147,6 +316,7 @@ export function canSend(current) {
 			!current.stale &&
 			!current.pending &&
 			current.readingImages === 0 &&
+			(current.images.length === 0 || current.attachmentPhase === "ready") &&
 			(current.text.trim() || current.images.length > 0),
 	);
 }

package/src/web/styles.css

@@ -301,14 +301,33 @@ main {
 	display: inline-flex;
 	min-height: 32px;
 	align-items: center;
+	flex-wrap: wrap;
+	gap: 0.35rem;
 	margin-top: 0.65rem;
 	padding: 0.25rem 0.55rem;
 	border: 1px solid var(--border);
-	border-radius: 999px;
+	border-radius: 0.75rem;
 	color: var(--muted);
 	font-size: 0.82rem;
 }
 
+.message-image-action {
+	min-height: 44px;
+	padding-inline: 0.7rem;
+	border-color: var(--border);
+	background: var(--surface);
+	color: var(--text);
+}
+
+.message-image-action.subtle,
+.message-image-expired {
+	color: var(--muted);
+}
+
+.message-image-action.subtle {
+	background: transparent;
+}
+
 details {
 	max-width: 100%;
 }
@@ -463,6 +482,12 @@ textarea {
 	overflow-y: auto;
 }
 
+textarea:focus-visible {
+	border-color: transparent;
+	outline-width: 2px;
+	outline-offset: 1px;
+}
+
 textarea:disabled {
 	opacity: 0.68;
 }
@@ -490,22 +515,22 @@ textarea:disabled {
 
 .composer-status,
 .composer-error,
-.attachment-status {
+.attachment-summary {
 	margin: 0;
 	font-size: 0.84rem;
 }
 
 .composer-status,
-.attachment-status {
+.attachment-summary {
 	color: var(--muted);
 }
 
 .image-previews {
 	display: flex;
+	flex-wrap: wrap;
 	gap: 0.6rem;
 	margin: 0;
 	padding: 0;
-	overflow-x: auto;
 	list-style: none;
 }
 
@@ -515,14 +540,85 @@ textarea:disabled {
 
 .image-preview-item {
 	display: grid;
-	min-width: 270px;
-	grid-template-columns: 68px minmax(6rem, 1fr) auto;
+	width: fit-content;
+	max-width: 100%;
+	min-width: 0;
+	flex: 0 1 auto;
+	grid-template-columns: 68px fit-content(14rem) auto;
 	align-items: center;
 	gap: 0.5rem;
 	padding: 0.4rem;
 	border: 1px solid var(--border);
 	border-radius: 10px;
 	background: var(--surface-secondary);
+	transition:
+		border-color 0.12s ease,
+		box-shadow 0.12s ease,
+		transform 0.12s ease;
+}
+
+.image-preview-item[draggable="true"] {
+	cursor: grab;
+}
+
+.image-preview-item[draggable="true"]:active {
+	cursor: grabbing;
+}
+
+.image-preview-item.dragging {
+	opacity: 0.5;
+	transform: scale(0.985);
+}
+
+.image-preview-item.drag-before {
+	border-color: var(--accent);
+	box-shadow: inset 3px 0 var(--accent);
+}
+
+.image-preview-item.drag-after {
+	border-color: var(--accent);
+	box-shadow: inset -3px 0 var(--accent);
+}
+
+.image-previews.vertical-drop .image-preview-item.drag-before {
+	box-shadow: inset 0 3px var(--accent);
+}
+
+.image-previews.vertical-drop .image-preview-item.drag-after {
+	box-shadow: inset 0 -3px var(--accent);
+}
+
+.attachment-details {
+	display: grid;
+	gap: 0.2rem;
+	min-width: 0;
+}
+
+.attachment-item-status {
+	color: var(--muted);
+	font-size: 0.78rem;
+}
+
+.attachment-item-status.error {
+	color: var(--danger);
+}
+
+.attachment-conversion-summary,
+.attachment-order-context {
+	color: var(--muted);
+	font-size: 0.74rem;
+	line-height: 1.35;
+}
+
+.attachment-order-context {
+	font-weight: 650;
+}
+
+.image-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.35rem;
 }
 
 .attachment-preview {
@@ -538,6 +634,12 @@ textarea:disabled {
 	cursor: zoom-in;
 }
 
+.attachment-preview:empty::after {
+	content: "…";
+	color: var(--muted);
+	font-size: 1.4rem;
+}
+
 .image-previews img {
 	width: 100%;
 	height: 100%;
@@ -579,12 +681,38 @@ button {
 }
 
 .button.secondary,
-.remove-image {
+.remove-image,
+.retry-image {
 	border-color: var(--border);
 	color: var(--text);
 	background: var(--surface);
 }
 
+.remove-image {
+	display: grid;
+	width: 44px;
+	padding: 0;
+	place-items: center;
+	color: var(--muted);
+	background: transparent;
+}
+
+.remove-image:hover:not(:disabled) {
+	border-color: var(--danger);
+	color: var(--danger);
+	background: var(--danger-soft);
+}
+
+.remove-image svg {
+	width: 20px;
+	height: 20px;
+	fill: none;
+	stroke: currentcolor;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-width: 1.8;
+}
+
 button:disabled,
 .button.disabled,
 .button.primary:disabled {
@@ -595,6 +723,11 @@ button:disabled,
 	border-color: var(--border);
 }
 
+.remove-image:disabled {
+	border-color: transparent;
+	background: transparent;
+}
+
 .button.disabled {
 	pointer-events: none;
 }
@@ -609,6 +742,42 @@ footer p {
 	margin-top: 0;
 }
 
+.confirmation-dialog {
+	width: min(92vw, 30rem);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	padding: 1.25rem;
+	color: var(--text);
+	background: var(--surface);
+	box-shadow: var(--shadow);
+}
+
+.confirmation-dialog::backdrop {
+	background: rgb(11 17 30 / 72%);
+}
+
+.confirmation-dialog h2 {
+	margin-block: 0 0.5rem;
+	font-size: 1.15rem;
+}
+
+.confirmation-dialog p {
+	margin-block: 0 1rem;
+	color: var(--muted);
+}
+
+.dialog-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.6rem;
+}
+
+.danger {
+	border-color: var(--danger);
+	color: var(--danger);
+	background: var(--danger-soft);
+}
+
 .image-preview-dialog {
 	width: min(96vw, 1400px);
 	max-width: none;
@@ -740,10 +909,6 @@ footer p {
 	.send-actions {
 		flex: 0 1 auto;
 	}
-
-	.image-preview-item {
-		min-width: min(100%, 270px);
-	}
 }
 
 @media (prefers-color-scheme: dark) {