up

2026-07-09 17:59:54 +03:30
parent 1e6504771a
commit f61a1db4a7
4 changed files with 391 additions and 219 deletions
@@ -0,0 +1,86 @@
+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