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

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2024-11-30 15:44:04 -08:00
parent acb61d3c42
commit aed2caefe1
4 changed files with 256 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/lib/components/common/FileItem.svelte
View File

@@ -5,6 +5,7 @@
import FileItemModal from './FileItemModal.svelte';
import GarbageBin from '../icons/GarbageBin.svelte';
import Spinner from './Spinner.svelte';
import Tooltip from './Tooltip.svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
@@ -18,6 +19,7 @@
export let item = null;
export let edit = false;
export let small = false;
export let name: string;
export let type: string;
@@ -31,7 +33,7 @@
{/if}
<button
class="relative group p-1.5 {className} flex items-center {colorClassName} rounded-2xl text-left"
class="relative group p-1.5 {className} flex items-center gap-1 {colorClassName} rounded-xl text-left"
type="button"
on:click={async () => {
if (item?.file?.data?.content) {
@@ -49,48 +51,61 @@
dispatch('click');
}}
>
<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
{#if !loading}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class=" size-5"
>
<path
fill-rule="evenodd"
d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
clip-rule="evenodd"
/>
<path
d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
/>
</svg>
{:else}
<Spinner />
{/if}
</div>
<div class="flex flex-col justify-center -space-y-0.5 ml-1 px-2.5 w-full">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
{name}
</div>
<div class=" flex justify-between text-gray-500 text-xs line-clamp-1">
{#if type === 'file'}
{$i18n.t('File')}
{:else if type === 'doc'}
{$i18n.t('Document')}
{:else if type === 'collection'}
{$i18n.t('Collection')}
{#if !small}
<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
{#if !loading}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class=" size-5"
>
<path
fill-rule="evenodd"
d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
clip-rule="evenodd"
/>
<path
d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
/>
</svg>
{:else}
<span class=" capitalize line-clamp-1">{type}</span>
{/if}
{#if size}
<span class="capitalize">{formatFileSize(size)}</span>
<Spinner />
{/if}
</div>
</div>
{/if}
{#if !small}
<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
{name}
</div>
<div class=" flex justify-between text-gray-500 text-xs line-clamp-1">
{#if type === 'file'}
{$i18n.t('File')}
{:else if type === 'doc'}
{$i18n.t('Document')}
{:else if type === 'collection'}
{$i18n.t('Collection')}
{:else}
<span class=" capitalize line-clamp-1">{type}</span>
{/if}
{#if size}
<span class="capitalize">{formatFileSize(size)}</span>
{/if}
</div>
</div>
{:else}
<Tooltip content={name} className="flex flex-col w-full" placement="top-start">
<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
<div class=" dark:text-gray-100 text-sm flex justify-between items-center">
<div class="font-medium line-clamp-1">{name}</div>
<div class="text-gray-500 text-xs capitalize shrink-0">{formatFileSize(size)}</div>
</div>
</div>
</Tooltip>
{/if}
{#if dismissible}
<div class=" absolute -top-1 -right-1">

24
src/lib/components/common/RichTextInput.svelte
View File

@@ -187,7 +187,7 @@
: [])
],
content: content,
autofocus: true,
autofocus: messageInput ? true : false,
onTransaction: () => {
// force re-render so `editor.isActive` works as expected
editor = editor;
@@ -218,16 +218,16 @@
return false;
},
keydown: (view, event) => {
// Handle Tab Key
if (event.key === 'Tab') {
const handled = selectNextTemplate(view.state, view.dispatch);
if (handled) {
event.preventDefault();
return true;
}
}
if (messageInput) {
// Handle Tab Key
if (event.key === 'Tab') {
const handled = selectNextTemplate(view.state, view.dispatch);
if (handled) {
event.preventDefault();
return true;
}
}
if (event.key === 'Enter') {
// Check if the current selection is inside a structured block (like codeBlock or list)
const { state } = view;
@@ -317,7 +317,9 @@
}
});
selectTemplate();
if (messageInput) {
selectTemplate();
}
});
onDestroy(() => {