mirror of
https://github.com/open-webui/open-webui
synced 2025-01-18 08:40:58 +00:00
feat: add text content
This commit is contained in:
Timothy J. Baek
parent
05970157f6
commit
544251a7fd
@ -26,6 +26,7 @@
|
||||
import { blobToFile } from '$lib/utils';
|
||||
import { processFile } from '$lib/apis/retrieval';
|
||||
import AddContentMenu from './Collection/AddContentMenu.svelte';
|
||||
import AddTextContentModal from './Collection/AddTextContentModal.svelte';
|
||||
|
||||
let largeScreen = true;
|
||||
|
||||
@ -43,6 +44,9 @@
|
||||
let knowledge: Knowledge | null = null;
|
||||
let query = '';
|
||||
|
||||
let showAddTextContentModal = false;
|
||||
let inputFiles = null;
|
||||
|
||||
let selectedFile = null;
|
||||
let selectedFileId = null;
|
||||
|
||||
@ -58,6 +62,14 @@
|
||||
let mediaQuery;
|
||||
let dragged = false;
|
||||
|
||||
const createFileFromText = (name, content) => {
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const file = blobToFile(blob, `${name}.md`);
|
||||
|
||||
console.log(file);
|
||||
return file;
|
||||
};
|
||||
|
||||
const uploadFileHandler = async (file) => {
|
||||
console.log(file);
|
||||
|
||||
@ -232,6 +244,38 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<AddTextContentModal
|
||||
bind:show={showAddTextContentModal}
|
||||
on:submit={(e) => {
|
||||
const file = createFileFromText(e.detail.name, e.detail.content);
|
||||
uploadFileHandler(file);
|
||||
}}
|
||||
/>
|
||||
|
||||
<input
|
||||
id="files-input"
|
||||
bind:files={inputFiles}
|
||||
type="file"
|
||||
multiple
|
||||
hidden
|
||||
on:change={() => {
|
||||
if (inputFiles && inputFiles.length > 0) {
|
||||
for (const file of inputFiles) {
|
||||
uploadFileHandler(file);
|
||||
}
|
||||
|
||||
inputFiles = null;
|
||||
const fileInputElement = document.getElementById('files-input');
|
||||
|
||||
if (fileInputElement) {
|
||||
fileInputElement.value = '';
|
||||
}
|
||||
} else {
|
||||
toast.error($i18n.t(`File not found.`));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full max-h-[100dvh] h-full">
|
||||
<button
|
||||
class="flex space-x-1"
|
||||
@ -323,7 +367,14 @@
|
||||
/>
|
||||
|
||||
<div>
|
||||
<AddContentMenu />
|
||||
<AddContentMenu
|
||||
on:files={() => {
|
||||
document.getElementById('files-input').click();
|
||||
}}
|
||||
on:text={() => {
|
||||
showAddTextContentModal = true;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,42 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { onMount, getContext, createEventDispatcher } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
import { knowledge } from '$lib/stores';
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import { uploadFile } from '$lib/apis/files';
|
||||
|
||||
export let show = false;
|
||||
|
||||
let fileInputElement: HTMLInputElement;
|
||||
let inputFiles;
|
||||
|
||||
const submitHandler = async () => {
|
||||
if (inputFiles && inputFiles.length > 0) {
|
||||
for (const file of inputFiles) {
|
||||
console.log(file, file.name.split('.').at(-1));
|
||||
|
||||
const uploadedFile = uploadFile(localStorage.token, file);
|
||||
|
||||
if (uploadedFile) {
|
||||
dispatch('add', uploadedFile);
|
||||
}
|
||||
}
|
||||
|
||||
inputFiles = null;
|
||||
fileInputElement.value = '';
|
||||
|
||||
show = false;
|
||||
} else {
|
||||
toast.error($i18n.t(`File not found.`));
|
||||
}
|
||||
};
|
||||
let name = '';
|
||||
let content = '';
|
||||
</script>
|
||||
|
||||
<Modal size="sm" bind:show>
|
||||
<Modal size="md" bind:show>
|
||||
<div>
|
||||
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4">
|
||||
<div class=" text-lg font-medium self-center">{$i18n.t('Add Content')}</div>
|
||||
@ -63,32 +40,45 @@
|
||||
<form
|
||||
class="flex flex-col w-full"
|
||||
on:submit|preventDefault={() => {
|
||||
submitHandler();
|
||||
dispatch('submit', {
|
||||
name,
|
||||
content
|
||||
});
|
||||
show = false;
|
||||
name = '';
|
||||
content = '';
|
||||
}}
|
||||
>
|
||||
<div class="mb-3 w-full">
|
||||
<input
|
||||
id="upload-doc-input"
|
||||
bind:this={fileInputElement}
|
||||
bind:files={inputFiles}
|
||||
type="file"
|
||||
multiple
|
||||
hidden
|
||||
/>
|
||||
<div class="w-full flex flex-col gap-2.5">
|
||||
<div class="w-full">
|
||||
<div class=" text-sm mb-2">Title</div>
|
||||
|
||||
<button
|
||||
class="w-full text-sm font-medium py-3 bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 text-center rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
fileInputElement.click();
|
||||
}}
|
||||
>
|
||||
{#if inputFiles}
|
||||
{inputFiles.length > 0 ? `${inputFiles.length}` : ''} document(s) selected.
|
||||
{:else}
|
||||
{$i18n.t('Click here to select files.')}
|
||||
{/if}
|
||||
</button>
|
||||
<div class="w-full mt-1">
|
||||
<input
|
||||
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||
type="text"
|
||||
bind:value={name}
|
||||
placeholder={`Name your content`}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-sm mb-2">Content</div>
|
||||
|
||||
<div class=" w-full mt-1">
|
||||
<textarea
|
||||
class="w-full resize-none rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||
rows="10"
|
||||
bind:value={content}
|
||||
placeholder={`Write your content here`}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end text-sm font-medium">
|
||||
@ -96,7 +86,7 @@
|
||||
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
|
||||
type="submit"
|
||||
>
|
||||
{$i18n.t('Save')}
|
||||
{$i18n.t('Add Content')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user