Merge pull request #17 from Michael-Tanzer/chat-like-conversation

Chat-like conversation, all right-aligned

src/app.scss

@@ -21,6 +21,18 @@ a.is-disabled {
   filter: grayscale(100%);
 }
 
+.user-message { 
+  max-width: 90%;
+  margin-right: 0;
+  margin-left: auto;
+  width: fit-content;
+}
+
+.assistant-message {
+  max-width: 90%;
+  width: fit-content;
+}
+
 /* Show the edit button on hover of the user message */
 .user-message:hover .editbutton {
   /* TODO: add when ready: display: block !important; */

src/lib/Chat.svelte

@@ -148,10 +148,7 @@
 
 {#each chat.messages as message}
   {#if message.role === "user"}
-    <article
-      class="message is-info user-message"
-      class:has-text-right={message.content.split("\n").filter((line) => line.trim()).length === 1}
-    >
+    <article class="message is-info user-message">
       <div class="message-body">
         <a
           href={"#"}
@@ -173,7 +170,7 @@
       </div>
     </article>
   {:else if message.role === "system"}
-    <article class="message is-danger">
+    <article class="message is-danger assistant-message">
       <SvelteMarkdown
         source={message.content}
         options={markedownOptions}
@@ -183,7 +180,7 @@
       />
     </article>
   {:else}
-    <article class="message is-success">
+    <article class="message is-success assistant-message">
       <div class="message-body">
         <SvelteMarkdown
           source={message.content}