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

#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>