From 91c1ac5051bede5d075e7cb5a5716f4d89eb438a Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Fri, 20 Sep 2024 13:40:44 -0500
Subject: [PATCH] refine adv search

---
 src/lib/scss/custom/pages/_knowledgebase.scss | 16 +++
 src/lib/services/api-endpoints.js             |  1 +
 src/lib/services/knowledge-base-service.js    | 14 +++
 .../common/search/advanced-search.svelte      | 42 +++++---
 .../common/vector-table/vector-item.svelte    |  5 +
 .../knowledge-base/documents/+page.svelte     | 97 +++++++++++++++----
 .../knowledge-document-upload.svelte          | 48 ++++++++-
 .../question-answer/+page.svelte              | 18 +++-
 8 files changed, 208 insertions(+), 33 deletions(-)

diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
index 651a8999..a1a00819 100644
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ b/src/lib/scss/custom/pages/_knowledgebase.scss
@@ -261,6 +261,22 @@
 
         .load-doc-btn {
             font-size: 12px;
+            display: flex;
+            justify-content: space-between;
+
+            .reset-docs-btn {
+                color: var(--bs-danger);
+                
+                i {
+                    font-size: 18px;
+                    border-radius: 3px;
+
+                    &:hover {
+                        background-color: var(--bs-danger);
+                        color: white;
+                    }
+                }
+            }
         }
 
         .collection-docs {
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 9797210c..4329f887 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -74,6 +74,7 @@ export const endpoints = {
 
     knowledgeDocumentUploadUrl: `${host}/knowledge/document/{collection}/upload`,
     knowledgeDocumentDeleteUrl: `${host}/knowledge/document/{collection}/delete/{fileId}`,
+    knowledgeDocumentDeleteAllUrl: `${host}/knowledge/document/{collection}/delete`,
     knowledgeDocumentPageListUrl: `${host}/knowledge/document/{collection}/page`,
 
     // chathub 
diff --git a/src/lib/services/knowledge-base-service.js b/src/lib/services/knowledge-base-service.js
index 386b63da..17f7800b 100644
--- a/src/lib/services/knowledge-base-service.js
+++ b/src/lib/services/knowledge-base-service.js
@@ -154,6 +154,20 @@ export async function deleteKnowledgeDocument(collection, fileId) {
     return response.data;
 }
 
+/**
+ * @param {string} collection
+ * @param {import('$knowledgeTypes').KnowledgeDocRequest} request
+ * @returns {Promise<boolean>}
+ */
+export async function deleteAllKnowledgeDocuments(collection, request) {
+    const url = replaceUrl(endpoints.knowledgeDocumentDeleteAllUrl, {
+        collection: collection
+    });
+
+    const response = await axios.delete(url, { data: { ...request } });
+    return response.data;
+}
+
 
 /**
  * @param {string} collection
diff --git a/src/routes/page/knowledge-base/common/search/advanced-search.svelte b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
index 4a828d84..4825f13d 100644
--- a/src/routes/page/knowledge-base/common/search/advanced-search.svelte
+++ b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
@@ -1,23 +1,25 @@
 <script>
-    import { onMount, onDestroy } from 'svelte';
+    import { onMount, onDestroy, createEventDispatcher  } from 'svelte';
     import { fly } from 'svelte/transition';
     import { Input, Tooltip } from '@sveltestrap/sveltestrap';
     import util from "lodash";
-    
 
+    const svelteDispatch = createEventDispatcher();
+    
     const maxLength = 50;
 
+    
     /** @type {{ key: string, displayName: string }[]} */
     export let items;
     
     /** @type {boolean} */
     export let disabled = false;
 
-
+    
     /** @type {boolean} */
     let showAdvSearch = false;
 
-    /** @type {any[]} */
+    /** @type {{ key: string, displayName: string, checked: boolean, value: string }[]} */
     let innerItems = [];
 
 
@@ -66,6 +68,9 @@
             innerItems = innerItems.map((x, index) => {
                 return index === idx ? { ...found } : x;
             });
+            svelteDispatch('changeitems', {
+                searchItems: buildSearchItems()
+            });
         }
     }
 
@@ -80,23 +85,38 @@
             innerItems = innerItems.map((x, index) => {
                 return index === idx ? { ...found } : x;
             });
+            svelteDispatch('changeitems', {
+                searchItems: buildSearchItems()
+            });
         }
     }
+
+
+    function buildSearchItems() {
+        return innerItems?.filter(x => x.checked && !!util.trim(x.value))?.map(x => {
+            return {
+                key: x.key,
+                value: x.value
+            }
+        }) || [];
+    }
 </script>
 
 
 <div
-    class="knowledge-adv-search-container"
+    class="knowledge-adv-search-container mt-5"
     in:fly={{ y: -10, duration: 500 }}
     out:fly={{ y: -10, duration: 200 }}
 >
     <div class="knowledge-adv-search-btn text-primary fw-bold">
-        <Input
-            type="switch"
-            disabled={disabled}
-            checked={showAdvSearch}
-            on:change={e => toggleAdvSearch(e)}
-        />
+        <div class="line-align-center">
+            <Input
+                type="switch"
+                disabled={disabled}
+                checked={showAdvSearch}
+                on:change={e => toggleAdvSearch(e)}
+            />
+        </div>
         <div class="line-align-center">
             <div>{'Advance Search'}</div>
         </div>
diff --git a/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte b/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte
index e30c4b61..807f5f33 100644
--- a/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte
+++ b/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte
@@ -20,6 +20,9 @@
     /** @type {boolean} */
     export let open = false;
 
+    /** @type {boolean} */
+    export let disabled = false;
+
     $: isQuestionAnswerCollection = collectionType === KnowledgeCollectionType.QuestionAnswer;
     $: isDocumentCollection = collectionType === KnowledgeCollectionType.Document;
     $: {
@@ -94,6 +97,7 @@
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                 <Button
                     class="btn btn-sm btn-soft-warning"
+                    disabled={disabled}
                     on:click={() => editKnowledge()}
                 >
                     <i class="bx bxs-edit" />
@@ -102,6 +106,7 @@
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
                 <Button
                     class="btn btn-sm btn-soft-danger"
+                    disabled={disabled}
                     on:click={() => deleteKnowledge(item?.id)}
                 >
                     <i class="mdi mdi-delete-outline" />
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index 1ea987f6..c6cb4610 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -81,6 +81,9 @@
 	/** @type {string} */
 	let editModalTitle = "Edit knowledge";
 
+	/** @type {import('$commonTypes').KeyValuePair[]} */
+	let searchItems = [];
+
 	/** @type {boolean} */
     let showDemo = true;
     let isSearching = false;
@@ -93,6 +96,7 @@
 	let isOpenEditKnowledge = false;
 	let isOpenCreateCollection = false;
 	let textSearch = false;
+	let disableSearchBtn = false;
 
     /** @type {any} */
     let docUploadrCmp;
@@ -113,7 +117,17 @@
 		useSearhPair: false
 	};
 
-    $: disabled = isLoading || isLoadingMore;
+    $: disabled = isLoading || isLoadingMore || isSearching;
+	$: {
+		disableSearchBtn = false;
+		if (isSearching || isLoadingMore) {
+			disableSearchBtn = true;
+		} else if (textSearch && searchItems.length > 0) {
+			disableSearchBtn = false;
+		} else if (!text || util.trim(text).length === 0) {
+			disableSearchBtn = true;
+		}
+	}
 
 	onMount(() => {
 		initData();
@@ -138,6 +152,13 @@
 		showDemo = !showDemo;
 	}
 
+	function toggleTextSearch() {
+		textSearch = !textSearch;
+		if (!textSearch) {
+			searchItems = [];
+		}
+	}
+
 	function search() {
 		items = [];
 		isSearching = true;
@@ -273,14 +294,24 @@
 		useSearhPair: false
 	}) {
 		return new Promise((resolve, reject) => {
+			/** @type {import('$commonTypes').KeyValuePair[]} */
+			let searchPairs = [];
+			if (params.useSearhPair) {
+				if (!!text) {
+					searchPairs = [ ...searchPairs, { key: KnowledgePayloadName.Text, value: text } ];
+				}
+
+				if (textSearch && searchItems.length > 0) {
+					searchPairs = [ ...searchPairs, ...searchItems ];
+				}
+			}
+
 			const filter = {
 				size: pageSize,
 				start_id: params.startId,
 				with_vector: enableVector,
 				included_payloads: includedPayloads,
-				search_pairs: params.useSearhPair ? [
-					{ key: KnowledgePayloadName.Text, value: text }
-				] : []
+				search_pairs: searchPairs
 			};
 
 			getVectorKnowledgePageList(
@@ -630,7 +661,7 @@
         reset();
         const success = e.detail.success;
         if (success) {
-            successText = "Knowledg document has been deleted!";
+            successText = "Knowledge document has been deleted!";
             isComplete = true;
             setTimeout(() => {
                 isComplete = false;
@@ -643,6 +674,30 @@
             }, duration);
         }
     }
+
+	/** @param {any} e */
+    function onDocsReset(e) {
+        reset();
+        const success = e.detail.success;
+        if (success) {
+            successText = "Knowledge document has been reset!";
+            isComplete = true;
+            setTimeout(() => {
+                isComplete = false;
+            }, duration);
+        } else {
+            errorText = "Failed to reset knowledge documents."
+            isError = true;
+            setTimeout(() => {
+                isError = false;
+            }, duration);
+        }
+    }
+
+	/** @param {any} e */
+	function onSearchItemsChanged(e) {
+		searchItems = e.detail.searchItems || [];
+	}
 </script>
 
 <HeadTitle title="{$_('Document Knowledge')}" />
@@ -767,7 +822,8 @@
 							<div class="line-align-center input-text search-toggle">
 								<Input
 									type="switch"
-									bind:checked={textSearch}
+									checked={textSearch}
+									on:change={e => toggleTextSearch()}
 								/>
 							</div>
 							<div class="line-align-center input-text fw-bold">
@@ -777,13 +833,24 @@
                         <div class="line-align-center">
 							<Button
 								color="primary"
-								disabled={!text || util.trim(text).length === 0 || isSearching}
+								disabled={disableSearchBtn}
 								on:click={() => search()}
 							>
 								{'Search'}
 							</Button>
                         </div>
                     </div>
+
+					{#if textSearch}
+						<AdvancedSearch
+							on:changeitems={e => onSearchItemsChanged(e)}
+							disabled={disabled}
+							items={[
+								{ key: KnowledgePayloadName.FileName, displayName: "File name" },
+								{ key: KnowledgePayloadName.FileSource, displayName: "File source" }
+							]}
+						/>
+					{/if}
 				
 					{#if isSearching}
 						<div class="knowledge-loader mt-5">
@@ -795,16 +862,6 @@
 						</div>
 					{/if}
 			  	</div>
-
-				{#if textSearch}
-					<AdvancedSearch
-						disabled={disabled}
-						items={[
-							{ key: KnowledgePayloadName.FileName, displayName: "File name" },
-							{ key: KnowledgePayloadName.FileSource, displayName: "File source" }
-						]}
-					/>
-				{/if}
 			</div>
 		{/if}
         
@@ -815,6 +872,7 @@
                 bind:this={docUploadrCmp}
                 on:docuploaded={(e) => onDocUploaded(e)}
                 on:docdeleted={(e) => onDocDelected(e)}
+				on:resetdocs={(e) => onDocsReset(e)}
             />
         {/if}
 
@@ -857,7 +915,10 @@
 								</div>
 								<div class="collection-dropdown-container">
 									<div class="line-align-center collection-dropdown">
-										<Input type="select" on:change={(e) => changeCollection(e)}>
+										<Input
+											type="select"
+											on:change={(e) => changeCollection(e)}
+										>
 											{#each collections as option, idx (idx)}
 												<option value={option} selected={option === selectedCollection}>{option}</option>
 											{/each}
diff --git a/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte b/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
index a99d9f56..fcac3029 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
@@ -16,7 +16,8 @@
 	import {
         getKnowledgeDocumentPageList,
         uploadKnowledgeDocuments,
-        deleteKnowledgeDocument
+        deleteKnowledgeDocument,
+        deleteAllKnowledgeDocuments
     } from '$lib/services/knowledge-base-service';
 	import { isHtml } from '$lib/helpers/utils/file';
 
@@ -103,7 +104,7 @@
     });
 
     function init() {
-        showUploader = true;
+        showUploader = false;
     }
 
     /** @param {any} e */
@@ -257,6 +258,36 @@
         });
     }
 
+    function handleDeleteAllSavedFiles() {
+        if (disabled || savedFiles.length === 0) return;
+
+        Swal.fire({
+            title: 'Are you sure?',
+            text: `Are you sure you want to delete all the documents and their knowledge"?`,
+            icon: 'warning',
+            customClass: { confirmButton: 'danger-background' },
+            showCancelButton: true,
+            cancelButtonText: 'No',
+            confirmButtonText: 'Yes',
+        }).then(async (result) => {
+            if (result.value) {
+                disabled = true;
+                deleteAllKnowledgeDocuments(collection, { page: 1, size: 10 }).then(res => {
+                    if (res) {
+                        savedFiles = [];
+                        docPage = startPage;
+                        getKnowledgeDocumentList();
+                    }
+                    svelteDispatch("resetdocs", { success: res });
+                }).catch(err => {
+                    svelteDispatch("resetdocs", { success: false });
+                }).finally(() => {
+                    disabled = false;
+                });
+            }
+        });
+    }
+
     /** @param {number} index */
     function handleDownloadSavedFile(index) {
         const found = savedFiles.find((_, idx) => idx === index);
@@ -398,6 +429,19 @@
                             </div>
                         {/if}
                     </Button>
+                    {#if showDocList}
+                        <div class="reset-docs-btn line-align-center">
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <i
+                                class={`bx bx-trash ${disabled || savedFiles.length === 0 ? '' : 'clickable'}`}
+                                data-bs-toggle="tooltip"
+                                data-bs-placement="top"
+                                title="Delete all docs"
+                                on:click={() => handleDeleteAllSavedFiles()}
+                            />
+                        </div>
+                    {/if}
                 </div>
                 {#if showDocList}
                     <div class="collection-docs docs-scrollbar">
diff --git a/src/routes/page/knowledge-base/question-answer/+page.svelte b/src/routes/page/knowledge-base/question-answer/+page.svelte
index 7dd79433..06c25178 100644
--- a/src/routes/page/knowledge-base/question-answer/+page.svelte
+++ b/src/routes/page/knowledge-base/question-answer/+page.svelte
@@ -85,6 +85,7 @@
 	let isOpenEditKnowledge = false;
 	let isOpenCreateCollection = false;
 	let textSearch = false;
+	let disableSearchBtn = false;
 
 	/** @type {{
 	 * startId: string | null,
@@ -102,6 +103,16 @@
 		useSearhPair: false
 	};
 
+	$: disabled = isLoading || isLoadingMore || isSearching;
+	$: {
+		disableSearchBtn = false;
+		if (isSearching || isLoadingMore) {
+			disableSearchBtn = true;
+		} else if (!text || util.trim(text).length === 0) {
+			disableSearchBtn = true;
+		}
+	}
+
 	onMount(() => {
 		initData();
 	});
@@ -743,7 +754,7 @@
                         <div class="line-align-center">
 							<Button
 								color="primary"
-								disabled={!text || util.trim(text).length === 0 || isSearching}
+								disabled={disableSearchBtn}
 								on:click={() => search()}
 							>
 								{'Search'}
@@ -802,7 +813,10 @@
 								</div>
 								<div class="collection-dropdown-container">
 									<div class="line-align-center collection-dropdown">
-										<Input type="select" on:change={(e) => changeCollection(e)}>
+										<Input
+											type="select"
+											on:change={(e) => changeCollection(e)}
+										>
 											{#each collections as option, idx (idx)}
 												<option value={option} selected={option === selectedCollection}>{option}</option>
 											{/each}