mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-08 20:25:19 +02:00
feat(web): add member mention picker component
This commit is contained in:
CREDO23
parent
a353fce379
commit
62a45e204e
5 changed files with 260 additions and 0 deletions
127
surfsense_web/app/preview/chat-comments/page.tsx
Normal file
127
surfsense_web/app/preview/chat-comments/page.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { MemberMentionPicker } from "@/components/chat-comments/member-mention-picker";
|
||||
import type { MemberOption } from "@/components/chat-comments/member-mention-picker";
|
||||
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
export default function ChatCommentsPreviewPage() {
|
||||
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
||||
const [selectedMember, setSelectedMember] = useState<MemberOption | null>(null);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-8">
|
||||
<div className="mx-auto max-w-4xl space-y-8">
|
||||
<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>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold">After typing @</h2>
|
||||
<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>
|
||||
<span className="text-muted-foreground">
|
||||
{" → @"}
|
||||
{selectedMember.displayName || selectedMember.email}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold">After typing @ali</h2>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold">Loading State</h2>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold">No Results</h2>
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export { MemberMentionPicker } from "./member-mention-picker";
|
||||
export { MemberMentionItem } from "./member-mention-item";
|
||||
export type { MemberOption, MemberMentionPickerProps, MemberMentionItemProps } from "./types";
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
"use client";
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { MemberMentionItemProps } from "./types";
|
||||
|
||||
function getInitials(name: string, email: string): string {
|
||||
if (name) {
|
||||
return name
|
||||
.split(" ")
|
||||
.map((part) => part[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
.slice(0, 2);
|
||||
}
|
||||
return email[0].toUpperCase();
|
||||
}
|
||||
|
||||
export function MemberMentionItem({
|
||||
member,
|
||||
isHighlighted,
|
||||
onSelect,
|
||||
onMouseEnter,
|
||||
}: MemberMentionItemProps) {
|
||||
const displayName = member.displayName || member.email.split("@")[0];
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 px-3 py-2 text-left transition-colors",
|
||||
isHighlighted ? "bg-accent" : "hover:bg-accent/50"
|
||||
)}
|
||||
onClick={() => onSelect(member)}
|
||||
onMouseEnter={onMouseEnter}
|
||||
>
|
||||
<Avatar className="size-7">
|
||||
{member.avatarUrl && <AvatarImage src={member.avatarUrl} alt={displayName} />}
|
||||
<AvatarFallback className="text-xs">
|
||||
{getInitials(member.displayName, member.email)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate text-sm font-medium">{displayName}</span>
|
||||
<span className="truncate text-xs text-muted-foreground">{member.email}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
"use client";
|
||||
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { MemberMentionItem } from "./member-mention-item";
|
||||
import type { MemberMentionPickerProps } from "./types";
|
||||
|
||||
export function MemberMentionPicker({
|
||||
members,
|
||||
query,
|
||||
highlightedIndex,
|
||||
isLoading = false,
|
||||
onSelect,
|
||||
onHighlightChange,
|
||||
}: MemberMentionPickerProps) {
|
||||
const filteredMembers = query
|
||||
? members.filter(
|
||||
(member) =>
|
||||
member.displayName?.toLowerCase().includes(query.toLowerCase()) ||
|
||||
member.email.toLowerCase().includes(query.toLowerCase())
|
||||
)
|
||||
: members;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-6">
|
||||
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (filteredMembers.length === 0) {
|
||||
return (
|
||||
<div className="px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
{query ? "No members found" : "No members available"}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollArea className="max-h-64">
|
||||
<div className="py-1">
|
||||
{filteredMembers.map((member, index) => (
|
||||
<MemberMentionItem
|
||||
key={member.id}
|
||||
member={member}
|
||||
isHighlighted={index === highlightedIndex}
|
||||
onSelect={onSelect}
|
||||
onMouseEnter={() => onHighlightChange(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
export interface MemberOption {
|
||||
id: string;
|
||||
displayName: string;
|
||||
email: string;
|
||||
avatarUrl?: string | null;
|
||||
}
|
||||
|
||||
export interface MemberMentionPickerProps {
|
||||
members: MemberOption[];
|
||||
query: string;
|
||||
highlightedIndex: number;
|
||||
isLoading?: boolean;
|
||||
onSelect: (member: MemberOption) => void;
|
||||
onHighlightChange: (index: number) => void;
|
||||
}
|
||||
|
||||
export interface MemberMentionItemProps {
|
||||
member: MemberOption;
|
||||
isHighlighted: boolean;
|
||||
onSelect: (member: MemberOption) => void;
|
||||
onMouseEnter: () => void;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue