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: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-06-01 18:11:54 -07:00
parent ef4af86883
commit c5c33aabf9
3 changed files with 578 additions and 587 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/chat/Chat.svelte
View File

@ -1269,9 +1269,6 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
<MessageInput <MessageInput
bind:files bind:files
bind:prompt bind:prompt
@ -1283,4 +1280,6 @@
{submitPrompt} {submitPrompt}
{stopResponse} {stopResponse}
/> />
</div>
</div>
{/if} {/if}

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

@ -440,7 +440,6 @@
</div> </div>
{/if} {/if}
<div class="fixed bottom-0 {$showSidebar ? 'left-0 md:left-[260px]' : 'left-0'} right-0">
<div class="w-full"> <div class="w-full">
<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center"> <div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
<div class="flex flex-col max-w-6xl px-2.5 md:px-6 w-full"> <div class="flex flex-col max-w-6xl px-2.5 md:px-6 w-full">
@ -560,9 +559,7 @@
if (inputFiles && inputFiles.length > 0) { if (inputFiles && inputFiles.length > 0) {
const _inputFiles = Array.from(inputFiles); const _inputFiles = Array.from(inputFiles);
_inputFiles.forEach((file) => { _inputFiles.forEach((file) => {
if ( if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])
) {
if (visionCapableModels.length === 0) { if (visionCapableModels.length === 0) {
toast.error($i18n.t('Selected model(s) do not support image inputs')); toast.error($i18n.t('Selected model(s) do not support image inputs'));
inputFiles = null; inputFiles = null;
@ -618,11 +615,7 @@
<div class=" relative group"> <div class=" relative group">
{#if file.type === 'image'} {#if file.type === 'image'}
<div class="relative"> <div class="relative">
<img <img src={file.url} alt="input" class=" h-16 w-16 rounded-xl object-cover" />
src={file.url}
alt="input"
class=" h-16 w-16 rounded-xl object-cover"
/>
{#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length} {#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length}
<Tooltip <Tooltip
className=" absolute top-1 left-1" className=" absolute top-1 left-1"
@ -1107,7 +1100,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<style> <style>
.scrollbar-hidden:active::-webkit-scrollbar-thumb, .scrollbar-hidden:active::-webkit-scrollbar-thumb,

4
src/lib/components/chat/Messages.svelte
View File

@ -242,7 +242,7 @@
}; };
</script> </script>
<div class="h-full flex mb-16"> <div class="h-full flex mb-6">
{#if messages.length == 0} {#if messages.length == 0}
<Placeholder <Placeholder
modelIds={selectedModels} modelIds={selectedModels}
@ -285,7 +285,7 @@
<div class="w-full pt-2"> <div class="w-full pt-2">
{#key chatId} {#key chatId}
{#each messages as message, messageIdx} {#each messages as message, messageIdx}
<div class=" w-full {messageIdx === messages.length - 1 ? 'pb-28' : ''}"> <div class=" w-full {messageIdx === messages.length - 1 ? ' pb-12' : ''}">
<div <div
class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null
? 'max-w-full' ? 'max-w-full'