reusable chat

src/pages/chat/components/ChatMessage.tsx

@@ -5,11 +5,11 @@ import { getFileNameAndExtensionFromUrl } from '@/config/func'
 import { getPresignedUrl } from '@/pages/uploader/service/UploaderService'
 import VoicePlayer from '@/components/VoicePlayer'
 import UserAvatar from '@/components/UserAvatar'
-import type { AttachmentsType } from '@/pages/order/types/Types'
+import type { ChatAttachmentType } from '../type/Types'
 
 type Props = {
     content: string
-    attachments?: AttachmentsType[]
+    attachments?: ChatAttachmentType[]
     senderName?: string
     senderLabel?: string
     createdAt?: string
@@ -19,7 +19,7 @@ type Props = {
     lastName?: string | null
 }
 
-const TicketMessage: FC<Props> = ({
+const ChatMessage: FC<Props> = ({
     content,
     attachments = [],
     senderName,
@@ -61,7 +61,9 @@ const TicketMessage: FC<Props> = ({
                 </div>
 
                 {content && (
-                    <p className="text-sm text-black leading-7 whitespace-pre-wrap">{content}</p>
+                    <p className="text-sm text-black leading-7 whitespace-pre-wrap">
+                        {content}
+                    </p>
                 )}
 
                 {fileAttachments.length > 0 && (
@@ -75,7 +77,11 @@ const TicketMessage: FC<Props> = ({
                             >
                                 <Paperclip2 size={18} color="#0047FF" />
                                 <span className="text-xs">
-                                    {getFileNameAndExtensionFromUrl(attach.url).fileName}
+                                    {
+                                        getFileNameAndExtensionFromUrl(
+                                            attach.url,
+                                        ).fileName
+                                    }
                                 </span>
                             </button>
                         ))}
@@ -91,7 +97,10 @@ const TicketMessage: FC<Props> = ({
                 )}
 
                 {createdAt && (
-                    <div className="mt-3 text-[11px] text-[#8C90A3] text-left" dir="ltr">
+                    <div
+                        className="mt-3 text-[11px] text-[#8C90A3] text-left"
+                        dir="ltr"
+                    >
                         {moment(createdAt).format('jYYYY/jMM/jDD HH:mm')}
                     </div>
                 )}
@@ -101,4 +110,4 @@ const TicketMessage: FC<Props> = ({
     )
 }
 
-export default TicketMessage
+export default ChatMessage

src/pages/chat/components/ChatSection.tsx

@@ -5,23 +5,48 @@ import { Microphone, Play, Pause } from 'iconsax-react'
 import { useState, type FC } from 'react'
 import { useVoiceRecorder } from '@/hooks/useVoiceRecorder'
 import { useMultiUpload, useSingleUpload } from '@/pages/uploader/hooks/useUploader'
-import type { AddTicketType } from '@/pages/order/types/Types'
+import type { AddChatMessageType } from '../type/Types'
-import { useAddTicket, useGetTickets } from '@/pages/order/hooks/useOrderData'
+import { getChatSenderName } from '../type/Types'
-import { useParams } from 'react-router-dom'
+import { useAddChatMessage, useGetChatMessages } from '../hooks/useChatData'
 import { toast } from '@/shared/toast'
 import { extractErrorMessage } from '@/config/func'
-import TicketMessage from './TicketMessage'
+import ChatMessage from './ChatMessage'
 
-type Props = {
+export type ChatSectionProps = {
+    refId: string
+    title?: string
+    description?: string
+    /** Label for admin / support / designer side */
+    senderLabel?: string
+    /** Label for customer / user side */
+    userLabel?: string
+    /** Optional fallback when message.user has no name */
     customerName?: string
+    submitLabel?: string
+    uploadLabel?: string
+    showRefresh?: boolean
 }
 
-const TicketSection: FC<Props> = ({ customerName }) => {
+const ChatSection: FC<ChatSectionProps> = ({
-    const { id } = useParams()
+    refId,
+    title = 'گفتگو',
+    description,
+    senderLabel = 'پشتیبان',
+    userLabel = 'مشتری',
+    customerName,
+    submitLabel = 'ارسال پیام',
+    uploadLabel = 'فایل‌های ضمیمه',
+    showRefresh = true,
+}) => {
     const [message, setMessage] = useState('')
     const [files, setFiles] = useState<File[]>([])
-    const addTicket = useAddTicket()
+    const addMessage = useAddChatMessage()
-    const { data, refetch, isFetching, isPending: isLoadingTickets } = useGetTickets(id!)
+    const {
+        data,
+        refetch,
+        isFetching,
+        isPending: isLoadingMessages,
+    } = useGetChatMessages(refId)
     const singleUpload = useSingleUpload()
     const multiUpload = useMultiUpload()
 
@@ -38,9 +63,9 @@ const TicketSection: FC<Props> = ({ customerName }) => {
         resetRecorder,
     } = useVoiceRecorder()
 
-    const tickets = data?.data ?? []
+    const messages = data?.data ?? []
     const isSubmitting =
-        singleUpload.isPending || multiUpload.isPending || addTicket.isPending
+        singleUpload.isPending || multiUpload.isPending || addMessage.isPending
 
     const handleSubmit = async () => {
         if (!message.trim() && !audioFile && files.length === 0) {
@@ -48,7 +73,7 @@ const TicketSection: FC<Props> = ({ customerName }) => {
             return
         }
 
-        const params: AddTicketType = {
+        const params: AddChatMessageType = {
             attachments: [],
             content: message.trim(),
         }
@@ -71,8 +96,8 @@ const TicketSection: FC<Props> = ({ customerName }) => {
             })
         }
 
-        addTicket.mutate(
+        addMessage.mutate(
-            { orderId: id!, params },
+            { refId, params },
             {
                 onSuccess: () => {
                     toast('پیام شما با موفقیت ارسال شد')
@@ -84,7 +109,7 @@ const TicketSection: FC<Props> = ({ customerName }) => {
                 onError: (error) => {
                     toast(extractErrorMessage(error), 'error')
                 },
-            }
+            },
         )
     }
 
@@ -92,45 +117,53 @@ const TicketSection: FC<Props> = ({ customerName }) => {
         <div className="overflow-hidden rounded-2xl bg-white">
             <div className="flex items-center justify-between border-b border-[#EBEDF5] px-6 py-4 md:px-8">
                 <div>
-                    <h2 className="text-sm text-black">گفتگو با مشتری</h2>
+                    <h2 className="text-sm text-black">{title}</h2>
-                    <p className="mt-1 text-xs text-[#8C90A3]">
+                    {description && (
-                        پیام‌ها و فایل‌های مرتبط با درخواست
+                        <p className="mt-1 text-xs text-[#8C90A3]">
-                    </p>
+                            {description}
+                        </p>
+                    )}
                 </div>
-                <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
+                {showRefresh && (
+                    <RefreshButton
+                        onClick={() => refetch()}
+                        isLoading={isFetching}
+                    />
+                )}
             </div>
 
             <div className="p-6 md:p-8">
                 <div className="space-y-4 min-h-[80px]">
-                    {isLoadingTickets && tickets.length === 0 && (
+                    {isLoadingMessages && messages.length === 0 && (
-                        <p className="text-xs text-[#8C90A3]">در حال بارگذاری پیام‌ها...</p>
+                        <p className="text-xs text-[#8C90A3]">
+                            در حال بارگذاری پیام‌ها...
+                        </p>
                     )}
 
-                    {!isLoadingTickets && tickets.length === 0 && (
+                    {!isLoadingMessages && messages.length === 0 && (
                         <div className="rounded-xl bg-[#F5F7FC] px-4 py-6 text-center">
-                            <p className="text-sm text-[#8C90A3]">هنوز پیامی ثبت نشده است.</p>
+                            <p className="text-sm text-[#8C90A3]">
+                                هنوز پیامی ثبت نشده است.
+                            </p>
                             <p className="text-xs text-[#8C90A3] mt-1">
                                 اولین پیام را در فرم زیر ارسال کنید.
                             </p>
                         </div>
                     )}
 
-                    {tickets.map((item) => {
+                    {messages.map((item) => {
                         if (item.user) {
                             return (
-                                <TicketMessage
+                                <ChatMessage
                                     key={item.id}
                                     content={item.content}
                                     attachments={item.attachments}
                                     createdAt={item.createdAt}
-                                    senderLabel="مشتری"
+                                    senderLabel={userLabel}
-                                    senderName={
+                                    senderName={getChatSenderName(
-                                        customerName ||
+                                        item.user,
-                                        [item.user.firstName, item.user.lastName]
+                                        customerName,
-                                            .filter(Boolean)
+                                    )}
-                                            .join(' ') ||
-                                        item.user.phone
-                                    }
                                     avatarUrl={item.user.avatarUrl}
                                     firstName={item.user.firstName}
                                     lastName={item.user.lastName}
@@ -140,14 +173,14 @@ const TicketSection: FC<Props> = ({ customerName }) => {
 
                         if (item.admin) {
                             return (
-                                <TicketMessage
+                                <ChatMessage
                                     key={item.id}
                                     content={item.content}
                                     attachments={item.attachments}
                                     createdAt={item.createdAt}
                                     isAdmin
-                                    senderLabel="پشتیبان"
+                                    senderLabel={senderLabel}
-                                    senderName={`${item.admin.firstName} ${item.admin.lastName}`}
+                                    senderName={getChatSenderName(item.admin)}
                                     avatarUrl={item.admin.avatarUrl}
                                     firstName={item.admin.firstName}
                                     lastName={item.admin.lastName}
@@ -172,9 +205,13 @@ const TicketSection: FC<Props> = ({ customerName }) => {
 
                         <button
                             type="button"
-                            onClick={isRecording ? stopRecording : startRecording}
+                            onClick={
+                                isRecording ? stopRecording : startRecording
+                            }
                             className="absolute left-4 bottom-4 bg-[#FFF1D7] size-8 rounded-lg flex items-center justify-center hover:opacity-90 transition-opacity"
-                            aria-label={isRecording ? 'توقف ضبط' : 'ضبط صدا'}
+                            aria-label={
+                                isRecording ? 'توقف ضبط' : 'ضبط صدا'
+                            }
                         >
                             <Microphone
                                 size={20}
@@ -193,9 +230,17 @@ const TicketSection: FC<Props> = ({ customerName }) => {
                                 aria-label={isPlaying ? 'توقف' : 'پخش'}
                             >
                                 {isPlaying ? (
-                                    <Pause size={16} color="#fff" variant="Bold" />
+                                    <Pause
+                                        size={16}
+                                        color="#fff"
+                                        variant="Bold"
+                                    />
                                 ) : (
-                                    <Play size={16} color="#fff" variant="Bold" />
+                                    <Play
+                                        size={16}
+                                        color="#fff"
+                                        variant="Bold"
+                                    />
                                 )}
                             </button>
 
@@ -208,25 +253,35 @@ const TicketSection: FC<Props> = ({ customerName }) => {
                                             className="w-[2px] rounded-full transition-all"
                                             style={{
                                                 height: `${Math.random() * 18 + 4}px`,
-                                                backgroundColor: passed ? '#0047FF' : '#E5E7EB',
+                                                backgroundColor: passed
+                                                    ? '#0047FF'
+                                                    : '#E5E7EB',
                                             }}
                                         />
                                     )
                                 })}
                             </div>
 
-                            <audio ref={audioRef} src={audioUrl} className="hidden" />
+                            <audio
+                                ref={audioRef}
+                                src={audioUrl}
+                                className="hidden"
+                            />
                         </div>
                     )}
                 </div>
 
                 <div className="mt-6">
-                    <UploadBox label="فایل‌های ضمیمه" isMultiple onChange={setFiles} />
+                    <UploadBox
+                        label={uploadLabel}
+                        isMultiple
+                        onChange={setFiles}
+                    />
                 </div>
 
                 <div className="flex mt-8 justify-end">
                     <Button
-                        label="ارسال پیام"
+                        label={submitLabel}
                         onClick={handleSubmit}
                         className="w-[150px]"
                         isLoading={isSubmitting}
@@ -237,4 +292,4 @@ const TicketSection: FC<Props> = ({ customerName }) => {
     )
 }
 
-export default TicketSection
+export default ChatSection

src/pages/chat/hooks/useChatData.ts

@@ -0,0 +1,23 @@
+import { useMutation, useQuery } from '@tanstack/react-query'
+import * as api from '../service/ChatService'
+import type { AddChatMessageType } from '../type/Types'
+
+export const useGetChatMessages = (refId: string) => {
+    return useQuery({
+        queryKey: ['chat', refId],
+        queryFn: () => api.getChatMessages(refId),
+        enabled: !!refId,
+    })
+}
+
+export const useAddChatMessage = () => {
+    return useMutation({
+        mutationFn: ({
+            refId,
+            params,
+        }: {
+            refId: string
+            params: AddChatMessageType
+        }) => api.addChatMessage(refId, params),
+    })
+}

src/pages/chat/index.ts

@@ -0,0 +1,15 @@
+export { default as ChatSection } from './components/ChatSection'
+export { default as ChatMessage } from './components/ChatMessage'
+export type { ChatSectionProps } from './components/ChatSection'
+export {
+    useGetChatMessages,
+    useAddChatMessage,
+} from './hooks/useChatData'
+export type {
+    AddChatMessageType,
+    ChatAttachmentType,
+    ChatMessageType,
+    ChatMessagesResponseType,
+    ChatParticipantType,
+} from './type/Types'
+export { getChatSenderName } from './type/Types'

src/pages/chat/service/ChatService.ts

@@ -0,0 +1,20 @@
+import axios from '@/config/axios'
+import type {
+    AddChatMessageType,
+    ChatMessagesResponseType,
+} from '../type/Types'
+
+export const getChatMessages = async (refId: string) => {
+    const { data } = await axios.get<ChatMessagesResponseType>(
+        `/admin/chat/ref/${refId}`,
+    )
+    return data
+}
+
+export const addChatMessage = async (
+    refId: string,
+    params: AddChatMessageType,
+) => {
+    const { data } = await axios.post(`/admin/chat/ref/${refId}`, params)
+    return data
+}

src/pages/chat/type/Types.ts

@@ -0,0 +1,50 @@
+import type { BaseResponse } from '@/shared/types/Types'
+
+export type ChatAttachmentType = {
+    url: string
+    type: string
+}
+
+export type AddChatMessageType = {
+    content: string
+    attachments: ChatAttachmentType[]
+}
+
+export type ChatParticipantType = {
+    id: string
+    firstName?: string | null
+    lastName?: string | null
+    phone?: string
+    avatarUrl?: string | null
+}
+
+export type ChatMessageType = {
+    admin?: ChatParticipantType | null
+    user?: ChatParticipantType | null
+    attachments: ChatAttachmentType[]
+    content: string
+    createdAt: string
+    id: string | number
+}
+
+export type ChatMessagesResponseType = BaseResponse<ChatMessageType[]>
+
+/** @deprecated Use AddChatMessageType */
+export type AddTicketType = AddChatMessageType
+/** @deprecated Use ChatMessageType */
+export type TicketType = ChatMessageType
+/** @deprecated Use ChatMessagesResponseType */
+export type TicketsResponseType = ChatMessagesResponseType
+
+export const getChatSenderName = (
+    participant?: ChatParticipantType | null,
+    fallback?: string,
+): string => {
+    if (!participant && !fallback) return ''
+    return (
+        [participant?.firstName, participant?.lastName].filter(Boolean).join(' ') ||
+        participant?.phone ||
+        fallback ||
+        ''
+    )
+}

src/pages/order/OrderDetail.tsx

@@ -8,7 +8,7 @@ import Button from '@/components/Button'
 import { Paths } from '@/config/Paths'
 import { extractErrorMessage } from '@/config/func'
  import { useGetOrderDetails, useUpdateOrderStatus } from './hooks/useOrderData'
-import TicketSection from './components/TicketSection'
+import ChatSection from '@/pages/chat/components/ChatSection'
 import OrderDetailSidebar from './components/OrderDetailSidebar'
 import type { OrderDetailDataType } from './types/Types'
 import { OrderStatusEnum } from './enum/OrderEnum'
@@ -21,6 +21,10 @@ const OrderDetail: FC = () => {
     const order = data?.data as OrderDetailDataType | undefined
     // const { data: invoiceItemData } = useGetInvoiceItem(order?.invoiceItem ?? null)
     const invoiceId = order?.invoiceItem?.invoice
+    const customerName =
+        [order?.user?.firstName, order?.user?.lastName].filter(Boolean).join(' ') ||
+        order?.user?.phone ||
+        undefined
 
     const handleUpdateStatus = (status: OrderStatusEnum) => {
         if (!id) return
@@ -101,7 +105,14 @@ const OrderDetail: FC = () => {
 
             <div className="mt-6 flex flex-col-reverse gap-6 xl:flex-row xl:items-start">
                 <div className="min-w-0 flex-1 space-y-6">
-                    <TicketSection />
+                    <ChatSection
+                        refId={id!}
+                        customerName={customerName}
+                        title="گفتگو با مشتری"
+                        description="پیام‌ها و فایل‌های مرتبط با سفارش"
+                        senderLabel="طراح"
+                        userLabel="مشتری"
+                    />
                 </div>
 
                 <aside className="w-full shrink-0 xl:sticky xl:top-4 xl:w-[320px]">

src/pages/order/components/TicketSection.tsx

@@ -1,273 +0,0 @@
-import Button from '@/components/Button'
-import RefreshButton from '@/components/RefreshButton'
-import UploadBox from '@/components/UploadBox'
-import UserAvatar from '@/components/UserAvatar'
-import { Microphone, Paperclip2 } from 'iconsax-react'
-import { useState, type FC } from 'react'
-import { useVoiceRecorder } from '@/hooks/useVoiceRecorder'
-import { Play, Pause } from 'iconsax-react'
-import { useMultiUpload, useSingleUpload } from '@/pages/uploader/hooks/useUploader'
-import type { AddTicketType } from '../types/Types'
-import { useAddTicket, useGetTickets } from '../hooks/useOrderData'
-import { useParams } from 'react-router-dom'
-import { toast } from '@/shared/toast'
-import { extractErrorMessage, getFileNameAndExtensionFromUrl } from '@/config/func'
-import { getPresignedUrl } from '@/pages/uploader/service/UploaderService'
-import VoicePlayer from '@/components/VoicePlayer'
-
-
-
-const TicketSection: FC = () => {
-
-    const { id } = useParams()
-    const [message, setMessage] = useState('')
-    const [files, setFiles] = useState<File[]>([])
-    const addTicket = useAddTicket()
-    const { data, refetch, isFetching } = useGetTickets(id!)
-    const singleUpload = useSingleUpload()
-    const multiUpload = useMultiUpload()
-
-    const {
-        isRecording,
-        isPlaying,
-        audioUrl,
-        audioRef,
-        togglePlayPause,
-        startRecording,
-        stopRecording,
-        progress,
-        audioFile,
-        resetRecorder
-    } = useVoiceRecorder()
-
-    const handleSubmit = async () => {
-        const params: AddTicketType = {
-            attachments: [],
-            content: message
-        }
-        if (audioFile) {
-            const voiceResult = await singleUpload.mutateAsync(audioFile)
-            params.attachments.push({
-                type: 'voice',
-                url: voiceResult.data.key,
-            })
-        }
-        if (files.length) {
-            const filesResult = await multiUpload.mutateAsync(files)
-            filesResult.data?.forEach((item) => {
-                params.attachments.push({
-                    type: 'uploads_attach',
-                    url: item.key,
-                })
-            })
-        }
-
-        addTicket.mutate({ orderId: id!, params: params }, {
-            onSuccess: () => {
-                toast('پیام شما با موفقیت ارسال شد')
-                refetch()
-                setMessage('')
-                setFiles([])
-                resetRecorder()
-            },
-            onError: (error) => {
-                toast(extractErrorMessage(error), 'error')
-            },
-        })
-    }
-
-    const handleOpenLink = async (key: string) => {
-        const url = await getPresignedUrl(key)
-        window.open(
-            url,
-            '_blank'
-        )
-    }
-
-    return (
-        <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-            <div className="flex items-center justify-between border-b border-gray-100 px-5 py-4 md:px-6">
-                <div>
-                    <h2 className="text-base font-medium text-gray-900">گفتگو</h2>
-                    <p className="mt-0.5 text-xs text-gray-500">پیام‌ها و فایل‌های مرتبط با سفارش</p>
-                </div>
-                <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
-            </div>
-            <div className="p-5 md:p-6">
-            {
-                data?.data?.map((item) => {
-                    if (item.user)
-                        return (
-                            <div key={item.id} className='flex gap-3 mt-6'>
-                                <UserAvatar
-                                    src={item.user.avatarUrl}
-                                    firstName={item.user.firstName}
-                                    lastName={item.user.lastName}
-                                    className="size-9 mt-1"
-                                />
-                                <div className='bg-[#F5F7FC] rounded-4xl rounded-tr-none p-6 max-w-[55%]'>
-                                    <div className='text-sm font-light text-black leading-6'>
-                                        {item.content}
-                                    </div>
-
-                                    {/* attachments (non-voice) */}
-                                    <div className="flex gap-3 flex-wrap mt-3">
-                                        {item.attachments
-                                            ?.filter((a) => a.type !== 'voice')
-                                            .map((attach) => (
-                                                <div
-                                                    key={attach.url}
-                                                    onClick={() => handleOpenLink(attach.url)}
-                                                    className="flex cursor-pointer items-center gap-1.5 text-[#0047FF]"
-                                                >
-                                                    <Paperclip2 size={20} color="#0047FF" />
-                                                    <div className="text-xs">
-                                                        {getFileNameAndExtensionFromUrl(attach.url).fileName}
-                                                    </div>
-                                                </div>
-                                            ))}
-                                    </div>
-
-                                    {/* voice messages */}
-                                    {item.attachments
-                                        ?.filter((a) => a.type === 'voice')
-                                        .map((voice) => (
-                                            <VoicePlayer key={voice.url} url={voice.url} />
-                                        ))}
-                                </div>
-                            </div>
-                        )
-                    else if (item.admin)
-                        return (
-                            <div key={item.id} className='flex justify-end gap-3 mt-6'>
-                                <div className='bg-[#F5F7FC] rounded-4xl rounded-tl-none p-6 max-w-[55%]'>
-                                    <div className='flex gap-1 text-sm mb-2'>
-                                        <div className='font-bold'>طراح : </div>
-                                        <div>{item.admin?.firstName + ' ' + item?.admin?.lastName}</div>
-                                    </div>
-                                    <div className='text-sm font-light text-black leading-6'>
-                                        {item.content}
-                                    </div>
-
-                                    {/* attachments (non-voice) */}
-                                    <div className="flex gap-3 flex-wrap mt-3">
-                                        {item.attachments
-                                            ?.filter((a) => a.type !== 'voice')
-                                            .map((attach) => (
-                                                <div
-                                                    key={attach.url}
-                                                    onClick={() => handleOpenLink(attach.url)}
-                                                    className="flex cursor-pointer items-center gap-1.5 text-[#0047FF]"
-                                                >
-                                                    <Paperclip2 size={20} color="#0047FF" />
-                                                    <div className="text-xs">
-                                                        {getFileNameAndExtensionFromUrl(attach.url).fileName}
-                                                    </div>
-                                                </div>
-                                            ))}
-                                    </div>
-
-                                    {/* voice messages */}
-                                    {item.attachments
-                                        ?.filter((a) => a.type === 'voice')
-                                        .map((voice) => (
-                                            <VoicePlayer key={voice.url} url={voice.url} />
-                                        ))}
-                                </div>
-                                <UserAvatar
-                                    src={item.admin.avatarUrl}
-                                    firstName={item.admin.firstName}
-                                    lastName={item.admin.lastName}
-                                    className="size-9 mt-1"
-                                />
-                            </div>
-                        )
-                })
-            }
-
-
-
-
-
-
-
-            <div className="mt-6">
-                <div className="text-sm mb-2 text-black">پیام شما</div>
-
-                <div className="relative">
-                    <textarea
-                        value={message}
-                        onChange={(e) => setMessage(e.target.value)}
-                        className="w-full h-40 bg-white border border-border rounded-xl p-4 text-sm resize-none outline-none"
-                        placeholder=""
-                    />
-
-                    <button
-                        onClick={isRecording ? stopRecording : startRecording}
-                        className="absolute left-4 bottom-4 bg-[#FFF1D7] size-8 rounded-lg flex items-center justify-center"
-                    >
-                        <Microphone
-                            size={20}
-                            color={isRecording ? '#EF4444' : 'black'}
-                            variant={isRecording ? 'Bold' : 'Outline'}
-                        />
-                    </button>
-                </div>
-
-                {audioUrl && (
-                    <div className="w-full h-12 bg-white border border-border rounded-xl flex items-center px-3 gap-3 mt-3">
-                        <button
-                            onClick={togglePlayPause}
-                            className="w-8 h-8 rounded-full bg-black flex items-center justify-center flex-shrink-0"
-                        >
-                            {isPlaying ? (
-                                <Pause size={16} color="#fff" variant="Bold" />
-                            ) : (
-                                <Play size={16} color="#fff" variant="Bold" />
-                            )}
-                        </button>
-
-                        <div className="flex-1 flex items-center gap-[2px] h-8">
-                            {Array.from({ length: 60 }).map((_, i) => {
-                                const passed = i / 60 <= progress
-                                return (
-                                    <div
-                                        key={i}
-                                        className="w-[2px] rounded-full transition-all"
-                                        style={{
-                                            height: `${Math.random() * 18 + 4}px`,
-                                            backgroundColor: passed ? '#0047FF' : '#E5E7EB'
-                                        }}
-                                    />
-                                )
-                            })}
-                        </div>
-
-                        <audio ref={audioRef} src={audioUrl} className="hidden" />
-                    </div>
-                )}
-            </div>
-
-
-            <div className="mt-6">
-                <UploadBox
-                    label="فایل های ضمیمه"
-                    isMultiple={true}
-                    onChange={setFiles}
-                />
-            </div>
-
-            <div className="flex mt-10 justify-end">
-                <Button
-                    label="ارسال"
-                    onClick={handleSubmit}
-                    className='w-[150px]'
-                    isLoading={singleUpload.isPending || multiUpload.isPending || addTicket.isPending}
-                />
-            </div>
-            </div>
-        </div>
-    )
-}
-
-export default TicketSection

src/pages/order/hooks/useOrderData.ts

@@ -1,7 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/OrderService";
 import type {
-  AddTicketType,
   OrderPrintFormType,
   UpdateOrderType,
 } from "../types/Types";
@@ -44,26 +43,6 @@ export const useGetOrderDetails = (id: string) => {
   });
 };
 
-export const useGetTickets = (orderId: string) => {
-  return useQuery({
-    queryKey: ["tickets", orderId],
-    queryFn: () => api.getTickets(orderId),
-    enabled: !!orderId,
-  });
-};
-
-export const useAddTicket = () => {
-  return useMutation({
-    mutationFn: ({
-      orderId,
-      params,
-    }: {
-      orderId: string;
-      params: AddTicketType;
-    }) => api.addTicket(orderId, params),
-  });
-};
-
 export const useCreateOrder = () => {
   return useMutation({
     mutationFn: api.submitOrder,

src/pages/order/service/OrderService.ts

@@ -1,6 +1,5 @@
 import axios from "@/config/axios";
 import type {
-  AddTicketType,
   ConvertToOrderItemType,
   CreateFinalOrderType,
   OrderDetailResponseType,
@@ -8,7 +7,6 @@ import type {
   OrderListResponseType,
   OrderPrintFormType,
   OrderPrintResponseType,
-  TicketsResponseType,
   UpdateOrderType,
 } from "../types/Types";
 import type { BaseResponse } from "@/shared/types/Types";
@@ -99,18 +97,6 @@ export const getOrderDetail = async (id: string) => {
   return data;
 };
 
-export const getTickets = async (orderId: string) => {
-  const { data } = await axios.get<TicketsResponseType>(
-    `/admin/chat/ref/${orderId}`,
-  );
-  return data;
-};
-
-export const addTicket = async (ticketId: string, params: AddTicketType) => {
-  const { data } = await axios.post(`/admin/chat/ref/${ticketId}`, params);
-  return data;
-};
-
 export const submitOrder = async (params: CreateFinalOrderType) => {
   const { data } = await axios.post(`/admin/orders`, params);
   return data;

src/pages/order/types/Types.ts

@@ -165,31 +165,14 @@ export type AttachmentsType = {
   type: string;
 };
 
-export type AddTicketType = {
+export type {
-  content: string;
+  AddChatMessageType,
-  attachments: AttachmentsType[];
+  AddTicketType,
-};
+  ChatMessageType,
-
+  ChatMessagesResponseType,
-export type TicketType = {
+  TicketType,
-  admin?: {
+  TicketsResponseType,
-    firstName: string;
+} from "@/pages/chat/type/Types";
-    lastName: string;
-    phone: string;
-    id: string;
-    avatarUrl?: string | null;
-  };
-  attachments: AttachmentsType[];
-  content: string;
-  createdAt: string;
-  id: number;
-  user?: {
-    id: string;
-    firstName?: string | null;
-    lastName?: string | null;
-    phone?: string;
-    avatarUrl?: string | null;
-  } | null;
-};
 
 export interface MyOrderType extends RowDataType {
   balance: number;
@@ -231,7 +214,6 @@ export type OrderItemType = {
     fieldId: string;
   }[];
 };
-export type TicketsResponseType = BaseResponse<TicketType[]>;
 export type OrderDetailResponseType = BaseResponse<OrderDetailDataType>;
 
 export type StoreType = {

src/pages/requests/Detail.tsx

@@ -4,7 +4,7 @@ import moment from 'moment-jalaali'
 import { Calendar, TickSquare } from 'iconsax-react'
 import { useGetRequestDetail } from './hooks/useRequestData'
 import RequestDetailItem from './components/RequestDetailItem'
-import TicketSection from './components/TicketSection'
+import ChatSection from '@/pages/chat/components/ChatSection'
 import { Paths } from '@/config/Paths'
 import BackButton from '@/components/BackButton'
 import Button from '@/components/Button'
@@ -120,7 +120,14 @@ const RequestDetail: FC = () => {
                 )}
             </section>
 
-            <TicketSection customerName={customerName} />
+            <ChatSection
+                refId={id!}
+                customerName={customerName}
+                title="گفتگو با مشتری"
+                description="پیام‌ها و فایل‌های مرتبط با درخواست"
+                senderLabel="پشتیبان"
+                userLabel="مشتری"
+            />
         </div>
     )
 }