让页面宠物成为 Agent 入口

选择开源基础

我选择 GitHub 上采用 Apache-2.0 许可证的 gibbon/agent-pet。它支持 React、拖拽、动画状态与气泡，并由本站自托管打包。

import { PetSpriteFace } from "agent-pet";
import "agent-pet/css";

<PetSpriteFace
  active={mohenPet}
  size={58}
  rowId={loading ? "review" : open ? "waving" : "idle"}
/>

用聊天状态驱动动画

点击宠物打开对话；拖动改变位置；发送问题后进入思考动画；请求结束后恢复漂浮。

<motion.button
  drag
  dragMomentum={false}
  animate={loading
    ? { rotate: [-4, 4, -4], y: [0, -5, 0] }
    : { y: [0, -7, 0] }}
  onClick={() => setOpen(value => !value)}
>
  <PetSpriteFace active={mohenPet} />
</motion.button>

下一步会将检索、等待、成功和失败事件映射成奔跑、思考、跳跃等动作，让用户从宠物状态感知 Agent 正在做什么。