feat: avatars in order messages

client/src/features/order-detail/ui/OrderDetailContent.tsx

@@ -9,6 +9,7 @@ import Select from '@mui/material/Select'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useUnit } from 'effector-react'
 import { postAdminOrderMessage, setAdminOrderStatus } from '@/entities/order/api/admin-order-api'
 import type { AdminOrderDetailResponse } from '@/entities/order/api/admin-order-api'
 import { deliveryCarrierLabelRu } from '@/shared/constants/delivery-carrier'
@@ -17,9 +18,11 @@ import { formatPriceRub } from '@/shared/lib/format-price'
 import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
 import { parseOrderAddressSnapshot } from '@/shared/lib/order-address-snapshot'
 import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
+import { $user } from '@/shared/model/auth'
 import { ChatMessageBubble } from '@/shared/ui/ChatMessageBubble'
 import { OrderMessageBody } from '@/shared/ui/OrderMessageBody'
 import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
+import { UserAvatar } from '@/shared/ui/UserAvatar'
 import { DeliveryFeeAdjustmentForm } from './DeliveryFeeAdjustmentForm'
 
 export function OrderDetailContent({ detail, orderId }: { detail: AdminOrderDetailResponse['item']; orderId: string }) {
@@ -56,6 +59,7 @@ export function OrderDetailContent({ detail, orderId }: { detail: AdminOrderDeta
   )
 
   const canSendMessage = msg.replace(/<[^>]*>/g, ' ').trim().length > 0
+  const currentUser = useUnit($user)
 
   return (
     <Stack spacing={2} sx={{ mt: 1 }}>
@@ -164,14 +168,36 @@ export function OrderDetailContent({ detail, orderId }: { detail: AdminOrderDeta
           Сообщения
         </Typography>
         <Stack spacing={1} sx={{ mb: 1 }}>
-          {detail.messages.map((m) => (
-            <ChatMessageBubble key={m.id} authorType={m.authorType === 'admin' ? 'user' : 'admin'}>
-              <Typography variant="caption" color="text.secondary">
-                {m.authorType === 'admin' ? 'Админ (вы)' : 'Пользователь'} · {new Date(m.createdAt).toLocaleString()}
-              </Typography>
-              <OrderMessageBody text={m.text} attachmentUrl={m.attachmentUrl} />
-            </ChatMessageBubble>
-          ))}
+          {detail.messages.map((m) => {
+            const isAdminMsg = m.authorType === 'admin'
+            const avatarNode = isAdminMsg ? (
+              currentUser && (
+                <UserAvatar
+                  userId={currentUser.id}
+                  avatarUrl={currentUser.avatar}
+                  avatarType={currentUser.avatarType}
+                  avatarStyle={currentUser.avatarStyle}
+                  size={24}
+                />
+              )
+            ) : (
+              <UserAvatar
+                userId={detail.user.id}
+                avatarUrl={detail.user.avatar}
+                avatarType={detail.user.avatarType}
+                avatarStyle={detail.user.avatarStyle}
+                size={24}
+              />
+            )
+            return (
+              <ChatMessageBubble key={m.id} authorType={isAdminMsg ? 'user' : 'admin'} avatar={avatarNode}>
+                <Typography variant="caption" color="text.secondary">
+                  {isAdminMsg ? 'Админ (вы)' : 'Пользователь'} · {new Date(m.createdAt).toLocaleString()}
+                </Typography>
+                <OrderMessageBody text={m.text} attachmentUrl={m.attachmentUrl} />
+              </ChatMessageBubble>
+            )
+          })}
           {detail.messages.length === 0 && <Typography color="text.secondary">Нет сообщений.</Typography>}
         </Stack>