如何在C#开发的Azure机器人中实现自定义输入指示器

核心逻辑说明 #

Bot Framework 原生的TypingActivity仅会向客户端发送「当前机器人处于输入状态」的事件，具体的展示样式完全由前端Webchat渲染层控制，后端代码无法直接修改默认的三点加载动画样式。要实现自定义提示文本、自动移除的效果，需要结合后端事件触发、前端自定义渲染两部分实现，不需要额外开发复杂的消息删除逻辑。

后端代码适配 #

原有触发输入提示的逻辑不需要做大幅修改，仅需要去掉不必要的硬延迟逻辑即可：

public async override Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default)
{
    // 触发输入状态事件，通知前端展示自定义输入指示器
    var typingActivity = Activity.CreateTypingActivity(); 
    await turnContext.SendActivityAsync((Activity)typingActivity); 

    // 此处替换为实际的业务处理逻辑，不要写固定5秒的硬延迟
    // await ProcessUserRequest(turnContext, cancellationToken);

    // 发送正式回复时，前端会自动清除输入指示器，无需手动处理移除
    await turnContext.SendActivityAsync(MessageFactory.Text("这里是机器人的正式回复内容"));
    await base.OnTurnAsync(turnContext, cancellationToken);
}

注意：不要尝试给TypingActivity的Text字段赋值自定义提示文本，原生输入指示器组件不会渲染该字段内容，赋值无实际效果。

前端Webchat自定义配置（核心实现） #

通过替换Webchat内置的输入指示器组件，实现自定义文本展示，利用框架内置的生命周期实现自动移除：

1. 编写自定义输入指示器组件

   const CustomTypingIndicator = () => (
     <div className="custom-typing-tip">
       机器人正在输入中
     </div>
   );
   

2. 给Webchat Composer传入自定义组件配置

   <Composer
     directLine={webchat.createDirectLine({ secret: '你的Webchat接入密钥' })}
     typingIndicator={CustomTypingIndicator}
   >
     <BasicWebChat />
   </Composer>
   

3. 补充自定义样式

   .custom-typing-tip {
     padding: 8px 12px;
     color: #666;
     font-size: 14px;
     background: #f5f5f5;
     border-radius: 8px;
     margin: 8px 0;
     /* 可自行扩展动画效果，比如逐字闪烁、淡入淡出等 */
   }
   

自动移除效果说明 #

框架内置的TypingActivity具备完整的生命周期：当机器人发送任意正式回复Activity时，Webchat会自动清空当前所有处于输入状态的指示器组件，不需要手动编写消息删除逻辑，完全不会出现自定义提示残留的问题。

避坑提示 #

• 不要采用「发送普通文本消息当输入提示+调用删除接口移除消息」的实现方案：该方案不仅需要额外编写后端消息删除接口、前端删除渲染逻辑，还容易出现网络延迟导致提示消息无法及时清除的问题，体验远低于原生事件驱动的方案。
• 不要在后端写固定时长的Task.Delay等待逻辑：根据实际业务处理进度触发正式回复，才能让输入指示器的展示时长符合真实处理状态，避免无意义的用户等待。

内容的提问来源于stack exchange，提问作者Haris N I