feat: avatars in order messages

client/src/features/order-chat/ui/OrderChat.tsx

@@ -3,9 +3,12 @@ import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
+import { useUnit } from 'effector-react'
+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'
 
 type Message = {
   id: string
@@ -24,6 +27,7 @@ type Props = {
 export function OrderChat({ messages, isPending, onSend }: Props) {
   const [text, setText] = useState('')
   const canSend = text.replace(/<[^>]*>/g, ' ').trim().length > 0
+  const currentUser = useUnit($user)
 
   const handleSend = () => {
     if (!canSend || isPending) return
@@ -37,14 +41,28 @@ export function OrderChat({ messages, isPending, onSend }: Props) {
         Чат по заказу
       </Typography>
       <Stack spacing={1} sx={{ mb: 2 }}>
-        {messages.map((m) => (
-          <ChatMessageBubble key={m.id} authorType={m.authorType === 'admin' ? 'admin' : 'user'}>
-            <Typography variant="caption" color="text.secondary">
-              {m.authorType === 'admin' ? 'Админ' : 'Вы'} · {new Date(m.createdAt).toLocaleString()}
-            </Typography>
-            <OrderMessageBody text={m.text} attachmentUrl={m.attachmentUrl} imageAlt="Чек или вложение" />
-          </ChatMessageBubble>
-        ))}
+        {messages.map((m) => {
+          const isAdminMsg = m.authorType === 'admin'
+          const avatarNode = isAdminMsg ? (
+            <UserAvatar userId="admin" avatarUrl={null} avatarType={null} avatarStyle={null} size={24} />
+          ) : currentUser ? (
+            <UserAvatar
+              userId={currentUser.id}
+              avatarUrl={currentUser.avatar}
+              avatarType={currentUser.avatarType}
+              avatarStyle={currentUser.avatarStyle}
+              size={24}
+            />
+          ) : null
+          return (
+            <ChatMessageBubble key={m.id} authorType={isAdminMsg ? 'admin' : 'user'} avatar={avatarNode}>
+              <Typography variant="caption" color="text.secondary">
+                {isAdminMsg ? 'Админ' : 'Вы'} · {new Date(m.createdAt).toLocaleString()}
+              </Typography>
+              <OrderMessageBody text={m.text} attachmentUrl={m.attachmentUrl} imageAlt="Чек или вложение" />
+            </ChatMessageBubble>
+          )
+        })}
         {messages.length === 0 && <Typography color="text.secondary">Пока сообщений нет.</Typography>}
       </Stack>
 

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>
 

client/src/features/user/user-menu/ui/UserMenu.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
+import PersonIcon from '@mui/icons-material/Person'
 import Badge from '@mui/material/Badge'
 import IconButton from '@mui/material/IconButton'
 import ListItemText from '@mui/material/ListItemText'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
-import PersonIcon from '@mui/icons-material/Person'
 import type { AuthUser } from '@/shared/model/auth'
 import { UserAvatar } from '@/shared/ui/UserAvatar'