87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import { type FC } from 'react'
|
|
import moment from 'moment-jalaali'
|
|
import { Paperclip2 } from 'iconsax-react'
|
|
import { getFileNameAndExtensionFromUrl } from '@/config/func'
|
|
import VoicePlayer from '@/components/VoicePlayer'
|
|
import type { AttachmentsType } from '../type/Types'
|
|
|
|
type Props = {
|
|
content: string
|
|
attachments?: AttachmentsType[]
|
|
senderName?: string
|
|
senderLabel?: string
|
|
createdAt?: string
|
|
isAdmin?: boolean
|
|
}
|
|
|
|
const TicketMessage: FC<Props> = ({
|
|
content,
|
|
attachments = [],
|
|
senderName,
|
|
senderLabel = 'پشتیبان',
|
|
createdAt,
|
|
isAdmin = false,
|
|
}) => {
|
|
const fileAttachments = attachments.filter((a) => a.type !== 'voice')
|
|
const voiceAttachments = attachments.filter((a) => a.type === 'voice')
|
|
|
|
const handleOpenLink = (url: string) => {
|
|
window.open(url, '_blank', 'noopener,noreferrer')
|
|
}
|
|
|
|
return (
|
|
<div className={isAdmin ? 'flex justify-end' : ''}>
|
|
<div
|
|
className={`bg-[#F5F7FC] rounded-3xl p-5 max-w-[min(100%,520px)] ${
|
|
isAdmin ? 'rounded-tl-none' : 'rounded-tr-none'
|
|
}`}
|
|
>
|
|
{isAdmin && senderName && (
|
|
<div className="flex gap-1 text-xs mb-2 text-[#8C90A3]">
|
|
<span className="font-medium text-black">{senderLabel}:</span>
|
|
<span>{senderName}</span>
|
|
</div>
|
|
)}
|
|
|
|
{content && (
|
|
<p className="text-sm text-black leading-7 whitespace-pre-wrap">{content}</p>
|
|
)}
|
|
|
|
{fileAttachments.length > 0 && (
|
|
<div className="flex gap-3 flex-wrap mt-3">
|
|
{fileAttachments.map((attach) => (
|
|
<button
|
|
key={attach.url}
|
|
type="button"
|
|
onClick={() => handleOpenLink(attach.url)}
|
|
className="flex cursor-pointer items-center gap-1.5 text-[#0047FF] hover:opacity-80 transition-opacity"
|
|
>
|
|
<Paperclip2 size={18} color="#0047FF" />
|
|
<span className="text-xs">
|
|
{getFileNameAndExtensionFromUrl(attach.url).fileName}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{voiceAttachments.length > 0 && (
|
|
<div className="mt-3 space-y-2">
|
|
{voiceAttachments.map((voice) => (
|
|
<VoicePlayer key={voice.url} url={voice.url} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{createdAt && (
|
|
<div className="mt-3 text-[11px] text-[#8C90A3] text-left" dir="ltr">
|
|
{moment(createdAt).format('jYYYY/jMM/jDD HH:mm')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TicketMessage
|