49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { useState } from 'react'
|
|
|
|
import { ImageLightbox } from '@/components/chat/zoomable-image'
|
|
import { useImageDownload } from '@/hooks/use-image-download'
|
|
import { useI18n } from '@/i18n'
|
|
import { X } from '@/lib/icons'
|
|
|
|
interface ReferenceChipProps {
|
|
name: string
|
|
onRemove: () => void
|
|
src: string
|
|
}
|
|
|
|
// The reference photo as an attachment chip: filename + thumbnail that opens
|
|
// the shared image viewer (lightbox), with a remove affordance.
|
|
export function ReferenceChip({ name, onRemove, src }: ReferenceChipProps) {
|
|
const { t } = useI18n()
|
|
const { download, saving } = useImageDownload(src)
|
|
const [viewing, setViewing] = useState(false)
|
|
|
|
return (
|
|
<div className="ml-auto flex h-6 items-center gap-2 self-start rounded-lg border border-border/60 bg-background/50 pl-1 pr-2">
|
|
<button className="shrink-0" onClick={() => setViewing(true)} title={t.desktop.openImage} type="button">
|
|
<img alt={name} className="size-4 rounded-md object-cover" src={src} />
|
|
</button>
|
|
|
|
<span className="max-w-40 truncate text-[0.64rem] font-medium text-foreground/50">{name || 'Reference'}</span>
|
|
<button
|
|
aria-label={t.surfaces.removeReference}
|
|
className="text-(--ui-text-tertiary) transition not-hover:opacity-50"
|
|
onClick={onRemove}
|
|
type="button"
|
|
>
|
|
<X className="size-3" />
|
|
</button>
|
|
|
|
<ImageLightbox
|
|
alt={name}
|
|
copy={t.desktop}
|
|
onClick={download}
|
|
onOpenChange={setViewing}
|
|
open={viewing}
|
|
saving={saving}
|
|
src={src}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|