base commit

client/src/shared/ui/ChatMessageBubble.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import Box from '@mui/material/Box'
+import { alpha } from '@mui/material/styles'
+
+type Author = 'admin' | 'user'
+
+export function ChatMessageBubble(props: { authorType: Author; children: ReactNode }) {
+  const { authorType, children } = props
+  return (
+    <Box
+      sx={{
+        p: 1.25,
+        borderRadius: 2,
+        border: 1,
+        borderColor: 'divider',
+        alignSelf: authorType === 'admin' ? 'flex-start' : 'flex-end',
+        width: 'fit-content',
+        maxWidth: '85%',
+        color: 'text.primary',
+        bgcolor: (theme) =>
+          authorType === 'admin'
+            ? alpha(theme.palette.grey[500], theme.palette.mode === 'dark' ? 0.28 : 0.14)
+            : alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.28 : 0.1),
+      }}
+    >
+      {children}
+    </Box>
+  )
+}

client/src/shared/ui/RichTextMessageContent.tsx

@@ -21,16 +21,18 @@ export function RichTextMessageContent({ value, tone = 'default' }: RichTextMess
     if (!editor) return
     const normalizedValue = value.trim() ? value : '<p></p>'
     if (editor.getHTML() === normalizedValue) return
-    editor.commands.setContent(normalizedValue, false)
+    editor.commands.setContent(normalizedValue, { emitUpdate: false })
   }, [editor, value])
 
   return (
     <Box
       sx={{
+        ...(tone === 'chat' ? { color: 'text.primary' } : {}),
         '& .ProseMirror': {
           outline: 'none',
           whiteSpace: 'pre-wrap',
           wordBreak: 'break-word',
+          ...(tone === 'chat' ? { color: 'inherit' } : {}),
           ...(tone === 'review'
             ? {
                 fontSize: '0.875rem',

client/src/shared/ui/RichTextMessageEditor.tsx

@@ -46,7 +46,7 @@ export function RichTextMessageEditor({
     if (!editor) return
     const normalizedValue = value.trim() ? value : '<p></p>'
     if (editor.getHTML() === normalizedValue) return
-    editor.commands.setContent(normalizedValue, false)
+    editor.commands.setContent(normalizedValue, { emitUpdate: false })
   }, [editor, value])
 
   return (