mirror of
https://github.com/open-webui/open-webui
synced 2024-11-22 08:07:55 +00:00
refac: model workspace styling
This commit is contained in:
Timothy Jaeryang Baek
parent
6c3e6710ef
commit
43ffd61aeb
@ -230,40 +230,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">
|
<div class=" my-2 mb-5 grid gap-2 md:grid-cols-2 lg:grid-cols-3" id="model-list">
|
||||||
<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">
|
|
||||||
{#each filteredModels as model}
|
{#each filteredModels as model}
|
||||||
<div
|
<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}"
|
id="model-item-{model.id}"
|
||||||
>
|
>
|
||||||
<a
|
<div class="flex gap-4 mt-1 mb-0.5">
|
||||||
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
|
<div class=" w-10">
|
||||||
href={`/?models=${encodeURIComponent(model.id)}`}
|
|
||||||
>
|
|
||||||
<div class=" self-center w-8">
|
|
||||||
<div
|
<div
|
||||||
class=" rounded-full object-cover {model.is_active
|
class=" rounded-full object-cover {model.is_active
|
||||||
? ''
|
? ''
|
||||||
@ -277,104 +251,122 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class=" flex-1 self-center {model.is_active ? '' : 'text-gray-500'}">
|
<a
|
||||||
<Tooltip
|
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
|
||||||
content={marked.parse(model?.meta?.description ?? model.id)}
|
href={`/?models=${encodeURIComponent(model.id)}`}
|
||||||
className=" w-fit"
|
>
|
||||||
placement="top-start"
|
<div class=" flex-1 self-center {model.is_active ? '' : 'text-gray-500'}">
|
||||||
>
|
<Tooltip
|
||||||
<div class=" font-semibold line-clamp-1">{model.name}</div>
|
content={marked.parse(model?.meta?.description ?? model.id)}
|
||||||
</Tooltip>
|
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">
|
<div class="flex gap-1 text-xs overflow-hidden">
|
||||||
<Tooltip content={model?.user?.email} className="flex shrink-0" placement="top-start">
|
<div class="line-clamp-1">
|
||||||
<div class="shrink-0 text-gray-500">
|
{#if model?.meta?.description.trim()}
|
||||||
{$i18n.t('By {{name}}', {
|
{model?.meta?.description}
|
||||||
name: capitalizeFirstLetter(model?.user?.name ?? model?.user?.email)
|
{:else}
|
||||||
})}
|
{model.id}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</a>
|
</div>
|
||||||
<div class="flex flex-row gap-0.5 items-center self-center">
|
|
||||||
{#if shiftKey}
|
<div class="flex justify-between items-center">
|
||||||
<Tooltip content={$i18n.t('Delete')}>
|
<div class=" text-xs">
|
||||||
<button
|
<Tooltip content={model?.user?.email} className="flex shrink-0" placement="top-start">
|
||||||
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"
|
<div class="shrink-0 text-gray-500">
|
||||||
type="button"
|
{$i18n.t('By {{name}}', {
|
||||||
on:click={() => {
|
name: capitalizeFirstLetter(model?.user?.name ?? model?.user?.email)
|
||||||
deleteModelHandler(model);
|
})}
|
||||||
}}
|
</div>
|
||||||
>
|
|
||||||
<GarbageBin />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
{:else}
|
</div>
|
||||||
{#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
|
<div class="flex flex-row gap-0.5 items-center">
|
||||||
user={$user}
|
{#if shiftKey}
|
||||||
{model}
|
<Tooltip content={$i18n.t('Delete')}>
|
||||||
shareHandler={() => {
|
<button
|
||||||
shareModelHandler(model);
|
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"
|
||||||
cloneHandler={() => {
|
on:click={() => {
|
||||||
cloneModelHandler(model);
|
deleteModelHandler(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));
|
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<GarbageBin />
|
||||||
|
</button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
{:else}
|
||||||
{/if}
|
{#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>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user