sandvich
/
opencode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(app): show full names on composer attachment chips (#21306)

pull/21314/head^2
Shoubhit Dash 2026-04-07 15:45:22 +05:30 committed by GitHub
parent 3c96bf8468
commit 3a1ec27feb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/app/src/components/prompt-input/image-attachments.tsx
View File

@ -1,5 +1,6 @@
import { Component, For, Show } from "solid-js" import { Component, For, Show } from "solid-js"
import { Icon } from "@opencode-ai/ui/icon" import { Icon } from "@opencode-ai/ui/icon"
import { Tooltip } from "@opencode-ai/ui/tooltip"
import type { ImageAttachmentPart } from "@/context/prompt" import type { ImageAttachmentPart } from "@/context/prompt"
type PromptImageAttachmentsProps = { type PromptImageAttachmentsProps = {
@ -22,34 +23,36 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
<div class="flex flex-wrap gap-2 px-3 pt-3"> <div class="flex flex-wrap gap-2 px-3 pt-3">
<For each={props.attachments}> <For each={props.attachments}>
{(attachment) => ( {(attachment) => (
<div class="relative group"> <Tooltip value={attachment.filename} placement="top" contentClass="break-all">
<Show <div class="relative group">
when={attachment.mime.startsWith("image/")} <Show
fallback={ when={attachment.mime.startsWith("image/")}
<div class={fallbackClass}> fallback={
<Icon name="folder" class="size-6 text-text-weak" /> <div class={fallbackClass}>
</div> <Icon name="folder" class="size-6 text-text-weak" />
} </div>
> }
<img >
src={attachment.dataUrl} <img
alt={attachment.filename} src={attachment.dataUrl}
class={imageClass} alt={attachment.filename}
onClick={() => props.onOpen(attachment)} class={imageClass}
/> onClick={() => props.onOpen(attachment)}
</Show> />
<button </Show>
type="button" <button
onClick={() => props.onRemove(attachment.id)} type="button"
class={removeClass} onClick={() => props.onRemove(attachment.id)}
aria-label={props.removeLabel} class={removeClass}
> aria-label={props.removeLabel}
<Icon name="close" class="size-3 text-text-weak" /> >
</button> <Icon name="close" class="size-3 text-text-weak" />
<div class={nameClass}> </button>
<span class="text-10-regular text-white truncate block">{attachment.filename}</span> <div class={nameClass}>
<span class="text-10-regular text-white truncate block">{attachment.filename}</span>
</div>
</div> </div>
</div> </Tooltip>
)} )}
</For> </For>
</div> </div>