@@ -163,6 +205,25 @@ function isAvatarUrl(value: string): boolean {
);
}
+function renderMessageImages(images: ImageBlock[]) {
+ if (images.length === 0) return nothing;
+
+ return html`
+
+ ${images.map(
+ (img) => html`
+
window.open(img.url, "_blank")}
+ />
+ `,
+ )}
+
+ `;
+}
+
function renderGroupedMessage(
message: unknown,
opts: { isStreaming: boolean; showReasoning: boolean },
@@ -179,6 +240,8 @@ function renderGroupedMessage(
const toolCards = extractToolCards(message);
const hasToolCards = toolCards.length > 0;
+ const images = extractImages(message);
+ const hasImages = images.length > 0;
const extractedText = extractTextCached(message);
const extractedThinking =
@@ -207,11 +270,12 @@ function renderGroupedMessage(
)}`;
}
- if (!markdown && !hasToolCards) return nothing;
+ if (!markdown && !hasToolCards && !hasImages) return nothing;
return html`
${canCopyMarkdown ? renderCopyAsMarkdownButton(markdown!) : nothing}
+ ${renderMessageImages(images)}
${reasoningMarkdown
? html`
${unsafeHTML(
toSanitizedMarkdownHtml(reasoningMarkdown),
diff --git a/ui/src/ui/controllers/chat.test.ts b/ui/src/ui/controllers/chat.test.ts
new file mode 100644
index 000000000..c75ceefc4
--- /dev/null
+++ b/ui/src/ui/controllers/chat.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+
+import {
+ handleChatEvent,
+ type ChatEventPayload,
+ type ChatState,
+} from "./chat";
+
+function createState(overrides: Partial
= {}): ChatState {
+ return {
+ client: null,
+ connected: true,
+ sessionKey: "main",
+ chatLoading: false,
+ chatMessages: [],
+ chatThinkingLevel: null,
+ chatSending: false,
+ chatMessage: "",
+ chatRunId: null,
+ chatStream: null,
+ chatStreamStartedAt: null,
+ lastError: null,
+ ...overrides,
+ };
+}
+
+describe("handleChatEvent", () => {
+ it("returns null when payload is missing", () => {
+ const state = createState();
+ expect(handleChatEvent(state, undefined)).toBe(null);
+ });
+
+ it("returns null when sessionKey does not match", () => {
+ const state = createState({ sessionKey: "main" });
+ const payload: ChatEventPayload = {
+ runId: "run-1",
+ sessionKey: "other",
+ state: "final",
+ };
+ expect(handleChatEvent(state, payload)).toBe(null);
+ });
+
+ it("returns null for delta from another run", () => {
+ const state = createState({
+ sessionKey: "main",
+ chatRunId: "run-user",
+ chatStream: "Hello",
+ });
+ const payload: ChatEventPayload = {
+ runId: "run-announce",
+ sessionKey: "main",
+ state: "delta",
+ message: { role: "assistant", content: [{ type: "text", text: "Done" }] },
+ };
+ expect(handleChatEvent(state, payload)).toBe(null);
+ expect(state.chatRunId).toBe("run-user");
+ expect(state.chatStream).toBe("Hello");
+ });
+
+ it("returns 'final' for final from another run (e.g. sub-agent announce) without clearing state", () => {
+ const state = createState({
+ sessionKey: "main",
+ chatRunId: "run-user",
+ chatStream: "Working...",
+ chatStreamStartedAt: 123,
+ });
+ const payload: ChatEventPayload = {
+ runId: "run-announce",
+ sessionKey: "main",
+ state: "final",
+ message: {
+ role: "assistant",
+ content: [{ type: "text", text: "Sub-agent findings" }],
+ },
+ };
+ expect(handleChatEvent(state, payload)).toBe("final");
+ expect(state.chatRunId).toBe("run-user");
+ expect(state.chatStream).toBe("Working...");
+ expect(state.chatStreamStartedAt).toBe(123);
+ });
+
+ it("processes final from own run and clears state", () => {
+ const state = createState({
+ sessionKey: "main",
+ chatRunId: "run-1",
+ chatStream: "Reply",
+ chatStreamStartedAt: 100,
+ });
+ const payload: ChatEventPayload = {
+ runId: "run-1",
+ sessionKey: "main",
+ state: "final",
+ };
+ expect(handleChatEvent(state, payload)).toBe("final");
+ expect(state.chatRunId).toBe(null);
+ expect(state.chatStream).toBe(null);
+ expect(state.chatStreamStartedAt).toBe(null);
+ });
+});
diff --git a/ui/src/ui/controllers/chat.ts b/ui/src/ui/controllers/chat.ts
index 53027c6ea..518c35fe1 100644
--- a/ui/src/ui/controllers/chat.ts
+++ b/ui/src/ui/controllers/chat.ts
@@ -1,6 +1,7 @@
-import type { GatewayBrowserClient } from "../gateway";
import { extractText } from "../chat/message-extract";
+import type { GatewayBrowserClient } from "../gateway";
import { generateUUID } from "../uuid";
+import type { ChatAttachment } from "../ui-types";
export type ChatState = {
client: GatewayBrowserClient | null;
@@ -11,6 +12,7 @@ export type ChatState = {
chatThinkingLevel: string | null;
chatSending: boolean;
chatMessage: string;
+ chatAttachments: ChatAttachment[];
chatRunId: string | null;
chatStream: string | null;
chatStreamStartedAt: number | null;
@@ -43,17 +45,44 @@ export async function loadChatHistory(state: ChatState) {
}
}
-export async function sendChatMessage(state: ChatState, message: string): Promise {
+function dataUrlToBase64(dataUrl: string): { content: string; mimeType: string } | null {
+ const match = /^data:([^;]+);base64,(.+)$/.exec(dataUrl);
+ if (!match) return null;
+ return { mimeType: match[1], content: match[2] };
+}
+
+export async function sendChatMessage(
+ state: ChatState,
+ message: string,
+ attachments?: ChatAttachment[],
+): Promise {
if (!state.client || !state.connected) return false;
const msg = message.trim();
- if (!msg) return false;
+ const hasAttachments = attachments && attachments.length > 0;
+ if (!msg && !hasAttachments) return false;
const now = Date.now();
+
+ // Build user message content blocks
+ const contentBlocks: Array<{ type: string; text?: string; source?: unknown }> = [];
+ if (msg) {
+ contentBlocks.push({ type: "text", text: msg });
+ }
+ // Add image previews to the message for display
+ if (hasAttachments) {
+ for (const att of attachments) {
+ contentBlocks.push({
+ type: "image",
+ source: { type: "base64", media_type: att.mimeType, data: att.dataUrl },
+ });
+ }
+ }
+
state.chatMessages = [
...state.chatMessages,
{
role: "user",
- content: [{ type: "text", text: msg }],
+ content: contentBlocks,
timestamp: now,
},
];
@@ -64,12 +93,29 @@ export async function sendChatMessage(state: ChatState, message: string): Promis
state.chatRunId = runId;
state.chatStream = "";
state.chatStreamStartedAt = now;
+
+ // Convert attachments to API format
+ const apiAttachments = hasAttachments
+ ? attachments
+ .map((att) => {
+ const parsed = dataUrlToBase64(att.dataUrl);
+ if (!parsed) return null;
+ return {
+ type: "image",
+ mimeType: parsed.mimeType,
+ content: parsed.content,
+ };
+ })
+ .filter((a): a is NonNullable => a !== null)
+ : undefined;
+
try {
await state.client.request("chat.send", {
sessionKey: state.sessionKey,
message: msg,
deliver: false,
idempotencyKey: runId,
+ attachments: apiAttachments,
});
return true;
} catch (err) {
@@ -115,8 +161,17 @@ export function handleChatEvent(
) {
if (!payload) return null;
if (payload.sessionKey !== state.sessionKey) return null;
- if (payload.runId && state.chatRunId && payload.runId !== state.chatRunId)
+
+ // Final from another run (e.g. sub-agent announce): refresh history to show new message.
+ // See https://github.com/clawdbot/clawdbot/issues/1909
+ if (
+ payload.runId &&
+ state.chatRunId &&
+ payload.runId !== state.chatRunId
+ ) {
+ if (payload.state === "final") return "final";
return null;
+ }
if (payload.state === "delta") {
const next = extractText(payload.message);
diff --git a/ui/src/ui/ui-types.ts b/ui/src/ui/ui-types.ts
index 428c4c381..196d6d114 100644
--- a/ui/src/ui/ui-types.ts
+++ b/ui/src/ui/ui-types.ts
@@ -1,7 +1,14 @@
+export type ChatAttachment = {
+ id: string;
+ dataUrl: string;
+ mimeType: string;
+};
+
export type ChatQueueItem = {
id: string;
text: string;
createdAt: number;
+ attachments?: ChatAttachment[];
};
export const CRON_CHANNEL_LAST = "last";
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
index dd61ca0ec..a9b4da572 100644
--- a/ui/src/ui/views/chat.ts
+++ b/ui/src/ui/views/chat.ts
@@ -1,7 +1,7 @@
import { html, nothing } from "lit";
import { repeat } from "lit/directives/repeat.js";
import type { SessionsListResult } from "../types";
-import type { ChatQueueItem } from "../ui-types";
+import type { ChatAttachment, ChatQueueItem } from "../ui-types";
import type { ChatItem, MessageGroup } from "../types/chat-types";
import { icons } from "../icons";
import {
@@ -52,6 +52,9 @@ export type ChatProps = {
splitRatio?: number;
assistantName: string;
assistantAvatar: string | null;
+ // Image attachments
+ attachments?: ChatAttachment[];
+ onAttachmentsChange?: (attachments: ChatAttachment[]) => void;
// Event handlers
onRefresh: () => void;
onToggleFocusMode: () => void;
@@ -95,6 +98,82 @@ function renderCompactionIndicator(status: CompactionIndicatorStatus | null | un
return nothing;
}
+function generateAttachmentId(): string {
+ return `att-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function handlePaste(
+ e: ClipboardEvent,
+ props: ChatProps,
+) {
+ const items = e.clipboardData?.items;
+ if (!items || !props.onAttachmentsChange) return;
+
+ const imageItems: DataTransferItem[] = [];
+ for (let i = 0; i < items.length; i++) {
+ const item = items[i];
+ if (item.type.startsWith("image/")) {
+ imageItems.push(item);
+ }
+ }
+
+ if (imageItems.length === 0) return;
+
+ e.preventDefault();
+
+ for (const item of imageItems) {
+ const file = item.getAsFile();
+ if (!file) continue;
+
+ const reader = new FileReader();
+ reader.onload = () => {
+ const dataUrl = reader.result as string;
+ const newAttachment: ChatAttachment = {
+ id: generateAttachmentId(),
+ dataUrl,
+ mimeType: file.type,
+ };
+ const current = props.attachments ?? [];
+ props.onAttachmentsChange?.([...current, newAttachment]);
+ };
+ reader.readAsDataURL(file);
+ }
+}
+
+function renderAttachmentPreview(props: ChatProps) {
+ const attachments = props.attachments ?? [];
+ if (attachments.length === 0) return nothing;
+
+ return html`
+
+ ${attachments.map(
+ (att) => html`
+
+
+
+
+ `,
+ )}
+
-
${item.text}
+
+ ${item.text ||
+ (item.attachments?.length
+ ? `Image (${item.attachments.length})`
+ : "")}
+
- 
- 
![google-labs-jules[bot]](https://avatars.githubusercontent.com/in/842251?v=4&s=48 "google-labs-jules[bot]"){kind=small}
- 
- 
- 
- 
- 
- 
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&s=48 "dependabot[bot]"){kind=small}
- 
- 
- 
![blacksmith-sh[bot]](https://avatars.githubusercontent.com/in/807020?v=4&s=48 "blacksmith-sh[bot]"){kind=small}
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+ 
+ 
+ 
