feat(web): add comment thread component

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

@@ -0,0 +1,114 @@
+"use client";
+
+import { ChevronDown, ChevronRight, MessageSquare } 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 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);
+	};
+
+	return (
+		<div className="space-y-2">
+			<CommentItem
+				comment={parentComment}
+				onEdit={(id) => onEditComment(id, "")}
+				onDelete={onDeleteComment}
+			/>
+
+			<div className="ml-11 flex items-center gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-7 px-3 text-xs"
+					onClick={handleReply}
+				>
+					<MessageSquare className="mr-1.5 size-3" />
+					Reply
+				</Button>
+				{thread.replies.length > 1 && (
+					<Button
+						variant="ghost"
+						size="sm"
+						className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+						onClick={() => setIsRepliesExpanded(!isRepliesExpanded)}
+					>
+						{isRepliesExpanded ? (
+							<ChevronDown className="mr-1 size-3" />
+						) : (
+							<ChevronRight className="mr-1 size-3" />
+						)}
+						{thread.replies.length} replies
+					</Button>
+				)}
+			</div>
+
+			{thread.replies.length > 0 && (thread.replies.length === 1 || isRepliesExpanded) && (
+				<div className="ml-11 space-y-3">
+					{thread.replies.map((reply) => (
+						<CommentItem
+							key={reply.id}
+							comment={reply}
+							isReply
+							onEdit={(id) => onEditComment(id, "")}
+							onDelete={onDeleteComment}
+						/>
+					))}
+				</div>
+			)}
+
+			{isReplyComposerOpen && (
+				<div className="ml-11">
+					<CommentComposer
+						members={members}
+						membersLoading={membersLoading}
+						placeholder="Write a reply..."
+						submitLabel="Reply"
+						isSubmitting={isSubmitting}
+						onSubmit={handleReplySubmit}
+						onCancel={handleReplyCancel}
+						autoFocus
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+