[RFC] New Component: Message

[YumoImer]

Summary

Message 组件是在对话中用于承载用户输出内容的容器

Motivation

无论是传统的 IM 应用或者是当下各类大模型对话应用，消息是最核心的组成部分。通常承载的内容可以分两类：

• 文本类：纯文本、Markdown 格式文本、HTML 格式文本、LaTeX格式文本等
• 媒体类：图片、音频、视频、文件等

无论哪种消息类型，都可以将布局、通用交互进行抽象，以减少用户的开发、使用成本。另外，消息内容可以考虑支持行业内常见的几种类型，如文、图、音、视、文件等。

API

Message 消息组件

export type MesssageSlotType = 'avatar' | 'header' | 'footer' | 'actions';

export interface MessageProps {
  /** 
   * @desc 用于展示消息内容的区域
   * @descEN Area to display the message content
   * @default undefined
   */
  children?: React.ReactNode;

  /**
   * @desc 用于控制消息的内部布局
   * @descEN Controls the internal layout of the message
   * @default 'default'
   */
  layout?: 'default' | 'reverse';

  /** 
   * @desc 用于展示用户头像的区域
   * @descEN Area to display the user avatar
   * @default undefined
   */
  avatar?: React.ReactNode;

  /** 
   * @desc 用于在消息顶部进行扩展的区域
   * @descEN Area to extend at the top of the message
   * @default undefined
   */
  header?: React.ReactNode;

  /** 
   * @desc 用于在消息底部进行扩展的区域
   * @descEN Area to extend at the bottom of the message
   * @default undefined
   */
  footer?: React.ReactNode;

  /** 
   * @desc 用于在消息旁边进行扩展的区域
   * @descEN Area to extend beside the message
   * @default undefined
   */
  actions?: React.ReactNode;

  /** 
   * @desc 语义化结构 style
   * @descEN Semantic structure styles
   * @default undefined
   */
  styles?: Record<MesssageSlotType | 'children', React.CSSProperties>;

  /** 
   * @desc 语义化结构 className
   * @descEN Semantic structure classNames
   * @default undefined
   */
  classNames?: Record<MesssageSlotType | 'children', string>;

  /** 
   * @desc 用于控制是否在加载中状态
   * @descEN Controls whether it is in loading state
   * @default false
   */
  loading?: boolean;
}

Basic Example

基础使用

import { Message } from '@ant-design/x';

() => (
  <Message>Hello World!</Message>
);

展示方向

import { Message } from '@ant-design/x';

() => (
  <>
    <Message
      avatar={<div>avatar</div>}
     actions={<div>actions</div>}
    />
      Hello World!
    </Message>
        
    <Message
      layout="reverse"
      avatar={<div>avatar</div>}
      actions={<div>actions</div>}
    />
      Hello World!
    </Message>
  </>
)

输入中状态

import { Message } from '@ant-design/x';

() => (
  <Message loading />
    Hello World!
  </Message>
)

扩展区域

import { Message } from '@ant-design/x';

() => (
  <Message
  avatar={<div>avatar</div>}
  header={<div>header</div>}
  footer={<div>footer</div>}
  actions={<div>actions</div>}
/>
  Hello World!
</Message>
)

Detailed Design

Design Token 使用

基础文本色：控制内容区域「children」文字颜色
基础背景色：控制内容区域「children」背景颜色
文字尺寸：控制内容区域「children」文字尺寸
圆角：控制内容区域「children」圆角

[afc163]

对比一下 ant-design/ant-design#48384 这一版的 API 设计？看看有没有融合的

[afc163]

actions

[YumoImer]

我们需不需要考虑 actions 的位置，感觉这个应该由设计师的设计规范定义

[afc163]

从语义上出发确实 sider 这个命名会限制位置。

[arvinxx]

我们需不需要考虑 actions 的位置，感觉这个应该由设计师的设计规范定义

组件可以有个默认的位置，按设计规范来就好。至于自定义的部分交由 classNames ，让组件消费者自行改位置。甚至我们可以有一些action 放在其他位置的演示 demo 给到用户。

[YumoImer]

对于前 direction: 'left' | 'right'属性，考虑其语义上代表：消息组件的内部布局而不是消息组件的相对位置。

故修改为layout?: 'default' | 'reverse'：

• 默认值 default:代表「头像 | 消息 | 扩展」布局
• reverse 代表「扩展 | 消息 | 头像」布局

[afc163]

有 loading 么？

[afc163]

done 是啥意思？有图么

[YumoImer]

done 是啥意思？有图么

ollama 的 chat 接口返回结构中使用 done: boolean作为是否完成的标识：https://github.com/ollama/ollama/blob/main/docs/api.md#response-8

ChatGPT 的 接口返回结构使用 status: 'in_progress' | 'finished_successfully'

其他的还有用像 is_finished: boolean 这样的

[arvinxx]

两个状态不一样吧，一个是当前消息是否是 loading 态，另外一个是消息内容是否正在输出中。

前者存在的场景，比如我发起创建请求，但是服务端还没返回成功响应的情况下（乐观更新中非常常见）。

后者才是内容输出是否完成的标记

[YumoImer]

两个状态不一样吧，一个是当前消息是否是 loading 态，另外一个是消息内容是否正在输出中。

前者存在的场景，比如我发起创建请求，但是服务端还没返回成功响应的情况下（乐观更新中非常常见）。

后者才是内容输出是否完成的标记

我的想法是这样的：发起请求后 pending 的过程更多的交互在发送按钮上，消息区域触发渲染的大多数情况是前置请求调用已经成功，然后消息这里只关注是否完成。还有一种情况是请求中途暴毙，这种情况带有点业务属性，感觉我们最好不要考虑进去。所以感觉一个属性 key 做这个事情就好了。

[arvinxx]

也行， Message 作为原子组件的确是可以不用考虑这个问题，单纯有个输出中的就好了。

[afc163]

可以加上 classNames 和 styles，类似 antd 组件现在的最佳实践，方便用户自定义。

[YumoImer]

👌