@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/blocks/waka-comment-thread-block.tsx

@@ -0,0 +1,448 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../utils/cn"
+import type { PlateElementProps } from "../waka-editor-elements"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export const COMMENT_THREAD_BLOCK_TYPE = "comment_thread" as const
+
+/** A single comment in a thread */
+export interface ThreadComment {
+  /** Unique comment ID */
+  id: string
+  /** Author information */
+  author: {
+    id: string
+    name: string
+    avatar?: string
+  }
+  /** Comment text content */
+  content: string
+  /** ISO timestamp */
+  createdAt: string
+  /** Whether this comment has been edited */
+  edited?: boolean
+  /** Reactions on this comment */
+  reactions?: Array<{ emoji: string; count: number; reacted: boolean }>
+}
+
+/** Thread status */
+export type ThreadStatus = "open" | "resolved" | "archived"
+
+/** Slate node for comment thread blocks */
+export interface CommentThreadElement {
+  type: typeof COMMENT_THREAD_BLOCK_TYPE
+  /** Thread ID */
+  threadId: string
+  /** The original highlighted text that was commented on */
+  quotedText: string
+  /** Thread status */
+  status: ThreadStatus
+  /** Comments in the thread */
+  comments: ThreadComment[]
+  /** Total number of comments (may differ from comments.length if paginated) */
+  totalComments?: number
+  children: Array<{ text: string }>
+}
+
+export interface WakaCommentThreadBlockProps extends PlateElementProps {
+  element?: CommentThreadElement & Record<string, unknown>
+  /** Current user ID (for highlighting own comments) */
+  currentUserId?: string
+  /** Callback when a reply is submitted */
+  onReply?: (threadId: string, content: string) => void
+  /** Callback when thread is resolved */
+  onResolve?: (threadId: string) => void
+  /** Callback when thread is reopened */
+  onReopen?: (threadId: string) => void
+}
+
+// ============================================================================
+// Relative Time
+// ============================================================================
+
+function relativeTime(isoDate: string): string {
+  const now = Date.now()
+  const then = new Date(isoDate).getTime()
+  const diff = now - then
+  const seconds = Math.floor(diff / 1000)
+
+  if (seconds < 60) return "just now"
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days}d ago`
+  const months = Math.floor(days / 30)
+  if (months < 12) return `${months}mo ago`
+  return `${Math.floor(months / 12)}y ago`
+}
+
+// ============================================================================
+// Avatar Component
+// ============================================================================
+
+function CommentAvatar({ author, size = "sm" }: { author: ThreadComment["author"]; size?: "sm" | "md" }) {
+  const sizeClass = size === "sm" ? "h-6 w-6 text-[9px]" : "h-8 w-8 text-[10px]"
+
+  if (author.avatar) {
+    return (
+      <img
+        src={author.avatar}
+        alt={author.name}
+        className={cn("rounded-full object-cover flex-shrink-0", sizeClass)}
+      />
+    )
+  }
+
+  // Generate a deterministic color from the name
+  const colorIndex = author.name.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % 6
+  const colors = [
+    "bg-blue-500", "bg-emerald-500", "bg-violet-500",
+    "bg-amber-500", "bg-rose-500", "bg-cyan-500",
+  ]
+
+  return (
+    <div className={cn(
+      "rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0",
+      sizeClass,
+      colors[colorIndex]
+    )}>
+      {author.name.charAt(0).toUpperCase()}
+    </div>
+  )
+}
+
+// ============================================================================
+// Single Comment Component
+// ============================================================================
+
+interface CommentItemProps {
+  comment: ThreadComment
+  isCurrentUser: boolean
+  isFirst: boolean
+}
+
+function CommentItem({ comment, isCurrentUser, isFirst }: CommentItemProps) {
+  return (
+    <div className={cn(
+      "flex gap-2.5 px-3 py-2",
+      !isFirst && "border-t border-border/30"
+    )}>
+      <CommentAvatar author={comment.author} />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className={cn(
+            "text-xs font-semibold",
+            isCurrentUser ? "text-primary" : "text-foreground"
+          )}>
+            {comment.author.name}
+          </span>
+          <span className="text-[10px] text-muted-foreground">
+            {relativeTime(comment.createdAt)}
+          </span>
+          {comment.edited && (
+            <span className="text-[9px] text-muted-foreground/60 italic">(edited)</span>
+          )}
+        </div>
+        <p className="text-xs text-foreground/80 mt-0.5 leading-relaxed whitespace-pre-wrap">
+          {comment.content}
+        </p>
+
+        {/* Reactions */}
+        {comment.reactions && comment.reactions.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-1.5">
+            {comment.reactions.map((reaction, i) => (
+              <button
+                key={i}
+                type="button"
+                className={cn(
+                  "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] border transition-colors",
+                  reaction.reacted
+                    ? "bg-primary/10 border-primary/30 text-primary"
+                    : "bg-muted/50 border-border/50 text-muted-foreground hover:bg-muted"
+                )}
+              >
+                <span>{reaction.emoji}</span>
+                <span className="font-medium">{reaction.count}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Element Component
+// ============================================================================
+
+/**
+ * WakaCommentThreadBlock - A Plate.js block for inline threaded comments,
+ * similar to Google Docs commenting. Shows the quoted text that was commented on,
+ * a thread of replies, and allows adding new replies.
+ *
+ * Designed to integrate with `@platejs/comments` or work standalone.
+ *
+ * Register in Plate editor:
+ * ```ts
+ * components: {
+ *   [COMMENT_THREAD_BLOCK_TYPE]: (props) => (
+ *     <WakaCommentThreadBlock {...props} currentUserId="user-123" onReply={handleReply} />
+ *   ),
+ * }
+ * ```
+ */
+export function WakaCommentThreadBlock({
+  attributes,
+  children,
+  element,
+  className,
+  currentUserId,
+  onReply,
+  onResolve,
+  onReopen,
+}: WakaCommentThreadBlockProps) {
+  const el = element as CommentThreadElement | undefined
+  const threadId = el?.threadId || ""
+  const quotedText = el?.quotedText || ""
+  const status = el?.status || "open"
+  const comments = el?.comments || []
+  const totalComments = el?.totalComments ?? comments.length
+
+  const [replyText, setReplyText] = React.useState("")
+  const [isCollapsed, setIsCollapsed] = React.useState(status === "resolved")
+
+  const statusConfig = {
+    open: { label: "Open", color: "text-blue-600 dark:text-blue-400", bg: "bg-blue-50 dark:bg-blue-500/10" },
+    resolved: { label: "Resolved", color: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-50 dark:bg-emerald-500/10" },
+    archived: { label: "Archived", color: "text-muted-foreground", bg: "bg-muted" },
+  }
+
+  const handleSubmitReply = () => {
+    if (!replyText.trim() || !onReply) return
+    onReply(threadId, replyText.trim())
+    setReplyText("")
+  }
+
+  return (
+    <div
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "my-3 rounded-lg overflow-hidden border shadow-sm transition-all duration-200",
+        status === "resolved"
+          ? "border-emerald-200 dark:border-emerald-800/30"
+          : "border-primary/20",
+        className
+      )}
+    >
+      {/* Header */}
+      <div
+        className={cn(
+          "flex items-center justify-between px-3 py-2 cursor-pointer",
+          status === "resolved"
+            ? "bg-emerald-50/50 dark:bg-emerald-950/10"
+            : "bg-primary/5"
+        )}
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setIsCollapsed(!isCollapsed) }}
+        aria-expanded={!isCollapsed}
+      >
+        <div className="flex items-center gap-2">
+          {/* Comment icon */}
+          <svg
+            className={cn("h-4 w-4", status === "resolved" ? "text-emerald-500" : "text-primary")}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+          </svg>
+
+          {/* Status badge */}
+          <span className={cn(
+            "text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded",
+            statusConfig[status].bg,
+            statusConfig[status].color
+          )}>
+            {statusConfig[status].label}
+          </span>
+
+          {/* Comment count */}
+          <span className="text-[10px] text-muted-foreground">
+            {totalComments} comment{totalComments !== 1 ? "s" : ""}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Resolve/reopen button */}
+          {status === "open" && onResolve && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onResolve(threadId) }}
+              className="text-[10px] font-medium text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 transition-colors"
+            >
+              Resolve
+            </button>
+          )}
+          {status === "resolved" && onReopen && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onReopen(threadId) }}
+              className="text-[10px] font-medium text-primary hover:text-primary/80 transition-colors"
+            >
+              Reopen
+            </button>
+          )}
+
+          {/* Collapse arrow */}
+          <svg
+            className={cn("h-3.5 w-3.5 text-muted-foreground transition-transform", isCollapsed && "-rotate-90")}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
+
+      {!isCollapsed && (
+        <>
+          {/* Quoted text */}
+          {quotedText && (
+            <div className="mx-3 mt-3 mb-1 px-3 py-2 rounded bg-muted/50 border-l-2 border-primary/30">
+              <p className="text-xs text-muted-foreground italic leading-relaxed line-clamp-3">
+                "{quotedText}"
+              </p>
+            </div>
+          )}
+
+          {/* Comments */}
+          <div className="py-1">
+            {comments.map((comment, i) => (
+              <CommentItem
+                key={comment.id}
+                comment={comment}
+                isCurrentUser={comment.author.id === currentUserId}
+                isFirst={i === 0}
+              />
+            ))}
+          </div>
+
+          {/* Reply input */}
+          {status === "open" && onReply && (
+            <div className="px-3 pb-3 pt-1 border-t border-border/30">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={replyText}
+                  onChange={(e) => setReplyText(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSubmitReply() } }}
+                  placeholder="Reply..."
+                  className={cn(
+                    "flex-1 px-3 py-1.5 rounded-md text-xs bg-muted/50 border border-border/50",
+                    "focus:outline-none focus:ring-1 focus:ring-ring",
+                    "placeholder:text-muted-foreground/50"
+                  )}
+                />
+                <button
+                  type="button"
+                  onClick={handleSubmitReply}
+                  disabled={!replyText.trim()}
+                  className={cn(
+                    "px-3 py-1.5 rounded-md text-xs font-medium transition-colors",
+                    "bg-primary text-primary-foreground hover:bg-primary/90",
+                    "disabled:opacity-40 disabled:cursor-not-allowed"
+                  )}
+                >
+                  Reply
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Hidden Slate children */}
+      <div className="hidden">{children}</div>
+    </div>
+  )
+}
+
+WakaCommentThreadBlock.displayName = "WakaCommentThreadBlock"
+
+// ============================================================================
+// Node Factory
+// ============================================================================
+
+export function createCommentThreadNodes(options?: {
+  threadId?: string
+  quotedText?: string
+  initialComment?: { authorId: string; authorName: string; content: string }
+}): CommentThreadElement[] {
+  const now = new Date().toISOString()
+  return [
+    {
+      type: COMMENT_THREAD_BLOCK_TYPE,
+      threadId: options?.threadId || `thread-${Date.now()}`,
+      quotedText: options?.quotedText || "",
+      status: "open",
+      comments: options?.initialComment
+        ? [
+            {
+              id: `comment-${Date.now()}`,
+              author: {
+                id: options.initialComment.authorId,
+                name: options.initialComment.authorName,
+              },
+              content: options.initialComment.content,
+              createdAt: now,
+            },
+          ]
+        : [],
+      children: [{ text: "" }],
+    },
+  ]
+}
+
+export async function createCommentThreadPlugin(
+  currentUserId?: string,
+  onReply?: (threadId: string, content: string) => void,
+  onResolve?: (threadId: string) => void,
+) {
+  try {
+    const { createPlatePlugin } = await import("platejs/react")
+    return createPlatePlugin({
+      key: COMMENT_THREAD_BLOCK_TYPE,
+      node: {
+        isElement: true,
+        isVoid: true,
+        type: COMMENT_THREAD_BLOCK_TYPE,
+        component: (props: WakaCommentThreadBlockProps) => (
+          <WakaCommentThreadBlock
+            {...props}
+            currentUserId={currentUserId}
+            onReply={onReply}
+            onResolve={onResolve}
+          />
+        ),
+      },
+    })
+  } catch {
+    console.warn("[WakaCommentThreadBlock] platejs not installed")
+    return null
+  }
+}