Aora Bot
  • 简体中文

      • AgentAvatar

      真正丢进列表里的那个头像。

      Ada
      Grace
      Alan
      +1Platform
      import { MarkStageProvider, AgentAvatar } from '@aora-bot/react';

const people = [
  { id: 'ada@example.com', name: 'Ada' },
  { id: 'grace@example.com', name: 'Grace' },
  { id: 'alan@example.com', name: 'Alan' },
  { id: 'team', name: 'Platform', members: [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }] },
];

export default function Demo() {
  return (
    <MarkStageProvider>
      <div className="site-demo">
        {people.map((agent) => (
          <div className="site-demo__cell" key={agent.id}>
            <AgentAvatar agent={agent} sizePx={52} />
            <span className="site-demo__label">{agent.name}</span>
          </div>
        ))}
      </div>
    </MarkStageProvider>
  );
}

      它在什么之间选择

      按顺序：

      1. 照片，如果设置了 pictureUrl
      2. 群组簇，如果 members 非空
      3. 角色，从 id 推导

      也就是说应用可以把手里有的东西传进去，得到一个说得通的结果，而不必在每个调用点分支。

      不必存储的身份

      未显式给出时，形状和墨色从 id 哈希而来，所以每个用户都有固定角色，而你不存储任何东西。两个客户端、两次会话和一次服务端渲染都会达成一致。

      import { AgentAvatar } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      {['u-1', 'u-2', 'u-3', 'u-4', 'u-5', 'u-6', 'u-7', 'u-8'].map((id) => (
        <AgentAvatar key={id} agent={{ id }} sizePx={44} still />
      ))}
    </div>
  );
}

      在 agent 上传入 shape 或 color 可以分别覆盖其中一项。

      脸型

      在 agent 上加 face: 'line' 即可使用线条脸。鼻子和形状、墨色一样从 id 哈希而来，所以同样稳定；设置 nose 可以指定一种，null 则不画。

      import { AgentAvatar } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      {['u-1', 'u-2', 'u-3', 'u-4', 'u-5', 'u-6', 'u-7', 'u-8'].map((id) => (
        <AgentAvatar key={id} agent={{ id, face: 'line' }} sizePx={44} still />
      ))}
    </div>
  );
}

      阵容 preset 也可以带脸型和鼻子；agent 上的显式值优先于预设，预设优先于哈希。

      尺寸

      xs, 16px
      sm, 22px
      md, 28px
      lg, 36px
      xl, 72px
      import { AgentAvatar, AVATAR_SIZES } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo" style={{ alignItems: 'flex-end' }}>
      {Object.entries(AVATAR_SIZES).map(([size, px]) => (
        <div className="site-demo__cell" key={size}>
          <AgentAvatar agent={{ id: 'nova' }} size={size as never} />
          <span className="site-demo__label">
            {size}, {px}px
          </span>
        </div>
      ))}
    </div>
  );
}

      静止与光晕

      still 渲染图片而不是动画——长列表里的正确选择。halo 加上一层从角色自身色相推导的柔软色洗。

      import { AgentAvatar } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      <AgentAvatar agent={{ id: 'halo-1' }} sizePx={64} halo still />
      <AgentAvatar agent={{ id: 'halo-2' }} sizePx={64} halo still />
      <AgentAvatar agent={{ id: 'halo-3' }} sizePx={64} halo still />
    </div>
  );
}

      填充

      fillPx 设定圆内角色的大小。圆保持自己的尺寸，变的只是里面画的东西：比圆小就留出边距，比圆大就被裁掉。默认正好填满圆。它是一个自定义属性而不是子元素的宽度，因为三个分支里有两个的子元素是 img，样式表已经给它们定了尺寸。

      fillPx 44
      fillPx 64
      fillPx 80
      import { AgentAvatar } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      {[44, 64, 80].map((fill) => (
        <div className="site-demo__cell" key={fill}>
          <AgentAvatar agent={{ id: 'fill', shape: 'hex', color: 'blue' }} sizePx={64} fillPx={fill} halo />
          <span className="site-demo__label">fillPx {fill}</span>
        </div>
      ))}
    </div>
  );
}

      形状正在改变时

      isMorphingShape 表示形状此刻正在角色底下被换掉——编辑器开着，有人在网格里一格格点。它为真时，头像在落定窗口（SETTLE_MS，经由 useMarkSettle）内保持上一次落定的状态，于是一次变形是一次变化而不是两次。同一帧里同时换形状和表情的身体，读起来不是同一个角色换了轮廓，而是另一个角色出现了。

      无障碍

      头像是 aria-hidden 的，除非它有带名字的照片。当头像单独站着、旁边没有文字时，请自己给它一个名字——见无障碍。

      API

      属性类型默认值说明
      agent*AgentLike——
      classNamestring——
      emotionIdstring—Protocol id, for hosts that speak the wire format. Ignored when `state` is given.
      face"cute" | "eyes" | "line"—Face style, overriding whatever the agent identity resolves to.
      fillPxnumber—Size of the character inside the circle. Smaller than the circle leaves a margin; larger crops it. Defaults to filling the circle exactly.
      halobooleanfalseSoft colour wash behind the character.
      isMorphingShapebooleanfalseThe shape is being changed under the character right now. Holds the last settled state for the settle window, so a morph is one change rather than two. A body that changes shape and expression in the same frame does not read as the same character having a new outline; it reads as a different character appearing.
      lineWeightnumber—Stroke width multiplier. Not part of an identity, so always explicit.
      nose"slant" | "angular" | "hook" | "long" | "curve" | "bow" | null—Nose, overriding the identity. `null` draws no nose.
      size"xs" | "sm" | "md" | "lg" | "xl"'md'—
      sizePxnumber—Exact pixel size, overriding `size`.
      state"idle" | "sleeping" | "drowsy" | "bored" | "waking" | "powering-down" | "listening" | "thinking" | "searching" | "reading" | "writing" | "working" | "loading" | "progress" | "radar" | "orbit" | "dictating" | "uploading" | "sending" | "receiving" | "messaging" | "waiting" | "spawning" | "composing" | "dragging" | "happy" | "excited" | "laughing" | "playful" | "proud" | "celebrate" | "bouncing" | "shy" | "sad" | "angry" | "confused" | "suspicious" | "surprised" | "scared" | "curious" | "humming" | "alerting" | "notifying" | "refusing"——
      stillbooleanfalseRender a still image instead of an animation.
      styleCSSProperties——

      接下来