Base

article/article.md

@@ -260,11 +260,11 @@ Well it do was pretty easy. I first did a base.html and then added an navbar and
         margin-bottom: 10px;
     }
 
-    .user-message {
+    .message-user {
         align-self: flex-start;
     }
 
-    .bot-message {
+    .message-bot {
         align-self: flex-end;
     }
 </style>
@@ -284,7 +284,7 @@ The HTML at /chat/messages look like:
 <div class="column" id="messages">
     {% for message in messages %}
     {% if message.Role == 'user' %}
-    <article class="message user-message" id='{{ message.id }}'>
+    <article class="message message-user" id='{{ message.id }}'>
         <div class="message-header">
             <p>User</p>
             <form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">
@@ -297,7 +297,7 @@ The HTML at /chat/messages look like:
         </div>
     </article>
     {% else %}
-    <article class="message bot-message" id='{{ message.id }}'>
+    <article class="message message-bot" id='{{ message.id }}'>
         <div class="message-header">
             <p>Bot</p>
             <form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">