自定义UI webchat.js对接Copilot Studio：重置后UI消息未清除求助

核心排查方向与解决方案 #

1. 确认Store实例正确性 #

自定义UI场景下，必须确保调用dispatch的是Web Chat官方创建的store实例，而非自定义的其他Redux Store。如果自行创建了store，需保证是基于Web Chat的createStore方法生成：

import { createStore } from 'botframework-webchat';

// 正确创建Web Chat专属Store
const webChatStore = createStore({}, ({ dispatch }) => next => action => {
  // 自定义中间逻辑（如果有）
  return next(action);
});

// 重置操作时使用该Store
const resetChat = async () => {
  // 先结束当前Direct Line会话（与后端重置同步）
  await directLine.endConversation();
  // 触发清除消息的Action
  webChatStore.dispatch({ type: 'WEB_CHAT/CLEAR_MESSAGES' });
  // 同步清除输入框内容
  webChatStore.dispatch({ type: 'WEB_CHAT/CLEAR_INPUT' });
};

2. 同步重置Direct Line会话状态 #

仅清除消息不足以完全重置UI状态，需与后端会话重置联动，结束当前Direct Line会话并重新初始化：

• 调用directLine.endConversation()终止当前会话
• 重新获取新的Direct Line Token（如果后端重置了会话关联的token）
• 更新Direct Line实例的token，确保后续消息走新会话

3. 检查自定义UI的消息渲染逻辑 #

如果自定义UI是自行渲染消息列表，需确保消息数据源直接绑定Web Chat Store的messages状态，而非本地缓存的state：

// React示例：通过useSelector获取Store中的消息
import { useSelector } from 'react-redux';

const CustomMessageList = () => {
  // 直接从Web Chat Store取消息，确保Store变化时UI自动更新
  const messages = useSelector(state => state.messages);

  return (
    <div className="chat-messages">
      {messages.map(msg => (
        <div key={msg.id} className="message-item">
          {/* 渲染消息内容 */}
        </div>
      ))}
    </div>
  );
};

如果之前是用本地state存储消息，需改为从Store订阅，避免Store更新后UI未同步。

4. 验证Action类型与Web Chat版本匹配 #

不同版本的Web Chat可能使用不同的Action类型：

• 新版本：'WEB_CHAT/CLEAR_MESSAGES'
• 旧版本：可能直接是'CLEAR_MESSAGES'
  可通过查看Web Chat源码或官方文档确认当前版本的Action常量。

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