From 0d150ec9241de292d5763c423b426181b649a8b6 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 20 Aug 2024 13:06:21 -0500
Subject: [PATCH 1/2] add graph knowledge page

---
 src/lib/common/StateModal.svelte              |  12 +-
 src/lib/scss/custom/pages/_knowledgebase.scss |  43 ++++---
 src/lib/services/api-endpoints.js             |   1 +
 src/lib/services/knowledge-base-service.js    |  12 ++
 src/routes/VerticalLayout/Sidebar.svelte      |   8 +-
 .../page/knowledge-base/graph/+page.svelte    | 108 ++++++++++++++++++
 .../knowledge-base/{ => vector}/+page.svelte  |  96 +++++++++++-----
 .../vector-table/vector-item.svelte}          |   2 +-
 8 files changed, 224 insertions(+), 58 deletions(-)
 create mode 100644 src/routes/page/knowledge-base/graph/+page.svelte
 rename src/routes/page/knowledge-base/{ => vector}/+page.svelte (74%)
 rename src/routes/page/knowledge-base/{knowledge-table/knowledge-item.svelte => vector/vector-table/vector-item.svelte} (99%)

diff --git a/src/lib/common/StateModal.svelte b/src/lib/common/StateModal.svelte
index ed88a470..8c37013d 100644
--- a/src/lib/common/StateModal.svelte
+++ b/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} */
diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
index f38fc236..4de0fa11 100644
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ b/src/lib/scss/custom/pages/_knowledgebase.scss
@@ -48,6 +48,7 @@
         border-color: var(--#{$prefix}light) !important;
         background-color: var(--#{$prefix}light) !important;
         scrollbar-width: thin;
+        resize: none;
     }
 
     .text-count {
@@ -55,34 +56,32 @@
         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;
         }
     }
 }
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index c8653207..877b77d6 100644
--- a/src/lib/services/api-endpoints.js
+++ b/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`,
diff --git a/src/lib/services/knowledge-base-service.js b/src/lib/services/knowledge-base-service.js
index f7dea135..db2ac741 100644
--- a/src/lib/services/knowledge-base-service.js
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte
index 0abbeaa2..e1e53ad2 100644
--- a/src/routes/VerticalLayout/Sidebar.svelte
+++ b/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>
 
diff --git a/src/routes/page/knowledge-base/graph/+page.svelte b/src/routes/page/knowledge-base/graph/+page.svelte
new file mode 100644
index 00000000..7b426f3f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/page/knowledge-base/+page.svelte b/src/routes/page/knowledge-base/vector/+page.svelte
similarity index 74%
rename from src/routes/page/knowledge-base/+page.svelte
rename to src/routes/page/knowledge-base/vector/+page.svelte
index 9f7faed8..8de95ec7 100644
--- a/src/routes/page/knowledge-base/+page.svelte
+++ b/src/routes/page/knowledge-base/vector/+page.svelte
@@ -1,25 +1,36 @@
 <script>
 	import { onMount } from 'svelte';
+    import { fly } from 'svelte/transition';
 	import { _ } from 'svelte-i18n';
 	import util from "lodash";
-	import { Button, Card, CardBody, Input, Table, Tooltip } from '@sveltestrap/sveltestrap';
-	import { fly } from 'svelte/transition';
+	import {
+        Button,
+        Card,
+        CardBody,
+        Input,
+        Table,
+        Tooltip
+    } from '@sveltestrap/sveltestrap';
+    import {
+        getVectorKnowledgeCollections,
+        getVectorKnowledgeData,
+        searchVectorKnowledge
+    } from '$lib/services/knowledge-base-service';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
     import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import Loader from '$lib/common/Loader.svelte';
 	import LoadingDots from '$lib/common/LoadingDots.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import { DEFAULT_KNOWLEDGE_COLLECTION } from '$lib/helpers/constants';
-	import { getVectorKnowledgeCollections, getVectorKnowledgeData, searchVectorKnowledge } from '$lib/services/knowledge-base-service';
-	import KnowledgeItem from './knowledge-table/knowledge-item.svelte';
+	import VectorItem from './vector-table/vector-item.svelte';
 	
 	
 	const page_size = 8;
   	const duration = 2000;
 	const maxLength = 4096;
-	const confidence = 0.5;
+    const regex = "[0-9\.]+";
 	
-	let show_demo = false;
+	let showDemo = true;
 	let selectedCollection = DEFAULT_KNOWLEDGE_COLLECTION;
 	let text = "";
 	let isSearching = false;
@@ -27,6 +38,7 @@
 	let isFromSearch = false;
 	let successText = "Done";
 	let errorText = "Error";
+    let confidence = '0.5';
 
 	/** @type {import('$types').KnowledgeSearchViewModel[]} */
 	let items = [];
@@ -52,7 +64,7 @@
 
 	// Search knowledge
 	function toggleDemo() {
-		show_demo = !show_demo;
+		showDemo = !showDemo;
 	}
 
 	function search() {
@@ -62,7 +74,7 @@
 		isFromSearch = false;
 		searchVectorKnowledge({
 			text: util.trim(text),
-			confidence: confidence
+			confidence: !isNaN(Number(confidence)) ? Number(confidence) : 0
 		}, selectedCollection).then(res => {
 			items = res || [];
 			isFromSearch = true;
@@ -95,6 +107,20 @@
 		initData(nextId, true);
 	}
 
+    /** @param {any} e */
+    function validateConfidence(e) {
+        var reg = new RegExp(regex, 'g');
+        if (!reg.test(e.key)) {
+            e.preventDefault();
+        }
+    }
+
+    /** @param {any} e */
+    function changeConfidence(e) {
+        const value = e.target.value;
+        confidence = !isNaN(value) && Number(value) >= 0 ? Number(value).toFixed(2) : '0.0';
+    }
+
 
 	// Knowledge list data
 	function getCollections() {
@@ -199,8 +225,8 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Knowledge Manager')}" />
-<Breadcrumb pagetitle="{$_('Knowledge Manager')}" title="{$_('Knowledge Base')}"/>
+<HeadTitle title="{$_('Vector Knowledge')}" />
+<Breadcrumb pagetitle="{$_('Vector Knowledge')}" title="{$_('Knowledge Base')}"/>
 
 <LoadingToComplete
 	isLoading={isLoading}
@@ -213,23 +239,23 @@
 <div class="knowledge-demo-btn mb-4">
 	<div class="demo-btn">
 		<Button
-			color={`${show_demo ? 'danger' : 'primary'}`}
+			color={`${showDemo ? 'danger' : 'primary'}`}
 			on:click={() => toggleDemo()}
 		>
-			{#if !show_demo}
+			{#if !showDemo}
 				<div class="btn-content">
 					<div class="btn-icon"><i class="bx bx-search-alt" /></div>
-					<div>{'Search knowledge'}</div>
+					<div>{'Search'}</div>
 				</div>
 			{:else}
 				<div class="btn-content">
 					<span class="btn-icon"><i class="bx bx-hide" /></span>
-					<span>{'Hide search'}</span>
+					<span>{'Hide'}</span>
 				</div>
 			{/if}
 		</Button>
 
-		{#if show_demo}
+		{#if showDemo}
 			<div class="btn-icon demo-tooltip-icon" id="demo-tooltip">
 				<i class="bx bx-info-circle" />
 			</div>
@@ -257,7 +283,7 @@
 
 <div class="d-xl-flex">
 	<div class="w-100">
-		{#if show_demo}
+		{#if showDemo}
 			<div
 				in:fly={{ y: -10, duration: 500 }}
 				out:fly={{ y: -10, duration: 200 }}
@@ -268,7 +294,7 @@
 						rows={5}
 						maxlength={maxLength}
 						disabled={isSearching}
-						placeholder={'Please type something here...'}
+						placeholder={'Start searching here...'}
 						bind:value={text}
 						on:keydown={(e) => pressKey(e)}
 					/>
@@ -276,15 +302,31 @@
 						{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>
+                    <div class="mt-2 knowledge-search-footer">
+                        <div class="confidence-input">
+                            <span class="confidence-text fw-bold">
+                                {'Confidence:'}
+                            </span>
+                            <span class="confidence-box">
+                                <Input
+                                    type="text"
+                                    class="text-center"
+                                    bind:value={confidence}
+                                    on:keydown={(e) => validateConfidence(e)}
+                                    on:blur={(e) => changeConfidence(e)}
+                                />
+                            </span>
+                        </div>
+                        <div>
+                            <Button
+                                color="primary"
+                                disabled={!text || util.trim(text).length === 0 || isSearching}
+                                on:click={() => search()}
+                            >
+                                {'Search'}
+                            </Button>
+                        </div>
+                    </div>
 				
 					{#if isSearching}
 						<div class="knowledge-loader mt-4">
@@ -329,7 +371,7 @@
 									</thead>
 									<tbody>
 										{#each items as item, idx (idx)}
-											<KnowledgeItem data={item} open={isFromSearch && idx === 0} on:delete={(e) => afterKnowledgeDeleted(e)} />
+                                            <VectorItem data={item} open={isFromSearch && idx === 0} on:delete={(e) => afterKnowledgeDeleted(e)} />
 										{/each}
 									</tbody>
 								</Table>
diff --git a/src/routes/page/knowledge-base/knowledge-table/knowledge-item.svelte b/src/routes/page/knowledge-base/vector/vector-table/vector-item.svelte
similarity index 99%
rename from src/routes/page/knowledge-base/knowledge-table/knowledge-item.svelte
rename to src/routes/page/knowledge-base/vector/vector-table/vector-item.svelte
index 4d609088..948c924e 100644
--- a/src/routes/page/knowledge-base/knowledge-table/knowledge-item.svelte
+++ b/src/routes/page/knowledge-base/vector/vector-table/vector-item.svelte
@@ -120,7 +120,7 @@
             {#if data?.score}
                 <li>
                     <div class="wrappable fw-bold text-primary">Score:</div>
-                    <div class="wrappable">{data?.score?.toFixed(3)}</div>
+                    <div class="wrappable">{data?.score?.toFixed(6)}</div>
                 </li>
             {/if}
             </ul>

From a09c6183a41dc496300b65cb1299c0491d8e21b7 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 20 Aug 2024 13:31:03 -0500
Subject: [PATCH 2/2] revert

---
 src/routes/page/knowledge-base/vector/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/page/knowledge-base/vector/+page.svelte b/src/routes/page/knowledge-base/vector/+page.svelte
index 8de95ec7..373d924c 100644
--- a/src/routes/page/knowledge-base/vector/+page.svelte
+++ b/src/routes/page/knowledge-base/vector/+page.svelte
@@ -30,7 +30,7 @@
 	const maxLength = 4096;
     const regex = "[0-9\.]+";
 	
-	let showDemo = true;
+	let showDemo = false;
 	let selectedCollection = DEFAULT_KNOWLEDGE_COLLECTION;
 	let text = "";
 	let isSearching = false;