@superxd-studio/adptr 0.5.0

package/source/reusable/web/attachments/index.tsx

@@ -0,0 +1,233 @@
+import { useRef, useSyncExternalStore } from "react";
+import { FileTrigger } from "react-aria-components";
+import { Button } from "../../../components/button.js";
+import { IconFile, IconPaperclip, IconRotate, IconX } from "../../../components/icons.js";
+import { Spinner } from "../../../components/spinner.js";
+import { cn } from "../../../lib/cn.js";
+import { parseChatFile, type AttachmentController, type AttachmentItem } from "../../core/index.js";
+import { attachmentCopy, type AttachmentCopy } from "./copy.js";
+
+export function useAttachments<Data>(controller: AttachmentController<Data>) {
+  return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+}
+export interface AttachmentListProps {
+  items: readonly AttachmentItem[];
+  variant?: "list" | "grid" | "inline";
+  className?: string;
+  copy?: AttachmentCopy;
+  /** Explicit opt-in: host is responsible for trusting image origins. No PDFs/HTML are embedded. */
+  previewImages?: boolean;
+  onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onCancel?: (id: string) => void;
+}
+/** Standalone supplied-data display; no chat, upload or vendor provider is required. */
+export function AttachmentList({
+  items,
+  variant = "list",
+  className,
+  copy = attachmentCopy,
+  previewImages = false,
+  onRemove,
+  onRetry,
+  onCancel,
+}: AttachmentListProps) {
+  if (!items.length)
+    return <p className={cn("type-caption text-fg-subtle", className)}>{copy.empty}</p>;
+  return (
+    <ul
+      aria-label={copy.label}
+      className={cn(
+        "min-w-0 list-none p-0",
+        variant === "grid"
+          ? "flex flex-wrap gap-3"
+          : variant === "inline"
+            ? "flex flex-wrap gap-2"
+            : "flex flex-col gap-2",
+        className,
+      )}
+    >
+      {items.map((item) => {
+        const image = ["image/png", "image/jpeg"].includes(item.mediaType);
+        let preview: string | undefined;
+        if (previewImages && image && item.file) {
+          try {
+            preview = parseChatFile(item.file).url;
+          } catch {
+            /* Invalid supplied URL stays a non-interactive file card. */
+          }
+        }
+        const category = image
+          ? copy.image
+          : ["application/pdf", "text/plain"].includes(item.mediaType)
+            ? copy.document
+            : copy.file;
+        const size =
+          item.size < 1000
+            ? `${item.size} B`
+            : item.size < 1_000_000
+              ? `${Math.ceil(item.size / 1000)} KB`
+              : `${(item.size / 1_000_000).toFixed(1)} MB`;
+        return (
+          <li
+            key={item.id}
+            className={cn(
+              "flex min-w-0 flex-wrap gap-3 rounded-control border bg-surface px-control-md-x py-control-y",
+              variant === "inline" && "max-w-full",
+              variant === "grid" && "max-w-full grow basis-64 flex-col flex-nowrap",
+              ["error", "rejected"].includes(item.status)
+                ? "border-error-line"
+                : "border-line-subtle",
+            )}
+          >
+            {preview ? (
+              <img
+                src={preview}
+                alt=""
+                loading="lazy"
+                referrerPolicy="no-referrer"
+                className={cn(
+                  "size-12 shrink-0 rounded-cell object-cover",
+                  variant === "grid" && "h-32 w-full",
+                )}
+              />
+            ) : (
+              <span className="flex size-control-sm shrink-0 items-center justify-center rounded-cell bg-surface-muted text-fg-subtle">
+                <IconFile />
+              </span>
+            )}
+            <div
+              className={cn(
+                "flex min-w-32 flex-1 flex-col gap-1",
+                variant === "grid" && "w-full min-w-0",
+              )}
+            >
+              <p title={item.name} className="truncate type-label text-fg-emphasis">
+                {item.name}
+              </p>
+              <p className="type-caption text-fg-subtle">
+                {category} · {size}
+              </p>
+              <p className="flex items-center gap-2 type-caption text-fg-subtle">
+                {item.status === "uploading" ? <Spinner /> : null}
+                {copy[item.status]}
+              </p>
+              {item.issue ? (
+                <p className="type-caption wrap-anywhere text-error">{copy[item.issue]}</p>
+              ) : null}
+            </div>
+            {onRemove ||
+            (onRetry && ["error", "cancelled"].includes(item.status)) ||
+            (onCancel && item.status === "uploading") ? (
+              <div className="ml-auto flex shrink-0 items-start gap-1">
+                {onCancel && item.status === "uploading" ? (
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    aria-label={`${copy.cancel}: ${item.name}`}
+                    onPress={() => onCancel(item.id)}
+                  >
+                    {copy.cancel}
+                  </Button>
+                ) : null}
+                {onRetry && ["error", "cancelled"].includes(item.status) ? (
+                  <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    aria-label={`${copy.retry}: ${item.name}`}
+                    onPress={() => onRetry(item.id)}
+                  >
+                    <IconRotate />
+                  </Button>
+                ) : null}
+                {onRemove ? (
+                  <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    aria-label={`${copy.remove}: ${item.name}`}
+                    onPress={() => onRemove(item.id)}
+                  >
+                    <IconX />
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export interface AttachmentPickerProps {
+  controller: AttachmentController<Blob>;
+  isDisabled?: boolean;
+  description: string;
+  copy?: AttachmentCopy;
+  className?: string;
+}
+export function AttachmentPicker({
+  controller,
+  isDisabled,
+  description,
+  copy = attachmentCopy,
+  className,
+}: AttachmentPickerProps) {
+  const snapshot = useAttachments(controller);
+  const addRef = useRef<HTMLButtonElement>(null);
+  return (
+    <div className={cn("flex min-w-0 flex-col gap-3", className)}>
+      <div className="flex flex-wrap items-center gap-3">
+        <FileTrigger
+          acceptedFileTypes={[...controller.policy.mediaTypes]}
+          allowsMultiple
+          onSelect={(files) => {
+            if (!files || isDisabled) return;
+            controller.add(
+              Array.from(files).map((file) => ({
+                name: file.name,
+                mediaType: file.type,
+                size: file.size,
+                data: file,
+              })),
+            );
+          }}
+        >
+          <Button ref={addRef} size="sm" isDisabled={isDisabled}>
+            <IconPaperclip />
+            {copy.add}
+          </Button>
+        </FileTrigger>
+        <p className="type-caption text-fg-subtle">{description}</p>
+      </div>
+      {snapshot.items.length ? (
+        <AttachmentList
+          items={snapshot.items}
+          onRemove={(id) => {
+            controller.remove(id);
+            addRef.current?.focus();
+          }}
+          onRetry={(id) => {
+            controller.retry(id);
+            addRef.current?.focus();
+          }}
+          onCancel={(id) => {
+            controller.cancel(id);
+            addRef.current?.focus();
+          }}
+        />
+      ) : null}
+      <p
+        role="status"
+        aria-live="polite"
+        className={cn("type-caption text-error", !snapshot.issue && "sr-only")}
+      >
+        {snapshot.issue
+          ? copy[snapshot.issue]
+          : snapshot.items.length
+            ? `${snapshot.items.length} ${copy.selected}. ${snapshot.items.map((item) => `${item.name}: ${copy[item.status]}`).join(". ")}`
+            : ""}
+      </p>
+    </div>
+  );
+}

package/source/reusable/web/copy.ts

@@ -0,0 +1,22 @@
+export const chatCopy = {
+  label: "Conversation",
+  emptyTitle: "What are you working on?",
+  emptyNote: "Start with a question, an idea or something you want to make clearer.",
+  user: "You",
+  assistant: "Assistant",
+  input: "Message",
+  placeholder: "Ask a question or describe what you need",
+  send: "Send message",
+  stop: "Stop response",
+  retry: "Restart response",
+  hint: "Enter to send · Shift + Enter for a new line",
+  touchHint: "Use Send to submit your message",
+  idle: "",
+  waiting: "Preparing a response",
+  streaming: "Responding",
+  complete: "Response ready",
+  cancelled: "Response stopped. Your partial response is still here.",
+  error: "The response couldn’t finish. Your message is still here.",
+  interrupted: "The connection ended before the response finished. Restart to try again.",
+} as const;
+export type ChatCopy = { [Key in keyof typeof chatCopy]: string };