From 5984848bb065917f60324c9a35ce98a1503ef1c1 Mon Sep 17 00:00:00 2001 From: WenjiaoYue Date: Thu, 25 Jul 2024 09:16:40 +0800 Subject: [PATCH] update ChatQnA upload feature (#419) Signed-off-by: Yue, Wenjiao --- ChatQnA/docker/ui/svelte/.env | 4 +- .../DocManagement/LinkfolderIcon.svelte | 36 ++++ .../lib/assets/DocManagement/fileIcon.svelte | 30 ++++ .../assets/DocManagement/folderIcon.svelte | 30 ++++ .../lib/assets/upload/loading-button.svelte | 25 +++ .../src/lib/assets/upload/no-file.svelte | 37 ++++ .../ui/svelte/src/lib/network/chat/Network.ts | 3 +- .../svelte/src/lib/network/upload/Network.ts | 24 ++- .../components/doc_management/docCard.svelte | 84 ++++++++++ .../treeView/svelte-tree.svelte | 35 ++++ .../treeView/tree-branch.svelte | 46 +++++ .../doc_management/treeView/tree-node.svelte | 111 ++++++++++++ .../components/upload/upload-knowledge.svelte | 1 + .../components/upload/uploadFile.svelte | 53 ++++-- .../src/lib/shared/stores/common/Store.ts | 2 + .../docker/ui/svelte/src/routes/+page.svelte | 158 ++++++++++-------- 16 files changed, 590 insertions(+), 89 deletions(-) create mode 100644 ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/LinkfolderIcon.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/fileIcon.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/folderIcon.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/assets/upload/loading-button.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/assets/upload/no-file.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/docCard.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/svelte-tree.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-branch.svelte create mode 100644 ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-node.svelte diff --git a/ChatQnA/docker/ui/svelte/.env b/ChatQnA/docker/ui/svelte/.env index 6c5515c96c..48800b591d 100644 --- a/ChatQnA/docker/ui/svelte/.env +++ b/ChatQnA/docker/ui/svelte/.env @@ -1,3 +1,5 @@ CHAT_BASE_URL = 'http://backend_address:8888/v1/chatqna' -UPLOAD_FILE_BASE_URL = 'http://backend_address:6007/v1/dataprep' \ No newline at end of file +UPLOAD_FILE_BASE_URL = 'http://backend_address:6002/v1/dataprep' + +GET_FILE = 'http://backend_address:6001/v1/dataprep/get_file' \ No newline at end of file diff --git a/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/LinkfolderIcon.svelte b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/LinkfolderIcon.svelte new file mode 100644 index 0000000000..66d1b006a5 --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/LinkfolderIcon.svelte @@ -0,0 +1,36 @@ + + + + + diff --git a/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/fileIcon.svelte b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/fileIcon.svelte new file mode 100644 index 0000000000..39b204bbfd --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/fileIcon.svelte @@ -0,0 +1,30 @@ + + + + + diff --git a/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/folderIcon.svelte b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/folderIcon.svelte new file mode 100644 index 0000000000..5fd4e14fa9 --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/folderIcon.svelte @@ -0,0 +1,30 @@ + + + + + diff --git a/ChatQnA/docker/ui/svelte/src/lib/assets/upload/loading-button.svelte b/ChatQnA/docker/ui/svelte/src/lib/assets/upload/loading-button.svelte new file mode 100644 index 0000000000..6310d81f6c --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/assets/upload/loading-button.svelte @@ -0,0 +1,25 @@ + + + + + + diff --git a/ChatQnA/docker/ui/svelte/src/lib/assets/upload/no-file.svelte b/ChatQnA/docker/ui/svelte/src/lib/assets/upload/no-file.svelte new file mode 100644 index 0000000000..f89f7aafbb --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/assets/upload/no-file.svelte @@ -0,0 +1,37 @@ + + + diff --git a/ChatQnA/docker/ui/svelte/src/lib/network/chat/Network.ts b/ChatQnA/docker/ui/svelte/src/lib/network/chat/Network.ts index f5a1e91bca..64ce8e8f79 100644 --- a/ChatQnA/docker/ui/svelte/src/lib/network/chat/Network.ts +++ b/ChatQnA/docker/ui/svelte/src/lib/network/chat/Network.ts @@ -17,7 +17,7 @@ import { SSE } from "sse.js"; const CHAT_BASE_URL = env.CHAT_BASE_URL; -export async function fetchTextStream(query: string, knowledge_base_id: string) { +export async function fetchTextStream(query: string) { let payload = {}; let url = ""; @@ -26,6 +26,7 @@ export async function fetchTextStream(query: string, knowledge_base_id: string) messages: query, }; url = `${CHAT_BASE_URL}`; + console.log("fetchTextStream", url); return new SSE(url, { headers: { "Content-Type": "application/json" }, diff --git a/ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts b/ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts index 5323a57570..a49a33174a 100644 --- a/ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts +++ b/ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts @@ -15,6 +15,7 @@ import { env } from "$env/dynamic/public"; const UPLOAD_FILE_BASE_URL = env.UPLOAD_FILE_BASE_URL; +const GET_FILE = env.GET_FILE; export async function fetchKnowledgeBaseId(file: Blob, fileName: string) { const url = `${UPLOAD_FILE_BASE_URL}`; @@ -35,7 +36,7 @@ export async function fetchKnowledgeBaseId(file: Blob, fileName: string) { } } -export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any, urlType: string | undefined) { +export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any) { const url = `${UPLOAD_FILE_BASE_URL}`; const formData = new FormData(); formData.append("link_list", JSON.stringify(pasteUrlList)); @@ -53,3 +54,24 @@ export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any, urlType: st return undefined; } } + +export async function fetchAllFile() { + const data = { + knowledge_base_id: "default", + }; + 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; + } +} diff --git a/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/docCard.svelte b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/docCard.svelte new file mode 100644 index 0000000000..ffd69d30b3 --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/docCard.svelte @@ -0,0 +1,84 @@ + + + + + +
+ + + + +
+ {#each files as file, index} +
+ {#if file.type === "File"} +
+ +
+

+ {file.name} +

+ {:else if file.type === "Directory" && file.id === "uploaded_links"} + + {:else} + + {/if} +
+ {/each} +
diff --git a/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/svelte-tree.svelte b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/svelte-tree.svelte new file mode 100644 index 0000000000..66dae55bef --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/svelte-tree.svelte @@ -0,0 +1,35 @@ + + + + +
+ {#if data && data.length > 0} +
    + +
+ {:else} +

Folder is empty. Please upload a file.

+ {/if} +
diff --git a/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-branch.svelte b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-branch.svelte new file mode 100644 index 0000000000..27e9d276b9 --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-branch.svelte @@ -0,0 +1,46 @@ + + + + +{#if data && data.length > 0} + {#each data as item} + + {/each} +{:else} +

Folder is empty. Please upload a file.

+{/if} diff --git a/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-node.svelte b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-node.svelte new file mode 100644 index 0000000000..eac311df83 --- /dev/null +++ b/ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-node.svelte @@ -0,0 +1,111 @@ + + + + +
  • +
    + + {#if node.type === "Directory"} + {#if open} + + + + + {:else} + + + + + {/if} + {#if node.id === "uploaded_links"} + + {:else} + + {/if} + {:else} + + {/if} + + + {node?.name} +
    + + {#if open && node.type === "Directory"} +
      + {#each node.children as child} + + {/each} +
    + {/if} +
    • diff --git a/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte b/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte index b1be9770cb..f5c86cbb0a 100644 --- a/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte +++ b/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte @@ -43,6 +43,7 @@ on:change={handleInput} class="focus:border-blue-700 focus:ring-0" data-testid="file-upload" + accept=".txt,.pdf,.json" /> diff --git a/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/uploadFile.svelte b/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/uploadFile.svelte index e13b4246e0..cf49fccde1 100644 --- a/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/uploadFile.svelte +++ b/ChatQnA/docker/ui/svelte/src/lib/shared/components/upload/uploadFile.svelte @@ -20,19 +20,27 @@ import { sineIn } from "svelte/easing"; import UploadFile from "./upload-knowledge.svelte"; import PasteURL from "./PasteKnowledge.svelte"; - import { knowledge1, knowledgeName } from "$lib/shared/stores/common/Store"; - import DeleteIcon from "$lib/assets/avatar/svelte/Delete.svelte"; + import { + knowledge1, + knowledgeName, + storageFiles, + } from "$lib/shared/stores/common/Store"; import { getNotificationsContext } from "svelte-notifications"; import { + fetchAllFile, fetchKnowledgeBaseId, fetchKnowledgeBaseIdByPaste, } from "$lib/network/upload/Network"; + import DocCard from "../doc_management/docCard.svelte"; + import NoFile from "$lib/assets/upload/no-file.svelte"; + import LoadingButton from "$lib/assets/upload/loading-button.svelte"; const { addNotification } = getNotificationsContext(); - console.log("allKnowledges", $knowledgeName); + $: files = $storageFiles ? $storageFiles : []; let hidden6 = true; - let selectKnowledge = -1; + let uploading = false; + let transitionParamsRight = { x: 320, duration: 200, @@ -42,9 +50,10 @@ async function handleKnowledgePaste( e: CustomEvent<{ pasteUrlList: string[] }> ) { + uploading = true; try { const pasteUrlList = e.detail.pasteUrlList; - const res = await fetchKnowledgeBaseIdByPaste(pasteUrlList, "url1"); + const res = await fetchKnowledgeBaseIdByPaste(pasteUrlList); handleUploadResult(res, "knowledge_base"); } catch { handleUploadError(); @@ -52,6 +61,7 @@ } async function handleKnowledgeUpload(e: CustomEvent) { + uploading = true; try { const blob = await fetch(e.detail.src).then((r) => r.blob()); const fileName = e.detail.fileName; @@ -62,11 +72,20 @@ } } - function handleUploadResult(res: Response, fileName: string) { + async function handleUploadResult(res: Response, fileName: string) { if (res.status === 200) { knowledge1.set({ id: "default" }); knowledgeName.set(fileName); showNotification("Uploaded successfully", "success"); + // update fileStructure + const res = await fetchAllFile(); + uploading = false; + console.log('handleUploadResult', res); + + if (res) { + storageFiles.set(res); + files = $storageFiles; + } } else { showNotification("Uploaded failed", "error"); } @@ -84,11 +103,6 @@ removeAfter: 3000, }); } - - function handleKnowledgeDelete() { - knowledge1.set({ id: "default" }); - knowledgeName.set(""); - }
    @@ -139,6 +153,7 @@ Please upload your local file or paste a remote file link, and Chat will respond based on the content of the uploaded file.

    + - {#if $knowledgeName && $knowledgeName !== ""} -
    -

    {$knowledgeName}

    - handleKnowledgeDelete()} /> + {#if uploading} +
    + +
    + {/if} + + {#if files.length > 0} + + {:else} +
    + +

    No files uploaded

    {/if} diff --git a/ChatQnA/docker/ui/svelte/src/lib/shared/stores/common/Store.ts b/ChatQnA/docker/ui/svelte/src/lib/shared/stores/common/Store.ts index 76d1fb04aa..7316e803a1 100644 --- a/ChatQnA/docker/ui/svelte/src/lib/shared/stores/common/Store.ts +++ b/ChatQnA/docker/ui/svelte/src/lib/shared/stores/common/Store.ts @@ -37,3 +37,5 @@ export const knowledge1 = writable<{ }>(); export const knowledgeName = writable(""); + +export const storageFiles = writable([]); diff --git a/ChatQnA/docker/ui/svelte/src/routes/+page.svelte b/ChatQnA/docker/ui/svelte/src/routes/+page.svelte index 506355fb14..b6f6d9c334 100644 --- a/ChatQnA/docker/ui/svelte/src/routes/+page.svelte +++ b/ChatQnA/docker/ui/svelte/src/routes/+page.svelte @@ -16,7 +16,7 @@ @@ -248,8 +265,7 @@ >CLEARCLEAR