ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 04:45:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix: playground styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-30 14:06:42 +04:00
parent 00a00f5162
commit 22d98e6ee5
1 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/lib/components/playground/Chat.svelte
View file

@ -293,10 +293,12 @@
/>
</div>
<div class="flex justify-between">
<div>
<div
class="flex justify-between flex-col sm:flex-row items-start sm:items-center gap-2 mt-2"
>
<div class="flex-1 shrink-0">
<button
class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg shrink-0"
on:click={() => {
role = role === 'user' ? 'assistant' : 'user';
}}
@ -309,10 +311,10 @@
</button>
</div>
<div class="flex items-center gap-2">
<div class="">
<div class="flex items-center justify-between gap-2 w-full sm:w-auto">
<div class="flex-1">
<select
class=" bg-transparent border border-gray-100 dark:border-gray-850 rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden w-40"
class=" bg-transparent border border-gray-100 dark:border-gray-850 rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden w-full"
bind:value={selectedModelId}
>
{#each $models as model}
@ -323,36 +325,38 @@
</select>
</div>
{#if !loading}
<button
disabled={message === ''}
class="px-3.5 py-1.5 text-sm font-medium disabled:bg-gray-50 dark:disabled:hover:bg-gray-850 disabled:cursor-not-allowed bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
on:click={() => {
addHandler();
role = role === 'user' ? 'assistant' : 'user';
}}
>
{$i18n.t('Add')}
</button>
<div class="flex gap-2 shrink-0">
{#if !loading}
<button
disabled={message === ''}
class="px-3.5 py-1.5 text-sm font-medium disabled:bg-gray-50 dark:disabled:hover:bg-gray-850 disabled:cursor-not-allowed bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
on:click={() => {
addHandler();
role = role === 'user' ? 'assistant' : 'user';
}}
>
{$i18n.t('Add')}
</button>
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
on:click={() => {
submitHandler();
}}
>
{$i18n.t('Run')}
</button>
{:else}
<button
class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg"
on:click={() => {
stopResponse();
}}
>
{$i18n.t('Cancel')}
</button>
{/if}
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
on:click={() => {
submitHandler();
}}
>
{$i18n.t('Run')}
</button>
{:else}
<button
class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg"
on:click={() => {
stopResponse();
}}
>
{$i18n.t('Cancel')}
</button>
{/if}
</div>
</div>
</div>
</div>