File size: 1,504 Bytes
00a912e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import { memo } from 'react'
import dayjs from 'dayjs'
import { motion } from 'motion/react'
import type { ChatMessage as ChatMessageType } from '@music-together/shared'
import { cn } from '@/lib/utils'
interface ChatMessageProps {
message: ChatMessageType
isOwnMessage: boolean
}
export const ChatMessage = memo(function ChatMessage({ message, isOwnMessage }: ChatMessageProps) {
if (message.type === 'system') {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="py-1.5 text-center text-xs text-muted-foreground/50"
>
{message.content}
</motion.div>
)
}
return (
<motion.div
initial={{ opacity: 0, y: 10, scale: 0.96 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
className={cn('flex flex-col gap-0.5 py-1.5', isOwnMessage ? 'items-end' : 'items-start')}
>
<div className="flex items-center gap-2">
<span className="text-xs font-medium text-muted-foreground">{message.nickname}</span>
<span className="text-xs text-muted-foreground/40">{dayjs(message.timestamp).format('HH:mm')}</span>
</div>
<div
className={cn(
'max-w-[80%] rounded-xl px-3 py-2 text-sm break-words',
isOwnMessage ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground',
)}
>
{message.content}
</div>
</motion.div>
)
})
|