ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-16 22:35:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: model selector styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-06-09 11:22:31 +04:00
parent ce9455b9a2
commit 8da1ce358f
1 changed files with 139 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/lib/components/chat/ModelSelector/ModelItem.svelte
View file

@ -52,42 +52,43 @@
onClick(); onClick();
}} }}
> >
<div class="flex flex-col"> <div class="flex flex-col flex-1 gap-1.5">
{#if $mobile && (item?.model?.tags ?? []).length > 0} {#if (item?.model?.tags ?? []).length > 0}
<div class="flex gap-0.5 self-start h-full mb-1.5 -translate-x-1">
{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
<div <div
class=" text-xs font-bold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class="flex gap-0.5 self-center items-start h-full w-full translate-y-[0.5px] overflow-x-auto scrollbar-none"
>
{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
<Tooltip content={tag.name} className="flex-shrink-0">
<div
class=" text-xs font-bold px-1 rounded-sm uppercase bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{tag.name} {tag.name}
</div> </div>
</Tooltip>
{/each} {/each}
</div> </div>
{/if} {/if}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex items-center min-w-fit"> <div class="flex items-center min-w-fit">
<div class="line-clamp-1"> <Tooltip content={$user?.role === 'admin' ? (item?.value ?? '') : ''} placement="top-start">
<div class="flex items-center min-w-fit">
<Tooltip
content={$user?.role === 'admin' ? (item?.value ?? '') : ''}
placement="top-start"
>
<img <img
src={item.model?.info?.meta?.profile_image_url ?? '/static/favicon.png'} src={item.model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
alt="Model" alt="Model"
class="rounded-full size-5 flex items-center mr-2" class="rounded-full size-5 flex items-center"
/> />
</Tooltip>
</div>
<div class="flex items-center line-clamp-1"> <div class="flex items-center">
<Tooltip content={`${item.label} (${item.value})`} placement="top-start">
<div class="line-clamp-1"> <div class="line-clamp-1">
{item.label} {item.label}
</div> </div>
</div>
</Tooltip> </Tooltip>
</div> </div>
</div>
</div>
<div class=" shrink-0 flex items-center gap-2">
{#if item.model.owned_by === 'ollama'} {#if item.model.owned_by === 'ollama'}
{#if (item.model.ollama?.details?.parameter_size ?? '') !== ''} {#if (item.model.ollama?.details?.parameter_size ?? '') !== ''}
<div class="flex items-center translate-y-[0.5px]"> <div class="flex items-center translate-y-[0.5px]">
@ -197,26 +198,11 @@
</div> </div>
</Tooltip> </Tooltip>
{/if} {/if}
{#if !$mobile && (item?.model?.tags ?? []).length > 0}
<div
class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px] overflow-x-auto scrollbar-none"
>
{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
<Tooltip content={tag.name} className="flex-shrink-0">
<div
class=" text-xs font-bold px-1 rounded-sm uppercase bg-gray-500/20 text-gray-700 dark:text-gray-200"
>
{tag.name}
</div> </div>
</Tooltip>
{/each}
</div>
{/if}
</div> </div>
</div> </div>
<div class="ml-auto pl-2 pr-1 flex items-center gap-1.5"> <div class="ml-auto pl-2 pr-1 flex items-center gap-1.5 shrink-0">
{#if $user?.role === 'admin' && item.model.owned_by === 'ollama' && item.model.ollama?.expires_at && new Date(item.model.ollama?.expires_at * 1000) > new Date()} {#if $user?.role === 'admin' && item.model.owned_by === 'ollama' && item.model.ollama?.expires_at && new Date(item.model.ollama?.expires_at * 1000) > new Date()}
<Tooltip <Tooltip
content={`${$i18n.t('Eject')}`} content={`${$i18n.t('Eject')}`}
@ -244,7 +230,7 @@
}} }}
> >
<button <button
class="flex items-center" class="flex"
on:click={(e) => { on:click={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();