salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add inline previews for prompt attachments

Browse Source
This commit is contained in:
Shantur Rathore
2025-11-19 18:49:50 +00:00
parent 45dca7a7f0
commit d3ee15dcd7
2 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/ui/src/components/prompt-input.tsx
View File

@@ -720,8 +720,24 @@ export default function PromptInput(props: PromptInputProps) {
const filename = file.name
const mime = file.type || "text/plain"
const attachment = createFileAttachment(path, filename, mime, undefined, props.instanceFolder)
addAttachment(props.instanceId, props.sessionId, attachment)
const createAndStoreAttachment = (previewUrl?: string) => {
const attachment = createFileAttachment(path, filename, mime, undefined, props.instanceFolder)
if (previewUrl && mime.startsWith("image/")) {
attachment.url = previewUrl
}
addAttachment(props.instanceId, props.sessionId, attachment)
}
if (mime.startsWith("image/") && typeof FileReader !== "undefined") {
const reader = new FileReader()
reader.onload = () => {
const result = typeof reader.result === "string" ? reader.result : undefined
createAndStoreAttachment(result)
}
reader.readAsDataURL(file)
} else {
createAndStoreAttachment()
}
}
textareaRef?.focus()
@@ -772,7 +788,7 @@ export default function PromptInput(props: PromptInputProps) {
{(attachment) => {
const isImage = attachment.mediaType.startsWith("image/")
return (
<div class="attachment-chip">
<div class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`}>
<Show
when={isImage}
fallback={
@@ -831,6 +847,11 @@ export default function PromptInput(props: PromptInputProps) {
/>
</svg>
</button>
<Show when={isImage}>
<div class="attachment-chip-preview">
<img src={attachment.url} alt={attachment.filename} />
</div>
</Show>
</div>
)
}}