feat: experimental open terminal integration

This commit is contained in:
Timothy Jaeryang Baek
2026-02-25 15:15:53 -06:00
parent f0c71e5a6d
commit 636ab99ad8
26 changed files with 1583 additions and 361 deletions
@@ -564,51 +564,51 @@
<!-- Users -->
{#if shareUsers}
{#each selectedUsers as user}
<div
class="flex items-center gap-3 justify-between text-sm w-full transition border-b border-gray-50 dark:border-gray-850 pb-2 last:border-0"
>
<div class="flex items-center gap-2 w-full flex-1">
<img
class="rounded-full size-5 object-cover"
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
alt={user.name ?? user.id}
/>
<div class="w-full">
<Tooltip content={user.email} placement="top-start">
<div class="truncate text-sm">{user.name ?? user.id}</div>
</Tooltip>
{#each selectedUsers as user}
<div
class="flex items-center gap-3 justify-between text-sm w-full transition border-b border-gray-50 dark:border-gray-850 pb-2 last:border-0"
>
<div class="flex items-center gap-2 w-full flex-1">
<img
class="rounded-full size-5 object-cover"
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
alt={user.name ?? user.id}
/>
<div class="w-full">
<Tooltip content={user.email} placement="top-start">
<div class="truncate text-sm">{user.name ?? user.id}</div>
</Tooltip>
</div>
</div>
<div class="w-full flex justify-end items-center gap-2">
<button
type="button"
on:click={() => {
if (accessRoles.includes('write')) {
togglePrincipalWrite('user', user.id);
}
}}
>
{#if writeUserIds.includes(user.id)}
<Badge type={'success'} content={$i18n.t('Write')} />
{:else}
<Badge type={'info'} content={$i18n.t('Read')} />
{/if}
</button>
<button
class=" rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
type="button"
on:click={() => {
removePrincipal('user', user.id);
}}
>
<XMark className="size-4" />
</button>
</div>
</div>
<div class="w-full flex justify-end items-center gap-2">
<button
type="button"
on:click={() => {
if (accessRoles.includes('write')) {
togglePrincipalWrite('user', user.id);
}
}}
>
{#if writeUserIds.includes(user.id)}
<Badge type={'success'} content={$i18n.t('Write')} />
{:else}
<Badge type={'info'} content={$i18n.t('Read')} />
{/if}
</button>
<button
class=" rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
type="button"
on:click={() => {
removePrincipal('user', user.id);
}}
>
<XMark className="size-4" />
</button>
</div>
</div>
{/each}
{/each}
{/if}
{#if !hasPublicReadGrant(accessGrants ?? []) && accessGroups.length === 0 && selectedUsers.length === 0}
@@ -52,7 +52,12 @@
}}
>
<div class="flex flex-col w-full h-full pb-2">
<MemberSelector bind:userIds bind:groupIds includeGroups={true} includeUsers={shareUsers} />
<MemberSelector
bind:userIds
bind:groupIds
includeGroups={true}
includeUsers={shareUsers}
/>
</div>
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
@@ -239,64 +239,65 @@
{/if}
{#if includeUsers}
<div class="text-xs text-gray-500 mb-1 mx-1">
{$i18n.t('Users')}
</div>
<div class="text-xs text-gray-500 mb-1 mx-1">
{$i18n.t('Users')}
</div>
<div>
{#each users as user, userIdx (user.id)}
{#if user?.id !== $_user?.id}
<button
class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
type="button"
on:click={() => {
if ((userIds ?? []).includes(user.id)) {
userIds = userIds.filter((id) => id !== user.id);
delete selectedUsers[user.id];
} else {
userIds = [...userIds, user.id];
selectedUsers[user.id] = user;
}
}}
>
<div class="px-3 py-1.5 font-medium text-gray-900 dark:text-white flex-1">
<div class="flex items-center gap-2">
<ProfilePreview {user} side="right" align="center" sideOffset={6}>
<img
class="rounded-2xl w-6 h-6 object-cover flex-shrink-0"
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
alt="user"
<div>
{#each users as user, userIdx (user.id)}
{#if user?.id !== $_user?.id}
<button
class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
type="button"
on:click={() => {
if ((userIds ?? []).includes(user.id)) {
userIds = userIds.filter((id) => id !== user.id);
delete selectedUsers[user.id];
} else {
userIds = [...userIds, user.id];
selectedUsers[user.id] = user;
}
}}
>
<div class="px-3 py-1.5 font-medium text-gray-900 dark:text-white flex-1">
<div class="flex items-center gap-2">
<ProfilePreview {user} side="right" align="center" sideOffset={6}>
<img
class="rounded-2xl w-6 h-6 object-cover flex-shrink-0"
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
alt="user"
/>
</ProfilePreview>
<Tooltip content={user.email} placement="top-start">
<div class="font-medium truncate">{user.name}</div>
</Tooltip>
{#if user?.is_active}
<div>
<span class="relative flex size-1.5">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
></span>
<span
class="relative inline-flex size-1.5 rounded-full bg-green-500"
></span>
</span>
</div>
{/if}
</div>
</div>
<div class="px-3 py-1">
<div class=" translate-y-0.5">
<Checkbox
state={(userIds ?? []).includes(user.id) ? 'checked' : 'unchecked'}
/>
</ProfilePreview>
<Tooltip content={user.email} placement="top-start">
<div class="font-medium truncate">{user.name}</div>
</Tooltip>
{#if user?.is_active}
<div>
<span class="relative flex size-1.5">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
></span>
<span class="relative inline-flex size-1.5 rounded-full bg-green-500"
></span>
</span>
</div>
{/if}
</div>
</div>
</div>
<div class="px-3 py-1">
<div class=" translate-y-0.5">
<Checkbox
state={(userIds ?? []).includes(user.id) ? 'checked' : 'unchecked'}
/>
</div>
</div>
</button>
{/if}
{/each}
</div>
</button>
{/if}
{/each}
</div>
{/if}
</div>
</div>