如何在 Microsoft 网络聊天智能显示示例中添加文本框？

【问题标题】：How to add text box in Microsoft webchat smart display sample?如何在 Microsoft 网络聊天智能显示示例中添加文本框？
【发布时间】：2021-05-09 14:15:40
【问题描述】：

对于我正在使用 Microsoft 网络聊天智能显示示例的项目。 Smart Display github link 现在我想在屏幕上添加一个文本框，以便用户可以使用语音和文本作为输入。由于代码使用的是 directlinespeech 适配器，我如何在此代码中添加文本框。

【问题讨论】：

你能解决这个问题还是需要帮助？
@StevenKanberg 我需要帮助
接受/投票支持更大的 Stack Overflow 社区和任何有类似问题的人。如果您觉得我的回答足够，请“接受”并点赞。如果没有，请告诉我我还能提供哪些帮助！

标签： reactjs web-chat

【解决方案1】：

您只需将SendTextBox 组件包含在Composer API 容器中即可实现此目的。以下代码的渲染方式没有什么漂亮的，因为它缺少任何样式。您将需要使用 CSS 来让它看起来像您希望的那样。正如您在包含的图像中看到的那样，发送框呈现在页面顶部。我确实更改了背景颜色以使其在图像中更加明显。

import { Components } from 'botframework-webchat';
const { SendTextBox, Composer } = Components;

[...]

return (
  !!directLineSpeechAdapters && (
    <Composer {...directLineSpeechAdapters}>
      <SmartDisplay />
      <SendTextBox />
    </Composer>
  )
);

希望有帮助！

【讨论】：