set styles

apps/app/src/features/openai/chat/components/AiChatModal/MessageCard.module.scss

@@ -0,0 +1,29 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+
+.message-card :global {
+  .card-body {
+    --bs-card-spacer-x: 1.25rem;
+    --bs-card-spacer-y: 0.8rem;
+
+    // remove margin from last child
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// baloon style
+.user-message-card :global {
+  border: 0;
+
+  --bs-card-border-radius: var(--bs-border-radius-xxl);
+  border-bottom-right-radius: var(--bs-border-radius-lg);
+}
+
+// max width
+.user-message-card :global {
+  max-width: 85%;
+  @include bs.media-breakpoint-up(lg) {
+    max-width: 75%;
+  }
+}

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

@@ -1,8 +1,14 @@
 import ReactMarkdown from 'react-markdown';
 
+import styles from './MessageCard.module.scss';
+
+const moduleClass = styles['message-card'] ?? '';
+
+
+const userMessageCardModuleClass = styles['user-message-card'] ?? '';
 
 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 d-inline-flex align-self-end bg-success-subtle bg-info-subtle ${moduleClass} ${userMessageCardModuleClass}`}>
     <div className="card-body">
       { children != null && children.length > 0 && (
         <ReactMarkdown>{children}</ReactMarkdown>
@@ -11,8 +17,11 @@ const UserMessageCard = ({ children }: { children?: string }): JSX.Element => (
   </div>
 );
 
+
+const assistantMessageCardModuleClass = styles['assistant-message-card'] ?? '';
+
 const AssistantMessageCard = ({ children }: { children?: string }): JSX.Element => (
-  <div className="card d-inline-flex align-self-start" style={{ maxWidth: '75%' }}>
+  <div className={`card d-inline-flex align-self-start border-0 ${moduleClass} ${assistantMessageCardModuleClass}`}>
     <div className="card-body">
       { children != null && children.length > 0 && (
         <ReactMarkdown>{children}</ReactMarkdown>