WIP: refactor MessageCard

apps/app/src/features/openai/chat/components/AiChatModal/AiChatModal.tsx

@@ -158,11 +158,11 @@ const AiChatModalSubstance = (): JSX.Element => {
       <ModalBody className="vstack gap-4 pb-0 pt-3 pt-lg-4 px-3 px-lg-4">
         <div className="pb-4">
           { messageLogs.map(message => (
-            <MessageCard key={message.id} right={message.isUserMessage}>{message.content}</MessageCard>
+            <MessageCard key={message.id} role={message.isUserMessage ? 'user' : 'assistant'}>{message.content}</MessageCard>
           )) }
           { lastMessage != null && (
             <>
-              <MessageCard>{lastMessage.content}</MessageCard>
+              <MessageCard role="assistant">{lastMessage.content}</MessageCard>
               <div className="d-flex justify-content-center">
                 <span className="bg-secondary-subtle text-body-secondary rounded-pill px-3 py-1">
                   情報が正しいか出典を確認しましょう

apps/app/src/features/openai/chat/components/AiChatModal/MessageCard.tsx

@@ -1,23 +1,35 @@
 import ReactMarkdown from 'react-markdown';
 
+
+const UserMessageCard = ({ children }: { children?: string }): JSX.Element => (
+  <div className="card d-inline-flex align-self-end bg-success-subtle bg-info-subtle" style={{ maxWidth: '75%' }}>
+    <div className="card-body">
+      { children != null && children.length > 0 && (
+        <ReactMarkdown>{children}</ReactMarkdown>
+      ) }
+    </div>
+  </div>
+);
+
+const AssistantMessageCard = ({ children }: { children?: string }): JSX.Element => (
+  <div className="card d-inline-flex align-self-start" style={{ maxWidth: '75%' }}>
+    <div className="card-body">
+      { children != null && children.length > 0 && (
+        <ReactMarkdown>{children}</ReactMarkdown>
+      ) }
+    </div>
+  </div>
+);
+
 type Props = {
+  role: 'user' | 'assistant',
   children?: string,
-  right?: boolean,
 }
 
 export const MessageCard = (props: Props): JSX.Element => {
-  const { children, right } = props;
-
-  const alignClass = right ? 'align-self-end bg-success-subtle' : 'align-self-start';
-  const bgClass = right ? 'bg-info-subtle' : '';
+  const { role, children } = props;
 
-  return (
-    <div className={`card d-inline-flex ${alignClass} ${bgClass}`} style={{ maxWidth: '75%' }}>
-      <div className="card-body">
-        { children != null && children.length > 0 && (
-          <ReactMarkdown>{children}</ReactMarkdown>
-        ) }
-      </div>
-    </div>
-  );
+  return role === 'user'
+    ? <UserMessageCard>{children}</UserMessageCard>
+    : <AssistantMessageCard>{children}</AssistantMessageCard>;
 };