@narumitw/pi-webui 0.31.0 → 0.33.0

package/src/web/ui/app.jsx

@@ -35,7 +35,16 @@ import {
 	Theme,
 } from "@radix-ui/themes";
 import { Collapsible, Popover, Tooltip } from "radix-ui";
-import { StrictMode, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import {
+	memo,
+	StrictMode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	useSyncExternalStore,
+} from "react";
 import { createRoot } from "react-dom/client";
 import { dropAfterTarget, imagesStackVertically } from "../image-drag.js";
 import { parseMarkdown } from "../markdown.js";
@@ -156,10 +165,10 @@ function App() {
 		if (!open) requestAnimationFrame(() => clearReturnFocus.current?.focus());
 	}
 
-	function openForgetDialog(id, trigger) {
+	const openForgetDialog = useCallback((id, trigger) => {
 		forgetReturnFocus.current = trigger;
 		setForgetId(id);
-	}
+	}, []);
 
 	function closeForgetDialog() {
 		setForgetId("");
@@ -355,7 +364,7 @@ function Conversation({ model, onForget, view }) {
 	);
 }
 
-function Message({ message, onForget, retained, tools }) {
+const Message = memo(function Message({ message, onForget, retained, tools }) {
 	const role = knownRole(message.role);
 	const body = (
 		<Box className="message-body">
@@ -401,6 +410,23 @@ function Message({ message, onForget, retained, tools }) {
 			</li>
 		</Box>
 	);
+}, messagePropsEqual);
+
+function messagePropsEqual(previous, next) {
+	if (
+		previous.message !== next.message ||
+		previous.onForget !== next.onForget ||
+		previous.retained !== next.retained
+	) {
+		return false;
+	}
+	if (previous.tools === next.tools) return true;
+	for (const block of previous.message.content ?? []) {
+		if (block.type === "toolCall" && previous.tools.get(block.id) !== next.tools.get(block.id)) {
+			return false;
+		}
+	}
+	return true;
 }
 
 function MessageBlock({ block, onForget, retained, tool }) {
@@ -426,7 +452,7 @@ function MessageBlock({ block, onForget, retained, tool }) {
 	return null;
 }
 
-function Markdown({ text }) {
+const Markdown = memo(function Markdown({ text }) {
 	return (
 		<Box className="message-markdown">
 			{withStableKeys(parseMarkdown(text)).map(({ key, value: block }) => (
@@ -434,7 +460,7 @@ function Markdown({ text }) {
 			))}
 		</Box>
 	);
-}
+});
 
 function MarkdownBlock({ block }) {
 	if (block.type === "heading") {

package/src/web/ui/client.js

@@ -23,6 +23,14 @@ import {
 	prepareSend,
 	setNearBottom,
 } from "../state.js";
+import {
+	allowTranscriptAutoScroll,
+	createRenderBatcher,
+	hasConversationReferenceChange,
+	shouldBatchConversationEvent,
+	shouldScrollForConversationEvent,
+	withPublishedConversation,
+} from "./view-helpers.js";
 
 const SUPPORTED_IMAGE_TYPES = new Set([
 	"image/png",
@@ -42,6 +50,8 @@ const listeners = new Set();
 const retryFiles = new Map();
 const uploadProgress = new Map();
 let model = initialState();
+let publishedMessages = model.messages;
+let publishedTools = model.tools;
 let events;
 let reconnectTimer;
 let reconnectDelay = 500;
@@ -52,10 +62,23 @@ let draftSaveQueue = Promise.resolve();
 let mutatingAttachments = false;
 let started = false;
 let view = createView();
+const scheduleConversationRender = createRenderBatcher(
+	(callback) => {
+		// Streaming can produce many events per frame. Cap transcript work so input remains responsive.
+		setTimeout(() => requestAnimationFrame(callback), 50);
+	},
+	(extra) => {
+		publishConversation(extra);
+		emit({
+			...extra,
+			scrollToLatest: allowTranscriptAutoScroll(model.following, !model.closed),
+		});
+	},
+);
 
 function createView(extra = {}) {
 	return {
-		model,
+		model: withPublishedConversation(model, publishedMessages, publishedTools),
 		mutatingAttachments,
 		uploadProgress: new Map(uploadProgress),
 		retryableIds: new Set(retryFiles.keys()),
@@ -71,6 +94,20 @@ function emit(extra) {
 	for (const listener of listeners) listener();
 }
 
+function publishConversation(extra = {}) {
+	for (const key of extra.transcriptUpdateKeys ?? []) {
+		model = noteUnseenUpdate(model, key);
+	}
+	publishedMessages = model.messages;
+	publishedTools = model.tools;
+}
+
+function drainConversationRender() {
+	const pending = scheduleConversationRender.drain();
+	publishConversation(pending);
+	return pending;
+}
+
 export const webClient = {
 	subscribe(listener) {
 		listeners.add(listener);
@@ -148,14 +185,20 @@ async function refreshSnapshot(requiredSequence = 0) {
 	if (!snapshotRefresh) {
 		snapshotRefresh = (async () => {
 			do {
+				let pendingConversation = {};
 				const response = await fetch("/api/state", { cache: "no-store" });
 				if (!response.ok) throw new Error(await responseError(response));
 				const snapshot = await response.json();
+				const replacesConversation =
+					Number.isSafeInteger(snapshot?.sequence) && snapshot.sequence >= model.sequence;
 				model = applySnapshot(model, snapshot);
 				if (typeof snapshot.lease?.activeClientId === "string") {
 					model = applyLease(model, snapshot.lease, clientId);
 				}
-				emit({ scrollToLatest: model.following });
+				if (replacesConversation) {
+					pendingConversation = drainConversationRender();
+				}
+				emit({ ...pendingConversation, scrollToLatest: model.following });
 			} while (model.sequence < snapshotTarget);
 		})().finally(() => {
 			snapshotRefresh = undefined;
@@ -188,20 +231,46 @@ function connectEvents() {
 	});
 	events.addEventListener("conversation", (event) => {
 		const conversationEvent = JSON.parse(event.data);
+		const previousMessages = model.messages;
+		const previousTools = model.tools;
 		model = applyConversationEvent(model, conversationEvent);
 		if (model.needsSnapshot) {
 			void refreshSnapshot(conversationEvent.sequence).catch(connectionFailure);
 			return;
 		}
-		model = noteUnseenUpdate(model, conversationUpdateKey(conversationEvent));
+		if (shouldBatchConversationEvent(conversationEvent.type)) {
+			scheduleConversationRender({
+				transcriptAnnouncement: conversationAnnouncement(conversationEvent),
+				transcriptUpdateKeys: [conversationUpdateKey(conversationEvent)],
+			});
+			return;
+		}
+		let pendingConversation = {};
+		if (conversationEvent.type === "snapshot" || conversationEvent.type === "session-ended") {
+			pendingConversation = drainConversationRender();
+			if (
+				conversationEvent.type === "snapshot" &&
+				hasConversationReferenceChange(previousMessages, previousTools, model)
+			) {
+				model = noteUnseenUpdate(model, conversationUpdateKey(conversationEvent));
+			}
+			publishConversation();
+		}
 		emit({
-			transcriptAnnouncement: conversationAnnouncement(conversationEvent),
-			scrollToLatest: model.following,
+			...pendingConversation,
+			scrollToLatest: shouldScrollForConversationEvent(
+				conversationEvent.type,
+				model.following && !model.closed,
+			),
 		});
 	});
 	events.addEventListener("snapshot", (event) => {
-		model = applySnapshot(model, JSON.parse(event.data));
-		emit({ scrollToLatest: model.following });
+		const snapshot = JSON.parse(event.data);
+		const replacesConversation =
+			Number.isSafeInteger(snapshot?.sequence) && snapshot.sequence >= model.sequence;
+		model = applySnapshot(model, snapshot);
+		const pendingConversation = replacesConversation ? drainConversationRender() : {};
+		emit({ ...pendingConversation, scrollToLatest: model.following });
 	});
 	events.addEventListener("lease", (event) => {
 		model = applyLease(model, JSON.parse(event.data), clientId);
@@ -226,13 +295,20 @@ function connectEvents() {
 	events.addEventListener("session-ended", () => {
 		model = { ...model, closed: true, activity: "ended", connected: false };
 		events?.close();
-		emit({ transcriptAnnouncement: "Pi session ended." });
+		const pendingConversation = drainConversationRender();
+		emit({
+			...pendingConversation,
+			transcriptAnnouncement: [pendingConversation.transcriptAnnouncement, "Pi session ended."]
+				.filter(Boolean)
+				.join(" "),
+		});
 	});
 	events.addEventListener("error", () => {
 		events?.close();
 		if (model.closed) return;
 		model = { ...model, connected: false };
-		emit();
+		const pendingConversation = drainConversationRender();
+		emit(pendingConversation);
 		scheduleReconnect();
 	});
 }
@@ -254,7 +330,8 @@ function scheduleReconnect() {
 
 function connectionFailure(error) {
 	model = { ...model, connected: false, error: errorMessage(error) };
-	emit();
+	const pendingConversation = drainConversationRender();
+	emit(pendingConversation);
 	scheduleReconnect();
 }
 

package/src/web/ui/view-helpers.js

@@ -1,3 +1,66 @@
+export function shouldBatchConversationEvent(type) {
+	return type === "message" || type === "tool";
+}
+
+export function shouldScrollForConversationEvent(type, following) {
+	return type === "snapshot" && following;
+}
+
+export function hasConversationReferenceChange(previousMessages, previousTools, current) {
+	return current.messages !== previousMessages || current.tools !== previousTools;
+}
+
+export function withPublishedConversation(model, messages, tools) {
+	if (model.messages === messages && model.tools === tools) return model;
+	return { ...model, messages, tools };
+}
+
+export function allowTranscriptAutoScroll(following, active = true) {
+	return Boolean(following && active);
+}
+
+export function createRenderBatcher(schedule, render) {
+	let generation = 0;
+	let scheduled = false;
+	let pending = {};
+	const batch = (extra = {}) => {
+		const transcriptAnnouncement = [pending.transcriptAnnouncement, extra.transcriptAnnouncement]
+			.filter(Boolean)
+			.join(" ");
+		const transcriptUpdateKeys = [
+			...new Set([...(pending.transcriptUpdateKeys ?? []), ...(extra.transcriptUpdateKeys ?? [])]),
+		];
+		pending = {
+			...pending,
+			...extra,
+			transcriptAnnouncement,
+			scrollToLatest: Boolean(pending.scrollToLatest || extra.scrollToLatest),
+			...(transcriptUpdateKeys.length > 0 ? { transcriptUpdateKeys } : {}),
+		};
+		if (scheduled) return;
+		scheduled = true;
+		const scheduledGeneration = generation;
+		schedule(() => {
+			if (scheduledGeneration !== generation) return;
+			scheduled = false;
+			const next = pending;
+			pending = {};
+			render(next);
+		});
+	};
+	batch.drain = () => {
+		generation += 1;
+		scheduled = false;
+		const next = pending;
+		pending = {};
+		return next;
+	};
+	batch.cancel = () => {
+		batch.drain();
+	};
+	return batch;
+}
+
 export function withStableKeys(values) {
 	return values.map((value, index) => {
 		const type =