update ChatQnA upload feature (#419)

Signed-off-by: Yue, Wenjiao <[email protected]>
opea-project · Jul 25, 2024 · 5984848 · 5984848
1 parent f4b4ac0
commit 5984848
Show file tree

Hide file tree

Showing 16 changed files with 590 additions and 89 deletions.
diff --git 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'
+UPLOAD_FILE_BASE_URL = 'http://backend_address:6002/v1/dataprep'
+
+GET_FILE = 'http://backend_address:6001/v1/dataprep/get_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
@@ -0,0 +1,36 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<script>
+	export let className = "w-16 h-16";
+</script>
+
+<svg
+	t="1713775351763"
+	class="icon {className}"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="12834"
+	width="32"
+	height="32"
+	><path
+		d="M192 160h253.728a64 64 0 0 1 53.312 28.576l25.824 38.848A64 64 0 0 0 578.176 256H832a64 64 0 0 1 64 64v480a64 64 0 0 1-64 64H192a64 64 0 0 1-64-64V224a64 64 0 0 1 64-64z"
+		fill="#1989FA"
+		p-id="12835"
+	/><path
+		d="M192 352h640a64 64 0 0 1 64 64v384a64 64 0 0 1-64 64H192a64 64 0 0 1-64-64V416a64 64 0 0 1 64-64z"
+		fill="#8BC4FC"
+		p-id="12836"
+	/><path
+		d="M422.624 768a70.656 70.656 0 0 1-49.888-120.672l30.112-30.112a7.488 7.488 0 0 1 5.28-2.208c5.152 1.28 7.104 3.616 7.552 6.4a93.76 93.76 0 0 0 5.472 22.144 7.68 7.68 0 0 1-1.696 8.032l-21.312 21.312a34.912 34.912 0 0 0 0 48.928 34.24 34.24 0 0 0 24.352 10.08 34.944 34.944 0 0 0 24.544-10.08l89.312-89.376a34.688 34.688 0 0 0 0-48.896 7.488 7.488 0 0 1 0-10.56l15.008-15.04a7.488 7.488 0 0 1 5.344-2.208 7.616 7.616 0 0 1 5.312 2.144 70.688 70.688 0 0 1 0 100.032l-89.312 89.28a70.4 70.4 0 0 1-49.76 20.736z"
+		fill="#FFFFFF"
+		p-id="12837"
+	/><path
+		d="M467.168 660.128a7.456 7.456 0 0 1-5.12-2.112 70.72 70.72 0 0 1 0-100l89.312-89.312a70.656 70.656 0 1 1 99.904 99.968l-30.112 30.112a7.488 7.488 0 0 1-5.248 2.208c-5.184-1.28-7.136-3.616-7.552-6.4a97.504 97.504 0 0 0-5.504-22.176 7.648 7.648 0 0 1 1.696-8l21.312-21.312a34.848 34.848 0 0 0 0-48.928 34.24 34.24 0 0 0-24.352-10.08 34.944 34.944 0 0 0-24.544 10.08l-89.312 89.344a34.752 34.752 0 0 0 0 48.896 7.584 7.584 0 0 1 0 10.688l-14.848 14.912a7.52 7.52 0 0 1-5.248 2.176z"
+		fill="#FFFFFF"
+		p-id="12838"
+	/></svg
+>
diff --git a/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/fileIcon.svelte b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/fileIcon.svelte
@@ -0,0 +1,30 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<script>
+    export let className = "w-16 h-16";
+</script>
+
+<svg
+	t="1711440565760"
+	class="icon {className}"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="23643"
+	><path
+		d="M913.29536 941.04064c0.0256 24.82688-16.54784 44.96384-37.0176 44.98432l-708.23936 0.6912c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.83968-859.02848c-0.0256-24.82688 16.54784-44.96384 37.0176-44.98432l521.10848-0.50688 224.39424 210.50368 0.68096 693.25312z"
+		fill="#E6E4E2"
+		p-id="23644"
+	/><path
+		d="M913.29536 253.26592l-189.11744 0.18432c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.16384-165.77024 226.38592 210.49856z"
+		fill="#C4BCB1"
+		p-id="23645"
+	/><path
+		d="M720.72192 396.84096a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 565.95456a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 746.33728a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848z"
+		fill="#C4BCB1"
+		p-id="23646"
+	/></svg
+>
diff --git a/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/folderIcon.svelte b/ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/folderIcon.svelte
@@ -0,0 +1,30 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<script>
+    export let className = "w-16 h-16";
+</script>
+
+<svg
+	t="1711440048470"
+	class="icon {className}"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="7455"
+	><path
+		d="M848.8576 199.1936H415.7568c0-26.5728-21.5424-48.128-48.128-48.128H175.1424c-26.5728 0-48.128 21.5424-48.128 48.128V343.5648c0 26.5984 21.5424 48.1408 48.128 48.1408h673.728c26.5728 0 48.128-21.5424 48.128-48.1408v-96.2432c-0.0128-26.5856-21.5552-48.128-48.1408-48.128z"
+		fill="#CCA352"
+		p-id="7456"
+	/><path
+		d="M800.7424 247.3088H223.2576c-26.5728 0-48.128 21.5424-48.128 48.128v48.128c0 26.5984 21.5424 48.1408 48.128 48.1408h577.472c26.5728 0 48.128-21.5424 48.128-48.1408v-48.128c0-26.5728-21.5424-48.128-48.1152-48.128z"
+		fill="#FFFFFF"
+		p-id="7457"
+	/><path
+		d="M848.8576 295.4368H175.1424c-26.5728 0-48.128 21.5424-48.128 48.128v481.2544c0 26.5472 21.5424 48.128 48.128 48.128h673.728c26.5728 0 48.128-21.568 48.128-48.128V343.552c-0.0128-26.5728-21.5552-48.1152-48.1408-48.1152z"
+		fill="#FFCC66"
+		p-id="7458"
+	/></svg
+>
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
@@ -0,0 +1,25 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<svg
+  class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-500"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <circle
+    class="opacity-25"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="#0597ff"
+    stroke-width="4"
+  />
+  <path
+    class="opacity-75"
+    fill="#0597ff"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  />
+</svg>
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
@@ -0,0 +1,37 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<svg
+	t="1697618332186"
+	class="w-16 h-16"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="7984"
+	width="16"
+	height="16"
+	><path
+		d="M146.285714 146.285714a97.52381 97.52381 0 0 1 97.52381-97.523809h341.333333l292.571429 292.571428v536.380953a97.52381 97.52381 0 0 1-97.52381 97.523809H243.809524a97.52381 97.52381 0 0 1-97.52381-97.523809V146.285714z"
+		fill="#D1DDE5"
+		p-id="7985"
+	/><path
+		d="M585.142857 48.761905l292.571429 292.571428h-195.047619a97.52381 97.52381 0 0 1-97.52381-97.523809V48.761905z"
+		fill="#ABBBC7"
+		p-id="7986"
+	/><path
+		d="M73.142857 609.52381m48.761905 0l365.714286 0q48.761905 0 48.761904 48.761904l0 121.904762q0 48.761905-48.761904 48.761905l-365.714286 0q-48.761905 0-48.761905-48.761905l0-121.904762q0-48.761905 48.761905-48.761904Z"
+		fill="#ABBBC7"
+		p-id="7987"
+	/><path
+		d="M162.06019 674.133333v34.572191h51.321905v22.186666H162.06019v55.637334H136.533333v-134.582857h85.430857v22.186666H162.06019zM238.640762 651.946667h25.502476v134.582857H238.665143v-134.582857zM288.353524 651.946667h25.502476v112.39619h58.953143v22.186667h-84.455619v-134.582857zM414.427429 674.133333v33.426286h51.151238v22.186667h-51.151238v34.57219h59.928381v22.186667h-85.430858V651.946667h85.430858v22.186666h-59.904z"
+		fill="#FFFFFF"
+		p-id="7988"
+	/><path
+		d="M329.142857 231.619048m-60.952381 0a60.952381 60.952381 0 1 0 121.904762 0 60.952381 60.952381 0 1 0-121.904762 0Z"
+		fill="#FFFFFF"
+		opacity=".6"
+		p-id="7989"
+	/></svg
+>
diff --git 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
@@ -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
@@ -0,0 +1,84 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<script>
+	import FolderIcon from "$lib/assets/DocManagement/folderIcon.svelte";
+	import LinkfolderIcon from "$lib/assets/DocManagement/LinkfolderIcon.svelte";
+	import { 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";
+
+	let dispatch = createEventDispatcher();
+	let showDirectory = false;
+	let chooseDir = undefined;
+	let currentIdx = 0;
+
+	export let files = [];
+
+	console.log("files", files);
+
+	function handleDirClick(file, index) {
+		chooseDir = file;
+		showDirectory = true;
+		currentIdx = index;
+		console.log("chooseDir", chooseDir);
+	}
+
+
+</script>
+
+<Modal
+	bind:open={showDirectory}
+	size="xs"
+	autoclose={true}
+	class="z-50 w-full"
+	outsideclose
+>
+	<hr class="my-8 h-px border-0 bg-gray-200 dark:bg-gray-700" />
+	<SvelteTree data={chooseDir.children} {currentIdx} />
+
+</Modal>
+
+<div class="grid grid-cols-2 gap-5 max-h-[35rem]  overflow-auto">
+	{#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]"
+		>
+			{#if file.type === "File"}
+				<div class="flex-shrink-0">
+					<FileIcon />
+				</div>
+				<p class="w-[6rem] truncate">
+					{file.name}
+				</p>
+			{:else if file.type === "Directory" && file.id === "uploaded_links"}
+				<button
+					class="flex flex-col items-center"
+					on:click={() => handleDirClick(file, index)}
+				>
+					<div class="flex-shrink-0">
+						<LinkfolderIcon />
+					</div>
+					<p class="truncate">
+						{file.name}
+					</p>
+				</button>
+			{:else}
+				<button
+					class="flex flex-col items-center"
+					on:click={() => handleDirClick(file, index)}
+				>
+					<div class="flex-shrink-0">
+						<FolderIcon />
+					</div>
+					<p class="truncate">
+						{file.name}
+					</p>
+				</button>
+			{/if}
+		</div>
+	{/each}
+</div>
diff --git a/...QnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/svelte-tree.svelte b/...QnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/svelte-tree.svelte
@@ -0,0 +1,35 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<script lang="ts">
+	import TreeBranch from "./tree-branch.svelte";
+	import { createEventDispatcher } from "svelte";
+
+	let dispatch = createEventDispatcher();
+	type IData = {
+		name: string;
+		id: string;
+		type: string;
+		children: never[];
+	};
+
+	export let currentIdx;
+
+	export let collapse = false,
+		data: IData[] = [],
+		onClick = "";
+
+	console.log("data", data);
+</script>
+
+<div>
+	{#if data && data.length > 0}
+		<ul>
+			<TreeBranch {data} {collapse} {onClick} {currentIdx} />
+		</ul>
+	{:else}
+		<p>Folder is empty. Please upload a file.</p>
+	{/if}
+</div>
diff --git a/...QnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-branch.svelte b/...QnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/tree-branch.svelte
@@ -0,0 +1,46 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<script lang="ts">
+	import { storageFiles } from "$lib/shared/stores/common/Store";
+	import TreeNode from "./tree-node.svelte";
+	import { createEventDispatcher } from "svelte";
+
+	let dispatch = createEventDispatcher();
+	type IData = {
+		name: string;
+		id: string;
+		type: string;
+		children: never[];
+	};
+	export let data: IData[] = [],
+		collapse = false,
+		onClick = "";
+
+	export let currentIdx;
+
+	function changeData() {
+		console.log('change', $storageFiles);
+
+		data = $storageFiles[currentIdx].children;
+	}
+
+	$: $storageFiles ? changeData() : console.log('No change', $storageFiles);
+
+	console.log(data);
+</script>
+
+{#if data && data.length > 0}
+	{#each data as item}
+		<TreeNode
+			bind:node={item}
+			{collapse}
+			{onClick}
+			{currentIdx}
+		/>
+	{/each}
+{:else}
+	<p>Folder is empty. Please upload a file.</p>
+{/if}