UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-22 08:07:55 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refac: model workspace styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2024-11-18 06:02:14 -08:00
parent 6c3e6710ef
commit 43ffd61aeb
1 changed files with 113 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/lib/components/workspace/Models.svelte
View File

@ -230,40 +230,14 @@
</div>
</div>
<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">
<div class=" self-center w-8 flex-shrink-0">
<div
class="w-full h-8 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6">
<path
fill-rule="evenodd"
d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
clip-rule="evenodd"
/>
</svg>
</div>
</div>
<div class=" self-center">
<div class=" font-semibold line-clamp-1">{$i18n.t('Create a model')}</div>
<div class=" text-sm line-clamp-1 text-gray-500">
{$i18n.t('Customize models for a specific purpose')}
</div>
</div>
</a>
<div class=" my-2 mb-5" id="model-list">
<div class=" my-2 mb-5 grid gap-2 md:grid-cols-2 lg:grid-cols-3" id="model-list">
{#each filteredModels as model}
<div
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
class=" flex flex-col cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
id="model-item-{model.id}"
>
<a
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
href={`/?models=${encodeURIComponent(model.id)}`}
>
<div class=" self-center w-8">
<div class="flex gap-4 mt-1 mb-0.5">
<div class=" w-10">
<div
class=" rounded-full object-cover {model.is_active
? ''
@ -277,16 +251,34 @@
</div>
</div>
<a
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
href={`/?models=${encodeURIComponent(model.id)}`}
>
<div class=" flex-1 self-center {model.is_active ? '' : 'text-gray-500'}">
<Tooltip
content={marked.parse(model?.meta?.description ?? model.id)}
className=" w-fit"
placement="top-start"
>
<div class=" font-semibold line-clamp-1">{model.name}</div>
<div class=" font-medium line-clamp-1">{model.name}</div>
</Tooltip>
<div class="flex gap-1 text-xs overflow-hidden">
<div class="line-clamp-1">
{#if model?.meta?.description.trim()}
{model?.meta?.description}
{:else}
{model.id}
{/if}
</div>
</div>
</div>
</a>
</div>
<div class="flex justify-between items-center">
<div class=" text-xs">
<Tooltip content={model?.user?.email} className="flex shrink-0" placement="top-start">
<div class="shrink-0 text-gray-500">
{$i18n.t('By {{name}}', {
@ -295,9 +287,8 @@
</div>
</Tooltip>
</div>
</div>
</a>
<div class="flex flex-row gap-0.5 items-center self-center">
<div class="flex flex-row gap-0.5 items-center">
{#if shiftKey}
<Tooltip content={$i18n.t('Delete')}>
<button
@ -377,6 +368,7 @@
{/if}
</div>
</div>
</div>
{/each}
</div>