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 Jaeryang Baek 2024-12-01 23:16:00 -08:00
parent 29573afb91
commit 4053de5825
5 changed files with 113 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -305,7 +305,7 @@
<div class="w-full relative"> <div class="w-full relative">
{#if atSelectedModel !== undefined || selectedToolIds.length > 0 || webSearchEnabled} {#if atSelectedModel !== undefined || selectedToolIds.length > 0 || webSearchEnabled}
<div <div
class="px-4 pb-0.5 pt-1.5 text-left w-full flex flex-col absolute bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 z-10" class="px-3 pb-0.5 pt-1.5 text-left w-full flex flex-col absolute bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 z-10"
> >
{#if selectedToolIds.length > 0} {#if selectedToolIds.length > 0}
<div class="flex items-center justify-between w-full"> <div class="flex items-center justify-between w-full">
@ -462,7 +462,7 @@
}} }}
> >
<div <div
class="flex-1 flex flex-col relative w-full rounded-3xl px-1.5 bg-gray-50 dark:bg-gray-400/5 dark:text-gray-100" class="flex-1 flex flex-col relative w-full rounded-3xl px-1 bg-gray-50 dark:bg-gray-400/5 dark:text-gray-100"
dir={$settings?.chatDirection ?? 'LTR'} dir={$settings?.chatDirection ?? 'LTR'}
> >
{#if files.length > 0} {#if files.length > 0}
@ -967,12 +967,12 @@
/> />
{/if} {/if}
<div class="self-end mb-2 flex space-x-1 mr-1"> <div class="self-end mb-1.5 flex space-x-1 mr-1">
{#if !history?.currentId || history.messages[history.currentId]?.done == true} {#if !history?.currentId || history.messages[history.currentId]?.done == true}
<Tooltip content={$i18n.t('Record voice')}> <Tooltip content={$i18n.t('Record voice')}>
<button <button
id="voice-input-button" id="voice-input-button"
class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-1.5 mr-0.5 self-center" class=" text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 transition rounded-full p-1.5 mr-0.5 self-center"
type="button" type="button"
on:click={async () => { on:click={async () => {
try { try {
@ -1016,16 +1016,13 @@
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
</div>
</div>
</div>
<div class="flex items-end w-10">
{#if !history.currentId || history.messages[history.currentId]?.done == true} {#if !history.currentId || history.messages[history.currentId]?.done == true}
{#if prompt === ''} {#if prompt === ''}
<div class=" flex items-center mb-1"> <div class=" flex items-center">
<Tooltip content={$i18n.t('Call')}> <Tooltip content={$i18n.t('Call')}>
<button <button
class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-2 self-center" class=" bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full p-2 self-center"
type="button" type="button"
on:click={async () => { on:click={async () => {
if (selectedModels.length > 1) { if (selectedModels.length > 1) {
@ -1036,7 +1033,9 @@
if ($config.audio.stt.engine === 'web') { if ($config.audio.stt.engine === 'web') {
toast.error( toast.error(
$i18n.t('Call feature is not supported when using Web STT engine') $i18n.t(
'Call feature is not supported when using Web STT engine'
)
); );
return; return;
@ -1066,18 +1065,18 @@
}} }}
aria-label="Call" aria-label="Call"
> >
<Headphone className="size-6" /> <Headphone className="size-5" />
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
{:else} {:else}
<div class=" flex items-center mb-1"> <div class=" flex items-center">
<Tooltip content={$i18n.t('Send message')}> <Tooltip content={$i18n.t('Send message')}>
<button <button
id="send-message-button" id="send-message-button"
class="{prompt !== '' class="{prompt !== ''
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 ' ? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 m-0.5 self-center" : 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 self-center"
type="submit" type="submit"
disabled={prompt === ''} disabled={prompt === ''}
> >
@ -1098,7 +1097,7 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div class=" flex items-center mb-1.5"> <div class=" flex items-center">
<Tooltip content={$i18n.t('Stop')}> <Tooltip content={$i18n.t('Stop')}>
<button <button
class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5" class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
@ -1123,6 +1122,8 @@
</div> </div>
{/if} {/if}
</div> </div>
</div>
</div>
</form> </form>
{/if} {/if}
</div> </div>

2
src/lib/components/chat/MessageInput/Commands.svelte
View File

@ -106,7 +106,7 @@
{:else} {:else}
<div <div
id="commands-container" id="commands-container"
class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
<div <div

2
src/lib/components/chat/MessageInput/Commands/Knowledge.svelte
View File

@ -159,7 +159,7 @@
{#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')} {#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
<div <div
id="commands-container" id="commands-container"
class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
<div <div

2
src/lib/components/chat/MessageInput/Commands/Models.svelte
View File

@ -68,7 +68,7 @@
{#if filteredItems.length > 0} {#if filteredItems.length > 0}
<div <div
id="commands-container" id="commands-container"
class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
<div <div

2
src/lib/components/chat/MessageInput/Commands/Prompts.svelte
View File

@ -137,7 +137,7 @@
{#if filteredPrompts.length > 0} {#if filteredPrompts.length > 0}
<div <div
id="commands-container" id="commands-container"
class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
<div <div