apply icon

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

@@ -1,4 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/variables/growi-official-colors';
 
 .message-card :global {
   .card-body {
@@ -27,3 +28,13 @@
     max-width: 75%;
   }
 }
+
+
+
+// == Colors
+.assistant-message-card :global {
+  .grw-ai-icon {
+    color: white;
+    background-color: growi-official-colors.$growi-ai-purple;
+  }
+}

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

@@ -9,11 +9,11 @@ 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 ${moduleClass} ${userMessageCardModuleClass}`}>
-    <div className="card-body">
-      { children != null && children.length > 0 && (
+    { children != null && children.length > 0 && (
+      <div className="card-body">
         <ReactMarkdown>{children}</ReactMarkdown>
-      ) }
-    </div>
+      </div>
+    ) }
   </div>
 );
 
@@ -21,12 +21,15 @@ const UserMessageCard = ({ children }: { children?: string }): JSX.Element => (
 const assistantMessageCardModuleClass = styles['assistant-message-card'] ?? '';
 
 const AssistantMessageCard = ({ children }: { children?: string }): JSX.Element => (
-  <div className={`card d-inline-flex align-self-start border-0 ${moduleClass} ${assistantMessageCardModuleClass}`}>
-    <div className="card-body">
-      { children != null && children.length > 0 && (
+  <div className={`card border-0 ${moduleClass} ${assistantMessageCardModuleClass}`}>
+    { children != null && children.length > 0 && (
+      <div className="card-body d-flex">
+        <div className="me-2 me-lg-3">
+          <span className="material-symbols-outlined grw-ai-icon rounded-pill p-1">psychology</span>
+        </div>
         <ReactMarkdown>{children}</ReactMarkdown>
-      ) }
-    </div>
+      </div>
+    ) }
   </div>
 );