|
'use client'; |
|
|
|
import { PropsWithChildren } from 'react'; |
|
import Link from 'next/link'; |
|
import { useParams, usePathname, useRouter } from 'next/navigation'; |
|
import { cn } from '@/lib/utils'; |
|
import { ChatEntity } from '@/lib/types'; |
|
import Image from 'next/image'; |
|
import clsx from 'clsx'; |
|
import Img from '../ui/Img'; |
|
import { format } from 'date-fns'; |
|
import { cleanInputMessage } from '@/lib/messageUtils'; |
|
|
|
|
|
type ChatCardProps = PropsWithChildren<{ |
|
chat: ChatEntity; |
|
}>; |
|
|
|
export const ChatCardLayout: React.FC< |
|
PropsWithChildren<{ link: string; classNames?: clsx.ClassValue }> |
|
> = ({ link, children, classNames }) => { |
|
return ( |
|
<Link |
|
className={cn( |
|
'p-2 m-2 bg-background max-h-[100px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer', |
|
classNames, |
|
)} |
|
href={link} |
|
> |
|
{children} |
|
</Link> |
|
); |
|
}; |
|
|
|
const ChatCard: React.FC<ChatCardProps> = ({ chat }) => { |
|
const { id: chatIdFromParam } = useParams(); |
|
const pathname = usePathname(); |
|
const { id, url, messages, user, updatedAt } = chat; |
|
const firstMessage = cleanInputMessage(messages?.[0]?.content ?? ''); |
|
const title = firstMessage |
|
? firstMessage.length > 50 |
|
? firstMessage.slice(0, 50) + '...' |
|
: firstMessage |
|
: '(No messages yet)'; |
|
return ( |
|
<ChatCardLayout |
|
link={`/chat/${id}`} |
|
classNames={chatIdFromParam === id && 'border-gray-500'} |
|
> |
|
<div className="overflow-hidden flex items-center size-full"> |
|
<Img src={url} alt={`chat-${id}-card-image`} className="w-1/4" /> |
|
<div className="flex items-start flex-col h-full ml-3 w-3/4"> |
|
<p className="text-sm mb-1">{title}</p> |
|
<p className="text-xs text-gray-500"> |
|
{updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'} |
|
</p> |
|
</div> |
|
</div> |
|
</ChatCardLayout> |
|
); |
|
}; |
|
|
|
export default ChatCard; |
|
|