Message 消息

普通文本、Markdown 与自定义卡片共用的消息外壳。

交互示例

交互示例加载中…

用法

<Message name="智能助手" text="你好，今天想聊些什么？" />
<Message placement="end" text="帮我整理一份提纲。" />
<Message
  format="markdown"
  text="**整理思路**：先确认主题，再补充资料。"
  onLinkPress={(url) => openLink(url)}
/>

行为与接入

正文使用 text 或 children，两种形式互斥。format="markdown" 使用真实 Markdown 渲染器；链接点击由 onLinkPress 交出。自定义卡片可以包含按钮等交互内容。

Markdown 图片使用原始资源地址，位图保持比例，SVG 沿 react-native-marked 的矢量图片能力加载。当前渲染器按完整地址的 .svg 后缀识别 SVG，带查询参数或片段的 SVG 地址尚不自动识别。图片链接也只通过 onLinkPress 交付，未提供回调时保持静态。

默认 placement="start"、surface="bubble"、status="idle"，fullWidth 默认关闭。身份、消息状态和附加区域只展示调用方提供的信息。

actions 表示消息操作。正文中的链接、按钮等交互区域独立交付事件；消息外壳支持 onPress 和 onLongPress。

API

查看完整 TypeScript 类型

以下内容由包根公开类型生成，与当前源码保持一致。

import type { ReactNode } from 'react';

import type { StyleProp, ViewStyle } from 'react-native';

import type { ChatAction } from '@unif/react-native-chat';

export type MessagePlacement = 'start' | 'end';

export type MessageStatus = 'idle' | 'pending' | 'streaming' | 'failed';

export interface MessageBaseProps {
  placement?: MessagePlacement;
  avatar?: ReactNode;
  name?: string;
  surface?: 'bubble' | 'outlined' | 'plain';
  fullWidth?: boolean;
  status?: MessageStatus;
  statusText?: string;
  header?: ReactNode;
  footer?: ReactNode;
  actions?: readonly ChatAction[];
  onPress?(): void;
  onLongPress?(): void;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}

export interface MessagePlainContent {
  text: string;
  format?: 'text';
  numberOfLines?: number;
  children?: never;
  onLinkPress?: never;
}

export interface MessageMarkdownContent {
  text: string;
  format: 'markdown';
  onLinkPress?(url: string): void;
  numberOfLines?: never;
  children?: never;
}

export interface MessageCustomContent {
  children?: ReactNode;
  text?: never;
  format?: never;
  numberOfLines?: never;
  onLinkPress?: never;
}

export type MessageProps = MessageBaseProps &
  (MessagePlainContent | MessageMarkdownContent | MessageCustomContent);