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>