From bf60472cdd64f16c5e6888020d4f28065fd0b137 Mon Sep 17 00:00:00 2001
From: Michael Tanzer <mt.michael97@gmail.com>
Date: Mon, 6 Mar 2023 15:12:23 +0000
Subject: [PATCH] Fixed left-align issue, made conversation look like a chat

---
 src/app.scss        | 12 ++++++++++++
 src/lib/Chat.svelte |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 8b20a99..5bafbab 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -21,6 +21,18 @@ a.is-disabled {
   filter: grayscale(100%);
 }
 
+.user-message {
+  max-width: 70%;
+  margin-right: 0;
+  margin-left: auto;
+  width: fit-content;
+}
+
+.assistant-message {
+  max-width: 70%;
+  width: fit-content;
+}
+
 /* Show the edit button on hover of the user message */
 .user-message:hover .editbutton {
   /* TODO: add when ready: display: block !important; */
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 29e746a..af5a364 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -148,7 +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").length === 1}>
+    <article class="message is-info user-message">
       <div class="message-body">
         <a
           href={"#"}
@@ -170,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}
@@ -180,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}