#AgentCharacterPicker

A CharacterPicker that holds its edits until they are confirmed.

import { useState } from 'react';
import { AgentAvatar, AgentCharacterPicker, type CharacterChoice } from '@aora-bot/react';

export default function Demo() {
  const [committed, setCommitted] = useState<CharacterChoice>({ shape: 'hex', color: 'blue' });
  const [writes, setWrites] = useState(0);
  return (
    <div className="site-demo site-demo--column">
      <div className="site-demo">
        <AgentAvatar agent={{ id: 'nova', ...committed }} size="xl" />
        <span className="site-demo__label">
          committed {committed.shape}, {committed.color} — {writes} write{writes === 1 ? '' : 's'}
        </span>
      </div>
      <AgentCharacterPicker
        value={committed}
        shapes={['blob', 'hex', 'cloud', 'star', 'tofu', 'drop']}
        colors={['blue', 'green', 'orange', 'violet', 'red']}
        onCommit={(next) => {
          setCommitted(next);
          setWrites((n) => n + 1);
        }}
      />
    </div>
  );
}

#A click is a proposal

The plain picker is controlled: every click is the host's to apply. That is right inside a settings form, and wrong inside a dialog, where a click is a proposal and Cancel has to mean something. This component keeps the proposal locally and hands over one value on confirm, so the host writes to its store once per dialog rather than once per click — and the avatar in the header does not flicker through five shapes while someone makes up their mind.

onCommit receives the staged CharacterChoice when it is confirmed; onCancel fires when it is discarded, and the staged edits reset to value. immediate turns the staging off and commits on every pick, for the settings form case, without the host having to switch components.

#Pictures and actions

hasPicture says the agent has a photo of its own. The grid then shows no selection ring, because the character underneath is not what is on screen — highlighting a hexagon nobody can see would be a lie. The selection is still announced to assistive technology.

actions={false} hides the confirm and discard buttons for a host that puts its own in a dialog footer; call the commit through your own button by keeping immediate off and rendering the picker inside a form whose submit you control.

#API

#Next

• CompactCharacterPicker — a trimmed set for a sign-up form
• Character setup — choosing what an agent looks like