1

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'
      }
    }
  }
});
Inderpal
  • 51
  • 4
  • Welcome to Stack Overflow. Please have a look at the handy guide to see the steps you can take to get a better answer faster: https://stackoverflow.com/help/how-to-ask – Kyle Delaney Dec 04 '20 at 18:10
  • Because cards are UI elements and bots have no need of UI elements except to send them to a user, cards are normally send from bots to users. Are you saying you want to send a card from a user to a bot? Why would you want to do this? What is the use case? – Kyle Delaney Dec 04 '20 at 18:12
  • The use case is "Instead of bot, a support team member and a user(customer) are communicating." Support team need an UI where they can generate adaptive card from attached UI and want to send to user. – Inderpal Dec 04 '20 at 18:44
  • Is the support team communicating with the customer through an intermediator bot? – Kyle Delaney Dec 04 '20 at 18:47
  • support team communicate with intermediator chat channel. When user send message, a support team member sees a message and reply(thus chat channel is created between support team and user). Support team member has UI that they can use to send adaptive cards. – Inderpal Dec 04 '20 at 18:55
  • Web Chat is a Direct Line client, so it's designed to talk to bots. If you set up a solution that allows humans to talk to humans using Web Chat, the messages must still go through a server-side app whether or not you call that a bot. Do you have control over the server-side app? If so, you can get it to transform incoming text into outgoing Adaptive Cards. This isn't a typical use of Web Chat, so the more information you can give us about your customized solution the better. – Kyle Delaney Dec 04 '20 at 19:04
  • Yes, We have control. We can send text format and can convert to adaptive card by additional code. However, it will be great if you can guide about event like 'WEB_CHAT/SEND_MESSAGE' that can be helpful to directly send adaptive card. Otherwise we need to design our own text types. Activity is already designed to have attachments(but I can not find way to send it). I am figuring out a way to send attachments like below. store.dispatch({ type: 'WEB_CHAT/SEND_MESSAGE', payload: { text: 'Hello' } }); – Inderpal Dec 04 '20 at 19:10
  • Web Chat is designed to receive cards but not to send them. And even if you could send cards to the bot, you would still need to program the bot to interpret the cards as something it should forward to the other user. Can you explain why you do not want to accept the solution of having the bot transform an incoming text activity into an outgoing card activity? – Kyle Delaney Dec 05 '20 at 00:10
  • ok Kyle. Thanks for working on this issue. We accept the solution of having the bot transform an incoming text activity into an outgoing card activity. – Inderpal Dec 07 '20 at 16:59
  • Okay great! Are you saying you'd like me write an answer explaining how to do that, or are you saying you already know how to do that? I would like to write an answer for you but I need a bit more information about how your system is designed. Can you edit some bot code into your question so we know what SDK it's using, and also include more of your client code so we know if it's using React Web Chat or CDN Web Chat etc.? – Kyle Delaney Dec 07 '20 at 23:29
  • Hi Kyle, We already know how to use middleware for message conversions and get the code working. Thank you for help. – Inderpal Dec 08 '20 at 17:41
  • Would you like to post that as an answer? – Kyle Delaney Dec 08 '20 at 18:56
  • 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. – Inderpal Dec 09 '20 at 15:37
  • Would you like to post that as an answer? – Kyle Delaney Dec 11 '20 at 00:21

1 Answers1

0
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.

Inderpal
  • 51
  • 4