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

refine instant log style

Author: Oceania2018

src/lib/scss/_variables.scss

@@ -1811,4 +1811,4 @@ $pre-color:                         null;
 $faded-color: #BCBCBC;
 
 $log-sec-height-lg:                    400px;
-$log-sec-height-sm:                    300px;
+$log-sec-height-sm:                    150px;

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

@@ -107,54 +107,45 @@
                     <i class="mdi mdi-window-close"></i>
                 </button>
             </div>
-            <div>
-                <button
-                    type="button"
-                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
-                    on:click={() => handleCleanScreen()}
-                >
-                    <i class="bx bx-trash"></i>
-                </button>
-            </div>
         </div>
         <div class="log-body instant-log-body">
-            <div class="log-list instant-log-section instant-log-sec-lg" class:hide={!!!msgStateLogs || msgStateLogs?.length === 0}>
+            <div class="log-list instant-log-section instant-log-sec-sm" class:hide={!!!agentQueueLogs || agentQueueLogs?.length === 0}>
                 <div class="close-icon">
                     <span
                         style="float: right;"
                         role="link"
                         tabindex="-1"
                         on:keydown={() => {}}
-                        on:click={() => closeLog(msgStateLogTab)}
+                        on:click={() => closeLog(agentQueueLogTab)}
                     >
                         <i class="mdi mdi-window-close"></i>
                     </span>
                 </div>
-                <div class="msg-state-log-scrollbar padding-side" >
+                <div class="agent-queue-log-scrollbar padding-side">
                     <ul>
-                        {#each msgStateLogs as log}
-                            <MessageStateLogElement data={log} />
+                        {#each agentQueueLogs as log}
+                            <AgentQueueLogElement data={log} />
                         {/each}
                     </ul>
                 </div>
             </div>
-            
-            <div class="log-list instant-log-section instant-log-sec-sm" class:hide={!!!agentQueueLogs || agentQueueLogs?.length === 0}>
+
+            <div class="log-list instant-log-section instant-log-sec-lg" class:hide={!!!msgStateLogs || msgStateLogs?.length === 0}>
                 <div class="close-icon">
                     <span
                         style="float: right;"
                         role="link"
                         tabindex="-1"
                         on:keydown={() => {}}
-                        on:click={() => closeLog(agentQueueLogTab)}
+                        on:click={() => closeLog(msgStateLogTab)}
                     >
                         <i class="mdi mdi-window-close"></i>
                     </span>
                 </div>
-                <div class="agent-queue-log-scrollbar padding-side">
+                <div class="msg-state-log-scrollbar padding-side" >
                     <ul>
-                        {#each agentQueueLogs as log}
-                            <AgentQueueLogElement data={log} />
+                        {#each msgStateLogs as log}
+                            <MessageStateLogElement data={log} />
                         {/each}
                     </ul>
                 </div>

src/routes/chat/[agentId]/[conversationId]/instant-log/message-state-log-element.svelte

@@ -48,7 +48,7 @@
         <div>
             <span><b>{`${data?.name}`}</b></span>
             {#if !!data?.source}
-            <span class="state-source">{`(${data?.source})`}</span>
+            <span class="state-source text-secondary">{`${data?.source}`}</span>
             {/if}
         </div>
     </div>