UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-07 09:09:53 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: collection file content editor

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-03 21:31:42 -07:00
parent 29467a7057
commit 12977e07f3
2 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/lib/components/workspace/Knowledge/Collection.svelte
View File

@ -38,8 +38,17 @@
let knowledge: Knowledge | null = null; let knowledge: Knowledge | null = null;
let query = ''; let query = '';
let selectedFile = null;
let selectedFileId = null; let selectedFileId = null;
$: if (selectedFileId) {
const file = knowledge.files.find((file) => file.id === selectedFileId);
if (file) {
file.data = file.data ?? { content: '' };
selectedFile = file;
}
}
let debounceTimeout = null; let debounceTimeout = null;
let mediaQuery; let mediaQuery;
let dragged = false; let dragged = false;
@ -271,7 +280,7 @@
<div class="flex w-full px-1"> <div class="flex w-full px-1">
<input <input
type="text" type="text"
class="w-full font-medium text-gray-500 text-sm bg-transparent outline-none" class="w-full text-gray-500 text-sm bg-transparent outline-none"
bind:value={knowledge.description} bind:value={knowledge.description}
on:input={() => { on:input={() => {
changeDebounceHandler(); changeDebounceHandler();
@ -321,7 +330,16 @@
{#if (knowledge?.files ?? []).length > 0} {#if (knowledge?.files ?? []).length > 0}
<div class=" flex overflow-y-auto h-full w-full scrollbar-hidden text-xs"> <div class=" flex overflow-y-auto h-full w-full scrollbar-hidden text-xs">
<Files files={knowledge.files} /> <Files
files={knowledge.files}
{selectedFileId}
on:click={(e) => {
selectedFileId = e.detail;
}}
on:delete={(e) => {
console.log(e.detail);
}}
/>
</div> </div>
{:else} {:else}
<div class="m-auto text-gray-500 text-xs">No content found</div> <div class="m-auto text-gray-500 text-xs">No content found</div>
@ -331,9 +349,23 @@
</div> </div>
{#if largeScreen} {#if largeScreen}
<div class="flex-1 p-2 flex justify-start h-full"> <div class="flex-1 flex justify-start max-h-full overflow-hidden pl-3">
{#if selectedFileId} {#if selectedFile}
<textarea /> <div class=" flex flex-col w-full h-full">
<div class=" flex-shrink-0 mb-2">
<div class=" text-xl line-clamp-1">
{selectedFile?.meta?.name}
</div>
</div>
<div class=" flex-grow">
<textarea
class=" w-full h-full resize-none rounded-xl py-4 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={selectedFile.data.content}
placeholder={$i18n.t('Add content here')}
/>
</div>
</div>
{:else} {:else}
<div class="m-auto"> <div class="m-auto">
<AddFilesPlaceholder title={$i18n.t('Select/Add Files')}> <AddFilesPlaceholder title={$i18n.t('Select/Add Files')}>

14
src/lib/components/workspace/Knowledge/Collection/Files.svelte
View File

@ -1,6 +1,10 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import FileItem from '$lib/components/common/FileItem.svelte'; import FileItem from '$lib/components/common/FileItem.svelte';
export let selectedFileId = null;
export let files = []; export let files = [];
</script> </script>
@ -9,11 +13,19 @@
<div class="mt-2 px-2"> <div class="mt-2 px-2">
<FileItem <FileItem
className="w-full" className="w-full"
colorClassName="bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 transition" colorClassName="{selectedFileId === file.id
? 'bg-gray-850'
: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
{file} {file}
name={file.meta.name} name={file.meta.name}
type="file" type="file"
dismissible dismissible
on:click={() => {
dispatch('click', file.id);
}}
on:dismiss={() => {
dispatch('delete', file.id);
}}
/> />
</div> </div>
{/each} {/each}