OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enh: drag and drop import to folders

Browse Source
This commit is contained in:
Timothy J. Baek
2024-10-17 20:13:28 -07:00
parent 590dc0895f
commit f821de9470
7 changed files with 219 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/apis/chats/index.ts
View File

@@ -32,6 +32,44 @@ export const createNewChat = async (token: string, chat: object) => {
return res;
};
export const importChat = async (
token: string,
chat: object,
pinned?: boolean,
folderId?: string | null
) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/chats/import`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({
chat: chat,
pinned: pinned,
folder_id: folderId
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const getChatList = async (token: string = '', page: number | null = null) => {
let error = null;
const searchParams = new URLSearchParams();

44
src/lib/components/common/Folder.svelte
View File

@@ -33,14 +33,42 @@
if (folderElement.contains(e.target)) {
console.log('Dropped on the Button');
try {
// get data from the drag event
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
dispatch('drop', data);
} catch (error) {
console.error(error);
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
// Iterate over all items in the DataTransferItemList use functional programming
for (const item of Array.from(e.dataTransfer.items)) {
// If dropped items aren't files, reject them
if (item.kind === 'file') {
const file = item.getAsFile();
if (file && file.type === 'application/json') {
console.log('Dropped file is a JSON file!');
// Read the JSON file with FileReader
const reader = new FileReader();
reader.onload = async function (event) {
try {
const fileContent = JSON.parse(event.target.result);
console.log('Parsed JSON Content: ', fileContent);
dispatch('import', fileContent);
} catch (error) {
console.error('Error parsing JSON file:', error);
}
};
// Start reading the file
reader.readAsText(file);
} else {
console.error('Only JSON file types are supported.');
}
console.log(file);
} else {
// Handle the drag-and-drop data for folders or chats (same as before)
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
dispatch('drop', data);
}
}
}
draggedOver = false;

35
src/lib/components/layout/Sidebar.svelte
View File

@@ -32,7 +32,8 @@
toggleChatPinnedStatusById,
getChatPinnedStatusById,
getChatById,
updateChatFolderIdById
updateChatFolderIdById,
importChat
} from '$lib/apis/chats';
import { WEBUI_BASE_URL } from '$lib/constants';
@@ -208,6 +209,17 @@
}
};
const importChatHandler = async (items, pinned = false, folderId = null) => {
console.log('importChatHandler', items, pinned, folderId);
for (const item of items) {
if (item.chat) {
await importChat(localStorage.token, item.chat, pinned, folderId);
}
}
initChatList();
};
const inputFilesHandler = async (files) => {
console.log(files);
@@ -217,18 +229,11 @@
const content = e.target.result;
try {
const items = JSON.parse(content);
for (const item of items) {
if (item.chat) {
await createNewChat(localStorage.token, item.chat);
}
}
const chatItems = JSON.parse(content);
importChatHandler(chatItems);
} catch {
toast.error($i18n.t(`Invalid file format.`));
}
initChatList();
};
reader.readAsText(file);
@@ -564,6 +569,9 @@
localStorage.setItem('showPinnedChat', e.detail);
console.log(e.detail);
}}
on:import={(e) => {
importChatHandler(e.detail, true);
}}
on:drop={async (e) => {
const { type, id } = e.detail;
@@ -633,6 +641,10 @@
{#if !search && folders}
<Folders
{folders}
on:import={(e) => {
const { folderId, items } = e.detail;
importChatHandler(items, false, folderId);
}}
on:update={async (e) => {
initChatList();
}}
@@ -646,6 +658,9 @@
collapsible={!search}
className="px-2"
name={$i18n.t('All chats')}
on:import={(e) => {
importChatHandler(e.detail);
}}
on:drop={async (e) => {
const { type, id } = e.detail;

3
src/lib/components/layout/Sidebar/Folders.svelte
View File

@@ -22,6 +22,9 @@
className="px-2"
{folders}
{folderId}
on:import={(e) => {
dispatch('import', e.detail);
}}
on:update={(e) => {
dispatch('update', e.detail);
}}

99
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
View File

@@ -61,47 +61,77 @@
if (folderElement.contains(e.target)) {
console.log('Dropped on the Button');
try {
// get data from the drag event
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
// Iterate over all items in the DataTransferItemList use functional programming
for (const item of Array.from(e.dataTransfer.items)) {
// If dropped items aren't files, reject them
if (item.kind === 'file') {
const file = item.getAsFile();
if (file && file.type === 'application/json') {
console.log('Dropped file is a JSON file!');
const { type, id } = data;
// Read the JSON file with FileReader
const reader = new FileReader();
reader.onload = async function (event) {
try {
const fileContent = JSON.parse(event.target.result);
dispatch('import', {
folderId: folderId,
items: fileContent
});
} catch (error) {
console.error('Error parsing JSON file:', error);
}
};
if (type === 'folder') {
open = true;
if (id === folderId) {
return;
}
// Move the folder
const res = await updateFolderParentIdById(localStorage.token, id, folderId).catch(
(error) => {
toast.error(error);
return null;
// Start reading the file
reader.readAsText(file);
} else {
console.error('Only JSON file types are supported.');
}
);
if (res) {
dispatch('update');
}
} else if (type === 'chat') {
open = true;
console.log(file);
} else {
// Handle the drag-and-drop data for folders or chats (same as before)
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
// Move the chat
const res = await updateChatFolderIdById(localStorage.token, id, folderId).catch(
(error) => {
toast.error(error);
return null;
const { type, id } = data;
if (type === 'folder') {
open = true;
if (id === folderId) {
return;
}
// Move the folder
const res = await updateFolderParentIdById(localStorage.token, id, folderId).catch(
(error) => {
toast.error(error);
return null;
}
);
if (res) {
dispatch('update');
}
} else if (type === 'chat') {
open = true;
// Move the chat
const res = await updateChatFolderIdById(localStorage.token, id, folderId).catch(
(error) => {
toast.error(error);
return null;
}
);
if (res) {
dispatch('update');
}
}
);
if (res) {
dispatch('update');
}
}
} catch (error) {
console.error(error);
}
draggedOver = false;
@@ -398,6 +428,9 @@
{folders}
folderId={childFolder.id}
parentDragged={dragged}
on:import={(e) => {
dispatch('import', e.detail);
}}
on:update={(e) => {
dispatch('update', e.detail);
}}