基于Node.js与Bot Framework的MS Teams聊天机器人实时候选问题展示需求

核心思路 #

这个功能需要在客户端输入层实现实时联想匹配——Bot Framework后端无法直接干预用户输入框的发送前即时交互，因此基于Web Chat（Bot Framework官方前端组件）来定制开发，适配Teams环境和Bot Framework Emulator测试。

步骤1：自定义Web Chat输入组件 #

替换默认输入框，添加输入监听和候选下拉渲染逻辑：

// 在Web Chat集成页面中自定义输入框
import React, { useState } from 'react';
import { createDirectLine, WebChat } from 'botframework-webchat';

const CustomChat = () => {
  const [inputText, setInputText] = useState('');
  const [candidates, setCandidates] = useState([]);
  // 可替换为后端动态获取的候选问题列表
  const allQuestions = [
    '如何重置密码？',
    '查询我的订单状态',
    '联系客服支持',
    '修改个人信息',
    '常见问题汇总'
  ];

  // 实时模糊匹配候选问题
  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputText(value);
    if (value.trim()) {
      const matched = allQuestions.filter(q => 
        q.toLowerCase().includes(value.toLowerCase())
      );
      setCandidates(matched);
    } else {
      setCandidates([]);
    }
  };

  // 选择候选并填充输入框
  const selectCandidate = (candidate) => {
    setInputText(candidate);
    setCandidates([]);
  };

  // 发送消息到Bot
  const sendMessage = () => {
    if (inputText.trim()) {
      directLine.postActivity({
        type: 'message',
        text: inputText,
        from: { id: 'user' }
      });
      setInputText('');
    }
  };

  // 替换为Bot的Direct Line令牌
  const directLine = createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });

  return (
    <div className="chat-container">
      {/* Web Chat消息展示区域 */}
      <WebChat directLine={directLine} />
      {/* 自定义输入区域 */}
      <div className="input-area">
        {/* 候选下拉菜单 */}
        {candidates.length > 0 && (
          <div className="candidates-dropdown">
            {candidates.map((q, idx) => (
              <div 
                key={idx} 
                className="candidate-item"
                onClick={() => selectCandidate(q)}
              >
                {q}
              </div>
            ))}
          </div>
        )}
        <input
          type="text"
          value={inputText}
          onChange={handleInputChange}
          placeholder="输入消息..."
        />
        <button onClick={sendMessage}>发送</button>
      </div>
    </div>
  );
};

export default CustomChat;

步骤2：适配Teams环境 #

如果是Teams Tab集成场景，需补充以下操作：

• 用Teams JS SDK初始化页面，确保获取正确的Bot通信上下文
• 调整下拉菜单样式，匹配Teams默认主题，避免样式冲突
• 发送消息时通过Teams内置的Bot通信通道传递，而非直接使用Direct Line（内嵌Tab场景）

步骤3：Emulator测试配置 #

Emulator默认输入框无法自定义，需通过自定义Web Chat页面连接测试：

1. 在Emulator中启动Bot，复制临时生成的Direct Line令牌
2. 将令牌填入代码中的YOUR_DIRECT_LINE_TOKEN位置
3. 运行自定义Web Chat页面，即可在输入时触发候选下拉效果

优化建议 #

• 候选列表可改为后端动态获取：输入变化时调用Bot后端的匹配接口，替换示例中的静态allQuestions
• 添加输入防抖，避免频繁触发匹配逻辑：

  const debounce = (func, delay) => {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func.apply(this, args), delay);
    };
  };
  const debouncedHandleChange = debounce(handleInputChange, 300);
  

• 自行调整CSS样式，确保下拉菜单在输入框上下合理展示，不遮挡核心内容

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