Comment Thread

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence, type Transition } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import {
8  useReducedMotion,
9  useDisclosure,
10  useAnchoredPortal,
11  useCopy,
12  formatTimestamp as defaultFormatTimestamp,
13  statusVars,
14  streamItemVariants,
15  type StatusTone,
16} from "@/lib/motiq";
17 
18/* --------------------------------------------------------------------------
19 * CommentThread — a review/collaboration discussion that is more than stacked
20 * bubbles. It renders threaded replies, mentions, reactions, resolve/reopen,
21 * an unread divider, and — its differentiator — an internal OPTIMISTIC send
22 * layer: a new or edited comment appears immediately in a "pending" state, then
23 * flips to sent, or to "failed" with a Retry action, replacing its temporary id
24 * when the app confirms. Focus is preserved across those transitions.
25 *
26 * Presentation + optimistic UX only: the application owns persistence and
27 * permissions. The component renders the `comments` it is given, overlays its
28 * own in-flight sends, and calls back so the app can do the real work. When a
29 * callback returns a Promise, its resolution/rejection drives pending → sent /
30 * failed; the app updates `comments` in that same handler and the overlay is
31 * reconciled away by id. Clean-room original.
32 * ----------------------------------------------------------------------- */
33 
34export interface CommentAuthor {
35  /** Stable identity — drives keys, mention matching, and avatar hue. */
36  id: string;
37  /** Human name; also the avatar's accessible text. */
38  name: string;
39  /** Optional avatar image; when absent an initials + hue avatar is generated. */
40  avatarUrl?: string;
41  /** Optional explicit avatar color (any CSS color). */
42  color?: string;
43  /** Optional role/handle shown next to the name. */
44  role?: string;
45}
46 
47export interface Reaction {
48  /** The emoji glyph, e.g. "👍". */
49  emoji: string;
50  /** How many people reacted with it. */
51  count: number;
52  /** Whether the current user is among them (drives the toggle + label). */
53  reactedByMe?: boolean;
54  /** Accessible name for the emoji, e.g. "thumbs up". Falls back to the glyph. */
55  label?: string;
56}
57 
58export interface CommentAttachment {
59  id: string;
60  name: string;
61  /** Small secondary text, e.g. a file size. */
62  meta?: string;
63  href?: string;
64}
65 
66export type CommentStatus = "normal" | "pending" | "failed" | "edited" | "resolved" | "deleted";
67 
68// … truncated