[RFC] Add index to roles function - for BubbleList

[chenluda]

Summary

为 BubbleList 的 roles 属性扩展 index，通过 index 可以个性化渲染列表中任意 Bubble。

link to:
1: 为 Bubble 和 BubbleList 组件的 footer 属性增加可控的 hover 样式 #489
2: Bubble messageRender 能否添加 index 参数 #475

API

Bubble.List

属性	说明	类型	默认值
roles	设置气泡默认属性，items 中的 role 会进行自动对应	Record<string, BubbleProps> | (bubble, index) => BubbleProps	-

usage

1: 为最新的 bot bubble 添加个性化渲染

const roles = (bubble, index) => {
  const isLatest = index == (messages.length - 1).toString();
  switch (bubble.role) {
    case "bot":
      return {
        placement: "start",
        avatar: { icon: <UserOutlined />, style: fooAvatar },
        typing: { step: 2, interval: 50 },
        header: isLatest ? LastestBHeaderContent : bHeaderContent,
        footer: isLatest ? LastestBFooterContent : bFooterContent,
      };
    case "user":
      return {
        placement: "end",
        avatar: { icon: <UserOutlined />, style: barAvatar },
        header:  uHeaderContent,
        footer: uFooterContent,
      };
  }
};

<Bubble.List
  ref={listRef}
  className="bubble-list"
  roles={roles}
  items={messages.map((msg, index) => ({
    key: index,
    role: msg.role,
    content: msg.text,
    time: msg.time,
  }))}
/>

[YumoImer]

没问题， PR 之吧！🚀

@ant-design/ant-design-x 辛苦大家有空看一下，有问题的话评论～