feat: setup the attachment to the passenger clients

apps/edr-passenger-web/backoffice/src/features/support/AttachmentDraftBar.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { FileText, X } from 'lucide-react';
+
+import { formatBytes } from './MessageAttachments';
+import type { PendingAttachment } from './useAttachmentDraft';
+
+/**
+ * The staged-files strip above the composer. Shows what will be sent and lets
+ * the agent drop any of it before hitting send.
+ */
+export function AttachmentDraftBar({
+  attachments,
+  onRemove,
+}: {
+  attachments: PendingAttachment[];
+  onRemove: (id: string) => void;
+}) {
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className="mb-2 flex flex-wrap gap-2">
+      {attachments.map((a) => (
+        <div
+          key={a.id}
+          className="relative flex items-center gap-1.5 rounded-lg border border-border bg-background p-1 pr-4"
+        >
+          {a.previewUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={a.previewUrl}
+              alt={a.file.name}
+              className="h-9 w-9 shrink-0 rounded object-cover"
+            />
+          ) : (
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
+              <FileText size={16} />
+            </span>
+          )}
+          <span className="min-w-0 max-w-[120px]">
+            <span className="block truncate text-xs font-semibold text-foreground">
+              {a.file.name}
+            </span>
+            <span className="block text-[10px] text-muted-foreground">
+              {formatBytes(a.file.size)}
+            </span>
+          </span>
+          <button
+            onClick={() => onRemove(a.id)}
+            aria-label={`Remove ${a.file.name}`}
+            className="absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-gray-600 text-white transition hover:bg-gray-700"
+          >
+            <X size={10} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}