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

use full name

Author: Oceania2018

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

@@ -353,7 +353,7 @@
         flex: 2%;
     }
 
-    .log-content {
+    .log-body {
         flex: 96%
     }
 

src/lib/services/api-endpoints.js

@@ -42,6 +42,7 @@ export const endpoints = {
     conversationDeletionUrl: `${host}/conversation/{conversationId}`,
     conversationDetailUrl: `${host}/conversation/{conversationId}`,
     conversationAttachmentUrl: `${host}/conversation/{conversationId}/files/{messageId}`,
+    conversationUserUrl: `${host}/conversation/{conversationId}/user`,
     dialogsUrl: `${host}/conversation/{conversationId}/dialogs`,
     conversationMessageDeletionUrl: `${host}/conversation/{conversationId}/message/{messageId}`,
 

src/lib/services/conversation-service.js

@@ -26,6 +26,17 @@ export async function getConversation(id) {
     return response.data;
 }
 
+/**
+ * Get conversation user
+ * @param {string} id
+ * @returns {Promise<import('$types').UserModel>}
+ */
+export async function getConversationUser(id) {
+    let url = replaceUrl(endpoints.conversationUserUrl, {conversationId: id});
+    const response = await axios.get(url);
+    return response.data;
+}
+
 /**
  * Get conversation list
  * @param {import('$types').ConversationFilter} filter

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

@@ -15,7 +15,8 @@
 		sendMessageToHub,
 		GetDialogs,
 		deleteConversationMessage,
-		getConversationFiles
+		getConversationFiles,
+		getConversationUser
 	} from '$lib/services/conversation-service.js';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
@@ -107,6 +108,9 @@
 	/** @type {import('$types').UserStateDetailModel[]} */
 	let userAddStates = [];
 
+	/** @type {import('$types').UserModel} */
+    let conversationUser;
+
 	/** @type {boolean} */
 	let isLoadContentLog = false;
 	let isLoadStateLog = false;
@@ -137,6 +141,7 @@
 	onMount(async () => {
 		autoScrollLog = true;
 		dialogs = await GetDialogs(params.conversationId);
+		conversationUser = await getConversationUser(params.conversationId);
 		initUserSentMessages(dialogs);
 		initChatView();
 		
@@ -875,7 +880,7 @@
 							<div class="col-md-4 col-7 head-left">
 								<div class="m-1">{agent?.name}</div>
 								<div class="text-muted mb-0">
-									<i class="mdi mdi-circle text-success align-middle me-1" /> {currentUser?.user_name || ''}
+									<i class="mdi mdi-circle text-success align-middle me-1" /> {conversationUser?.full_name || ''}
 								</div>
 							</div>
 		

src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte

@@ -121,15 +121,15 @@
             </div>
         </div>
 
-        <div class="content-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== contentLogTab}>
+        <div class="content-log-scrollbar log-list padding-side log-body" class:hide={selectedTab !== contentLogTab}>
             <ul>
                 {#each contentLogs as log}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>
         </div>
 
-        <div class="queue-change-log-scrollbar log-list log-content" class:hide={selectedTab !== agentQueueLogTab}>
+        <div class="queue-change-log-scrollbar log-list log-body" class:hide={selectedTab !== agentQueueLogTab}>
             <ul>
                 {#each agentQueueLogs as log}
                     <AgentQueueLogElement data={log} />

src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte

@@ -118,15 +118,15 @@
                 </button>
             </div>
         </div>
-        <div class="conv-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== convStateLogTab}>
+        <div class="conv-state-log-scrollbar log-list padding-side log-body" class:hide={selectedTab !== convStateLogTab}>
             <ul>
                 {#each convStateLogs as log}
                     <ConversationStateLogElement data={log} />
                 {/each}
             </ul>
         </div>
 
-        <div class="msg-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== msgStateLogTab}>
+        <div class="msg-state-log-scrollbar log-list padding-side log-body" class:hide={selectedTab !== msgStateLogTab}>
             <ul>
                 {#each msgStateLogs as log}
                     <MessageStateLogElement data={log} />