From 0c75b307dbbfb66700f0c7bf4f6c8eccd22d0f94 Mon Sep 17 00:00:00 2001
From: Nemo Godebski-Pedersen <nemozak1@gmail.com>
Date: Fri, 28 Feb 2025 15:19:14 +0000
Subject: [PATCH] styling for messages container

---
 components.d.ts                |  3 +++
 src/components/ChatMessage.vue |  7 +++++--
 src/components/ChatWidget.vue  | 19 +++++++++++++------
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 5c5210a..ddf04fb 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -38,6 +38,9 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScollbar: typeof import('element-plus/es')['ElScollbar']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSrcollbar: typeof import('element-plus/es')['ElSrcollbar']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     GlossarySearchNav: typeof import('./src/components/GlossarySearchNav.vue')['default']
     HeaderNav: typeof import('./src/components/HeaderNav.vue')['default']
diff --git a/src/components/ChatMessage.vue b/src/components/ChatMessage.vue
index b00628e..cce3149 100644
--- a/src/components/ChatMessage.vue
+++ b/src/components/ChatMessage.vue
@@ -85,15 +85,17 @@ export default {
     margin: 10px 0 10px 0;
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
+    width: fit-content
 }
 
 .message-container.user {
-    width: auto;
     max-width: 80%;
     margin-left: auto;
     margin-right: 0px;
     border-radius: 10px 10px 0 10px;
+    align-items: flex-end;
+    flex-basis: content;
+    justify-content: flex-end;
 }
 
 .message-container.assistant {
@@ -101,5 +103,6 @@ export default {
     max-width: 80%;
     margin-left: 0px;
     margin-right: auto;
+    align-items: flex-start;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ChatWidget.vue b/src/components/ChatWidget.vue
index 4a4cc52..f8efcaf 100644
--- a/src/components/ChatWidget.vue
+++ b/src/components/ChatWidget.vue
@@ -100,12 +100,13 @@ export default {
             <el-container direction="vertical">
                 <el-header>
                     <img alt="Opey Logo" src="@/assets/opey-logo-inv.png"> 
-                    Chat with Opey
                     <el-button type="danger" :icon="Close" @click="toggleChat" size="small" circle></el-button>
                 </el-header>
                 <el-main>
                     <div class="messages-container">
-                        <ChatMessage v-for="message in opeyContext.messages" :key="message.id" :message="message" />
+                        <el-scrollbar>
+                            <ChatMessage v-for="message in opeyContext.messages" :key="message.id" :message="message" />
+                        </el-scrollbar>
                     </div>
                 </el-main>
                 <el-footer>
@@ -113,7 +114,6 @@ export default {
                         <div class="user-input">
                             <textarea v-model="input" type="textarea" placeholder="Type your message..." :disabled="opeyContext.status !== 'ready'" @keypress.enter="onSubmit" />
                         </div>
-                        
                         <el-button type="primary" @click="onSubmit" color="#253047" :icon="ElTop" circle></el-button>
                     </div>
                 </el-footer>
@@ -147,8 +147,8 @@ export default {
     position: fixed;
     bottom: 20px;
     right: 20px;
-    width: 390px;
-    height: 470px;
+    width: 650px;
+    height: 625px;
     min-width: 390px;
     min-height: 470px;
     max-height: 90vh;
@@ -161,6 +161,10 @@ export default {
     box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
 }
 
+.chat-header {
+    font-family: Roboto-Light, sans-serif;
+}
+
 .chat-container .el-header, .chat-container .el-footer, .chat-container .el-main {
     display: flex;
     justify-content: center;
@@ -176,7 +180,8 @@ export default {
 }
 
 .chat-container .el-header img {
-    height: 50px;
+    height: 70%;
+    margin-left: -7px;
 }
 
 .chat-container .el-header, .chat-container .el-footer {
@@ -201,6 +206,8 @@ export default {
 .messages-container {
     padding-left: 10px;
     padding-right: 10px;
+    width: 100%;
+    height: 100%;
 }
 
 .user-input-container {