From bf7d4b5e6656185d0d255dd7c56d5b4e3d92ea89 Mon Sep 17 00:00:00 2001
From: morteza-mortezai <mrtz.mrtzi.1989@gmail.com>
Date: Fri, 17 Jul 2026 23:29:01 +0330
Subject: [PATCH] avatar

---
 src/components/UserAvatar.tsx                 |  42 ++++
 .../components/ChatMessage.tsx}               |  53 ++--
 .../components/ChatSection.tsx}               |  93 ++++---
 src/pages/chat/hooks/useChatData.ts           |  23 ++
 src/pages/chat/index.ts                       |  15 ++
 src/pages/chat/service/ChatService.ts         |  20 ++
 src/pages/chat/type/Types.ts                  |  48 ++++
 src/pages/order/OrderDetail.tsx               |  10 +-
 src/pages/order/components/TicketSection.tsx  | 235 ------------------
 src/pages/order/hooks/useOrderData.ts         |  23 +-
 src/pages/order/service/OrderService.ts       |  14 --
 src/pages/order/type/Types.ts                 |   5 +-
 src/pages/request/RequestDetail.tsx           |  10 +-
 src/pages/request/hooks/useRequestData.ts     |  21 --
 src/pages/request/service/RequestService.ts   |  13 -
 src/pages/request/type/Types.ts               |  28 +--
 16 files changed, 279 insertions(+), 374 deletions(-)
 create mode 100644 src/components/UserAvatar.tsx
 rename src/pages/{request/components/TicketMessage.tsx => chat/components/ChatMessage.tsx} (64%)
 rename src/pages/{request/components/TicketSection.tsx => chat/components/ChatSection.tsx} (72%)
 create mode 100644 src/pages/chat/hooks/useChatData.ts
 create mode 100644 src/pages/chat/index.ts
 create mode 100644 src/pages/chat/service/ChatService.ts
 create mode 100644 src/pages/chat/type/Types.ts
 delete mode 100644 src/pages/order/components/TicketSection.tsx

diff --git a/src/components/UserAvatar.tsx b/src/components/UserAvatar.tsx
new file mode 100644
index 0000000..09fb6ea
--- /dev/null
+++ b/src/components/UserAvatar.tsx
@@ -0,0 +1,42 @@
+import { type FC } from 'react'
+import { usePresignedUrl } from '@/pages/uploader/hooks/usePresignedUrl'
+import { clx } from '@/helpers/utils'
+
+type Props = {
+    src?: string | null
+    firstName?: string | null
+    lastName?: string | null
+    className?: string
+    textClassName?: string
+}
+
+const UserAvatar: FC<Props> = ({
+    src,
+    firstName,
+    lastName,
+    className = 'size-10',
+    textClassName = 'text-xs',
+}) => {
+    const resolvedSrc = usePresignedUrl(src ?? undefined)
+    const initials =
+        `${String(firstName ?? '').charAt(0)}${String(lastName ?? '').charAt(0)}`.trim() ||
+        '?'
+
+    return (
+        <div
+            className={clx(
+                'shrink-0 rounded-full bg-description overflow-hidden flex items-center justify-center text-white font-medium',
+                className,
+                textClassName,
+            )}
+        >
+            {resolvedSrc ? (
+                <img src={resolvedSrc} className="size-full object-cover" alt="" />
+            ) : (
+                initials
+            )}
+        </div>
+    )
+}
+
+export default UserAvatar
diff --git a/src/pages/request/components/TicketMessage.tsx b/src/pages/chat/components/ChatMessage.tsx
similarity index 64%
rename from src/pages/request/components/TicketMessage.tsx
rename to src/pages/chat/components/ChatMessage.tsx
index 8e02d22..b467f8e 100644
--- a/src/pages/request/components/TicketMessage.tsx
+++ b/src/pages/chat/components/ChatMessage.tsx
@@ -4,24 +4,31 @@ import { Paperclip2 } from 'iconsax-react'
 import { getFileNameAndExtensionFromUrl } from '@/config/func'
 import { getPresignedUrl } from '@/pages/uploader/service/UploaderService'
 import VoicePlayer from '@/components/VoicePlayer'
-import type { AttachmentsType } from '../type/Types'
+import UserAvatar from '@/components/UserAvatar'
+import type { ChatAttachmentType } from '../type/Types'
 
 type Props = {
     content: string
-    attachments?: AttachmentsType[]
+    attachments?: ChatAttachmentType[]
     senderName?: string
     senderLabel?: string
     createdAt?: string
     isAdmin?: boolean
+    avatarUrl?: string | null
+    firstName?: string | null
+    lastName?: string | null
 }
 
-const TicketMessage: FC<Props> = ({
+const ChatMessage: FC<Props> = ({
     content,
     attachments = [],
     senderName,
     senderLabel = 'پشتیبان',
     createdAt,
     isAdmin = false,
+    avatarUrl,
+    firstName,
+    lastName,
 }) => {
     const fileAttachments = attachments.filter((a) => a.type !== 'voice')
     const voiceAttachments = attachments.filter((a) => a.type === 'voice')
@@ -31,22 +38,32 @@ const TicketMessage: FC<Props> = ({
         window.open(url, '_blank', 'noopener,noreferrer')
     }
 
+    const avatar = (
+        <UserAvatar
+            src={avatarUrl}
+            firstName={firstName}
+            lastName={lastName}
+            className="size-9 mt-1"
+        />
+    )
+
     return (
-        <div className={isAdmin ? 'flex justify-end' : ''}>
+        <div className={`flex gap-3 ${isAdmin ? 'justify-end' : ''}`}>
+            {!isAdmin && avatar}
             <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>
-                )}
+                <div className="flex gap-1 text-xs mb-2 text-[#8C90A3]">
+                    <span className="font-medium text-black">{senderLabel}:</span>
+                    {senderName ? <span>{senderName}</span> : null}
+                </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 && (
@@ -60,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>
                         ))}
@@ -76,13 +97,17 @@ 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>
                 )}
             </div>
+            {isAdmin && avatar}
         </div>
     )
 }
 
-export default TicketMessage
+export default ChatMessage
diff --git a/src/pages/request/components/TicketSection.tsx b/src/pages/chat/components/ChatSection.tsx
similarity index 72%
rename from src/pages/request/components/TicketSection.tsx
rename to src/pages/chat/components/ChatSection.tsx
index d6b35aa..77538ee 100644
--- a/src/pages/request/components/TicketSection.tsx
+++ b/src/pages/chat/components/ChatSection.tsx
@@ -4,19 +4,37 @@ 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 '../type/Types'
-import { useAddTicket, useGetTickets } from '../hooks/useRequestData'
-import { useParams } from 'react-router-dom'
+import type { AddChatMessageType } from '../type/Types'
+import { getChatSenderName } from '../type/Types'
+import { useAddChatMessage, useGetChatMessages } from '../hooks/useChatData'
 import { toast } from '@/shared/toast'
 import { extractErrorMessage } from '@/config/func'
-import TicketMessage from './TicketMessage'
+import ChatMessage from './ChatMessage'
 
-const TicketSection: FC = () => {
-    const { id } = useParams()
+export type ChatSectionProps = {
+    refId: string
+    title?: string
+    description?: string
+    senderLabel?: string
+    userLabel?: string
+    submitLabel?: string
+    uploadLabel?: string
+}
+
+const ChatSection: FC<ChatSectionProps> = ({
+    refId,
+    title,
+    description,
+    senderLabel = 'پشتیبان',
+    userLabel = 'شما',
+    submitLabel = 'ارسال پیام',
+    uploadLabel = 'فایل‌های ضمیمه',
+}) => {
     const [message, setMessage] = useState('')
     const [files, setFiles] = useState<File[]>([])
-    const addTicket = useAddTicket()
-    const { data, refetch, isPending: isLoadingTickets } = useGetTickets(id!)
+    const addMessage = useAddChatMessage()
+    const { data, refetch, isPending: isLoadingMessages } =
+        useGetChatMessages(refId)
     const singleUpload = useSingleUpload()
     const multiUpload = useMultiUpload()
 
@@ -33,9 +51,9 @@ const TicketSection: FC = () => {
         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) {
@@ -43,7 +61,7 @@ const TicketSection: FC = () => {
             return
         }
 
-        const params: AddTicketType = {
+        const params: AddChatMessageType = {
             attachments: [],
             content: message.trim(),
         }
@@ -72,8 +90,8 @@ const TicketSection: FC = () => {
             })
         }
 
-        addTicket.mutate(
-            { requestId: id!, params },
+        addMessage.mutate(
+            { refId, params },
             {
                 onSuccess: () => {
                     toast('پیام شما با موفقیت ارسال شد')
@@ -85,52 +103,65 @@ const TicketSection: FC = () => {
                 onError: (error) => {
                     toast(extractErrorMessage(error), 'error')
                 },
-            }
+            },
         )
     }
 
     return (
         <div className="bg-white rounded-2xl p-6 md:p-8">
-            <h2 className="text-sm text-black mb-2">گفتگو با پشتیبانی</h2>
-            <p className="text-xs text-[#8C90A3] mb-6">
-                سوالات یا توضیحات تکمیلی خود را با تیم پشتیبانی در میان بگذارید.
-            </p>
+            {title && <h2 className="text-sm text-black mb-2">{title}</h2>}
+            {description && (
+                <p className="text-xs text-[#8C90A3] mb-6">{description}</p>
+            )}
 
             <div className="space-y-4 min-h-[80px]">
-                {isLoadingTickets && tickets.length === 0 && (
-                    <p className="text-xs text-[#8C90A3]">در حال بارگذاری پیام‌ها...</p>
+                {isLoadingMessages && messages.length === 0 && (
+                    <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={userLabel}
+                                senderName={getChatSenderName(item.user)}
+                                avatarUrl={item.user.avatarUrl}
+                                firstName={item.user.firstName}
+                                lastName={item.user.lastName}
                             />
                         )
                     }
 
                     if (item.admin) {
                         return (
-                            <TicketMessage
+                            <ChatMessage
                                 key={item.id}
                                 content={item.content}
                                 attachments={item.attachments}
                                 createdAt={item.createdAt}
                                 isAdmin
-                                senderName={`${item.admin.firstName} ${item.admin.lastName}`}
+                                senderLabel={senderLabel}
+                                senderName={getChatSenderName(item.admin)}
+                                avatarUrl={item.admin.avatarUrl}
+                                firstName={item.admin.firstName}
+                                lastName={item.admin.lastName}
                             />
                         )
                     }
@@ -188,7 +219,9 @@ const TicketSection: FC = () => {
                                         className="w-[2px] rounded-full transition-all"
                                         style={{
                                             height: `${Math.random() * 18 + 4}px`,
-                                            backgroundColor: passed ? '#0047FF' : '#E5E7EB',
+                                            backgroundColor: passed
+                                                ? '#0047FF'
+                                                : '#E5E7EB',
                                         }}
                                     />
                                 )
@@ -201,12 +234,12 @@ const TicketSection: FC = () => {
             </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}
@@ -216,4 +249,4 @@ const TicketSection: FC = () => {
     )
 }
 
-export default TicketSection
+export default ChatSection
diff --git a/src/pages/chat/hooks/useChatData.ts b/src/pages/chat/hooks/useChatData.ts
new file mode 100644
index 0000000..d99df2a
--- /dev/null
+++ b/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),
+    })
+}
diff --git a/src/pages/chat/index.ts b/src/pages/chat/index.ts
new file mode 100644
index 0000000..17009e4
--- /dev/null
+++ b/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'
diff --git a/src/pages/chat/service/ChatService.ts b/src/pages/chat/service/ChatService.ts
new file mode 100644
index 0000000..d621222
--- /dev/null
+++ b/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>(
+        `/public/chat/ref/${refId}`,
+    )
+    return data
+}
+
+export const addChatMessage = async (
+    refId: string,
+    params: AddChatMessageType,
+) => {
+    const { data } = await axios.post(`/public/chat/ref/${refId}`, params)
+    return data
+}
diff --git a/src/pages/chat/type/Types.ts b/src/pages/chat/type/Types.ts
new file mode 100644
index 0000000..88561bd
--- /dev/null
+++ b/src/pages/chat/type/Types.ts
@@ -0,0 +1,48 @@
+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
+}
+
+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,
+): string => {
+    if (!participant) return ''
+    return (
+        [participant.firstName, participant.lastName].filter(Boolean).join(' ') ||
+        participant.phone ||
+        ''
+    )
+}
diff --git a/src/pages/order/OrderDetail.tsx b/src/pages/order/OrderDetail.tsx
index b1b6cec..7fbc1d0 100644
--- a/src/pages/order/OrderDetail.tsx
+++ b/src/pages/order/OrderDetail.tsx
@@ -3,7 +3,7 @@ import { Paperclip2, Calendar } from 'iconsax-react'
 import { useParams } from 'react-router-dom'
 import moment from 'moment-jalaali'
 import { useGetOrderDetails } from './hooks/useOrderData'
-import TicketSection from './components/TicketSection'
+import ChatSection from '@/pages/chat/components/ChatSection'
 import { getFileNameAndExtensionFromUrl } from '@/config/func'
 import { orderStatusLabels } from './constants/statusLabels'
 import PresignedImage from '@/components/PresignedImage'
@@ -145,7 +145,13 @@ const OrderDetail: FC = () => {
         </div>
       </div>
 
-      <TicketSection />
+      <ChatSection
+        refId={id!}
+        title="گفتگو با طراح"
+        description="سوالات یا توضیحات تکمیلی خود را با طراح در میان بگذارید."
+        senderLabel="طراح"
+        submitLabel="ارسال"
+      />
     </div>
   )
 }
diff --git a/src/pages/order/components/TicketSection.tsx b/src/pages/order/components/TicketSection.tsx
deleted file mode 100644
index a2e3346..0000000
--- a/src/pages/order/components/TicketSection.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import Button from '@/components/Button'
-import UploadBox from '@/components/UploadBox'
-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 '@/pages/request/type/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 VoicePlayer from '@/components/VoicePlayer'
-import { getPresignedUrl } from '@/pages/uploader/service/UploaderService'
-
-const TicketSection: FC = () => {
-  const { id } = useParams()
-  const [message, setMessage] = useState('')
-  const [files, setFiles] = useState<File[]>([])
-  const addTicket = useAddTicket()
-  const { data, refetch } = 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) {
-      await singleUpload.mutateAsync(audioFile, {
-        onSuccess: (data) => {
-          params.attachments.push({
-            type: 'voice',
-            url: data?.data?.key,
-          })
-        },
-      })
-    }
-    if (files.length) {
-      await multiUpload.mutateAsync(files, {
-        onSuccess: (data) => {
-          data?.data?.map((item) => {
-            params.attachments.push({
-              type: 'uploads_attach',
-              url: item.key,
-            })
-          })
-        },
-      })
-    }
-
-    addTicket.mutate(
-      { requestId: id!, 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', 'noopener,noreferrer')
-  }
-
-  return (
-    <div className="bg-white rounded-2xl p-6">
-      {data?.data?.map((item) => {
-        if (item.user)
-          return (
-            <div
-              key={item.id}
-              className="bg-[#F5F7FC] rounded-4xl rounded-tr-none mt-6 p-6 max-w-[55%]"
-            >
-              <div className="text-sm font-light text-black leading-6">
-                {item.content}
-              </div>
-              <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>
-              {item.attachments
-                ?.filter((a) => a.type === 'voice')
-                .map((voice) => (
-                  <VoicePlayer key={voice.url} url={voice.url} />
-                ))}
-            </div>
-          )
-        if (item.admin)
-          return (
-            <div className="flex justify-end">
-              <div className="bg-[#F5F7FC] rounded-4xl rounded-tl-none mt-6 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>
-                <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>
-                {item.attachments
-                  ?.filter((a) => a.type === 'voice')
-                  .map((voice) => (
-                    <VoicePlayer key={voice.url} url={voice.url} />
-                  ))}
-              </div>
-            </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 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>
-  )
-}
-
-export default TicketSection
diff --git a/src/pages/order/hooks/useOrderData.ts b/src/pages/order/hooks/useOrderData.ts
index 9e7d91f..93d0f19 100644
--- a/src/pages/order/hooks/useOrderData.ts
+++ b/src/pages/order/hooks/useOrderData.ts
@@ -1,7 +1,6 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import * as api from "../service/OrderService";
 import type { TabMyOrdersEnum } from "../enum/OrderEnum";
-import type { AddTicketType } from "../type/Types";
 
 export const useGetMyOrders = (
   page: number = 1,
@@ -21,26 +20,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: ({
-      requestId,
-      params,
-    }: {
-      requestId: string;
-      params: AddTicketType;
-    }) => api.addTicket(requestId, params),
-  });
-};
-
 export const useGetOrderStats = () => {
   return useQuery({
     queryKey: ["order-stats"],
diff --git a/src/pages/order/service/OrderService.ts b/src/pages/order/service/OrderService.ts
index 9a420ad..46b472a 100644
--- a/src/pages/order/service/OrderService.ts
+++ b/src/pages/order/service/OrderService.ts
@@ -1,10 +1,8 @@
 import axios from "@/config/axios";
 import type {
-  AddTicketType,
   MyOrdersResponseType,
   OrderDetailResponseType,
   OrderStatsResponseType,
-  TicketsResponseType,
 } from "../type/Types";
 import { OrderStatusEnum, TabMyOrdersEnum } from "../enum/OrderEnum";
 
@@ -48,18 +46,6 @@ export const getOrderDetails = async (id: string) => {
   return data;
 };
 
-export const getTickets = async (id: string) => {
-  const { data } = await axios.get<TicketsResponseType>(
-    `/public/chat/ref/${id}`,
-  );
-  return data;
-};
-
-export const addTicket = async (id: string, params: AddTicketType) => {
-  const { data } = await axios.post(`/public/chat/ref/${id}`, params);
-  return data;
-};
-
 export const getOrderStats = async () => {
   const { data } = await axios.get<OrderStatsResponseType>(
     `/public/orders/stats`,
diff --git a/src/pages/order/type/Types.ts b/src/pages/order/type/Types.ts
index 8472e41..6f9eb23 100644
--- a/src/pages/order/type/Types.ts
+++ b/src/pages/order/type/Types.ts
@@ -2,10 +2,13 @@ import type { BaseResponse } from '@/shared/types/Types'
 import type { RowDataType } from '@/components/types/TableTypes'
 
 export type {
+  AddChatMessageType,
   AddTicketType,
+  ChatMessageType,
+  ChatMessagesResponseType,
   TicketType,
   TicketsResponseType,
-} from '@/pages/request/type/Types'
+} from '@/pages/chat/type/Types'
 
 export type OrderProductType = {
   id: string
diff --git a/src/pages/request/RequestDetail.tsx b/src/pages/request/RequestDetail.tsx
index e1a7bcc..6ee097b 100644
--- a/src/pages/request/RequestDetail.tsx
+++ b/src/pages/request/RequestDetail.tsx
@@ -5,7 +5,7 @@ import { ArrowRight2, Calendar } from 'iconsax-react'
 import { Paths } from '@/config/Paths'
 import { useGetRequestDetails } from './hooks/useRequestData'
 import RequestDetailItem from './components/RequestDetailItem'
-import TicketSection from './components/TicketSection'
+import ChatSection from '@/pages/chat/components/ChatSection'
 
 const RequestDetail: FC = () => {
     const { id } = useParams()
@@ -87,7 +87,13 @@ const RequestDetail: FC = () => {
             </section>
 
             <section className="mt-6">
-                <TicketSection />
+                <ChatSection
+                    refId={id!}
+                    title="گفتگو با پشتیبانی"
+                    description="سوالات یا توضیحات تکمیلی خود را با تیم پشتیبانی در میان بگذارید."
+                    senderLabel="پشتیبان"
+                    submitLabel="ارسال پیام"
+                />
             </section>
         </div>
     )
diff --git a/src/pages/request/hooks/useRequestData.ts b/src/pages/request/hooks/useRequestData.ts
index 842da6b..e1dd182 100644
--- a/src/pages/request/hooks/useRequestData.ts
+++ b/src/pages/request/hooks/useRequestData.ts
@@ -1,6 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/RequestService";
-import type { AddTicketType } from "../type/Types";
 
 export const useGetCategories = () => {
   return useQuery({
@@ -48,23 +47,3 @@ export const useGetRequestDetails = (id: string) => {
     enabled: !!id,
   });
 };
-
-export const useGetTickets = (requestId: string) => {
-  return useQuery({
-    queryKey: ["tickets", requestId],
-    queryFn: () => api.getTickets(requestId),
-    enabled: !!requestId,
-  });
-};
-
-export const useAddTicket = () => {
-  return useMutation({
-    mutationFn: ({
-      requestId,
-      params,
-    }: {
-      requestId: string;
-      params: AddTicketType;
-    }) => api.addTicket(requestId, params),
-  });
-};
diff --git a/src/pages/request/service/RequestService.ts b/src/pages/request/service/RequestService.ts
index 722482c..d76cc82 100644
--- a/src/pages/request/service/RequestService.ts
+++ b/src/pages/request/service/RequestService.ts
@@ -1,13 +1,11 @@
 import axios from "@/config/axios";
 import type {
-  AddTicketType,
   AttributeResponseType,
   CategoryType,
   MyRequestsResponseType,
   RequestDetailResponseType,
   RequestType,
   ProductsResponseType,
-  TicketsResponseType,
 } from "../type/Types";
 
 export const getCategories = async () => {
@@ -47,14 +45,3 @@ export const getRequestDetails = async (id: string) => {
   return data;
 };
 
-export const getTickets = async (id: string) => {
-  const { data } = await axios.get<TicketsResponseType>(
-    `/public/chat/ref/${id}`,
-  );
-  return data;
-};
-
-export const addTicket = async (id: string, params: AddTicketType) => {
-  const { data } = await axios.post(`/public/chat/ref/${id}`, params);
-  return data;
-};
diff --git a/src/pages/request/type/Types.ts b/src/pages/request/type/Types.ts
index b5267ee..5f7d297 100644
--- a/src/pages/request/type/Types.ts
+++ b/src/pages/request/type/Types.ts
@@ -177,25 +177,13 @@ export type RequestDetailType = {
 
 export type RequestDetailResponseType = BaseResponse<RequestDetailType>;
 
-export type AddTicketType = {
-  content: string;
-  attachments: AttachmentsType[];
-};
-
-export type TicketType = {
-  admin?: {
-    firstName: string;
-    lastName: string;
-    phone: string;
-    id: string;
-  };
-  attachments: AttachmentsType[];
-  content: string;
-  createdAt: string;
-  id: string;
-  user?: string;
-};
-
-export type TicketsResponseType = BaseResponse<TicketType[]>;
+export type {
+  AddChatMessageType,
+  AddTicketType,
+  ChatMessageType,
+  ChatMessagesResponseType,
+  TicketType,
+  TicketsResponseType,
+} from "@/pages/chat/type/Types";
 
 export type AttributeResponseType = BaseResponse<AttributeType[]>;