how to send Adaptive Card from HTML UI (using store.dispatch): microsoft/BotFramework-WebChat

Question

I am trying to figure out how to send Adaptive Card from HTML UI.

I can send message by a button click from UI (outside chat component).

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

My requirement is to send adaptive card(button from HTML UI): like below

 store.dispatch({
          type: 'WEB_CHAT/SEND_MESSAGE',
          payload: {
            attchments: card.attachments
          }
        });

Looks like below event can be useful, but this seems to be for file attachment not for adaptive cards.

store.dispatch({
  type: 'DIRECT_LINE/POST_ACTIVITY',
  meta: {
    method: 'customizedButton'
  },
  payload: {
    activity: {
      attchments: card.attachments,
      channelData: {
        attachmentSizes: card.attachments
      }
    }
  }
});

It will be great if there is way to send activity(with attachments and text), so that adaptive cards can be send to receiver and sender can see in send messages. For example: using below code I can insert message, but this message is not sent to receiver.

store.dispatch({
  type: 'DIRECT_LINE/INCOMING_ACTIVITY',
  payload: {
    activity: {
      type: 'message',
      timestamp: new Date().toString(),
      ....
      channelData: {
        clientActivityID: Math.random().toString(),
        clientTimestamp: '2020-10-31T10:20:30.074Z'
      }
    }
  }
});

Answer 1

store.dispatch({ type: 'DIRECT_LINE/POST_ACTIVITY', meta: { method: 'keyboard' }, payload: { activity: { type: 'message', 'tag': 'value' } } });

In middleware we are using tag to detect value.