Added the ChatQnA delete feature, and updated the corresponding README (

opea-project#471)

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>

ChatQnA/docker/ui/svelte/.env

@@ -1,5 +1,7 @@
 CHAT_BASE_URL = 'http://backend_address:8888/v1/chatqna'
 
-UPLOAD_FILE_BASE_URL = 'http://backend_address:6002/v1/dataprep'
+UPLOAD_FILE_BASE_URL = 'http://backend_address:6007/v1/dataprep'
 
-GET_FILE = 'http://backend_address:6001/v1/dataprep/get_file'
+GET_FILE = 'http://backend_address:6008/v1/dataprep/get_file'
+
+DELETE_FILE = 'http://backend_address:6009/v1/dataprep/delete_file'

ChatQnA/docker/ui/svelte/README.md

@@ -11,11 +11,12 @@
 Here're some of the project's features:
 
 - Start a Text Chat：Initiate a text chat with the ability to input written conversations, where the dialogue content can also be customized based on uploaded files.
-- Upload File: The choice between uploading locally or copying a remote link. Chat according to uploaded knowledge base.
 - Clear: Clear the record of the current dialog box without retaining the contents of the dialog box.
 - Chat history: Historical chat records can still be retained after refreshing, making it easier for users to view the context.
 - Scroll to Bottom / Top: The chat automatically slides to the bottom. Users can also click the top icon to slide to the top of the chat record.
 - End to End Time: Shows the time spent on the current conversation.
+- Upload File: The choice between uploading locally or copying a remote link. Chat according to uploaded knowledge base.
+- Delete File: Delete a certain uploaded file.
 
 ## 🛠️ Get it Running
 
@@ -26,9 +27,14 @@ Here're some of the project's features:
 3. Modify the required .env variables.
 
    ```
-   DOC_BASE_URL = ''
+   CHAT_BASE_URL = ''
 
    UPLOAD_FILE_BASE_URL = ''
+
+   GET_FILE = ''
+
+   DELETE_FILE = ''
+
    ```
 
 4. Execute `npm install` to install the corresponding dependencies.

ChatQnA/docker/ui/svelte/src/lib/assets/upload/deleteIcon.svelte

@@ -0,0 +1,22 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<svg
+	t="1711440930029"
+	class="icon w-5 h-5"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="4255"
+	><path
+		d="M668.8 896h-320c-48.64 0-88.32-37.76-92.8-87.68L211.2 403.2c-1.92-17.28 10.88-33.28 28.16-35.2 17.28-1.92 33.28 10.88 35.2 28.16l44.16 405.76c1.28 17.28 14.08 30.08 28.8 30.08h320c14.72 0 27.52-12.8 28.8-29.44l44.16-406.4c1.92-17.28 17.92-30.08 35.2-28.16 17.28 1.92 30.08 17.92 28.16 35.2l-44.16 405.76c-2.56 49.28-42.88 87.04-90.88 87.04zM826.24 321.28H190.72c-17.92 0-32-14.08-32-32s14.08-32 32-32h636.16c17.92 0 32 14.08 32 32s-14.72 32-32.64 32z"
+		fill="#a6adbb"
+		p-id="4256"
+	/><path
+		d="M424.96 789.12c-16.64 0-30.72-12.8-32-29.44l-27.52-347.52c-1.28-17.92 11.52-33.28 29.44-34.56 17.92-1.28 33.28 11.52 34.56 29.44l27.52 347.52c1.28 17.92-11.52 33.28-29.44 34.56h-2.56zM580.48 789.12h-2.56c-17.92-1.28-30.72-16.64-29.44-34.56L576 407.04c1.28-17.92 16.64-30.72 34.56-29.44 17.92 1.28 30.72 16.64 29.44 34.56l-27.52 347.52c-1.92 16.64-15.36 29.44-32 29.44zM581.76 244.48c-17.92 0-32-14.08-32-32 0-23.68-19.2-43.52-43.52-43.52s-43.52 19.2-43.52 43.52c0 17.92-14.08 32-32 32s-32-14.08-32-32c0-59.52 48-107.52 107.52-107.52s107.52 48 107.52 107.52c0 17.28-14.08 32-32 32z"
+		fill="#a6adbb"
+		p-id="4257"
+	/></svg
+>

ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts

@@ -16,6 +16,20 @@ import { env } from "$env/dynamic/public";
 
 const UPLOAD_FILE_BASE_URL = env.UPLOAD_FILE_BASE_URL;
 const GET_FILE = env.GET_FILE;
+const DELETE_FILE = env.DELETE_FILE;
+
+async function fetchFunc(url, init) {
+	try {
+		const response = await fetch(url, init);
+		if (!response.ok) throw response.status;
+
+		return await response.json();
+	} catch (error) {
+		console.error("network error: ", error);
+
+		return undefined;
+	}
+}
 
 export async function fetchKnowledgeBaseId(file: Blob, fileName: string) {
 	const url = `${UPLOAD_FILE_BASE_URL}`;
@@ -26,14 +40,7 @@ export async function fetchKnowledgeBaseId(file: Blob, fileName: string) {
 		body: formData,
 	};
 
-	try {
-		const response = await fetch(url, init);
-		if (!response.ok) throw response.status;
-		return await response.json();
-	} catch (error) {
-		console.error("network error: ", error);
-		return undefined;
-	}
+	return fetchFunc(url, init);
 }
 
 export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any) {
@@ -45,33 +52,31 @@ export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any) {
 		body: formData,
 	};
 
-	try {
-		const response = await fetch(url, init);
-		if (!response.ok) throw response.status;
-		return await response.json();
-	} catch (error) {
-		console.error("network error: ", error);
-		return undefined;
-	}
+	return fetchFunc(url, init);
 }
 
 export async function fetchAllFile() {
+	const url = `${GET_FILE}`;
+	const init: RequestInit = {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+	};
+
+	return fetchFunc(url, init);
+}
+
+export async function deleteFiles(path) {
+	const UploadKnowledge_URL = DELETE_FILE;
+
 	const data = {
-		knowledge_base_id: "default",
+		file_path: path,
 	};
-	const url = `${GET_FILE}`;
+
 	const init: RequestInit = {
 		method: "POST",
 		headers: { "Content-Type": "application/json" },
 		body: JSON.stringify(data),
 	};
 
-	try {
-		const response = await fetch(url, init);
-		if (!response.ok) throw response.status;
-		return await response.json();
-	} catch (error) {
-		console.error("network error: ", error);
-		return undefined;
-	}
+	return fetchFunc(UploadKnowledge_URL, init);
 }

ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/docCard.svelte

@@ -3,18 +3,34 @@
   SPDX-License-Identifier: Apache-2.0
 -->
 
-<script>
+<script lang="ts">
 	import FolderIcon from "$lib/assets/DocManagement/folderIcon.svelte";
 	import LinkfolderIcon from "$lib/assets/DocManagement/LinkfolderIcon.svelte";
-	import { Modal } from "flowbite-svelte";
+	import { Button, Modal } from "flowbite-svelte";
 	import SvelteTree from "$lib/shared/components/doc_management/treeView/svelte-tree.svelte";
 	import FileIcon from "$lib/assets/DocManagement/fileIcon.svelte";
 	import { createEventDispatcher } from "svelte";
+	import DeleteIcon from "$lib/assets/upload/deleteIcon.svelte";
+	import { deleteFiles } from "$lib/network/upload/Network";
+	import { storageFiles } from "$lib/shared/stores/common/Store";
+	import { getNotificationsContext } from "svelte-notifications";
+
+	const { addNotification } = getNotificationsContext();
 
 	let dispatch = createEventDispatcher();
 	let showDirectory = false;
 	let chooseDir = undefined;
 	let currentIdx = 0;
+	let deleteModal = false;
+	/**
+	 * @type {any}
+	 */
+	let currentFile;
+	/**
+	 * @type {number}
+	 */
+	let currentFileIdx;
+
 
 	export let files = [];
 
@@ -27,7 +43,36 @@
 		console.log("chooseDir", chooseDir);
 	}
 
+	async function deleteCurrentFolder() {
+
+		const res = await deleteFiles(currentFile);
+		// succeed
+		if (res.status) {
+			$storageFiles = $storageFiles.filter((_, index) => index !== currentFileIdx);
+			files = $storageFiles;
+			showNotification("Deleted successfully", "success");
+
+		} else {
+			showNotification("Deletion failed", "success");
 
+		}
+	}
+
+	function showNotification(text: string, type: string) {
+		addNotification({
+			text: text,
+			position: "top-left",
+			type: type,
+			removeAfter: 3000,
+		});
+	}
+
+	function deleteFileIdx(file, index) {
+		currentFile = file;
+		currentFileIdx = index;
+		deleteModal = true;
+
+	}
 </script>
 
 <Modal
@@ -39,10 +84,23 @@
 >
 	<hr class="my-8 h-px border-0 bg-gray-200 dark:bg-gray-700" />
 	<SvelteTree data={chooseDir.children} {currentIdx} />
+</Modal>
 
+<Modal bind:open={deleteModal} size="xs" autoclose>
+	<div class="text-center">
+		<h3 class="mb-5 text-lg font-normal text-gray-500">Confirm file deletion?</h3>
+		<Button
+			color="red"
+			class="mr-2"
+			on:click={() => { deleteCurrentFolder() }}>Yes, I'm sure</Button
+		>
+		<Button color="alternative"
+			on:click={() => { deleteModal = false; }}
+		>No, cancel</Button>
+	</div>
 </Modal>
 
-<div class="grid grid-cols-2 gap-5 max-h-[35rem]  overflow-auto">
+<div class="grid max-h-[35rem] grid-cols-2 gap-5 overflow-auto mt-6">
 	{#each files as file, index}
 		<div
 			class="group relative flex w-full flex-col items-center justify-center p-2 px-12 text-center hover:bg-[#d9eeff] focus:bg-[#d9eeff]"
@@ -79,6 +137,14 @@
 					</p>
 				</button>
 			{/if}
+
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				class="absolute right-0 top-0 hidden group-hover:block"
+				on:click={() => { deleteFileIdx(file.id, index)  }}
+			>
+				<DeleteIcon />
+			</div>
 		</div>
 	{/each}
 </div>

ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/uploadFile.svelte

@@ -168,15 +168,15 @@
 		</TabItem>
 	</Tabs>
 	{#if uploading}
-		<div class="flex flex-col items-center justify-center">
+		<div class="flex flex-col items-center justify-center my-6">
 			<LoadingButton />
 		</div>
 	{/if}
 
 	{#if files.length > 0}
 		<DocCard {files} />
 	{:else}
-		<div class="flex flex-col items-center justify-center">
+		<div class="flex flex-col items-center justify-center mt-6">
 			<NoFile />
 			<p class=" text-sm opacity-70">No files uploaded</p>
 		</div>