refactor: consolidate into ChatMessage

Author: kevinkim-ogp

packages/frontend/src/pages/AiBuilder/components/ChatMessages/AiMessage.tsx

@@ -0,0 +1,53 @@
+import { Box, Flex, Text } from '@chakra-ui/react'
+
+import { Message } from '@/hooks/useChatStream'
+import { ChakraStreamdown } from '@/theme/components/Streamdown'
+
+import ChatMessageToolbar from './ChatMessageToolbar'
+import PlumberAvatar from './PlumberAvatar'
+
+interface ChatMessageProps {
+  message: Message
+}
+
+const AiMessage = ({ message }: ChatMessageProps) => {
+  return (
+    <Flex gap={3} w="full" align="start">
+      <PlumberAvatar mt={3} />
+      <Box flex={1} color="gray.900">
+        <ChakraStreamdown isAnimating={false}>
+          {message.text || ''}
+        </ChakraStreamdown>
+        <ChatMessageToolbar />
+      </Box>
+    </Flex>
+  )
+}
+
+const UserMessage = ({ message }: ChatMessageProps) => {
+  return (
+    <Flex justify="flex-end">
+      <Box
+        maxW="80%"
+        bg="gray.100"
+        color="gray.900"
+        px={4}
+        py={3}
+        borderRadius="lg"
+      >
+        <Text fontSize="sm" whiteSpace="pre-wrap">
+          {message.text}
+        </Text>
+      </Box>
+    </Flex>
+  )
+}
+
+const ChatMessage = ({ message }: { message: Message }) => {
+  if (message.isUser) {
+    return <UserMessage message={message} />
+  }
+  return <AiMessage message={message} />
+}
+
+export default ChatMessage

packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessage.tsx

@@ -2,9 +2,8 @@ import { Box, Flex, VStack } from '@chakra-ui/react'
 
 import { Message } from '@/hooks/useChatStream'
 
-import AiMessage from './AiMessage'
+import ChatMessage from './ChatMessage'
 import StreamingMessage from './StreamingMessage'
-import UserMessage from './UserMessage'
 
 interface ChatMessagesProps {
   messages: Message[]
@@ -35,13 +34,7 @@ export default function ChatMessages({
       <Box w="full" maxW="4xl" mx="auto" px={4} py={6}>
         <VStack align="stretch" spacing={4}>
           {messages.map((message, index) => (
-            <Box key={index}>
-              {message.isUser ? (
-                <UserMessage message={message} />
-              ) : (
-                <AiMessage message={message} />
-              )}
-            </Box>
+            <ChatMessage key={index} message={message} />
           ))}
 
           {/* Streaming response */}