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

Features/refine chat window

src/lib/common/LiveChatEntry.svelte

@@ -1,85 +1,85 @@
 <script>
-    import { fade } from 'svelte/transition';
-    import { onMount } from 'svelte';
-    import { PUBLIC_LIVECHAT_HOST, PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
-    import { getSettingDetail } from '$lib/services/setting-service';
+  import { fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  import { PUBLIC_LIVECHAT_HOST, PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
+  import { getSettingDetail } from '$lib/services/setting-service';
 
-    let showChatIcon = false;
-    let showChatBox = false;
-    let chatUrl = PUBLIC_LIVECHAT_HOST;
+  let showChatIcon = false;
+  let showChatBox = false;
+  let chatUrl = PUBLIC_LIVECHAT_HOST;
 
-	onMount(async () => {
-        const agentSettings = await getSettingDetail("Agent");
-        chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}?isFrame=true`;
-        showChatIcon = true;
-	});
+  onMount(async () => {
+    const agentSettings = await getSettingDetail("Agent");
+    chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}?isFrame=true`;
+    showChatIcon = true;
+  });
 
-    // Handle event from iframe
-    window.onmessage = async function(e) {
-        if (e.data.action == 'close') {
-            showChatIcon = true;
-            showChatBox = false;
-        }
-    };
-
-    function handleChatBox() {
-        showChatIcon = false;
-        showChatBox = true;
+  // Handle event from iframe
+  window.onmessage = async function(e) {
+    if (e.data.action == 'close') {
+      showChatIcon = true;
+      showChatBox = false;
     }
+  };
+
+  function handleChatBox() {
+    showChatIcon = false;
+    showChatBox = true;
+  }
 </script>
 
 <div class="fixed-bottom float-bottom-right">
-    {#if showChatBox}
-    <div transition:fade={{ delay: 250, duration: 300 }}>
-      <iframe
-        src={chatUrl}
-        width="380px" 
-        height="650px" 
-        class="border border-2 rounded-3 m-3 float-end chat-iframe"
-        title="live chat"
-      >
-      </iframe>
-    </div>
-    {/if}
+  {#if showChatBox}
+  <div transition:fade={{ delay: 250, duration: 300 }}>
+    <iframe
+      src={chatUrl}
+      width="380px" 
+      height="650px" 
+      class="border border-2 rounded-3 m-3 float-end chat-iframe"
+      title="live chat"
+    >
+    </iframe>
+  </div>
+  {/if}
 
-    {#if showChatIcon}
-    <div class="mb-3 float-end wave-effect" transition:fade={{ delay: 100, duration: 500 }}>
-      <button class="btn btn-transparent" on:click={handleChatBox}>
-        <img alt="live chat" class="avatar-md rounded-circle" src={PUBLIC_LIVECHAT_ENTRY_ICON} />
-      </button>
-    </div>
-    {/if}
+  {#if showChatIcon}
+  <div class="mb-3 float-end wave-effect" transition:fade={{ delay: 100, duration: 500 }}>
+    <button class="btn btn-transparent" on:click={handleChatBox}>
+      <img alt="live chat" class="avatar-md rounded-circle" src={PUBLIC_LIVECHAT_ENTRY_ICON} />
+    </button>
+  </div>
+  {/if}
 </div>
 
 <style>
-    .wave-effect:hover {
-      animation: wave 0.82s cubic-bezier(.36,.07,.19,.97) both;
-      transform: translate3d(0, 0, 0);
-      backface-visibility: hidden;
-      perspective: 1000px;
+  .wave-effect:hover {
+    animation: wave 0.82s cubic-bezier(.36,.07,.19,.97) both;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+
+  @keyframes wave {
+    10%, 90% {
+      transform: translate3d(-1px, 0, 0);
     }
-  
-    @keyframes wave {
-      10%, 90% {
-        transform: translate3d(-1px, 0, 0);
-      }
-      
-      20%, 80% {
-        transform: translate3d(2px, 0, 0);
-      }
-  
-      30%, 50%, 70% {
-        transform: translate3d(-4px, 0, 0);
-      }
-  
-      40%, 60% {
-        transform: translate3d(4px, 0, 0);
-      }
+    
+    20%, 80% {
+      transform: translate3d(2px, 0, 0);
     }
 
-    .float-bottom-right {
-      width: fit-content;
-      margin-right: 0px;
-      margin-left: auto;
+    30%, 50%, 70% {
+      transform: translate3d(-4px, 0, 0);
     }
+
+    40%, 60% {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+
+  .float-bottom-right {
+    width: fit-content;
+    margin-right: 0px;
+    margin-left: auto;
+  }
 </style>

src/lib/helpers/http.js

@@ -64,14 +64,19 @@ function skipLoader(config) {
     const getRegexes = [
         new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
-        new RegExp('http(s*)://(.*?)/llm-provider/(.*?)/models', 'g')
+        new RegExp('http(s*)://(.*?)/llm-provider/(.*?)/models', 'g'),
+        new RegExp('http(s*)://(.*?)/knowledge/collections', 'g'),
+        new RegExp('http(s*)://(.*?)/setting/(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/user/me', 'g'),
+        new RegExp('http(s*)://(.*?)/plugin/menu', 'g')
     ];
 
     if (config.method === 'post' && !!config.data && postRegexes.some(regex => regex.test(config.url || ''))) {
         return true;
     }
 
     if (config.method === 'get' && getRegexes.some(regex => regex.test(config.url || ''))) {
+        console.log(config.url);
         return true;
     }
 

src/lib/scss/custom/pages/_knowledgebase.scss

@@ -66,6 +66,19 @@
     }
 }
 
+.knowledge-table-header {
+    justify-content: space-between;
+
+    .knowledge-header-text {
+        margin-bottom: 0px !important;
+        padding: 0.47rem 0.75rem;
+    }
+
+    .knowledge-dropdown {
+        width: 30%;
+    }
+}
+
 .knowledge-table {
     overflow: hidden;
 

src/lib/services/api-endpoints.js

@@ -59,10 +59,11 @@ export const endpoints = {
     loggingStateLogUrl: `${host}/logger/conversation/{conversationId}/state-log`,
 
     // knowledge base
-    knowledgeBaseUploadUrl: `${host}/knowledge/{collection}/upload`,
+    knowledgeBaseCollectionsUrl: `${host}/knowledge/collections`,
     knowledgeBaseDataListUrl: `${host}/knowledge/{collection}/data`,
     knowledgeBaseSearchUrl: `${host}/knowledge/{collection}/search`,
     knowledgeBaseDeleteDataUrl: `${host}/knowledge/{collection}/data/{id}`,
+    knowledgeBaseUploadUrl: `${host}/knowledge/{collection}/upload`,
 
     // chathub 
     chatHubUrl: `${host}/chatHub`,

src/lib/services/knowledge-base-service.js

@@ -3,6 +3,15 @@ import { replaceUrl } from '$lib/helpers/http.js';
 import { endpoints } from './api-endpoints.js';
 import axios from 'axios';
 
+/**
+ * @returns {Promise<string[]>}
+ */
+export async function getKnowledgeCollections() {
+    const url = endpoints.knowledgeBaseCollectionsUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
 /**
  * @param {import('$types').SearchKnowledgeRequest} request
  * @param {string | null} [collection]

src/routes/page/knowledge-base/+page.svelte

@@ -6,8 +6,10 @@
     import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import KnowledgeTable from "./knowledge-table/knowledge-table.svelte";
 	import KnowledgeSearch from './knowledge-search/knowledge-search.svelte';
+	import { KNOWLEDGE_COLLECTION } from '$lib/helpers/constants';
 
 	let show_demo = false;
+	let collection = KNOWLEDGE_COLLECTION;
 
 	function toggleDemo() {
 		show_demo = !show_demo;
@@ -52,14 +54,14 @@
 				in:fly={{ y: -10, duration: 500 }}
 				out:fly={{ y: -10, duration: 200 }}
 			>
-				<KnowledgeSearch />
+				<KnowledgeSearch bind:collection={collection} />
 			</div>
 		{/if}
 		<div class="d-md-flex">
 			<div class="w-100">
 				<Card>
 					<CardBody>
-                  		<KnowledgeTable />
+                  		<KnowledgeTable bind:collection={collection} />
 					</CardBody>
 				</Card>
 			</div>

src/routes/page/knowledge-base/knowledge-search/knowledge-search.svelte

@@ -3,8 +3,11 @@
   import { Button } from "@sveltestrap/sveltestrap";
   import LoadingDots from "$lib/common/LoadingDots.svelte";
 	import KnowledgeSearchList from "./knowledge-search-list.svelte";
+  import { KNOWLEDGE_COLLECTION } from "$lib/helpers/constants";
   import _ from "lodash";
 
+  export let collection = KNOWLEDGE_COLLECTION;
+
   let text = "";
   let is_searching = false;
   let search_done = false;
@@ -21,7 +24,7 @@
     searchKnowledge({
       text: _.trim(text),
       confidence: confidence
-    }).then(res => {
+    }, collection).then(res => {
       search_results = res || [];
     }).finally(() => {
       is_searching = false;