@heyramzi/ui 2.0.1 → 2.2.0

package/src/thread/thread.svelte

@@ -0,0 +1,432 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { ArrowBendDownRight, Check, MapPin, PencilSimple, Trash } from "phosphor-svelte";
+	import { cn } from "../lib/utils.js";
+	import { AgentAvatar } from "../agents/index.js";
+	import { TONE_CLASS } from "../lib/tone.js";
+	import RichRenderer from "../editor/renderer.svelte";
+	import { Skeleton } from "../shadcn/skeleton/index.js";
+	import { buildThread, fillCount, resolveThreadLabels, resolvedCount } from "./logic.js";
+	import type { ThreadComment, ThreadLabels, ThreadPost } from "./types.js";
+
+	interface Props {
+		comments: ThreadComment[];
+		/** Rows still on their way. Draws skeleton rows in place of the thread. */
+		loading?: boolean;
+		labels?: Partial<ThreadLabels>;
+		/** Replaces the default avatar for a person or an agent, drawn in a 24px slot. */
+		avatar?: Snippet<[ThreadComment]>;
+		/** Content under a comment's body, such as files. */
+		attachments?: Snippet<[ThreadComment]>;
+		/** Replaces the default "Pinned" chip on a comment that has an anchor. */
+		anchorChip?: Snippet<[ThreadComment]>;
+		/** How a timestamp reads. Defaults to a short date. */
+		when?: (comment: ThreadComment) => string;
+		/** Returns false to keep the draft. Without it no composer shows. */
+		onPost?: (post: ThreadPost) => void | boolean | Promise<void | boolean>;
+		onEdit?: (comment: ThreadComment, body: string) => void | Promise<void>;
+		onDelete?: (comment: ThreadComment) => void | Promise<void>;
+		/** Without it a root has no resolve button. */
+		onResolve?: (comment: ThreadComment, resolved: boolean) => void | Promise<void>;
+		/** A click on a pinned comment's chip, to move a canvas to its node. */
+		onAnchor?: (comment: ThreadComment) => void;
+		/** Whose comments carry the edit and delete buttons. A rich comment can't be edited here. */
+		canEdit?: (comment: ThreadComment) => boolean;
+		class?: string;
+	}
+
+	let {
+		comments,
+		loading = false,
+		labels: labelOverrides,
+		avatar,
+		attachments,
+		anchorChip,
+		when = (comment) =>
+			new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+		onPost,
+		onEdit,
+		onDelete,
+		onResolve,
+		onAnchor,
+		canEdit = () => false,
+		class: className,
+	}: Props = $props();
+
+	let labels = $derived(resolveThreadLabels(labelOverrides));
+	let nodes = $derived(buildThread(comments));
+	let resolved = $derived(resolvedCount(nodes));
+	let showResolved = $state(false);
+	let shown = $derived(showResolved ? nodes : nodes.filter((node) => !node.comment.resolved));
+
+	let draft = $state("");
+	let replyTo = $state<string | null>(null);
+	let replyDraft = $state("");
+	let sending = $state(false);
+	let editingId = $state<string | null>(null);
+	let editDraft = $state("");
+
+	async function post(body: string, parentId: string | null): Promise<boolean> {
+		const text = body.trim();
+		if (!text || sending || !onPost) return false;
+		sending = true;
+		try {
+			return (await onPost({ body: text, parentId })) !== false;
+		} finally {
+			sending = false;
+		}
+	}
+
+	async function sendRoot(): Promise<void> {
+		if (await post(draft, null)) draft = "";
+	}
+
+	async function sendReply(): Promise<void> {
+		if (await post(replyDraft, replyTo)) {
+			replyDraft = "";
+			replyTo = null;
+		}
+	}
+
+	function submitOnModEnter(event: KeyboardEvent, send: () => Promise<void>): void {
+		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			void send();
+		}
+	}
+
+	async function saveEdit(comment: ThreadComment): Promise<void> {
+		const body = editDraft.trim();
+		editingId = null;
+		if (!body || body === comment.body) return;
+		await onEdit?.(comment, body);
+	}
+
+	function initial(name: string): string {
+		return name.trim().charAt(0).toLocaleUpperCase() || "?";
+	}
+</script>
+
+{#snippet composer(
+	value: string,
+	placeholder: string,
+	onSend: () => Promise<void>,
+	set: (next: string) => void,
+	isReply: boolean,
+)}
+	<div
+		class="rounded-lg border border-input transition-shadow focus-within:ring-3 focus-within:ring-ring/50"
+	>
+		<!-- svelte-ignore a11y_autofocus -->
+		<textarea
+			{value}
+			oninput={(event) => set(event.currentTarget.value)}
+			onkeydown={(event) => submitOnModEnter(event, onSend)}
+			rows={2}
+			{placeholder}
+			aria-label={placeholder}
+			autofocus={isReply}
+			class="block max-h-60 min-h-16 w-full resize-none border-0 bg-transparent px-3 py-2 text-sm leading-relaxed outline-none [field-sizing:content] placeholder:text-muted-foreground"
+		></textarea>
+		<div class="flex justify-end px-2 pb-2">
+			<button
+				type="button"
+				class="thread-button thread-primary"
+				onclick={onSend}
+				disabled={!value.trim() || sending}
+			>
+				{sending ? labels.sending : isReply ? labels.reply : labels.send}
+			</button>
+		</div>
+	</div>
+{/snippet}
+
+{#snippet row(comment: ThreadComment, isRoot: boolean)}
+	<div class="group/row relative flex gap-3">
+		<span class="relative size-6 shrink-0">
+			{#if avatar}
+				{@render avatar(comment)}
+			{:else if comment.author.kind === "agent"}
+				<AgentAvatar name={comment.author.name} size={24} paused interactive={false} />
+			{:else if comment.author.avatar}
+				<img src={comment.author.avatar} alt="" class="size-6 rounded-full object-cover" />
+			{:else}
+				<span
+					class="grid size-6 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground"
+					aria-hidden="true"
+				>
+					{initial(comment.author.name)}
+				</span>
+			{/if}
+		</span>
+
+		<div class="min-w-0 flex-1">
+			<div class="flex min-h-6 flex-wrap items-center gap-x-2">
+				<span class="truncate text-[13px] font-medium">{comment.author.name}</span>
+				{#if comment.author.kind === "agent"}
+					<span
+						class={cn(
+							"inline-flex h-5 items-center rounded-sm border px-1.5 text-xs font-medium",
+							TONE_CLASS.accent,
+						)}
+					>
+						{labels.agent}
+					</span>
+				{/if}
+				<span class="text-xs text-muted-foreground tabular-nums">{when(comment)}</span>
+				{#if comment.edited}
+					<span class="text-xs text-muted-foreground">{labels.edited}</span>
+				{/if}
+				{#if comment.anchor}
+					{#if anchorChip}
+						{@render anchorChip(comment)}
+					{:else if onAnchor}
+						<button type="button" class="thread-chip" onclick={() => onAnchor(comment)}>
+							<MapPin class="size-3" aria-hidden="true" />{labels.pinned}
+						</button>
+					{:else}
+						<span class="thread-chip"
+							><MapPin class="size-3" aria-hidden="true" />{labels.pinned}</span
+						>
+					{/if}
+				{/if}
+				{#if editingId !== comment.id}
+					<span
+						class="ms-auto flex gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
+					>
+						{#if isRoot && onResolve}
+							<button
+								type="button"
+								class="thread-icon"
+								aria-label={comment.resolved ? labels.unresolve : labels.resolve}
+								aria-pressed={comment.resolved ?? false}
+								onclick={() => onResolve(comment, !comment.resolved)}
+							>
+								<Check class="size-3.5" aria-hidden="true" />
+							</button>
+						{/if}
+						{#if canEdit(comment)}
+							{#if onEdit && !comment.content}
+								<button
+									type="button"
+									class="thread-icon"
+									aria-label={labels.edit}
+									onclick={() => {
+										editingId = comment.id;
+										editDraft = comment.body;
+									}}
+								>
+									<PencilSimple class="size-3.5" aria-hidden="true" />
+								</button>
+							{/if}
+							{#if onDelete}
+								<button
+									type="button"
+									class="thread-icon"
+									aria-label={labels.delete}
+									onclick={() => onDelete?.(comment)}
+								>
+									<Trash class="size-3.5" aria-hidden="true" />
+								</button>
+							{/if}
+						{/if}
+					</span>
+				{/if}
+			</div>
+
+			{#if editingId === comment.id}
+				<textarea
+					bind:value={editDraft}
+					rows={3}
+					aria-label={labels.edit}
+					class="mt-1 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+				></textarea>
+				<div class="mt-2 flex justify-end gap-1.5">
+					<button type="button" class="thread-button" onclick={() => (editingId = null)}
+						>{labels.cancel}</button
+					>
+					<button
+						type="button"
+						class="thread-button thread-primary"
+						onclick={() => saveEdit(comment)}>{labels.save}</button
+					>
+				</div>
+			{:else if comment.content}
+				<div class="text-sm leading-relaxed"><RichRenderer content={comment.content} /></div>
+			{:else}
+				<p class="text-sm leading-relaxed whitespace-pre-wrap text-pretty">{comment.body}</p>
+			{/if}
+
+			{@render attachments?.(comment)}
+		</div>
+	</div>
+{/snippet}
+
+<section aria-label={labels.title} class={cn("flex flex-col gap-3", className)}>
+	<div class="flex h-7 items-center justify-between">
+		<h2 class="text-xs font-medium text-muted-foreground">{labels.title}</h2>
+		{#if resolved > 0}
+			<button
+				type="button"
+				class="thread-button"
+				aria-expanded={showResolved}
+				onclick={() => (showResolved = !showResolved)}
+			>
+				{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
+			</button>
+		{/if}
+	</div>
+
+	{#if loading}
+		<ol class="flex flex-col gap-4" aria-busy="true">
+			{#each [0, 1] as placeholder (placeholder)}
+				<li class="flex gap-3">
+					<Skeleton class="size-6 shrink-0 rounded-full" />
+					<div class="flex flex-1 flex-col gap-2">
+						<Skeleton class="h-3.5 w-28" />
+						<Skeleton class="h-3.5 w-full" />
+					</div>
+				</li>
+			{/each}
+		</ol>
+	{:else if shown.length > 0}
+		<ol class="flex flex-col gap-4">
+			{#each shown as node (node.comment.id)}
+				<li
+					class={cn("flex flex-col gap-3", node.comment.resolved && "opacity-60")}
+					data-resolved={node.comment.resolved || undefined}
+				>
+					{@render row(node.comment, true)}
+					{#if node.comment.resolved}
+						<span class="ms-9 text-xs text-muted-foreground">{labels.resolved}</span>
+					{/if}
+					{#if node.replies.length > 0}
+						<ol class="ms-3 flex flex-col gap-3 border-s border-border ps-6">
+							{#each node.replies as reply (reply.id)}
+								<li>{@render row(reply, false)}</li>
+							{/each}
+						</ol>
+					{/if}
+					{#if onPost && !node.comment.resolved}
+						{#if replyTo === node.comment.id}
+							<div class="ms-9">
+								{@render composer(
+									replyDraft,
+									labels.replyPlaceholder,
+									sendReply,
+									(next) => (replyDraft = next),
+									true,
+								)}
+							</div>
+						{:else}
+							<button
+								type="button"
+								class="thread-button ms-9 flex w-fit items-center gap-1.5"
+								onclick={() => {
+									replyTo = node.comment.id;
+									replyDraft = "";
+								}}
+							>
+								<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
+							</button>
+						{/if}
+					{/if}
+				</li>
+			{/each}
+		</ol>
+	{:else if !onPost}
+		<p class="text-[13px] text-muted-foreground">{labels.empty}</p>
+	{/if}
+
+	{#if onPost}
+		{@render composer(draft, labels.placeholder, sendRoot, (next) => (draft = next), false)}
+	{/if}
+</section>
+
+<style>
+	.thread-icon {
+		display: grid;
+		place-items: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: var(--radius-md, 0.5rem);
+		color: var(--color-muted-foreground);
+		outline: none;
+		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+
+	.thread-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		height: 1.25rem;
+		padding-inline: 0.375rem;
+		border-radius: var(--radius-sm, 0.25rem);
+		background: var(--color-muted);
+		color: var(--color-muted-foreground);
+		font-size: 0.75rem;
+		outline: none;
+	}
+
+	button.thread-chip:focus-visible {
+		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.thread-icon:hover {
+			background: var(--color-muted);
+			color: var(--color-foreground);
+		}
+	}
+
+	.thread-icon:focus-visible,
+	.thread-button:focus-visible {
+		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
+	}
+
+	.thread-button {
+		height: 1.75rem;
+		padding-inline: 0.75rem;
+		border-radius: var(--radius-md, 0.5rem);
+		font-size: 0.8125rem;
+		font-weight: 500;
+		outline: none;
+		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.thread-button:hover:not(:disabled) {
+			background: var(--color-muted);
+		}
+	}
+
+	.thread-button:disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	.thread-primary {
+		background: var(--color-primary);
+		color: var(--color-primary-foreground);
+	}
+
+	/* An empty draft reads as an outlined button, not a faded fill. */
+	.thread-primary:disabled {
+		opacity: 1;
+		background: transparent;
+		box-shadow: inset 0 0 0 1px var(--color-border);
+		color: var(--color-muted-foreground);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.thread-primary:hover:not(:disabled) {
+			background: color-mix(in oklab, var(--color-primary) 90%, transparent);
+		}
+	}
+
+	@media (any-pointer: coarse) {
+		.thread-button {
+			height: 2.5rem;
+		}
+	}
+</style>

package/src/thread/thread.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vite-plus/test";
+import { buildThread, fillCount, resolveThreadLabels, resolvedCount } from "./logic.js";
+import { DEFAULT_THREAD_LABELS, type ThreadComment } from "./types.js";
+
+const ada = { kind: "user", name: "Ada" } as const;
+const bot = { kind: "agent", name: "Scribe" } as const;
+
+function comment(id: string, at: string, extra: Partial<ThreadComment> = {}): ThreadComment {
+  return { id, author: ada, body: id, createdAt: at, ...extra };
+}
+
+describe("buildThread", () => {
+  it("puts replies under their root in time order", () => {
+    const nodes = buildThread([
+      comment("r2", "2026-10-22T10:05:00Z", { parentId: "a" }),
+      comment("a", "2026-10-22T10:00:00Z"),
+      comment("b", "2026-10-22T10:02:00Z", { author: bot }),
+      comment("r1", "2026-10-22T10:03:00Z", { parentId: "a" }),
+    ]);
+    expect(nodes.map((n) => n.comment.id)).toEqual(["a", "b"]);
+    expect(nodes[0].replies.map((r) => r.id)).toEqual(["r1", "r2"]);
+  });
+
+  it("keeps a reply to a reply under the root", () => {
+    const nodes = buildThread([
+      comment("a", "2026-10-22T10:00:00Z"),
+      comment("r1", "2026-10-22T10:01:00Z", { parentId: "a" }),
+      comment("r2", "2026-10-22T10:02:00Z", { parentId: "r1" }),
+    ]);
+    expect(nodes).toHaveLength(1);
+    expect(nodes[0].replies.map((r) => r.id)).toEqual(["r1", "r2"]);
+  });
+
+  it("turns an orphan reply into a root and survives a parent loop", () => {
+    const nodes = buildThread([
+      comment("x", "2026-10-22T10:00:00Z", { parentId: "gone" }),
+      comment("p", "2026-10-22T10:01:00Z", { parentId: "q" }),
+      comment("q", "2026-10-22T10:02:00Z", { parentId: "p" }),
+    ]);
+    expect(nodes.map((n) => n.comment.id)).toContain("x");
+    expect(nodes.flatMap((n) => [n.comment.id, ...n.replies.map((r) => r.id)]).sort()).toEqual([
+      "p",
+      "q",
+      "x",
+    ]);
+  });
+
+  it("sorts a malformed timestamp last", () => {
+    const nodes = buildThread([comment("bad", "soon"), comment("ok", "2026-10-22T10:00:00Z")]);
+    expect(nodes.map((n) => n.comment.id)).toEqual(["ok", "bad"]);
+  });
+
+  it("counts resolved roots", () => {
+    const nodes = buildThread([
+      comment("a", "2026-10-22T10:00:00Z", { resolved: true }),
+      comment("b", "2026-10-22T10:01:00Z"),
+    ]);
+    expect(resolvedCount(nodes)).toBe(1);
+  });
+});
+
+describe("labels", () => {
+  it("lets a host write French over the English defaults", () => {
+    const fr = resolveThreadLabels({
+      title: "Activité",
+      send: "Commenter",
+      showResolved: "Afficher {count} résolus",
+    });
+    expect(fr.title).toBe("Activité");
+    expect(fr.cancel).toBe(DEFAULT_THREAD_LABELS.cancel);
+    expect(fillCount(fr.showResolved, 3)).toBe("Afficher 3 résolus");
+  });
+});

package/src/thread/types.ts

@@ -0,0 +1,93 @@
+export type ThreadAuthorKind = "user" | "agent";
+
+export type ThreadAuthor = {
+  kind: ThreadAuthorKind;
+  name: string;
+  /** Image URL for a person. The host's own portrait goes through the `avatar` snippet. */
+  avatar?: string;
+};
+
+/** Where on a canvas a comment is pinned: a node and an offset from it, or a point. */
+export type ThreadAnchor = {
+  nodeId?: string;
+  dx?: number;
+  dy?: number;
+  x?: number;
+  y?: number;
+};
+
+/** One comment on any subject. The host resolves the author's name. */
+export type ThreadComment = {
+  id: string;
+  author: ThreadAuthor;
+  /** Plain text, shown as written. Also the fallback when `content` is missing. */
+  body: string;
+  /** Tiptap JSON. When set, the thread draws it through the editor's renderer instead of `body`. */
+  content?: Record<string, unknown>;
+  /** ISO timestamp. */
+  createdAt: string;
+  /** Set when the body changed after posting. */
+  edited?: boolean;
+  /** The comment this one answers. A reply to a reply sits under the same root. */
+  parentId?: string | null;
+  /** Only a root carries it: the whole conversation is resolved. */
+  resolved?: boolean;
+  anchor?: ThreadAnchor | null;
+};
+
+export type ThreadPost = {
+  body: string;
+  parentId: string | null;
+  anchor?: ThreadAnchor | null;
+};
+
+/** A root comment with its replies in time order. */
+export type ThreadNode = {
+  comment: ThreadComment;
+  replies: ThreadComment[];
+};
+
+export type ThreadLabels = {
+  title: string;
+  empty: string;
+  placeholder: string;
+  replyPlaceholder: string;
+  send: string;
+  sending: string;
+  reply: string;
+  edit: string;
+  delete: string;
+  edited: string;
+  save: string;
+  cancel: string;
+  resolve: string;
+  unresolve: string;
+  resolved: string;
+  /** Shows `{count}` resolved conversations. */
+  showResolved: string;
+  hideResolved: string;
+  agent: string;
+  pinned: string;
+};
+
+export const DEFAULT_THREAD_LABELS: ThreadLabels = {
+  title: "Activity",
+  empty: "No comments yet",
+  placeholder: "Leave a comment",
+  replyPlaceholder: "Reply",
+  send: "Comment",
+  sending: "Sending",
+  reply: "Reply",
+  edit: "Edit comment",
+  delete: "Delete comment",
+  edited: "edited",
+  save: "Save",
+  cancel: "Cancel",
+  resolve: "Resolve",
+  unresolve: "Reopen",
+  resolved: "Resolved",
+  showResolved: "Show {count} resolved",
+  hideResolved: "Hide resolved",
+  agent: "AI",
+  pinned: "Pinned",
+};