mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-01 11:56:25 +02:00
535 lines
16 KiB
TypeScript
535 lines
16 KiB
TypeScript
"use client";
|
|
|
|
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 { CommentPanel } from "@/components/chat-comments/comment-panel/comment-panel";
|
|
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";
|
|
|
|
const fakeMembersData: MemberOption[] = [
|
|
{
|
|
id: "550e8400-e29b-41d4-a716-446655440001",
|
|
displayName: "Alice Smith",
|
|
email: "alice@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
{
|
|
id: "550e8400-e29b-41d4-a716-446655440002",
|
|
displayName: "Bob Johnson",
|
|
email: "bob.johnson@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
{
|
|
id: "550e8400-e29b-41d4-a716-446655440003",
|
|
displayName: "Charlie Brown",
|
|
email: "charlie@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
{
|
|
id: "550e8400-e29b-41d4-a716-446655440004",
|
|
displayName: null,
|
|
email: "david.wilson@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
{
|
|
id: "550e8400-e29b-41d4-a716-446655440005",
|
|
displayName: "Emma Davis",
|
|
email: "emma@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
];
|
|
|
|
const fakeCommentsData: CommentData[] = [
|
|
{
|
|
id: 1,
|
|
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().toISOString(),
|
|
updatedAt: new Date().toISOString(),
|
|
isEdited: false,
|
|
canEdit: true,
|
|
canDelete: true,
|
|
},
|
|
{
|
|
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() - 86400000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 3600000).toISOString(),
|
|
isEdited: true,
|
|
canEdit: false,
|
|
canDelete: true,
|
|
},
|
|
{
|
|
id: 3,
|
|
content: "Thanks @Bob Johnson and @Alice Smith for the quick turnaround!",
|
|
contentRendered: "Thanks @Bob Johnson and @Alice Smith for the quick turnaround!",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440004",
|
|
displayName: null,
|
|
email: "david.wilson@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 3600000 * 3).toISOString(),
|
|
updatedAt: new Date(Date.now() - 3600000 * 3).toISOString(),
|
|
isEdited: false,
|
|
canEdit: true,
|
|
canDelete: false,
|
|
},
|
|
];
|
|
|
|
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,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 6,
|
|
messageId: 101,
|
|
content: "I think we should also consider edge cases here. What happens if the input is empty?",
|
|
contentRendered: "I think we should also consider edge cases here. What happens if the input is empty?",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440001",
|
|
displayName: "Alice Smith",
|
|
email: "alice@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 10800000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 10800000).toISOString(),
|
|
isEdited: false,
|
|
canEdit: false,
|
|
canDelete: true,
|
|
replyCount: 3,
|
|
replies: [
|
|
{
|
|
id: 7,
|
|
content: "Good point! We should add validation.",
|
|
contentRendered: "Good point! We should add validation.",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440002",
|
|
displayName: "Bob Johnson",
|
|
email: "bob.johnson@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 10000000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 10000000).toISOString(),
|
|
isEdited: false,
|
|
canEdit: true,
|
|
canDelete: true,
|
|
},
|
|
{
|
|
id: 8,
|
|
content: "I'll handle the validation logic @Alice Smith",
|
|
contentRendered: "I'll handle the validation logic @Alice Smith",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440003",
|
|
displayName: "Charlie Brown",
|
|
email: "charlie@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 9500000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 9500000).toISOString(),
|
|
isEdited: false,
|
|
canEdit: false,
|
|
canDelete: true,
|
|
},
|
|
{
|
|
id: 9,
|
|
content: "Thanks @Charlie Brown!",
|
|
contentRendered: "Thanks @Charlie Brown!",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440001",
|
|
displayName: "Alice Smith",
|
|
email: "alice@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 9000000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 9000000).toISOString(),
|
|
isEdited: false,
|
|
canEdit: false,
|
|
canDelete: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 10,
|
|
messageId: 101,
|
|
content: "The performance looks great in the benchmarks. Nice work everyone!",
|
|
contentRendered: "The performance looks great in the benchmarks. Nice work everyone!",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440005",
|
|
displayName: "Emma Davis",
|
|
email: "emma@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 14400000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 14400000).toISOString(),
|
|
isEdited: false,
|
|
canEdit: false,
|
|
canDelete: true,
|
|
replyCount: 0,
|
|
replies: [],
|
|
},
|
|
{
|
|
id: 11,
|
|
messageId: 101,
|
|
content: "Should we schedule a review meeting for this?",
|
|
contentRendered: "Should we schedule a review meeting for this?",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440004",
|
|
displayName: null,
|
|
email: "david.wilson@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 18000000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 18000000).toISOString(),
|
|
isEdited: true,
|
|
canEdit: true,
|
|
canDelete: true,
|
|
replyCount: 2,
|
|
replies: [
|
|
{
|
|
id: 12,
|
|
content: "Yes, let's do it tomorrow at 10am",
|
|
contentRendered: "Yes, let's do it tomorrow at 10am",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440002",
|
|
displayName: "Bob Johnson",
|
|
email: "bob.johnson@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 17000000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 17000000).toISOString(),
|
|
isEdited: false,
|
|
canEdit: true,
|
|
canDelete: true,
|
|
},
|
|
{
|
|
id: 13,
|
|
content: "Works for me!",
|
|
contentRendered: "Works for me!",
|
|
author: {
|
|
id: "550e8400-e29b-41d4-a716-446655440005",
|
|
displayName: "Emma Davis",
|
|
email: "emma@example.com",
|
|
avatarUrl: null,
|
|
},
|
|
createdAt: new Date(Date.now() - 16000000).toISOString(),
|
|
updatedAt: new Date(Date.now() - 16000000).toISOString(),
|
|
isEdited: false,
|
|
canEdit: false,
|
|
canDelete: true,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function ChatCommentsPreviewPage() {
|
|
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
|
const [selectedMember, setSelectedMember] = useState<MemberOption | null>(null);
|
|
const [submittedContent, setSubmittedContent] = useState<string | null>(null);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background p-8">
|
|
<div className="mx-auto max-w-4xl space-y-12">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Chat Comments UI Preview</h1>
|
|
<p className="text-muted-foreground">
|
|
Preview page for chat comments components with fake data
|
|
</p>
|
|
</div>
|
|
|
|
{/* Comment Composer Section */}
|
|
<section className="space-y-4">
|
|
<h2 className="text-xl font-semibold border-b pb-2">Comment Composer</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Type @ to trigger mention picker. Use Tab/Shift+Tab/Arrow keys to navigate, Enter to
|
|
select.
|
|
</p>
|
|
|
|
<div className="max-w-md rounded-lg border p-4">
|
|
<CommentComposer
|
|
members={fakeMembersData}
|
|
placeholder="Write a comment... (try typing @)"
|
|
onSubmit={(content) => setSubmittedContent(content)}
|
|
onCancel={() => setSubmittedContent(null)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{submittedContent && (
|
|
<div className="max-w-md rounded-md bg-muted p-3 text-sm">
|
|
<span className="font-medium">Submitted content: </span>
|
|
<code className="block mt-1 rounded bg-background p-2 whitespace-pre-wrap">
|
|
{submittedContent}
|
|
</code>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Comment Panel Section */}
|
|
<section className="space-y-4">
|
|
<h2 className="text-xl font-semibold border-b pb-2">Comment Panel</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Full panel with scrollable threads and composer. Shows alongside AI responses.
|
|
</p>
|
|
|
|
<div className="flex gap-8">
|
|
<div className="space-y-2">
|
|
<h3 className="text-sm font-medium">With comments</h3>
|
|
<CommentPanel
|
|
messageId={101}
|
|
threads={fakeThreadsData}
|
|
members={fakeMembersData}
|
|
onCreateComment={(content) => alert(`Create: ${content}`)}
|
|
onCreateReply={(id, content) => alert(`Reply ${id}: ${content}`)}
|
|
onEditComment={(id) => alert(`Edit ${id}`)}
|
|
onDeleteComment={(id) => alert(`Delete ${id}`)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h3 className="text-sm font-medium">Empty state</h3>
|
|
<CommentPanel
|
|
messageId={102}
|
|
threads={[]}
|
|
members={fakeMembersData}
|
|
onCreateComment={(content) => alert(`Create: ${content}`)}
|
|
onCreateReply={(id, content) => alert(`Reply ${id}: ${content}`)}
|
|
onEditComment={(id) => alert(`Edit ${id}`)}
|
|
onDeleteComment={(id) => alert(`Delete ${id}`)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h3 className="text-sm font-medium">Loading</h3>
|
|
<CommentPanel
|
|
messageId={103}
|
|
threads={[]}
|
|
members={[]}
|
|
isLoading
|
|
onCreateComment={() => {}}
|
|
onCreateReply={() => {}}
|
|
onEditComment={() => {}}
|
|
onDeleteComment={() => {}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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 (Standalone)</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Individual comment components. Hover to see action menu.
|
|
</p>
|
|
|
|
<div className="max-w-lg space-y-4 rounded-lg border p-4">
|
|
<CommentItem
|
|
comment={fakeCommentsData[2]}
|
|
onEdit={(id) => alert(`Edit comment ${id}`)}
|
|
onDelete={(id) => alert(`Delete comment ${id}`)}
|
|
onReply={(id) => alert(`Reply to comment ${id}`)}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Member Mention Picker Section */}
|
|
<section className="space-y-4">
|
|
<h2 className="text-xl font-semibold border-b pb-2">
|
|
Member Mention Picker (Standalone)
|
|
</h2>
|
|
|
|
<div className="grid gap-8 md:grid-cols-2">
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-medium">After typing @</h3>
|
|
<p className="text-sm text-muted-foreground">Shows all members</p>
|
|
<div className="w-72 rounded-lg border bg-popover shadow-lg">
|
|
<MemberMentionPicker
|
|
members={fakeMembersData}
|
|
query=""
|
|
highlightedIndex={highlightedIndex}
|
|
onSelect={(member) => setSelectedMember(member)}
|
|
onHighlightChange={setHighlightedIndex}
|
|
/>
|
|
</div>
|
|
{selectedMember && (
|
|
<div className="rounded-md bg-muted p-3 text-sm">
|
|
<span className="font-medium">Selected: </span>
|
|
<code className="rounded bg-background px-1">
|
|
@[{selectedMember.id.slice(0, 8)}...]
|
|
</code>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-medium">After typing @ali</h3>
|
|
<p className="text-sm text-muted-foreground">Filtered to matching members</p>
|
|
<div className="w-72 rounded-lg border bg-popover shadow-lg">
|
|
<MemberMentionPicker
|
|
members={fakeMembersData}
|
|
query="ali"
|
|
highlightedIndex={0}
|
|
onSelect={() => {}}
|
|
onHighlightChange={() => {}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-medium">Loading State</h3>
|
|
<p className="text-sm text-muted-foreground">While fetching members</p>
|
|
<div className="w-72 rounded-lg border bg-popover shadow-lg">
|
|
<MemberMentionPicker
|
|
members={[]}
|
|
query=""
|
|
highlightedIndex={0}
|
|
isLoading={true}
|
|
onSelect={() => {}}
|
|
onHighlightChange={() => {}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-medium">No Results</h3>
|
|
<p className="text-sm text-muted-foreground">After typing @xyz (no match)</p>
|
|
<div className="w-72 rounded-lg border bg-popover shadow-lg">
|
|
<MemberMentionPicker
|
|
members={fakeMembersData}
|
|
query="xyz"
|
|
highlightedIndex={0}
|
|
onSelect={() => {}}
|
|
onHighlightChange={() => {}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|