Update QueueItemImage & QueueItemFile to new UI design

[tobiasbueschel]

#151 introduced a new design for file attachments inside the PromptInput component. The Queue component still uses the old design which would be great to update so that both are consistent.

Code reference

ai-elements/packages/elements/src/queue.tsx

Lines 141 to 180 in 4a33f08

	export const QueueItemAttachment = ({
	className,
	...props
	}: QueueItemAttachmentProps) => (
	<div className={cn("mt-1 flex flex-wrap gap-2", className)} {...props} />
	);
	export type QueueItemImageProps = ComponentProps<"img">;
	export const QueueItemImage = ({
	className,
	...props
	}: QueueItemImageProps) => (
	<img
	alt=""
	className={cn("h-8 w-8 rounded border object-cover", className)}
	height={32}
	width={32}
	{...props}
	/>
	);
	export type QueueItemFileProps = ComponentProps<"span">;
	export const QueueItemFile = ({
	children,
	className,
	...props
	}: QueueItemFileProps) => (
	<span
	className={cn(
	"flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
	className
	)}
	{...props}
	>
	<PaperclipIcon size={12} />
	<span className="max-w-[100px] truncate">{children}</span>
	</span>
	);

[unclebay143]

yes, and currently, the attachment preview isn't working in the example. That needs to be addressed along with this as well.

update:

fixed in #191

[unclebay143]

@tobiasbueschel I took a look into this.

Currently, PromptInputAttachments in PromptInput relies on its internal hook usePromptInputAttachments, which is tightly coupled to its own context/provider. This means we can't directly reuse it for queue attachments unless we refactor or abstract the hook and context to allow usage outside of the prompt input flow.

LMKWYT

[haydenbleasel]

Resolved in #191