[RFC] Message 消息

[hy993658052]

Summary

增加各种消息类型，扩展对话气泡展示形式，满足更丰富的应用场景。

Motivation

当前Bubble仅支持字符串类型，其他场景都需要通过messageRender自定义，导致一些高频场景没有覆盖到，接入成本较高。
增加Message消息组件，结合Bubble，可以提供更丰富的场景，支持的消息类型有：

• Markdown
• 角标
• 代码渲染
• 思考过程
• 文件
• 图片
• 音频、视频
• 来源引用
• 系统消息

Detailed Design

API 设计

interface MessageProps {
  prefixCls?: string;
  style?: React.CSSProperties;
  className?: string;
  type?: string; // 类型 保留
  xxxx: xxxx,
  content?: React.ReactNode | AnyObject | string | number; // 内容
  typing?: boolean | { step?: number, interval?: number }; // 打字动画
}

Skeleton.Button

Example Usage

基础使用

import React from 'react';
import { Bubble, Message } from '@ant-design/x';

const App = () => {
  return (
    <>
      <Bubble content={<Message content="hello world !" />} />

      <Bubble content={<Message.Markdown>"hello world !"</Message.Markdown>} />
    </>
  );
};

export default App;

markdown类型

import React from 'react';
import { Bubble, Message } from '@ant-design/x';

const text = `
> Render as markdown content to show rich text!

Link: [Ant Design X](https://x.ant.design)
`;

const App = () => {
  const message = (
    <Message
      type="markdown"
      content={text}
    />
  );

  return (
    <>
      <Bubble content={message} />
    </>
  );
};

export default App;

图片、文件类型

import React from 'react';
import { Bubble, Message } from '@ant-design/x';

const App = () => {
  const imageMessage = (
    <Message
      type="image"
      content={{
        url: 'https://mdn.alipayobjects.com/huamei_je4oko/afts/img/A*yB72RaoDGqEAAAAAAAAAAAAADsZ-AQ/fmt.webp',
      }}
    />
  );

  const fileMessage = (
    <Message
      type="file"
      content={{
        name: 'zip-file.zip',
        url: 'https://mdn.alipayobjects.com/huamei_je4oko/afts/img/A*yB72RaoDGqEAAAAAAAAAAAAADsZ-AQ/fmt.webp',
        size: 1024 * Math.random() * 10 ** 5,
      }}
    />
  );

  return (
    <>
      <Bubble content={imageMessage} />
      <Bubble content={fileMessage} />
    </>
  );
};

export default App;

[onefeng123]

有时候消息不是单一类型，比如允许用户上传文档的场景下 既有文字又有文件

[kimteayon]

大部分都可以接收数组

[kimteayon]

renderProps 的类型还要详细列下

[kimteayon]

代码文件需要支持下