chore: import upstream snapshot with attribution

surfsense_web/components/chat-comments/comment-thread/comment-thread.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { ChevronDown, ChevronRight, MessageCircleReply } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { CommentComposer } from "../comment-composer/comment-composer";
+import { CommentItem } from "../comment-item/comment-item";
+import type { CommentThreadProps } from "./types";
+
+export function CommentThread({
+	thread,
+	members,
+	membersLoading = false,
+	onCreateReply,
+	onEditComment,
+	onDeleteComment,
+	isSubmitting = false,
+}: CommentThreadProps) {
+	const [isRepliesExpanded, setIsRepliesExpanded] = useState(true);
+	const [isReplyComposerOpen, setIsReplyComposerOpen] = useState(false);
+	const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
+
+	const parentComment = {
+		id: thread.id,
+		content: thread.content,
+		contentRendered: thread.contentRendered,
+		author: thread.author,
+		createdAt: thread.createdAt,
+		updatedAt: thread.updatedAt,
+		isEdited: thread.isEdited,
+		canEdit: thread.canEdit,
+		canDelete: thread.canDelete,
+	};
+
+	const handleReply = () => {
+		setIsReplyComposerOpen(true);
+		setIsRepliesExpanded(true);
+	};
+
+	const handleReplySubmit = (content: string) => {
+		onCreateReply(thread.id, content);
+		setIsReplyComposerOpen(false);
+	};
+
+	const handleReplyCancel = () => {
+		setIsReplyComposerOpen(false);
+	};
+
+	const handleEditStart = (commentId: number) => {
+		setEditingCommentId(commentId);
+	};
+
+	const handleEditSubmit = (commentId: number, content: string) => {
+		onEditComment(commentId, content);
+		setEditingCommentId(null);
+	};
+
+	const handleEditCancel = () => {
+		setEditingCommentId(null);
+	};
+
+	const hasReplies = thread.replies.length > 0;
+	const showReplies = thread.replies.length === 1 || isRepliesExpanded;
+
+	return (
+		<div>
+			{/* Parent comment */}
+			<CommentItem
+				comment={parentComment}
+				onEdit={handleEditStart}
+				onEditSubmit={handleEditSubmit}
+				onEditCancel={handleEditCancel}
+				onDelete={onDeleteComment}
+				isEditing={editingCommentId === parentComment.id}
+				isSubmitting={isSubmitting}
+				members={members}
+				membersLoading={membersLoading}
+			/>
+
+			{/* Replies and actions - using flex layout with connector */}
+			{(hasReplies || isReplyComposerOpen) && (
+				<div className="flex">
+					{/* Connector column - vertical line */}
+					<div className="flex w-7 flex-col items-center">
+						<div className="w-px flex-1 bg-border" />
+					</div>
+
+					{/* Content column */}
+					<div className="min-w-0 flex-1 space-y-2 pb-1">
+						{/* Expand/collapse for multiple replies */}
+						{thread.replies.length > 1 && (
+							<Button
+								variant="ghost"
+								size="sm"
+								className="h-6 px-2 text-xs text-muted-foreground hover:text-accent-foreground"
+								onClick={() => setIsRepliesExpanded((prev) => !prev)}
+							>
+								{isRepliesExpanded ? (
+									<ChevronDown className="mr-1 size-3" />
+								) : (
+									<ChevronRight className="mr-1 size-3" />
+								)}
+								{thread.replies.length} replies
+							</Button>
+						)}
+
+						{/* Reply items */}
+						{showReplies && hasReplies && (
+							<div className="space-y-3 pt-2">
+								{thread.replies.map((reply) => (
+									<CommentItem
+										key={reply.id}
+										comment={reply}
+										isReply
+										onEdit={handleEditStart}
+										onEditSubmit={handleEditSubmit}
+										onEditCancel={handleEditCancel}
+										onDelete={onDeleteComment}
+										isEditing={editingCommentId === reply.id}
+										isSubmitting={isSubmitting}
+										members={members}
+										membersLoading={membersLoading}
+									/>
+								))}
+							</div>
+						)}
+
+						{/* Reply composer or button */}
+
+						{isReplyComposerOpen ? (
+							<div className="pt-3">
+								<CommentComposer
+									members={members}
+									membersLoading={membersLoading}
+									placeholder="Reply or @mention"
+									submitLabel="Reply"
+									isSubmitting={isSubmitting}
+									onSubmit={handleReplySubmit}
+									onCancel={handleReplyCancel}
+									autoFocus
+									compact
+								/>
+							</div>
+						) : (
+							<Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={handleReply}>
+								<MessageCircleReply className="mr-1 size-3" />
+								Reply
+							</Button>
+						)}
+					</div>
+				</div>
+			)}
+
+			{/* Reply button when no replies yet */}
+			{!hasReplies && !isReplyComposerOpen && (
+				<div className="ml-7 mt-1">
+					<Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={handleReply}>
+						<MessageCircleReply className="mr-1 size-3" />
+						Reply
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}

surfsense_web/components/chat-comments/comment-thread/types.ts

@@ -0,0 +1,27 @@
+import type { CommentData } from "../comment-item/types";
+import type { MemberOption } from "../member-mention-picker/types";
+
+export interface CommentThreadData {
+	id: number;
+	messageId: number;
+	content: string;
+	contentRendered: string;
+	author: CommentData["author"];
+	createdAt: string;
+	updatedAt: string;
+	isEdited: boolean;
+	canEdit: boolean;
+	canDelete: boolean;
+	replyCount: number;
+	replies: CommentData[];
+}
+
+export interface CommentThreadProps {
+	thread: CommentThreadData;
+	members: MemberOption[];
+	membersLoading?: boolean;
+	onCreateReply: (commentId: number, content: string) => void;
+	onEditComment: (commentId: number, content: string) => void;
+	onDeleteComment: (commentId: number) => void;
+	isSubmitting?: boolean;
+}