feat: chat

2026-08-29 03:49:58 +05:30
parent 3257efb06a
commit 523b6fa7e8
34 changed files with 5381 additions and 11 deletions
@@ -0,0 +1,85 @@
+"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>
+  );
+}