[RFC] Bubble.List component

[zombieJ]

📋 RFC

Summary

follow up #16

Bubble component add Bubble.List to support batch of Bubble display.

Basic example

<Bubble.List
  data={[
    { avatar: {}, content: 'hello world' },
    { avatar: {}, content: 'hello world', placement: 'end' },
  ]}
/>

Motivation

Bubble.List will auto provide pipe-able content render and support layout and scroll ability.

Detailed

• Auto scrollable when list exceed the List height.
• Provider layout vertical gap.

API

Prop	Desc	Type	Default Value
data	batch content list of bubble	(BubbleProps & { key?: React.Key, role: string })[]	-
autoScroll	auto scroll when data increased or update	boolean	true
onChange (Not release at now)	Trigger if any of Bubble edited by user	(nextData: BubbleProps[]) => void	-
roles	Config each default role behavior	RoleConfig	-

roles usage

type RoleConfig =
  | Record<string, BubbleProps>
  | ((bubbleData) => BubbleProps)

Static Roles

const roles = {
  ai: { typing: true, avatarStyle: { background: 'green' } },
  user: { avatarStyle: { background: 'white' } },
};

const data = [
  { role: 'ai', content: 'welcome!' },
  { role: 'user', content: 'hello AI!' },
  { role: 'ai', content: 'hi!' },
];

<Bubble.List
  roles={roles}
  data={data}
/>

Dynamic to make last user input editable

const rolesFn = (bubbleData) => ({
  if (bubbleData.role === 'user' && data.indexOf(bubbleData) === data.length - 2) {
    console.log('is latest!!!');
  }

  return ...
})

Refs

Prop	Desc	Type
scrollTo	Scroll to index bubble	(index: number) => void

Drawbacks

N/A

Adoption strategy

Apply new component as Bubble sub component.

[YumoImer]

autoScroll 会有个场景需要考虑下 API 的设计：
当用户正在浏览历史消息，且恰好配置了 autoScroll: true ,按 RFC 描述应该是会自动滚到底部，但实际上此时用户不希望滚动

钉钉的做法是：当前滚轮滑动量超过一条消息的高度时：消息列表更新不会触发自动滚动，且会有按钮可点击至底部。反之会自动滚动。

[zombieJ]

是的，autoScroll 应该只考虑贴低滚动的情况。如果用户自己滚动过的，应该不滚动。

[ONLY-yours]

autoScroll 应该是一个 object 配置，顺便配置了距离底部多少时候进行滚动

{
    scrollHeight: number;
} || false

[YumoImer]

后续可以考虑集成上拉、下拉加载～

[YumoImer]

后续可以考虑集成选择「多选」消息，分享场景会使用到～

[zombieJ]

有 roles 后可以让它按照用户角色选择，比如不允许删除某个 role 的内容等等

[YumoImer]

个人建议不用区分角色。每个 dataItem 自己控制就好，一些原因：

• 右侧的消息也有流式输出的场景：部分软件有「实时语音转文字功能」
• 如果这样配置 roles: { ai: { typing: true } } ，那是不所有的 AI 消息都会开启输入中效果

另外，这个字段的目的感觉是帮用户减少配置负担，感觉来个数据前置过滤也可以做到～

[ONLY-yours]

有几个需求不清楚要不要加入进来：

1. 提供虚拟滚动（大量数据的时候很需要）
2. List 的 Memo 能力，不然每次 data 对象变化，全刷新了，应该检查 id 和 content 如果没变，就不要渲染（感觉应该在 Item 里面做）