mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-08 20:25:19 +02:00
feat(web): add comment thread component
This commit is contained in:
CREDO23
parent
8a1e0fb013
commit
a287145361
3 changed files with 258 additions and 19 deletions
|
|
@ -4,6 +4,8 @@ import { useState } from "react";
|
|||
import { CommentComposer } from "@/components/chat-comments/comment-composer/comment-composer";
|
||||
import { CommentItem } from "@/components/chat-comments/comment-item/comment-item";
|
||||
import type { CommentData } from "@/components/chat-comments/comment-item/types";
|
||||
import { CommentThread } from "@/components/chat-comments/comment-thread/comment-thread";
|
||||
import type { CommentThreadData } from "@/components/chat-comments/comment-thread/types";
|
||||
import { MemberMentionPicker } from "@/components/chat-comments/member-mention-picker/member-mention-picker";
|
||||
import type { MemberOption } from "@/components/chat-comments/member-mention-picker/types";
|
||||
|
||||
|
|
@ -91,6 +93,97 @@ const fakeCommentsData: CommentData[] = [
|
|||
},
|
||||
];
|
||||
|
||||
const fakeThreadsData: CommentThreadData[] = [
|
||||
{
|
||||
id: 1,
|
||||
messageId: 101,
|
||||
content: "This is a great response! @Alice Smith can you review?",
|
||||
contentRendered: "This is a great response! @Alice Smith can you review?",
|
||||
author: {
|
||||
id: "550e8400-e29b-41d4-a716-446655440002",
|
||||
displayName: "Bob Johnson",
|
||||
email: "bob.johnson@example.com",
|
||||
avatarUrl: null,
|
||||
},
|
||||
createdAt: new Date(Date.now() - 3600000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 3600000).toISOString(),
|
||||
isEdited: false,
|
||||
canEdit: true,
|
||||
canDelete: true,
|
||||
replyCount: 2,
|
||||
replies: [
|
||||
{
|
||||
id: 2,
|
||||
content: "I checked this yesterday and it looks good.",
|
||||
contentRendered: "I checked this yesterday and it looks good.",
|
||||
author: {
|
||||
id: "550e8400-e29b-41d4-a716-446655440001",
|
||||
displayName: "Alice Smith",
|
||||
email: "alice@example.com",
|
||||
avatarUrl: null,
|
||||
},
|
||||
createdAt: new Date(Date.now() - 1800000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 1800000).toISOString(),
|
||||
isEdited: false,
|
||||
canEdit: false,
|
||||
canDelete: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: "Thanks @Alice Smith!",
|
||||
contentRendered: "Thanks @Alice Smith!",
|
||||
author: {
|
||||
id: "550e8400-e29b-41d4-a716-446655440002",
|
||||
displayName: "Bob Johnson",
|
||||
email: "bob.johnson@example.com",
|
||||
avatarUrl: null,
|
||||
},
|
||||
createdAt: new Date(Date.now() - 900000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 900000).toISOString(),
|
||||
isEdited: false,
|
||||
canEdit: true,
|
||||
canDelete: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
messageId: 101,
|
||||
content: "Can we also add some documentation for this feature?",
|
||||
contentRendered: "Can we also add some documentation for this feature?",
|
||||
author: {
|
||||
id: "550e8400-e29b-41d4-a716-446655440003",
|
||||
displayName: "Charlie Brown",
|
||||
email: "charlie@example.com",
|
||||
avatarUrl: null,
|
||||
},
|
||||
createdAt: new Date(Date.now() - 7200000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 7200000).toISOString(),
|
||||
isEdited: false,
|
||||
canEdit: false,
|
||||
canDelete: true,
|
||||
replyCount: 1,
|
||||
replies: [
|
||||
{
|
||||
id: 5,
|
||||
content: "Good idea @Charlie Brown, I'll create a ticket for that.",
|
||||
contentRendered: "Good idea @Charlie Brown, I'll create a ticket for that.",
|
||||
author: {
|
||||
id: "550e8400-e29b-41d4-a716-446655440002",
|
||||
displayName: "Bob Johnson",
|
||||
email: "bob.johnson@example.com",
|
||||
avatarUrl: null,
|
||||
},
|
||||
createdAt: new Date(Date.now() - 6000000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 6000000).toISOString(),
|
||||
isEdited: false,
|
||||
canEdit: true,
|
||||
canDelete: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ChatCommentsPreviewPage() {
|
||||
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
||||
const [selectedMember, setSelectedMember] = useState<MemberOption | null>(null);
|
||||
|
|
@ -133,31 +226,35 @@ export default function ChatCommentsPreviewPage() {
|
|||
)}
|
||||
</section>
|
||||
|
||||
{/* Comment Thread Section */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-xl font-semibold border-b pb-2">Comment Thread</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Two top-level comments with replies. Click Reply to open composer. Click the replies count to collapse/expand.
|
||||
</p>
|
||||
|
||||
<div className="max-w-lg space-y-6 rounded-lg border p-4">
|
||||
{fakeThreadsData.map((thread) => (
|
||||
<CommentThread
|
||||
key={thread.id}
|
||||
thread={thread}
|
||||
members={fakeMembersData}
|
||||
onCreateReply={(commentId, content) => alert(`Reply to ${commentId}: ${content}`)}
|
||||
onEditComment={(commentId) => alert(`Edit comment ${commentId}`)}
|
||||
onDeleteComment={(commentId) => alert(`Delete comment ${commentId}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Comment Item Section */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-xl font-semibold border-b pb-2">Comment Item</h2>
|
||||
<h2 className="text-xl font-semibold border-b pb-2">Comment Item (Standalone)</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Hover over comments to see the action menu. Mentions are highlighted.
|
||||
Individual comment components. Hover to see action menu.
|
||||
</p>
|
||||
|
||||
<div className="max-w-lg space-y-4 rounded-lg border p-4">
|
||||
{/* Comment with replies */}
|
||||
<div className="space-y-3">
|
||||
<CommentItem
|
||||
comment={fakeCommentsData[0]}
|
||||
onEdit={(id) => alert(`Edit comment ${id}`)}
|
||||
onDelete={(id) => alert(`Delete comment ${id}`)}
|
||||
onReply={(id) => alert(`Reply to comment ${id}`)}
|
||||
/>
|
||||
<CommentItem
|
||||
comment={fakeCommentsData[1]}
|
||||
isReply
|
||||
onEdit={(id) => alert(`Edit reply ${id}`)}
|
||||
onDelete={(id) => alert(`Delete reply ${id}`)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Standalone comment */}
|
||||
<CommentItem
|
||||
comment={fakeCommentsData[2]}
|
||||
onEdit={(id) => alert(`Edit comment ${id}`)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import type { MemberOption } from "../member-mention-picker/types";
|
||||
import type { CommentData } from "../comment-item/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;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue