From e77a1c8dcbb8dd4b50234a29a87bd0061da71776 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Fri, 27 Feb 2026 13:31:39 +0000
Subject: [PATCH] fix: display image attachments in user message bubbles

Images sent by the user were transmitted to the gateway correctly but
not shown in the chat UI, making it appear as if attachments were lost.

Now image blocks are included in the user message for immediate visual
feedback.

Closes #14
---
 package-lock.json       | 4 ++--
 package.json            | 2 +-
 src/hooks/useGateway.ts | 5 ++++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0bb17be..67c4e83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pinchchat",
-  "version": "1.67.2",
+  "version": "1.67.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pinchchat",
-      "version": "1.67.2",
+      "version": "1.67.3",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
diff --git a/package.json b/package.json
index f5f1867..6ae0083 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pinchchat",
-  "version": "1.67.2",
+  "version": "1.67.3",
   "description": "A sleek, dark-themed webchat UI for OpenClaw — monitor sessions, stream responses, and inspect tool calls in real-time.",
   "type": "module",
   "repository": {
diff --git a/src/hooks/useGateway.ts b/src/hooks/useGateway.ts
index 6350d30..48c2f7b 100644
--- a/src/hooks/useGateway.ts
+++ b/src/hooks/useGateway.ts
@@ -427,12 +427,15 @@ export function useGateway() {
 
   const sendMessage = useCallback(async (text: string, attachments?: Array<{ mimeType: string; fileName: string; content: string }>) => {
     const msgId = 'user-' + Date.now();
+    const imageBlocks: MessageBlock[] = (attachments ?? [])
+      .filter(a => a.mimeType.startsWith('image/'))
+      .map(a => ({ type: 'image' as const, mediaType: a.mimeType, data: a.content }));
     const userMsg: ChatMessage = {
       id: msgId,
       role: 'user',
       content: text,
       timestamp: Date.now(),
-      blocks: [{ type: 'text', text }],
+      blocks: [...imageBlocks, { type: 'text', text }],
       sendStatus: 'sending',
     };
     setMessages(prev => [...prev, userMsg]);