← All proposals

Agent avatar

Start from the PDS v2 Avatar (src/components/identity/Avatar, branch v2.x), renamed AgentAvatar (class pds-agent-avatar).

Net-new componentOpen in Storybook

proposals/AgentAvatar/decisions.md13 lines · View on GitHub

Decisions

  • Separate, purpose-built component, copied from Avatar. Named AgentAvatar (class pds-agent-avatar); not a variant of Avatar.
  • Treatment (from Erika's reference screenshot): circle (default) + dark fill + lightning-bolt icon + AI-gradient ring with a gap. Fill is --pds-color-foreground-default, icon is --pds-color-foreground-reverse (both flip in dark mode, so it is a light disc with a dark bolt there). The ring (--pds-gradient-ai-active) is the cue that separates it from human avatars; the bolt is the second cue, so it never depends on color alone. Avatar's non-agentic options (shape, image, per-user color, user fallback) are removed: this is a purpose-built agent component, circle only.
  • Ring built from stacked backgrounds (fill on content-box, --pds-color-surface-default on padding-box for the gap, gradient on border-box) because the gradient is not a color and cannot go in border-color. Ring and gap are 1px at xs to m, ring 2px at l, ring and gap 2px at xl. Open: confirm at 2x that 1px rings read at xs.
  • One shared look for all agents. No imageSrc, uniqueId or hasUserFallback; those are dropped from the Avatar copy. Per-agent identity is the name shown next to it.
  • Required label prop (visually-hidden "Agent", translated by the caller), because the visual treatment alone is not available to screen readers. When used as a link, the link's aria-label is ariaLabel, falling back to label.
  • Gradient is one value for light and dark (no dark override), same as the Spinner proposal.
  • Icon comes from ../Icon/Icon (the Icon proposal adds sparklesSolid). iconName prop, 'zappy' (default, Pantheon agents) or 'sparklesSolid' (third-party agents), per that proposal and Erika's call. Typed as a two-value union so other icons can't be used.
  • Local mergeClasses stands in for v2's (not exported by the published package). No hash-sum needed any more.
  • Halo is a boolean prop, hasHalo, default true. Off leaves the dark disc and bolt at the same overall size. Implemented as an --halo modifier so the ring/gap padding only applies when on; without it the icon stays the same size (not enlarged to fill the extra room). Open: should the no-halo icon grow?
  • shape prop (circle default, square) under Component configuration, added back at Erika's request after the non-agentic options were removed. Square uses --pds-border-radius-default; the halo ring follows the shape.