diff options
| author | Daniel Polito <[email protected]> | 2026-01-11 17:12:52 -0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-01-11 14:12:52 -0600 |
| commit | 025ed04da0aed68a17c47f7a814068c97767a361 (patch) | |
| tree | f0d84540bebd382fd1bd41bd8a6e213a9c28a089 | |
| parent | b81eca4ebc73279ab2c16fb1ca3291449501729d (diff) | |
| download | opencode-025ed04da0aed68a17c47f7a814068c97767a361.tar.gz opencode-025ed04da0aed68a17c47f7a814068c97767a361.zip | |
feat(desktop): Image Preview support for Image Attachments (#7841)
| -rw-r--r-- | packages/app/src/components/prompt-input.tsx | 6 | ||||
| -rw-r--r-- | packages/ui/src/components/message-part.css | 4 | ||||
| -rw-r--r-- | 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) |