Skip to content

Commit

Permalink
Added the ChatQnA delete feature, and updated the corresponding README (
Browse files Browse the repository at this point in the history
#471)

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>
  • Loading branch information
WenjiaoYue authored Jul 31, 2024
1 parent 015a2b1 commit 09a3196
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 35 deletions.
6 changes: 4 additions & 2 deletions ChatQnA/docker/ui/svelte/.env
Original file line number Diff line number Diff line change
@@ -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'
10 changes: 8 additions & 2 deletions ChatQnA/docker/ui/svelte/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.
Expand Down
22 changes: 22 additions & 0 deletions ChatQnA/docker/ui/svelte/src/lib/assets/upload/deleteIcon.svelte
Original file line number Diff line number Diff line change
@@ -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
>
57 changes: 31 additions & 26 deletions ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
Expand All @@ -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) {
Expand All @@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand All @@ -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
Expand All @@ -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]"
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 09a3196

Please sign in to comment.