botframework Webchat React中的建议列表问题 [英] Issues with suggestion list in botframework Webchat React

问题描述

我刚刚使用react.js在我的机器人框架网络聊天（v-4）中添加了自动提示/自动完成功能。但是有些问题我需要解决；

I just added autosuggestion/autocomplete function in my bot-framework web chat(v-4) using react.js. But there are some issues i need to fix;

1。）。在获得建议的同时，我想输入要输入的单词网络聊天在建议列表中以粗体显示。我做到了，但是我现在面临的问题是，即使我的内心深处，它也只能将第一个字母设为粗体（如您在图片中所见）。

1.) While getting the suggestions i want to make the words which i type into the webchat to be Bold in the resulting suggestion list. I did that but the problem i'm facing now is that its only making the first letter as bold(as you can see in the image) i want to make it bold even if its inside a sentance.

2。）。当我从建议列表中选择一个选项时，必须将其关闭。它会关闭其他选项，但不会关闭其他选项。（如图所示）。我也想结束。

2.) When i select an option from the suggestion list it has to be closed. It closes the other options but the selected option is not.(as shown in the image). I want to close that too.

3。）。我想使用向上/向下箭头从建议列表中选择选项。

3.) I want to make my up/down arrow for selecting options from the suggestion list.

请在以下链接中找到图像，

Please find the images in below links,

推荐答案

<对于第一个问题，可能有两种方法可以做到这一点。为此，您可以使用 indexOf 在建议中查找用户文本的索引，然后将文本拆分为多个React元素，其中一个以粗体显示。如果要像现在一样使用 replace ，那么这可能是使用 dangerouslySetInnerHTML 的好机会：

For your first question, there may be two ways to do this. To do it the React way, you could use indexOf to find the index of the user text in the suggestion and then split the text into multiple React elements with one of them being bolded. If you want to use replace like you're currently doing then this may be a good opportunity to use dangerouslySetInnerHTML:

<div className="SuggestionParent" id="Suggestion1">
  {this.state.suggestions.map(suggestion => (
    <div className="Suggestion" onClick={this.handleSuggestionClick} >
      <div dangerouslySetInnerHTML={this.getSuggestionHtml(suggestion)} />
    </div>
  ))}
</div>

危险警告是因为您需要确保您不允许用户提供内部HTML中可能包含的任何潜在值，否则它们可能会注入脚本标签。只要您的建议是从固定的数据库中提取的，并且数据是安全的，那么您就可以了。否则，您将不得不清理HTML，在这种情况下，根本不使用 dangerouslySetInnerHTML 可能会更容易。如果我们确实设置了内部HTML，则可以使用 replace 直接将HTML标签直接应用于字符串：

The "dangerous" warning is because you need to make sure you don't allow the user to provide any of the potential values that can go in the inner HTML or else they could inject script tags. As long as your suggestions are being drawn from a fixed database and the data is secure then you might be okay. Otherwise you would have to sanitize the HTML and in that case it would probably be easier to just not use dangerouslySetInnerHTML at all. If we do set the inner HTML, then we can use replace to just directly apply HTML tags to the string:

getSuggestionHtml(suggestion) {
  const lowerCaseSuggestion = suggestion.toLowerCase();
  return {
    __html: lowerCaseSuggestion.includes(this.state.suggestionTypedText) ? lowerCaseSuggestion
      .replace(this.state.suggestionTypedText, `<b>${this.state.suggestionTypedText}</b>`) : lowerCaseSuggestion
  };
}

对于第二个问题，您说您已经解决了。我可以看到您正在使用布尔开关暂时关闭对WEB_CHAT / SET_SEND_BOX动作的响应方式。

For your second question, you said you've already solved it. I can see that you're using a Boolean switch to temporarily turn off the way you respond to the WEB_CHAT/SET_SEND_BOX action.

第三个问题有很多弄清楚UI的工作原理时必须问自己的一些设计注意事项，例如如果用户在使用箭头键时将鼠标悬停在建议上，会发生什么？和是否应在用户按下Enter之前在发送框中预览突出显示的建议？我希望找到一个可以使用而不是构建自己的React自动完成组件，因为这已经可以解决所有这些潜在的陷阱。不幸的是，两个著名的React自动完成程序包（此处和这里）都有两个相同的问题：

For your third question, there are a lot of design considerations that you have to ask yourself about when figuring out how your UI is going to work, like "What happens if the user mouses over the suggestions while they're using the arrow keys?" and "Should the highlighted suggestion be previewed in the send box before the user presses enter?" I was hoping to find a preexisting React autocomplete component that you could use instead of building your own because that would already address all these potential pitfalls. Unfortunately, the two prominent React autocomplete packages (here and here) both have the same two problems:

1. 当前未对其进行维护


2. 目标输入包含在组件中，因此您无法将组件连接到预先存在的输入。

但是，它们都是开源的，因此我们可以在它们之后建模自己的自动完成功能。我将指导您完成基本功能，然后您可以根据需要进行扩展。

However, they are both open source so we can model our own autocomplete functionality after them. I'll guide you through the basic functionality and you can expand on that as you please.

键盘事件通常在React中使用 onKeyDown处理属性。我已将其放置在同时包含Web聊天和您的建议父项的元素上：

Keyboard events are generally handled in React using the onKeyDown property. I've placed it on an element that contains both Web Chat and your suggestions parent:

<div className={ROOT_CSS} onKeyDown={this.handleKeyDown.bind(this)}>
  <div className={WEB_CHAT_CSS + ''}>
    <ReactWebChat

这将处理所有按键操作，因此您需要一种方法路由到正确按键的功能。您可以使用 switch 语句，但是反应自动完成使用查找对象，我认为这很聪明。

That will handle all key presses, so you'll need a way to route to the function for the correct key. You could use a switch statement but the source code for react-autocomplete uses a lookup object and I think that's smart.

keyDownHandlers = {
  ArrowDown(event) {
    this.moveHighlight(event, 1);
  },
  ArrowUp(event) {
    this.moveHighlight(event, -1);
  },
  Enter(event) {
    const {suggestions} = this.state;
    if (!suggestions.length) {
      // menu is closed so there is no selection to accept -> do nothing
      return
    }
    event.preventDefault()
    this.applySuggestion(suggestions[this.state.highlightedIndex]);
  },
}

handleKeyDown(event) {
  if (this.keyDownHandlers[event.key])
  this.keyDownHandlers[event.key].call(this, event)
}

我已经集中了向上和向下箭头转换为一个功能： moveHighlight 。您需要在状态中定义一个新属性，以跟踪键盘已选择了哪些建议。我保留了来自react-autocomplete的名称 highlightedIndex 。

I've centralized the functionality for the up and down arrows into one function: moveHighlight. You will need to define a new property in your state to keep track of which suggestion has been selected by the keyboard. I'm keeping the name highlightedIndex from react-autocomplete.

moveHighlight(event, direction) {
  event.preventDefault();
  const { highlightedIndex, suggestions } = this.state;
  if (!suggestions.length) return;
  let newIndex = (highlightedIndex + direction + suggestions.length) % suggestions.length;
  if (newIndex !== highlightedIndex) {
    this.setState({
      highlightedIndex: newIndex,
    });
  }
}

要使用Enter键应用建议，您

For the enter key to apply a suggestion, you'll want to centralize your functionality so that it works the same way as a mouse click.

async handleSuggestionClick(event) {
  await this.applySuggestion(event.currentTarget.textContent);
}

async applySuggestion(newValue) {
  await this.setState({ typingChecking: "false", suggestions: [], highlightedIndex: 0 });
  this.state.suggestionCallback.dispatch({
    type: 'WEB_CHAT/SET_SEND_BOX',
    payload: {
      text: newValue,
    }
  });
  await this.setState({ typingChecking: "true" });
}

最后，确保 highlightedIndex 属性用于以不同的方式呈现突出显示的索引。

Finally, make sure the highlightedIndex property is used to render the highlighted index differently.

getSuggestionCss(index) {
  return index === this.state.highlightedIndex ? HIGHLIGHTED_CSS : SUGGESTION_CSS;
}

. . .

<div className="SuggestionParent" id="Suggestion1">
  {this.state.suggestions.map((suggestion, index) => (
    <div className={this.getSuggestionCss(index)} key={index} onClick={this.handleSuggestionClick} >
      <div dangerouslySetInnerHTML={this.getSuggestionHtml(suggestion)} />
    </div>
  ))}
</div>

这篇关于botframework Webchat React中的建议列表问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！