[RFC] New Component: ChatBox

[MadCcc]

Motivation

ChatBox is generally used in AI Chat scenarios, providing ability to show formatted message with streaming motion.

API

Props	Descriptions	Type	Default
avatar	Avatar component	ReactNode	-
placement	Direction of Message	'start' | 'end'	-
loading	Loading state	boolean
contentRender	Display cuztomized content	(content: string) => ReactNode	-
typing	Show message with stepping motion	boolean | { step: number, interval: number }	false
content	Content of ChatBox	string	-

Example

Basic

export default () => {
  return (
    <ChatBox content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. ..." />
  );
}

Waiting for Response

export default () => {
  return (
    <ChatBox loading="生成中，请稍候..." />
  );
}

• Loading bar should refer nprogress - it will never reach the end, unless loading is set false manually.

Step

export default () => {
  const [value, setValue] = useState('');

  useEffect(() => {
    setInterval(() => {
      setValue(prev => prev + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.');
    }, 1000);
  }, [])

  return (
    <ChatBox 
      content={value} 
      step={{ step: 20, interval: 500 }}
    />
  );
}

• step: 20 means 20 charactes will be append in each stream chunk.
• interval: 500 means new chunk will wait 500ms after previous chunk is rendered.

With Markdown

import markdownit from 'markdown-it'
const md = markdownit();

export default () => {
  return (
    <ChatBox 
      content="# Title  \nLorem ipsum dolor sit amet, consectetur adipiscing elit. ..." 
      contentRender={(content) => <div dangerouslySetInnerHTML={{ __html: md.render(content)}} />}
    />
  );
}

• content of render only contains stream content if stream is enabled.

Detailed Design

[li-jia-nan]

🎉🎉🎉

[crazyair]

要支持 Markdown ？

[MadCcc]

用户自己集成

[kiner-tang]

建议增加一种报错状态，gpt 聊天啥的，尤其是生成图片之类的，经常会有失败的情况，失败后可以加一个重试按钮等

[afc163]

把渲染区域预留出来就好，作为原子组件，先不设计太多交互。

[crazyair]

<ChatBox  
    items={[
       { content: 你好 , placement: start }
       { content: 你是谁 , placement: 'end'}
    ]}
    footer={<Input/>}
/>
``

[MadCcc]

可以顺序堆叠多个 ChatBox 来实现

[afc163]

把内容放 children 里？

[MadCcc]

children 的类型不只是 string，希望是用户提供 raw text

[kiner-tang]

感觉可以增加增加一个消息时间的展示，可以展示在卡片顶部或底部

[MadCcc]

后面考虑开放这些 slot 吧

[afc163]

这个 loading 在没办法拿到具体的进度时就没法用了，需要提供一个普适的版本。

[MadCcc]

这个和我们设计里的 loading 在使用场景上有啥区别？

[afc163]

设计的 loading 不实用，没具体进度数值的场景用不起来的。

[li-jia-nan]

这个怎么说？要改成什么样子？

[afc163]

这个的实现就是用 progress={{ precent: 0.1 }}，loading 另行设计和实现。

[li-jia-nan]

这个等周一上班了再和豆酱闲夕讨论一下

[li-jia-nan]

• feat:🔥New Component: Chatbox #48384

[afc163]

ChatBox => Chat.Bubble

[li-jia-nan]

要拆两个组件吗？

[MadCcc]

这是要把 AI 相关组件都收到 Chat 里？
我现在其实不太推荐用 Chat.Bubble 的形式，会影响 RSC 使用

[afc163]

后面还会不会有别的组件，我也没想清楚，你和豆酱聊聊？

[kiner-tang]

我们这个东西的定位一定是 AI 场景吗？感觉类似 ChatBox 的组件，在 IM 等聊天场景也是可以呀！是不是不要把组件限死了

[afc163]

没有限定吧。