Skip to content

Commit 1cfcbfc

Browse files
WenjiaoYueWenjiaoYue
authored
update ChatQnA upload feature (opea-project#419)
Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>
1 parent 8623b4d commit 1cfcbfc

16 files changed

Lines changed: 590 additions & 89 deletions

File tree

‎ChatQnA/docker/ui/svelte/.env‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
CHAT_BASE_URL = 'http://backend_address:8888/v1/chatqna'
22

3-
UPLOAD_FILE_BASE_URL = 'http://backend_address:6007/v1/dataprep'
3+
UPLOAD_FILE_BASE_URL = 'http://backend_address:6002/v1/dataprep'
4+
5+
GET_FILE = 'http://backend_address:6001/v1/dataprep/get_file'

‎ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/LinkfolderIcon.svelte‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<script>
7+
export let className = "w-16 h-16";
8+
</script>
9+
10+
<svg
11+
t="1713775351763"
12+
class="icon {className}"
13+
viewBox="0 0 1024 1024"
14+
version="1.1"
15+
xmlns="http://www.w3.org/2000/svg"
16+
p-id="12834"
17+
width="32"
18+
height="32"
19+
><path
20+
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"
21+
fill="#1989FA"
22+
p-id="12835"
23+
/><path
24+
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"
25+
fill="#8BC4FC"
26+
p-id="12836"
27+
/><path
28+
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"
29+
fill="#FFFFFF"
30+
p-id="12837"
31+
/><path
32+
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"
33+
fill="#FFFFFF"
34+
p-id="12838"
35+
/></svg
36+
>

‎ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/fileIcon.svelte‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<script>
7+
export let className = "w-16 h-16";
8+
</script>
9+
10+
<svg
11+
t="1711440565760"
12+
class="icon {className}"
13+
viewBox="0 0 1024 1024"
14+
version="1.1"
15+
xmlns="http://www.w3.org/2000/svg"
16+
p-id="23643"
17+
><path
18+
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"
19+
fill="#E6E4E2"
20+
p-id="23644"
21+
/><path
22+
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"
23+
fill="#C4BCB1"
24+
p-id="23645"
25+
/><path
26+
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"
27+
fill="#C4BCB1"
28+
p-id="23646"
29+
/></svg
30+
>

‎ChatQnA/docker/ui/svelte/src/lib/assets/DocManagement/folderIcon.svelte‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<script>
7+
export let className = "w-16 h-16";
8+
</script>
9+
10+
<svg
11+
t="1711440048470"
12+
class="icon {className}"
13+
viewBox="0 0 1024 1024"
14+
version="1.1"
15+
xmlns="http://www.w3.org/2000/svg"
16+
p-id="7455"
17+
><path
18+
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"
19+
fill="#CCA352"
20+
p-id="7456"
21+
/><path
22+
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"
23+
fill="#FFFFFF"
24+
p-id="7457"
25+
/><path
26+
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"
27+
fill="#FFCC66"
28+
p-id="7458"
29+
/></svg
30+
>

‎ChatQnA/docker/ui/svelte/src/lib/assets/upload/loading-button.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<svg
7+
class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-500"
8+
xmlns="http://www.w3.org/2000/svg"
9+
fill="none"
10+
viewBox="0 0 24 24"
11+
>
12+
<circle
13+
class="opacity-25"
14+
cx="12"
15+
cy="12"
16+
r="10"
17+
stroke="#0597ff"
18+
stroke-width="4"
19+
/>
20+
<path
21+
class="opacity-75"
22+
fill="#0597ff"
23+
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"
24+
/>
25+
</svg>

‎ChatQnA/docker/ui/svelte/src/lib/assets/upload/no-file.svelte‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<svg
7+
t="1697618332186"
8+
class="w-16 h-16"
9+
viewBox="0 0 1024 1024"
10+
version="1.1"
11+
xmlns="http://www.w3.org/2000/svg"
12+
p-id="7984"
13+
width="16"
14+
height="16"
15+
><path
16+
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"
17+
fill="#D1DDE5"
18+
p-id="7985"
19+
/><path
20+
d="M585.142857 48.761905l292.571429 292.571428h-195.047619a97.52381 97.52381 0 0 1-97.52381-97.523809V48.761905z"
21+
fill="#ABBBC7"
22+
p-id="7986"
23+
/><path
24+
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"
25+
fill="#ABBBC7"
26+
p-id="7987"
27+
/><path
28+
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"
29+
fill="#FFFFFF"
30+
p-id="7988"
31+
/><path
32+
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"
33+
fill="#FFFFFF"
34+
opacity=".6"
35+
p-id="7989"
36+
/></svg
37+
>

‎ChatQnA/docker/ui/svelte/src/lib/network/chat/Network.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { SSE } from "sse.js";
1717

1818
const CHAT_BASE_URL = env.CHAT_BASE_URL;
1919

20-
export async function fetchTextStream(query: string, knowledge_base_id: string) {
20+
export async function fetchTextStream(query: string) {
2121
let payload = {};
2222
let url = "";
2323

@@ -26,6 +26,7 @@ export async function fetchTextStream(query: string, knowledge_base_id: string)
2626
messages: query,
2727
};
2828
url = `${CHAT_BASE_URL}`;
29+
console.log("fetchTextStream", url);
2930

3031
return new SSE(url, {
3132
headers: { "Content-Type": "application/json" },

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
import { env } from "$env/dynamic/public";
1616

1717
const UPLOAD_FILE_BASE_URL = env.UPLOAD_FILE_BASE_URL;
18+
const GET_FILE = env.GET_FILE;
1819

1920
export async function fetchKnowledgeBaseId(file: Blob, fileName: string) {
2021
const url = `${UPLOAD_FILE_BASE_URL}`;
@@ -35,7 +36,7 @@ export async function fetchKnowledgeBaseId(file: Blob, fileName: string) {
3536
}
3637
}
3738

38-
export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any, urlType: string | undefined) {
39+
export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any) {
3940
const url = `${UPLOAD_FILE_BASE_URL}`;
4041
const formData = new FormData();
4142
formData.append("link_list", JSON.stringify(pasteUrlList));
@@ -53,3 +54,24 @@ export async function fetchKnowledgeBaseIdByPaste(pasteUrlList: any, urlType: st
5354
return undefined;
5455
}
5556
}
57+
58+
export async function fetchAllFile() {
59+
const data = {
60+
knowledge_base_id: "default",
61+
};
62+
const url = `${GET_FILE}`;
63+
const init: RequestInit = {
64+
method: "POST",
65+
headers: { "Content-Type": "application/json" },
66+
body: JSON.stringify(data),
67+
};
68+
69+
try {
70+
const response = await fetch(url, init);
71+
if (!response.ok) throw response.status;
72+
return await response.json();
73+
} catch (error) {
74+
console.error("network error: ", error);
75+
return undefined;
76+
}
77+
}

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<script>
7+
import FolderIcon from "$lib/assets/DocManagement/folderIcon.svelte";
8+
import LinkfolderIcon from "$lib/assets/DocManagement/LinkfolderIcon.svelte";
9+
import { Modal } from "flowbite-svelte";
10+
import SvelteTree from "$lib/shared/components/doc_management/treeView/svelte-tree.svelte";
11+
import FileIcon from "$lib/assets/DocManagement/fileIcon.svelte";
12+
import { createEventDispatcher } from "svelte";
13+
14+
let dispatch = createEventDispatcher();
15+
let showDirectory = false;
16+
let chooseDir = undefined;
17+
let currentIdx = 0;
18+
19+
export let files = [];
20+
21+
console.log("files", files);
22+
23+
function handleDirClick(file, index) {
24+
chooseDir = file;
25+
showDirectory = true;
26+
currentIdx = index;
27+
console.log("chooseDir", chooseDir);
28+
}
29+
30+
31+
</script>
32+
33+
<Modal
34+
bind:open={showDirectory}
35+
size="xs"
36+
autoclose={true}
37+
class="z-50 w-full"
38+
outsideclose
39+
>
40+
<hr class="my-8 h-px border-0 bg-gray-200 dark:bg-gray-700" />
41+
<SvelteTree data={chooseDir.children} {currentIdx} />
42+
43+
</Modal>
44+
45+
<div class="grid grid-cols-2 gap-5 max-h-[35rem] overflow-auto">
46+
{#each files as file, index}
47+
<div
48+
class="group relative flex w-full flex-col items-center justify-center p-2 px-12 text-center hover:bg-[#d9eeff] focus:bg-[#d9eeff]"
49+
>
50+
{#if file.type === "File"}
51+
<div class="flex-shrink-0">
52+
<FileIcon />
53+
</div>
54+
<p class="w-[6rem] truncate">
55+
{file.name}
56+
</p>
57+
{:else if file.type === "Directory" && file.id === "uploaded_links"}
58+
<button
59+
class="flex flex-col items-center"
60+
on:click={() => handleDirClick(file, index)}
61+
>
62+
<div class="flex-shrink-0">
63+
<LinkfolderIcon />
64+
</div>
65+
<p class="truncate">
66+
{file.name}
67+
</p>
68+
</button>
69+
{:else}
70+
<button
71+
class="flex flex-col items-center"
72+
on:click={() => handleDirClick(file, index)}
73+
>
74+
<div class="flex-shrink-0">
75+
<FolderIcon />
76+
</div>
77+
<p class="truncate">
78+
{file.name}
79+
</p>
80+
</button>
81+
{/if}
82+
</div>
83+
{/each}
84+
</div>

‎ChatQnA/docker/ui/svelte/src/lib/shared/components/doc_management/treeView/svelte-tree.svelte‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<script lang="ts">
7+
import TreeBranch from "./tree-branch.svelte";
8+
import { createEventDispatcher } from "svelte";
9+
10+
let dispatch = createEventDispatcher();
11+
type IData = {
12+
name: string;
13+
id: string;
14+
type: string;
15+
children: never[];
16+
};
17+
18+
export let currentIdx;
19+
20+
export let collapse = false,
21+
data: IData[] = [],
22+
onClick = "";
23+
24+
console.log("data", data);
25+
</script>
26+
27+
<div>
28+
{#if data && data.length > 0}
29+
<ul>
30+
<TreeBranch {data} {collapse} {onClick} {currentIdx} />
31+
</ul>
32+
{:else}
33+
<p>Folder is empty. Please upload a file.</p>
34+
{/if}
35+
</div>

0 commit comments

Comments
 (0)