Botframework WebChat отправляет сообщение программно из отдельного компонента

Question

Я искал все и не смог найти решение для этого. Я использую Angular. Я строю бота, который хотел бы иметь полностью настраиваемую область ввода текста отдельно от области по умолчанию. Я построил ввод текста в отдельном компоненте angular, чем компонент chatbot. Я пытаюсь использовать Redux для отправки сообщения боту из этого компонента, но, похоже, он работает только из того же компонента, в котором отображается бот.

Если я создаю хранилище в отображаемом объекте, как ниже, и вызвать диспетчер с помощью кнопки, я могу отправить сообщение через бот.

const store =  window.WebChat.createStore()

dispatch({
      type: 'WEB_CHAT/SEND_MESSAGE',
      payload: { text: value }
    });

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

export class WebChatStore {
    private store: any;
    constructor() {
        const store =  window.WebChat.createStore(
            {}, 
            ({ dispatch }) => next => action => {}
        );
    }


    sendMessage(value: string) {
        this.store.dispatch({
            type: 'WEB_CHAT/SEND_MESSAGE',
            payload: { text: value }
        });
    }

    getRawStore() {
        return this.store;
    }
}

Попытка вызвать следующее из пользовательского интерфейса не работает вообще, и он жалуется, что отправка не является собственностью магазина.

  sendMessage(value) {
    this.webChatStore.getRawStore().dispatch({
      type: 'WEB_CHAT/SEND_MESSAGE',
      payload: { text: value }
    });


    this.webChatStore.sendMessage(value)


    return value;
  }

Выше приведены два разных метода, которые не работали. Извините, если этот вопрос сбивает с толку. Любое руководство будет очень цениться. Спасибо.