base commit

client/src/pages/me/ui/sections/MessagesPage.tsx

@@ -14,6 +14,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import { fetchMyOrder, postOrderMessage } from '@/entities/order/api/order-api'
 import { fetchMyConversations, markOrderMessagesRead } from '@/entities/user/api/messages-api'
 import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
+import { ChatMessageBubble } from '@/shared/ui/ChatMessageBubble'
 import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
 import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
 
@@ -114,13 +115,15 @@ export function MessagesPage() {
                           </Typography>
                         </Stack>
                       }
-                      secondaryTypographyProps={{
-                        sx: {
-                          mt: 0.5,
-                          overflow: 'hidden',
-                          display: '-webkit-box',
-                          WebkitLineClamp: 2,
-                          WebkitBoxOrient: 'vertical',
+                      slotProps={{
+                        secondary: {
+                          sx: {
+                            mt: 0.5,
+                            overflow: 'hidden',
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                          },
                         },
                       }}
                       secondary={c.preview}
@@ -160,24 +163,12 @@ export function MessagesPage() {
                 </Stack>
                 <Stack spacing={1} sx={{ mb: 2, maxHeight: 360, overflow: 'auto' }}>
                   {order.messages.map((m) => (
-                    <Box
-                      key={m.id}
-                      sx={{
-                        p: 1.25,
-                        borderRadius: 2,
-                        bgcolor: m.authorType === 'admin' ? 'grey.100' : 'primary.50',
-                        border: 1,
-                        borderColor: 'divider',
-                        alignSelf: m.authorType === 'admin' ? 'flex-start' : 'flex-end',
-                        width: 'fit-content',
-                        maxWidth: '85%',
-                      }}
-                    >
+                    <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>
                       <RichTextMessageContent value={m.text} tone="chat" />
-                    </Box>
+                    </ChatMessageBubble>
                   ))}
                   {order.messages.length === 0 && <Typography color="text.secondary">Нет сообщений.</Typography>}
                 </Stack>