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

Features/refine chat window

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 {

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 

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

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>

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" />

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}