Bot Framework Webchat связывает ссылки в React - PullRequest
Новая
       70

Bot Framework Webchat связывает ссылки в React

0 голосов
/ 18 марта 2020

Из-за других сервисов, которые интегрированы в бот, мы должны использовать HTML якоря вместо уценки.

Когда есть ссылка, мы динамически переключаем ее на следующий код:

var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');

Цель состоит в том, чтобы при нажатии на ссылку я отправлял текстовое содержимое вернуться к боту в ответ. Проблема в том, что я не могу понять, как перехватить событие onclick. Единственное, что он делает, когда щелкает, - это генерирует отдельный индекс. js в источниках страницы.

Основой используемого мной кода является пример веб-чата github: Ссылка

Добавлен код, который важен для примера (в MinimizableWebChat. js) : 

const MinimizableWebChat = (activityID, children) => {
  const store = useMemo(
    () =>
      createStore({}, ({ dispatch }) => next => action => {

        console.log(action.type);

        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
          dispatch({
            type: 'WEB_CHAT/SEND_EVENT',
            payload: {
              name: 'initConversation',
              value: {
                language: window.navigator.language
              }
            }
          });
        } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          if (action.payload.activity.from.role === 'bot') {
            setNewMessage(true);
            // action.payload.activity.text = action.payload.activity.text;        
            // action.payload.activity.text = ();

             action.payload.activity.text = ParseLinks(action.payload.activity.text);

            var atts = action.payload.activity.attachments;
            if (atts){
              atts.forEach(att => {
                att.content.body.forEach(obj => {
                  obj.text = EmphasizeContent(obj.text);
                })
              });
            }
          }        
       }

        return next(action);
      }),
    []
  );

  const items = ["Hello World!", "My name is TJ.", "I am from Denver."];

      var text = "asd";

  // const click = () => {
  //   store.dispatch({
  //     type: 'WEB_CHAT/SET_SEND_BOX',
  //     payload: {
  //       text
  //     }
  //   });
  // }

  const ParseLinks = (text) => {
    if(!text) return text;

    text = String(text);
    var a=[], i=-1;

    // Search for *|, if found, find next * and substirng. Add html to each substring    
    while((i=text.indexOf("*|",i+1)) >= 0) {
      var iA = text.indexOf("*", i+2);
      var sub = text.substring(i,iA+1);
      // var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');
      var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');

      text = text.replace(sub, newStr);
    } 
    return text;
  }

Я пытался поймать его в магазине промежуточного программного обеспечения и непосредственно в боте MinimizableWebChat. js и WebChat. js. Мне нужно что-то перехватить, чтобы каким-то образом получить событие от ReactWebChat для взаимодействия с ним в промежуточном программном обеспечении.

Кстати, довольно новичок в React, спасибо за помощь.

...