Merge pull request #256 from iceljc/features/refine-chat-window

refine style

Author: iceljc

src/lib/common/Markdown.svelte

@@ -23,6 +23,6 @@
 	}
 </script>
 
-<span class={`markdown-container ${containerClasses || 'text-white'}`}>
+<div class={`markdown-container ${containerClasses || 'text-white'}`}>
 	{@html displayText}
-</span>
+</div>

src/lib/scss/custom/common/_common.scss

@@ -173,6 +173,9 @@ button:focus {
 }
 
 .markdown-container {
+  overflow-x: auto;
+  scrollbar-width: thin;
+
   pre {
     -ms-overflow-style: none !important;
     white-space: pre-wrap;

src/lib/scss/custom/pages/_chat.scss

@@ -99,6 +99,7 @@
 
                 .chat-head-agent-icon {
                     height: 80%;
+                    max-height: 25px;
                 }
             }
 

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -1441,15 +1441,17 @@
 							<div class="col-md-4 col-7 chat-head-info">
 								<div class="chat-head-agent">
 									{#if agent?.icon_url}
-									<img class="chat-head-agent-icon" src={agent.icon_url} alt="">
+									<div class="line-align-center">
+										<img class="chat-head-agent-icon" src={agent.icon_url} alt="">
+									</div>
 									{/if}
-									<div class="chat-head-agent-name">{agent?.name || 'Unkown'}</div>
+									<div class="chat-head-agent-name line-align-center ellipsis">{agent?.name || 'Unkown'}</div>
 								</div>
 								<div class="text-muted mb-0 chat-head-user">
 									<div>
 										<i class="mdi mdi-circle text-success align-middle" />
 									</div>
-									<div>
+									<div class="ellipsis">
 										<span>{conversationUser?.full_name || conversationUser?.user_name || ''}</span>
 									</div>
 								</div>