Richard ZinkandClaude Opus 5.5
e8e455b779
Images of messages (pasted images, screenshots, generated images) were base64 inside the message JSON, so opening a chat downloaded all of them at once (66 MB for a chat with 120 screenshots). They now live in a `blobs` table, addressed by SHA-256; messages keep a reference (blob, size). The UI loads them from /api/blobs/<hash> lazily with an immutable cache header, the runner fills the bytes in before model requests, JSON exports stay self-contained. - Store::add_message moves inline images out; large opaque PNGs become JPEG (q85) when smaller. Older chats are converted once at start-up in the background, unused images are removed (also after deleting a chat) and the database is vacuumed when that frees 32 MB or more. - Responses are compressed with gzip/brotli (not images, SSE streams or binary downloads). Example (copy of production): chat load 66 MB -> 1.5 MB (370 KB brotli), database 90 MB -> 27 MB. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import { Icon } from "./Icon";
|
|
import { del, post } from "../api";
|
|
import { useT } from "../i18n";
|
|
import { useStore } from "../store";
|
|
import type { QueueItem } from "../types";
|
|
import { imageSrc } from "./FileFigure";
|
|
import { confirmDialog, promptDialog, toast } from "../dialogs";
|
|
|
|
const EMPTY: QueueItem[] = [];
|
|
|
|
/** Messages waiting for the agent; deletable until delivered. */
|
|
export function QueueList({ sessionId, busy }: { sessionId: string; busy: boolean }) {
|
|
const t = useT();
|
|
const items = useStore((s) => s.queue[sessionId] ?? EMPTY);
|
|
if (items.length === 0) return null;
|
|
return (
|
|
<div className="queue">
|
|
<div className="queue-head">
|
|
<span>{busy ? t("queue.pending", { n: items.length }) : t("queue.stopped", { n: items.length })}</span>
|
|
{!busy && (
|
|
<button className="small primary" onClick={() => post(`/sessions/${sessionId}/queue/flush`).catch((e) => toast(e.message))}>
|
|
{t("queue.sendNow")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{items.map((it) => {
|
|
const text = it.parts.map((p) => (p.type === "text" ? p.text : "")).join(" ").trim();
|
|
const images = it.parts.filter((p) => p.type === "image") as Extract<QueueItem["parts"][number], { type: "image" }>[];
|
|
return (
|
|
<div key={it.id} className="queue-item">
|
|
{it.source === "background" && <span className="chip">{t("tool.background")}</span>}
|
|
<span className="queue-text">{it.source === "background" ? t("queue.backgroundResult") : text || "—"}</span>
|
|
{images.map((p, i) => (
|
|
<img key={i} src={imageSrc(p.image)} alt="" />
|
|
))}
|
|
{it.source !== "background" && (
|
|
<button
|
|
className="small ghost"
|
|
aria-label={t("queue.remove")}
|
|
title={t("queue.remove")}
|
|
onClick={() => del(`/sessions/${sessionId}/queue/${it.id}`).catch((e) => toast(e.message))}
|
|
>
|
|
<Icon name="close" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|