86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* The row of files staged in the composer before a message is sent.
|
|
*
|
|
* Each chip shows its own upload state, because one failure among several
|
|
* shouldn't discard the rest — the user removes the failed one and sends.
|
|
*/
|
|
|
|
import { AlertCircle, FileText, Loader2, X } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { UploadedAttachment } from "@/lib/chat";
|
|
|
|
export type StagedAttachment = {
|
|
/** Client-side id; the upload has no server identity until it is sent. */
|
|
id: string;
|
|
file: File;
|
|
/** Object URL for an image thumbnail, revoked when the chip is removed. */
|
|
previewUrl?: string;
|
|
status: "uploading" | "ready" | "failed";
|
|
uploaded?: UploadedAttachment;
|
|
};
|
|
|
|
export function ComposerAttachments({
|
|
items,
|
|
onRemove,
|
|
}: {
|
|
items: StagedAttachment[];
|
|
onRemove: (id: string) => void;
|
|
}) {
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-2 px-4 pt-2">
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className={cn(
|
|
"relative flex items-center gap-2 rounded-lg border border-border bg-muted/40 p-1.5",
|
|
item.status === "failed" && "border-destructive/60",
|
|
)}
|
|
>
|
|
{item.previewUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={item.previewUrl}
|
|
alt=""
|
|
className="size-10 rounded object-cover"
|
|
/>
|
|
) : (
|
|
<span className="inline-flex size-10 items-center justify-center rounded bg-background text-muted-foreground">
|
|
<FileText className="size-4" />
|
|
</span>
|
|
)}
|
|
|
|
<span className="max-w-32 truncate text-xs text-foreground">
|
|
{item.file.name}
|
|
</span>
|
|
|
|
{item.status === "uploading" && (
|
|
<Loader2
|
|
className="size-3.5 shrink-0 animate-spin text-muted-foreground"
|
|
aria-label="Uploading"
|
|
/>
|
|
)}
|
|
{item.status === "failed" && (
|
|
<AlertCircle
|
|
className="size-3.5 shrink-0 text-destructive"
|
|
aria-label="Upload failed"
|
|
/>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemove(item.id)}
|
|
aria-label={`Remove ${item.file.name}`}
|
|
className="ml-1 rounded-md p-1 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|