mirror of
https://github.com/open-webui/open-webui
synced 2024-11-25 13:29:53 +00:00
refac: model workspace styling
This commit is contained in:
Timothy Jaeryang Baek
parent
6c3e6710ef
commit
43ffd61aeb
@ -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,104 +251,122 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</Tooltip>
|
||||
<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-medium line-clamp-1">{model.name}</div>
|
||||
</Tooltip>
|
||||
|
||||
<div class="flex gap-1 text-xs overflow-hidden">
|
||||
<Tooltip content={model?.user?.email} className="flex shrink-0" placement="top-start">
|
||||
<div class="shrink-0 text-gray-500">
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(model?.user?.name ?? model?.user?.email)
|
||||
})}
|
||||
<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>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex flex-row gap-0.5 items-center self-center">
|
||||
{#if shiftKey}
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
deleteModelHandler(model);
|
||||
}}
|
||||
>
|
||||
<GarbageBin />
|
||||
</button>
|
||||
</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}}', {
|
||||
name: capitalizeFirstLetter(model?.user?.name ?? model?.user?.email)
|
||||
})}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
{#if $user?.role === 'admin' || model.user_id === $user?.id}
|
||||
<a
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
href={`/workspace/models/edit?id=${encodeURIComponent(model.id)}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<ModelMenu
|
||||
user={$user}
|
||||
{model}
|
||||
shareHandler={() => {
|
||||
shareModelHandler(model);
|
||||
}}
|
||||
cloneHandler={() => {
|
||||
cloneModelHandler(model);
|
||||
}}
|
||||
exportHandler={() => {
|
||||
exportModelHandler(model);
|
||||
}}
|
||||
hideHandler={() => {
|
||||
hideModelHandler(model);
|
||||
}}
|
||||
deleteHandler={() => {
|
||||
selectedModel = model;
|
||||
showModelDeleteConfirm = true;
|
||||
}}
|
||||
onClose={() => {}}
|
||||
>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
>
|
||||
<EllipsisHorizontal className="size-5" />
|
||||
</button>
|
||||
</ModelMenu>
|
||||
|
||||
<div class="ml-1">
|
||||
<Tooltip content={model.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
|
||||
<Switch
|
||||
bind:state={model.is_active}
|
||||
on:change={async (e) => {
|
||||
toggleModelById(localStorage.token, model.id);
|
||||
_models.set(await getModels(localStorage.token));
|
||||
<div class="flex flex-row gap-0.5 items-center">
|
||||
{#if shiftKey}
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
deleteModelHandler(model);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<GarbageBin />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if $user?.role === 'admin' || model.user_id === $user?.id}
|
||||
<a
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
href={`/workspace/models/edit?id=${encodeURIComponent(model.id)}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<ModelMenu
|
||||
user={$user}
|
||||
{model}
|
||||
shareHandler={() => {
|
||||
shareModelHandler(model);
|
||||
}}
|
||||
cloneHandler={() => {
|
||||
cloneModelHandler(model);
|
||||
}}
|
||||
exportHandler={() => {
|
||||
exportModelHandler(model);
|
||||
}}
|
||||
hideHandler={() => {
|
||||
hideModelHandler(model);
|
||||
}}
|
||||
deleteHandler={() => {
|
||||
selectedModel = model;
|
||||
showModelDeleteConfirm = true;
|
||||
}}
|
||||
onClose={() => {}}
|
||||
>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
>
|
||||
<EllipsisHorizontal className="size-5" />
|
||||
</button>
|
||||
</ModelMenu>
|
||||
|
||||
<div class="ml-1">
|
||||
<Tooltip content={model.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
|
||||
<Switch
|
||||
bind:state={model.is_active}
|
||||
on:change={async (e) => {
|
||||
toggleModelById(localStorage.token, model.id);
|
||||
_models.set(await getModels(localStorage.token));
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user