mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-10 16:22:38 +02:00
feat: enhance user association by integrating member data into public chat and image model managers
This commit is contained in:
Anish Sarkar
parent
4b60068e8b
commit
a33a2161aa
10 changed files with 412 additions and 256 deletions
|
|
@ -1,15 +1,28 @@
|
|||
"use client";
|
||||
|
||||
import { Copy, MessageSquare, Trash2 } from "lucide-react";
|
||||
import { Copy, ExternalLink, MessageSquare, Trash2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import type { PublicChatSnapshotDetail } from "@/contracts/types/chat-threads.types";
|
||||
|
||||
function getInitials(name: string): string {
|
||||
const parts = name.trim().split(/\s+/);
|
||||
if (parts.length >= 2) {
|
||||
return (parts[0][0] + parts[1][0]).toUpperCase();
|
||||
}
|
||||
return name.slice(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
interface PublicChatSnapshotRowProps {
|
||||
snapshot: PublicChatSnapshotDetail;
|
||||
canDelete: boolean;
|
||||
onCopy: (snapshot: PublicChatSnapshotDetail) => void;
|
||||
onDelete: (snapshot: PublicChatSnapshotDetail) => void;
|
||||
isDeleting?: boolean;
|
||||
memberMap: Map<string, { name: string; email?: string; avatarUrl?: string }>;
|
||||
}
|
||||
|
||||
export function PublicChatSnapshotRow({
|
||||
|
|
@ -18,6 +31,7 @@ export function PublicChatSnapshotRow({
|
|||
onCopy,
|
||||
onDelete,
|
||||
isDeleting = false,
|
||||
memberMap,
|
||||
}: PublicChatSnapshotRowProps) {
|
||||
const formattedDate = new Date(snapshot.created_at).toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
|
|
@ -25,50 +39,127 @@ export function PublicChatSnapshotRow({
|
|||
day: "numeric",
|
||||
});
|
||||
|
||||
const member = snapshot.created_by_user_id
|
||||
? memberMap.get(snapshot.created_by_user_id)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between py-3 px-4 border-b last:border-b-0 hover:bg-muted/50 transition-colors">
|
||||
<div className="flex-1 min-w-0 mr-4">
|
||||
<h4 className="text-sm font-medium truncate" title={snapshot.thread_title}>
|
||||
{snapshot.thread_title}
|
||||
</h4>
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
||||
<span>{formattedDate}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
{snapshot.message_count}
|
||||
</span>
|
||||
<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
|
||||
<CardContent className="p-4 flex flex-col gap-3 h-full">
|
||||
{/* Header: Title + Actions */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4
|
||||
className="text-sm font-semibold tracking-tight truncate"
|
||||
title={snapshot.thread_title}
|
||||
>
|
||||
{snapshot.thread_title}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onCopy(snapshot)}
|
||||
className="h-7 w-7 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Copy link</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<a
|
||||
href={snapshot.public_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Open link</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
{canDelete && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDelete(snapshot)}
|
||||
disabled={isDeleting}
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Delete</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={snapshot.public_url}
|
||||
className="mt-2 w-full text-xs text-muted-foreground bg-muted/50 border rounded px-2 py-1 select-all focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
onClick={(e) => (e.target as HTMLInputElement).select()}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onCopy(snapshot)}
|
||||
className="h-8 px-2"
|
||||
title="Copy link"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
{canDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onDelete(snapshot)}
|
||||
disabled={isDeleting}
|
||||
className="h-8 px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
title="Delete link"
|
||||
|
||||
{/* Message count badge */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] px-1.5 py-0.5 border-muted-foreground/20 text-muted-foreground"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<MessageSquare className="h-2.5 w-2.5 mr-1" />
|
||||
{snapshot.message_count} messages
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Footer: Date + Creator */}
|
||||
<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
|
||||
<span className="text-[11px] text-muted-foreground/60">
|
||||
{formattedDate}
|
||||
</span>
|
||||
{member && (
|
||||
<>
|
||||
<span className="text-muted-foreground/30">·</span>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center gap-1.5 cursor-default">
|
||||
{member.avatarUrl ? (
|
||||
<Image
|
||||
src={member.avatarUrl}
|
||||
alt={member.name}
|
||||
width={18}
|
||||
height={18}
|
||||
className="h-4.5 w-4.5 rounded-full object-cover shrink-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-4.5 w-4.5 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/5 shrink-0">
|
||||
<span className="text-[9px] font-semibold text-primary">
|
||||
{getInitials(member.name)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-[11px] text-muted-foreground/60 truncate max-w-[80px]">
|
||||
{member.name}
|
||||
</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
{member.email || member.name}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue