UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-02-22 21:32:32 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-02-03 20:06:17 -08:00
parent b61138e676
commit 2bf68593af
4 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/channel/MessageInput.svelte
View File

@ -398,7 +398,7 @@
dir={$settings?.chatDirection ?? 'LTR'}
>
{#if files.length > 0}
<div class="mx-1 mt-2.5 mb-1 flex flex-wrap gap-2">
<div class="mx-1 mt-2.5 flex flex-wrap gap-2">
{#each files as file, fileIdx}
{#if file.type === 'image'}
<div class=" relative group">
@ -411,7 +411,7 @@
</div>
<div class=" absolute -top-1 -right-1">
<button
class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
type="button"
on:click={() => {
files.splice(fileIdx, 1);
@ -453,7 +453,7 @@
</div>
{/if}
<div class="px-3">
<div class="px-2.5">
<div
class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-none w-full pt-2.5 px-1 rounded-xl resize-none h-fit max-h-80 overflow-auto"
>

10
src/lib/components/chat/MessageInput.svelte
View File

@ -573,7 +573,7 @@
dir={$settings?.chatDirection ?? 'LTR'}
>
{#if files.length > 0}
<div class="mx-1 mt-2.5 mb-1 flex items-center flex-wrap gap-2">
<div class="mx-1 mt-2.5 flex items-center flex-wrap gap-2">
{#each files as file, fileIdx}
{#if file.type === 'image'}
<div class=" relative group">
@ -611,7 +611,7 @@
</div>
<div class=" absolute -top-1 -right-1">
<button
class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
type="button"
on:click={() => {
files.splice(fileIdx, 1);
@ -661,7 +661,7 @@
</div>
{/if}
<div class="px-3">
<div class="px-2.5">
{#if $settings?.richTextInput ?? true}
<div
class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-none w-full pt-2.5 pb-1 px-1 rounded-xl resize-none h-fit max-h-80 overflow-auto"
@ -1062,11 +1062,9 @@
<div class=" flex justify-between">
<div class="ml-1 self-end mb-1.5 gap-0.5 flex items-center">
<InputMenu
bind:imageGenerationEnabled
bind:codeInterpreterEnabled
bind:webSearchEnabled
bind:selectedToolIds
{screenCaptureHandler}
{inputFilesHandler}
uploadFilesHandler={() => {
filesInputElement.click();
}}

64
src/lib/components/chat/MessageInput/InputMenu.svelte
View File

@ -21,12 +21,12 @@
export let screenCaptureHandler: Function;
export let uploadFilesHandler: Function;
export let inputFilesHandler: Function;
export let uploadGoogleDriveHandler: Function;
export let selectedToolIds: string[] = [];
export let codeInterpreterEnabled: boolean;
export let onClose: Function;
let tools = {};
@ -53,8 +53,26 @@
return a;
}, {});
};
function handleFileChange(event) {
const inputFiles = Array.from(event.target?.files);
if (inputFiles && inputFiles.length > 0) {
console.log(inputFiles);
inputFilesHandler(inputFiles);
}
}
</script>
<!-- Hidden file input used to open the camera on mobile -->
<input
id="camera-input"
type="file"
accept="image/*"
capture="environment"
on:change={handleFileChange}
style="display: none;"
/>
<Dropdown
bind:show
on:change={(e) => {
@ -120,26 +138,32 @@
<hr class="border-black/5 dark:border-white/5 my-1" />
{/if}
{#if !$mobile}
<Tooltip
content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}
className="w-full"
>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
on:click={() => {
if (fileUploadEnabled) {
<Tooltip
content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}
className="w-full"
>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
on:click={() => {
if (fileUploadEnabled) {
if (!$mobile) {
screenCaptureHandler();
} else {
const cameraInputElement = document.getElementById('camera-input');
if (cameraInputElement) {
cameraInputElement.click();
}
}
}}
>
<CameraSolid />
<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
</DropdownMenu.Item>
</Tooltip>
{/if}
}
}}
>
<CameraSolid />
<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
</DropdownMenu.Item>
</Tooltip>
<Tooltip
content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}

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

@ -119,7 +119,7 @@
{#if dismissible}
<div class=" absolute -top-1 -right-1">
<button
class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
type="button"
on:click|stopPropagation={() => {
dispatch('dismiss');