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

Features/refine chat window

src/lib/common/StateModal.svelte

@@ -1,5 +1,15 @@
 <script>
-	import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Form, FormGroup } from "@sveltestrap/sveltestrap";
+	import {
+        Button,
+        Input,
+        Modal,
+        ModalBody,
+        ModalFooter,
+        ModalHeader,
+        Row,
+        Form,
+        FormGroup
+    } from "@sveltestrap/sveltestrap";
     import _ from "lodash";
 
     /** @type {boolean} */

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

@@ -48,41 +48,40 @@
         border-color: var(--#{$prefix}light) !important;
         background-color: var(--#{$prefix}light) !important;
         scrollbar-width: thin;
+        resize: none;
     }
 
     .text-count {
         margin-top: 2px;
         font-size: 10px;
     }
 
-    .knowledge-search-result-container {
-        li::marker {
-            color: var(--bs-secondary)
-        }
-
-        .list-open {
-            list-style-type: disclosure-open;
-        }
-
-        .list-closed {
-            list-style-type: disclosure-closed;
-        }
+    .knowledge-search-footer {
+        display: flex;
+        justify-content: space-between;
 
-        .result-item {
-            margin: 5px 0px;
-            font-size: 15px;
+        .confidence-input {
+            display: flex;
+            gap: 5px;
 
-            .result-key {
-                font-size: 17px;
+            .confidence-text {
+                padding: 0.47rem 0px;
+                font-size: 12px;
             }
 
-            .result-content {
-                word-break: normal;
+            .confidence-box {
+                width: 40%;
             }
+        }
+    }
 
-            .result-score {
-                margin-top: 5px;
-            }
+    .graph-searh-result-container {
+        .graph-result-header {
+            font-size: 17px;
+        }
+
+        .graph-result-body {
+            font-size: 15px;
         }
     }
 }

src/lib/services/api-endpoints.js

@@ -64,6 +64,7 @@ export const endpoints = {
     vectorKnowledgeSearchUrl: `${host}/knowledge/vector/{collection}/search`,
     vectorKnowledgeDeleteUrl: `${host}/knowledge/vector/{collection}/data/{id}`,
     vectorKnowledgeUploadUrl: `${host}/knowledge/vector/{collection}/upload`,
+    graphKnowledgeSearchUrl: `${host}/knowledge/graph/search`,
 
     // chathub 
     chatHubUrl: `${host}/chatHub`,

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

@@ -88,4 +88,16 @@ export async function uploadVectorKnowledge(file, collection = null, startPageNu
 
     const response = await axios.post(url, formData, config);
     return response.data;
+}
+
+
+/**
+ * @param {string} text
+ * @param {string } method
+ * @returns {Promise<any>}
+ */
+export async function searchGraphKnowledge(text, method = "local") {
+    const url = endpoints.graphKnowledgeSearchUrl;
+    const response = await axios.post(url, { query: text, method: method });
+    return response.data;
 }

src/routes/VerticalLayout/Sidebar.svelte

@@ -197,13 +197,7 @@
 
 	const getPathUrl = () => {
 		const path = $page.url.pathname;
-		// return path?.startsWith('/') ? path.substring(1) : path;
-		if (path) {
-        if (path.startsWith('/') && !path.startsWith('/page/knowledge-base')) {
-            return path.substring(1);
-        }
-    }
-    return path;
+		return path?.startsWith('/') ? path.substring(1) : path;
 	};
 </script>
 

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

@@ -0,0 +1,108 @@
+<script>
+    import { onMount } from 'svelte';
+    import { fly } from 'svelte/transition';
+	import { _ } from 'svelte-i18n';
+	import util from "lodash";
+	import { Button } from '@sveltestrap/sveltestrap';
+	import LoadingDots from '$lib/common/LoadingDots.svelte';
+	import HeadTitle from '$lib/common/HeadTitle.svelte';
+    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import { searchGraphKnowledge } from '$lib/services/knowledge-base-service';
+    
+	const maxLength = 4096;
+
+    let showDemo = false;
+    let isSearching = false;
+    let searchDone = false;
+    let text = '';
+    let result = '';
+
+    onMount(() => {
+        showDemo = true;
+    });
+
+    function search() {
+        searchDone = false;
+		isSearching = true;
+		searchGraphKnowledge(util.trim(text)).then(res => {
+            result = res.result || '';
+		}).catch(err => {
+            result = 'Error!';
+        }).finally(() => {
+			isSearching = false;
+            searchDone = true;
+		});
+	}
+
+    /** @param {KeyboardEvent} e */
+	function pressKey(e) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isSearching) {
+			return;
+		}
+
+		if (e.key === 'Enter') {
+			e.preventDefault();
+		}
+
+		search();
+	}
+</script>
+
+
+<HeadTitle title="{$_('Graph Knowledge')}" />
+<Breadcrumb pagetitle="{$_('Graph Knowledge')}" title="{$_('Knowledge Base')}"/>
+
+<div class="d-xl-flex">
+	<div class="w-100">
+        {#if showDemo}
+            <div
+                in:fly={{ y: -10, duration: 500 }}
+                out:fly={{ y: -10, duration: 200 }}
+            >
+                <div class="knowledge-search-container mb-4">
+                    <textarea
+                        class='form-control search-textarea'
+                        rows={5}
+                        maxlength={maxLength}
+                        disabled={isSearching}
+                        placeholder={'Start searching here...'}
+                        bind:value={text}
+                        on:keydown={(e) => pressKey(e)}
+                    />
+                    <div class="text-secondary text-end text-count">
+                        {text?.length || 0}/{maxLength}
+                    </div>
+
+                    <div class="mt-2 text-end">
+                        <Button
+                            color="primary"
+                            disabled={!text || util.trim(text).length === 0 || isSearching}
+                            on:click={() => search()}
+                        >
+                            {'Search'}
+                        </Button>
+                    </div>
+
+                    {#if isSearching}
+                        <div class="knowledge-loader mt-4">
+                            <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+                        </div>
+                    {:else if searchDone && !!result}
+                        <div class="graph-searh-result-container mt-3">
+                            <div class="text-primary fw-bold graph-result-header">
+                                {'Answer:'}
+                            </div>
+                            <div class="graph-result-body mt-2">
+                                {result}
+                            </div>
+                        </div>
+                    {:else if searchDone && !result}
+                        <div class="mt-3">
+                            <h4 class="text-secondary">{"Ehhh, no idea..."}</h4>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>