61 lines
4.9 KiB
Svelte
61 lines
4.9 KiB
Svelte
<script lang="ts">
|
|
import { agentProfileHref } from '$lib/agents';
|
|
import RoleBadgeList from '$lib/components/RoleBadgeList.svelte';
|
|
|
|
let {
|
|
agent,
|
|
size = 'default',
|
|
meta = '',
|
|
showId = false,
|
|
linked = true,
|
|
roles = null
|
|
}: {
|
|
agent: { id: string; displayName: string; avatarUrl: string; publicSlug?: string | null };
|
|
size?: 'compact' | 'default' | 'large';
|
|
meta?: string;
|
|
showId?: boolean;
|
|
linked?: boolean;
|
|
roles?: string[] | null;
|
|
} = $props();
|
|
</script>
|
|
|
|
{#if linked && roles !== null}
|
|
<div class="agent-profile-identity" class:compact={size === 'compact'} class:large={size === 'large'}>
|
|
<img src={agent.avatarUrl} alt="" />
|
|
<div class="agent-profile-content">
|
|
<div class="agent-profile-name">
|
|
<a href={agentProfileHref(agent)}>{agent.displayName}</a>
|
|
<RoleBadgeList {roles} compact={size !== 'large'} />
|
|
</div>
|
|
{#if meta}<small>{meta}</small>{:else if showId}<small>AGENT {agent.id.slice(0,8).toUpperCase()}</small>{/if}
|
|
</div>
|
|
</div>
|
|
{:else if linked}
|
|
<a class="agent-identity" class:compact={size === 'compact'} class:large={size === 'large'} href={agentProfileHref(agent)}>
|
|
<img src={agent.avatarUrl} alt="" />
|
|
<span>
|
|
<strong>{agent.displayName}</strong>
|
|
{#if meta}<small>{meta}</small>{:else if showId}<small>AGENT {agent.id.slice(0,8).toUpperCase()}</small>{/if}
|
|
</span>
|
|
</a>
|
|
{:else}
|
|
<div class="agent-identity unavailable" class:compact={size === 'compact'} class:large={size === 'large'}>
|
|
<img src={agent.avatarUrl} alt="" />
|
|
<span><strong>{agent.displayName}</strong><small>PROFILE HIDDEN</small></span>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.agent-identity{min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px;color:var(--shd-text)}
|
|
.agent-identity img{width:44px;height:44px;border:2px solid var(--shd-orange);border-radius:50%;background:var(--shd-surface);object-fit:cover}
|
|
.agent-identity span{min-width:0;display:grid;gap:3px}.agent-identity strong,.agent-identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.agent-identity strong{font-size:var(--shd-type-supporting)}.agent-identity small{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}
|
|
.agent-identity:hover strong,.agent-identity:focus-visible strong{color:var(--shd-orange)}
|
|
.agent-identity.compact{grid-template-columns:30px minmax(0,1fr);gap:7px}.agent-identity.compact img{width:30px;height:30px}.agent-identity.compact strong{font-size:var(--shd-type-telemetry)}
|
|
.agent-identity.large{grid-template-columns:74px minmax(0,1fr);gap:15px}.agent-identity.large img,.agent-profile-identity.large>img{width:74px;height:74px;box-shadow:0 0 0 5px var(--shd-bg),0 0 0 6px var(--shd-orange)}.agent-identity.large strong{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1}.agent-identity.large small{font-size:var(--shd-type-supporting)}
|
|
.agent-profile-identity{min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px}.agent-profile-identity>img{width:44px;height:44px;border:2px solid var(--shd-orange);border-radius:50%;background:var(--shd-surface);object-fit:cover}.agent-profile-identity.compact{grid-template-columns:30px minmax(0,1fr);gap:7px}.agent-profile-identity.compact>img{width:30px;height:30px}.agent-profile-identity.large{grid-template-columns:74px minmax(0,1fr);gap:15px}.agent-profile-content{min-width:0;display:grid;gap:3px}.agent-profile-content>small{overflow:hidden;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px;text-overflow:ellipsis;white-space:nowrap}.agent-profile-name{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px}.agent-profile-name>a{min-width:0;overflow:hidden;color:var(--shd-text);font-size:var(--shd-type-supporting);font-weight:700;line-height:1;text-overflow:ellipsis;white-space:nowrap}.agent-profile-identity.compact .agent-profile-name>a{font-size:var(--shd-type-telemetry)}.agent-profile-identity.large .agent-profile-name{gap:8px 12px}.agent-profile-identity.large .agent-profile-name>a{font-size:clamp(1.5rem,3vw,2.6rem)}.agent-profile-name>a:hover,.agent-profile-name>a:focus-visible{color:var(--shd-orange)}
|
|
.agent-identity.unavailable{grid-template-columns:44px minmax(0,1fr)}.agent-identity.unavailable strong{color:var(--shd-text-muted)}
|
|
.agent-identity.unavailable.compact{grid-template-columns:30px minmax(0,1fr)}.agent-identity.unavailable.large{grid-template-columns:74px minmax(0,1fr)}
|
|
@media(max-width:600px){.agent-identity,.agent-profile-identity{min-height:44px}.agent-identity.large,.agent-profile-identity.large{grid-template-columns:58px minmax(0,1fr)}.agent-identity.large img,.agent-profile-identity.large>img{width:58px;height:58px}.agent-identity.large strong,.agent-profile-identity.large .agent-profile-name>a{font-size:1.6rem}.agent-profile-identity.large .agent-profile-name{align-items:flex-start;flex-direction:column;gap:7px}.agent-identity.unavailable.large{grid-template-columns:58px minmax(0,1fr)}}
|
|
</style>
|