reactjs - 如何使用 React js 将单词建议附加到机器人的聊天输入区域？

Question

我正在使用 botframework 构建聊天机器人应用程序。我使用 React js 作为前端，使用 .net core 作为后端来生成 token 。由于聊天输入区域内置于网络聊天中，我无法获取网络聊天输入区域的 ID 或类。每当在聊天输入区域完成按键时，我想向机器人添加自动建议。如何解决？

Answer 1

你说:

As the chat input area is builtin on the webchat, i'm unable to take the id or class of webchat's input area.

这表明您的问题是关于如何从网络聊天的输入区域读取用户输入和/或如何以编程方式将文本写入网络聊天的输入区域。我在对您的 other question 的回答中解释了如何做这两件事:

Web Chat uses Redux which has a Redux store that can use Redux middleware. Web chat has an action called WEB_CHAT/SET_SEND_BOX that can be used to respond to what the user types in the text input box like this:

const store = window.WebChat.createStore(
    {},
    store => next => action => {
        if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
            const user_entered_text = action.payload.text;

            // Use the text to query the Azure database and display suggestions
        }
        return next(action);
    }
);

When the user clicks on a suggestion or presses the right key, you can use that same action to change what's in the text input box like this:

store.dispatch({
    type: 'WEB_CHAT/SET_SEND_BOX',
    payload: {
        text: user_selected_suggestion,
    }
});

There are samples in the Web Chat repo that may help with using Redux actions in Web Chat

编辑:从那以后我意识到您可能需要一种方法来访问发送框元素以定位新的弹出元素。您已经提到想要 jQuery 的替代品，我认为如果您正常使用文档对象模型，则不需要 jQuery。这篇 Stack Overflow 帖子可能会对您有所帮助:Get element inside element by class and ID - JavaScript

如 this thread that I linked previously 所示, 自动建议不是 Web Chat 的功能，求助于 Stack Overflow 请求人们免费为您构建新功能是不合适的。如果您想自己构建此功能，那么我建议您继续了解有关 UI elements 的更多信息, Web Chat , HTML , JavaScript , 和 React .当您尝试完成您的项目时，如果您需要帮助解决您所面临的一个特定问题，那么您应该在 Stack Overflow 上发布问题。为了得到一个好的答案，您需要 be a good asker通过解释你所做的工作和你已经尝试过的事情，并提供你所引用的文档的链接等。关于如何构建这个全新的网络聊天功能的问题对于 Stack Overflow 来说太宽泛了，所以在这里以下是一些您在付出合理努力自行找出答案后可能最终提出的好问题的示例:

• 如何找到我要修改的网页上预先存在的元素的 ID？
• 哪种 UI 元素适合网络浏览器中的自动完成建议？
• 如何查询 Azure 数据库以查找基于用户输入文本的自动完成建议？

请注意，这些示例是关于如何实现单词建议项目的具体部分。像这样具体说明您的需求将帮助您找到合适的专家来帮助您解决问题。虽然我可以回答您与网络聊天相关的问题，但当您将问题范围扩大到包括与网络聊天无关的内容时，您就很难找到可以为您提供答案的人，因为他们“d 需要成为许多不同事物的专家。