change log background

SciSharp · Jan 18, 2024 · 3341756 · 3341756
1 parent 99457be
commit 3341756
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -257,32 +257,33 @@
 
 .chat-log {
     flex: 0.3;
-    background-color: white;
 
     .padding-side {
         padding-left: 10px;
         padding-right: 20px;
     }
 
-    .log-close-btn {
-        margin-top: 1.5rem;
-        margin-bottom: 10px;
-        position: sticky;
-        display: flex;
-        justify-content: flex-end;
-    }
+    .log-background {
+        background-color: black;
 
-    .log-list {
-        height: 90vh;
-        .log-element {
-            margin-top: 20px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            background-color: antiquewhite;
-
-            .log-content {
-                padding: 15px 15px;
-                font-size: 15px;
+        .log-close-btn {
+            margin-top: 1.5rem;
+            margin-bottom: 10px;
+            position: sticky;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .log-list {
+            height: 90vh;
+            .log-element {
+                margin-top: 15px;
+                margin-bottom: 15px;
+
+                .log-content {
+                    font-size: 15px;
+                    color: white;
+                }
             }
         }
     }

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -9,7 +9,7 @@
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import Link from 'svelte-link';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { webSpeech } from '$lib/services/web-speech.js';
@@ -86,7 +86,7 @@
 
     /** @param {import('$types').ChatResponseModel} message */
     function onMessageReceivedFromAssistant(message) {
-		// webSpeech.utter(message.text);
+		webSpeech.utter(message.text);
 		// clean rich content elements
 		dialogs.forEach(dialog => {
 			if (dialog.rich_content && dialog.rich_content.message.rich_type == "quick_reply") {
@@ -122,9 +122,10 @@
 		webSpeech.start();
     }	
 
-    function refresh() {
+    async function refresh() {
       // trigger UI render
       dialogs = dialogs;
+	  await tick();
 
       setTimeout(() => {
 		const { viewport } = scrollbar.elements();
@@ -203,7 +204,7 @@
 										<i class="bx bx-dots-vertical-rounded" />
 									</DropdownToggle>
 									<DropdownMenu class="dropdown-menu-end">
-										<DropdownItem href="#">Eidt</DropdownItem>
+										<DropdownItem href="#">Edit</DropdownItem>
 										<DropdownItem href="#">Copy</DropdownItem>
 										<DropdownItem href="#">Delete</DropdownItem>
 									</DropdownMenu>

diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
@@ -1,7 +1,7 @@
 <script>
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, onMount } from 'svelte';
+	import { afterUpdate, onMount, tick } from 'svelte';
 	import { replaceNewLine } from '$lib/helpers/http';
 
     /** @type {any[]} */
@@ -26,7 +26,7 @@
 	};
 
     onMount(async () => {
-		const scrollElements = document.querySelectorAll('.scrollbar');
+		const scrollElements = document.querySelectorAll('.log-scrollbar');
 		scrollElements.forEach((item) => {
 			scrollbar = OverlayScrollbars(item, options);
 		});
@@ -39,9 +39,10 @@
     });
 
 
-    function refreshLog() {
+    async function refreshLog() {
       // trigger UI render
       logs = logs;
+      await tick();
 
       setTimeout(() => {
 		const { viewport } = scrollbar.elements();
@@ -52,7 +53,7 @@
 </script>
 
 <div class="chat-log">
-    <div class="card mb-0" style="height: 100%;">
+    <div class="card mb-0 log-background" style="height: 100%;">
         <div class="log-close-btn padding-side ">
             <button
                 type="button"
@@ -62,7 +63,7 @@
                 <span class="d-none d-sm-inline-block me-2" >Close</span><i class="mdi mdi-window-close"></i>
             </button>
         </div>
-        <div class="scrollbar log-list padding-side">
+        <div class="log-scrollbar log-list padding-side">
             <ul>
                 {#each logs as log}
                     <div class="log-element">