如何从MessageListItem/Message气泡获取Twillo Agents聊天消息？

核心问题说明 #

你直接调用flex.MessageListItem.Bubble.Content.message是错误用法——这是组件的类引用，并非当前消息的实际内容对象。要访问聊天消息内容，得通过Flex的上下文或组件props来获取。

实现步骤与代码示例 #

1. 正确获取消息内容 #

在自定义组件里，用useMessageContext钩子抓取当前消息的完整数据：

import { useMessageContext } from '@twilio/flex-ui';

const CustomMessageContent = () => {
  const { message } = useMessageContext();
  const messageBody = message.body; // 这才是消息的实际文本内容
  // 后续处理链接检测
};

2. 检测消息中的链接 #

用正则表达式匹配文本里的URL：

const detectLinks = (text) => {
  const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
  return text.match(urlRegex) || [];
};

// 在组件内调用
const links = detectLinks(messageBody);

3. 重写消息气泡内容组件 #

通过Flex的replace方法替换默认的MessageListItem.Bubble.Content，实现自定义渲染逻辑：

import { Flex } from '@twilio/flex-ui';

Flex.MessageListItem.Bubble.Content.replace((props) => {
  const { message } = props;
  const messageBody = message.body;
  const links = detectLinks(messageBody);

  if (links.length > 0) {
    // 检测到链接时，渲染你的自定义组件（示例为带样式的可点击链接）
    return (
      <div className="custom-message-bubble">
        {links.map((link, index) => (
          <a 
            key={index} 
            href={link} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="message-link"
          >
            {link}
          </a>
        ))}
      </div>
    );
  }

  // 无链接时，保留默认消息气泡渲染
  return <Flex.MessageListItem.Bubble.Content {...props} />;
});

4. 优化：拆分文本与链接（可选） #

如果需要保留消息中的普通文本，仅替换链接为组件，可以拆分文本节点：

const splitTextAndLinks = (text) => {
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.split(urlRegex).map((part, index) => {
    if (urlRegex.test(part)) {
      return (
        <a 
          key={index} 
          href={part} 
          target="_blank" 
          rel="noopener noreferrer"
          className="inline-message-link"
        >
          {part}
        </a>
      );
    }
    return part;
  });
};

// 组件内调用示例
return (
  <div className="custom-message-bubble">
    {splitTextAndLinks(messageBody)}
  </div>
);

注意事项 #

• 组件替换逻辑要放在Flex插件的初始化阶段（比如init函数内）执行。
• 自定义组件要遵循Flex的样式规范，避免破坏原有界面布局。
• 确认插件拥有修改Agent侧聊天界面组件的权限。

内容的提问来源于stack exchange，提问作者Aaeron