ReactWebChat与Composer组件能否同时使用？报错咨询

Composer 和 ReactWebChat 可以结合使用，但不能直接将默认的 ReactWebChat 组件嵌套在自定义的 Composer 内部——因为默认 ReactWebChat 本身已经封装了一层 ActivityKeyerComposer，嵌套会触发上下文冲突，导致你遇到的报错。

下面提供两种可行的实现方案：

方案一：在 ReactWebChat 自定义 UI 组件中使用 useSendMessage #

如果你的自定义消息发送逻辑是 Web Chat 界面的一部分（比如自定义发送按钮、侧边栏控件），可以通过 ReactWebChat 的 render 类 props 注入自定义组件，这些组件会自动处于 ReactWebChat 内置的 Composer 上下文范围内，无需额外嵌套。

示例代码：

import React from 'react';
import ReactWebChat, { useSendMessage } from 'botframework-webchat';

// 自定义发送按钮，使用useSendMessage钩子
const CustomSendButton = ({ sendBoxValue, defaultSendMessage }) => {
  const sendProgrammaticMessage = useSendMessage();

  const handleSend = () => {
    // 发送一条编程触发的消息
    sendProgrammaticMessage('这是一条通过代码发送的消息');
    // 同时发送输入框内的内容（可选）
    defaultSendMessage(sendBoxValue);
  };

  return (
    <button onClick={handleSend} style={{ padding: '8px 16px' }}>
      发送自定义消息
    </button>
  );
};

// 主组件
const WebChatApp = ({ directLine }) => {
  return (
    <ReactWebChat
      directLine={directLine}
      // 自定义发送框区域，注入我们的按钮
      renderSendBox={({ sendBoxValue, sendMessage }) => (
        <div style={{ display: 'flex', gap: '8px', padding: '8px' }}>
          <input
            type="text"
            value={sendBoxValue}
            onChange={(e) => {/* 处理输入变化 */}}
            style={{ flex: 1, padding: '8px' }}
          />
          <CustomSendButton sendBoxValue={sendBoxValue} defaultSendMessage={sendMessage} />
        </div>
      )}
    />
  );
};

export default WebChatApp;

方案二：手动用 Composer 构建 Web Chat UI #

如果需要在 Web Chat 界面外部（比如页面顶部的全局按钮）使用 useSendMessage，可以放弃默认的 ReactWebChat 组件，手动用 Composer 包裹 Web Chat 的核心 UI 组件（如 MessageList、SendBox），这样整个上下文由你控制，不会出现嵌套冲突。

示例代码：

import React from 'react';
import { Composer, MessageList, SendBox, useSendMessage } from 'botframework-webchat';

// 全局发送按钮，处于Composer上下文内
const GlobalMessageSender = () => {
  const sendMessage = useSendMessage();

  const handleSend = () => {
    sendMessage('来自页面全局按钮的编程消息');
  };

  return (
    <button onClick={handleSend} style={{ margin: '16px', padding: '8px 16px' }}>
      全局发送消息
    </button>
  );
};

// 手动构建完整的Web Chat界面
const CustomWebChat = ({ directLine }) => {
  return (
    <Composer directLine={directLine}>
      {/* 全局按钮，可直接使用useSendMessage */}
      <GlobalMessageSender />
      {/* Web Chat核心聊天区域 */}
      <div style={{ height: '400px', width: '450px', border: '1px solid #eee', borderRadius: '8px' }}>
        <MessageList style={{ height: 'calc(100% - 60px)', overflowY: 'auto', padding: '8px' }} />
        <SendBox style={{ borderTop: '1px solid #eee', padding: '8px' }} />
      </div>
    </Composer>
  );
};

export default CustomWebChat;

核心注意事项 #

• 禁止同时使用默认 ReactWebChat 组件和外层自定义 Composer，避免 ActivityKeyerComposer 嵌套冲突。
• 所有需要使用 Web Chat 钩子（如 useSendMessage、useLocalizer）的组件，必须作为 Composer 的直接或间接子组件。

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