From 025ed04da0aed68a17c47f7a814068c97767a361 Mon Sep 17 00:00:00 2001
From: Daniel Polito <danielbpolito@gmail.com>
Date: Sun, 11 Jan 2026 17:12:52 -0300
Subject: [PATCH] feat(desktop): Image Preview support for Image Attachments
 (#7841)

---
 packages/app/src/components/prompt-input.tsx | 6 +++++-
 packages/ui/src/components/message-part.css  | 4 ----
 packages/ui/src/components/message-part.tsx  | 1 -
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 97f54da5e..13f2b00a3 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -38,6 +38,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
 import { useProviders } from "@/hooks/use-providers"
@@ -1484,7 +1485,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     <img
                       src={attachment.dataUrl}
                       alt={attachment.filename}
-                      class="size-16 rounded-md object-cover border border-border-base"
+                      class="size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
+                      onClick={() =>
+                        dialog.show(() => <ImagePreview src={attachment.dataUrl} alt={attachment.filename} />)
+                      }
                     />
                   </Show>
                   <button
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index 3cdd93cb9..b087b59e1 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -40,10 +40,6 @@
       border-color: var(--border-strong-base);
     }
 
-    &[data-clickable="true"] {
-      cursor: pointer;
-    }
-
     &[data-type="image"] {
       width: 48px;
       height: 48px;
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 644690ed2..71ff37161 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -327,7 +327,6 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
               <div
                 data-slot="user-message-attachment"
                 data-type={file.mime.startsWith("image/") ? "image" : "file"}
-                data-clickable={file.mime.startsWith("image/") && !!file.url}
                 onClick={() => {
                   if (file.mime.startsWith("image/") && file.url) {
                     openImagePreview(file.url, file.filename)