BotAvatar

Usage

Basic

Drive state from the agent's real status: working while it streams or runs, default when idle.

Chat Reply

<template>
  <div class="msg msg--bot">
    <TxBotAvatar type="clover" :state="streaming ? 'working' : 'default'" :size="32" />
    <div class="msg-body">
      {{ streaming ? 'Thinking…' : content }}
    </div>
  </div>
</template>

Agent Roster

Each instance offsets its blink timing by default, so a row never blinks in unison.

<template>
  <ul class="roster">
    <li v-for="agent in agents" :key="agent.id">
      <TxBotAvatar :type="agent.avatar" :state="agent.busy ? 'working' : 'default'" :size="32" aria-hidden />
      <span>{{ agent.name }}</span>
      <span class="muted">{{ agent.status }}</span>
    </li>
  </ul>
</template>

Still Avatar

<template>
  <TxBotAvatar type="hexagon" :size="96" paused />
</template>

Best Practices

• Set size; never put width, height, or margin in style or a class, or the avatar shifts or crops.
• Leave room above the avatar: the canvas draws 1.5× the size box, so a jump leaves the layout box and an overflow: hidden parent crops it.
• Map your own statuses: running / streaming / pending / busy → working; idle / ready / online → default; offline / away / disabled → default with paused.
• When the name and status already appear as text beside it, mark the avatar decorative with aria-hidden.
• Use it for bots only; give people a photo or initials.

API Reference

Props

BotAvatarType has 18 shapes: clover, flower, triangle, square, blob, ghost, circle, drop, star, droid, mech, alien, hexagon, cat, cloud, pill, pebble, and puddle. BotAvatarFace is 'eyes' | 'mouth'. BotAvatarSquashEase is 'sharp' | 'pulse' | 'soft' | 'bouncy'.

Exposed Methods

Overview

• The canvas is a role="img" whose aria-label follows the state ("Clover bot, idle"); pass aria-label to replace it.
• Other attributes and DOM listeners pass straight to the <canvas>, so class, style, and data-* work as usual.
• An unknown state falls back to default; an unknown type falls back to clover.
• One shared requestAnimationFrame loop serves every avatar; drawing stops offscreen and while the tab is hidden.
• Under reduced motion no loop starts and only the state's still pose is drawn; the preference is read at render time, not watched.
• State changes cross-animate, so switching state on every token or tool call is safe.

Technologies

• Device pixel ratio is capped at 2; plastic shading bakes each body type on idle time when it first appears, with a softer look standing in until then.
• The drawing engine is a verbatim port of upstream Jakubantalik/Libraries · bot-avatars (MIT © Jakub Antalik); the Vue shell mirrors its React component.
• Source: packages/tuffex/packages/components/src/bot-avatar/.