cardActionMiddleware cardAction displayText and text are undefined

[Hatzman91]

I wanted to intercept SuggestedActions to change the actiontype to messageBack but displayText and text are undefined, only value is filled and it really feels like a bug

my middleware:

cardActionMiddleware= () => next => async ({ cardAction, getSignInUrl }) => {
              const { type, value } = cardAction;
              // cardAction.type="messageBack"
              // cardAction.displayText="messageBack"
              // cardAction.text=value;
              console.log(cardAction)
                  return next({ cardAction, getSignInUrl });

            }

Console.log:

displayText: undefined
text: undefined
type: "postBack"
value: "{"IntentName":"i_pay_bill","OverflowActions":null}"

[tdurnford]

I believe messageBack actions are the only action that should define the text attribute, but Web Chat maps the properties of the suggested action to the card action so you can simply add the property to the action in the bot.

Bot Framework SDK v4 (Node)

const reply = MessageFactory.suggestedActions([{ type: ActionTypes.PostBack, title: 'PostBack', text: 'test', value: 'postback' }] );
await context.sendActivity(reply);

Web Chat v4

const cardActionMiddleware = () => next => card => {
  console.log(card.cardAction);
  next(card);
};

Screenshot

[Hatzman91]

hm, we are using the C# framework and are filling the actions the same way as for herocards and our custom PostbackButton works as messageback (which now would be a messageback button)

but we can't just set messageback in the backend, because then the emulator stops working

const PostBackButton = ({ cardAction, sendMessageBack, color }) => (

  <div className="m-chatbot__container-hero-button">
    <button
      className={
        "a-chatbot__hero-button a-chatbot__hero-button--motion a-chatbot__hero-button--" +
        color
      }
      // Web Chat does the heavylifting for us by exposing a "sendPostBack" function.
      onClick={() =>
        sendMessageBack(cardAction.value, cardAction.value, cardAction.title)
      }
      type="button"
    >
      {cardAction.title}
    </button>
  </div>
);

export default connectToWebChat(({ sendMessageBack }) => ({ sendMessageBack }))(
  PostBackButton
);

[tdurnford]

What version of the Emulator are you using? Doing a quick check, messageBack actions work fine in the Emulator.

Bot Framework SDK v4 (Node)

const reply = MessageFactory.suggestedActions([
  { type: ActionTypes.PostBack, title: 'PostBack', text: 'test', value: 'PostBack' },
  { type: ActionTypes.MessageBack, title: 'MessageBack', text: 'test', value: 'MessageBack' }
]);
await context.sendActivity(reply);

[Hatzman91]

Oh yeah, I already forgot, we are stuck with 4.3.3 because of an proxy issue We have next week some of you guys with us, I hope this will help with the issue^^

I just realized that I only filled "title" of the action in the C# backend and that somehow doesn't appear in the middleware

And I now actually edited my backend so DisplayText and Text are filled like that:

Bot Framwork SDK v4 (C#)

 cardActions.Add(new CardAction
                {
                    Title = t.GetDisplayTextByLocale(),
                    DisplayText = t.GetDisplayTextByLocale(),
                    Text = serializedValue,
                    Type = ActionTypes.PostBack,
                    Value = serializedValue
                });

but displayText and text are still undefined in the webchat but in the emulator the suggested actions look like this:

      {
        "displayText": "Sich Informieren",
        "text": "{\"IntentName\":\"i_insurance\",\"OverflowActions\":null}",
        "title": "Sich Informieren",
        "type": "postBack",
        "value": "{\"IntentName\":\"i_insurance\",\"OverflowActions\":null}"
      },

[tdurnford]

Instead of modifying Web Chat, it might make more sense to send a postBack if the channel is emmulator; otherwise, send a messageBack.

if (context.Activity.ChannelId == 'emulator') {
  cardActions.Add(new CardAction
  {
      Title = t.GetDisplayTextByLocale(),
      Text = serializedValue,
      Type = ActionTypes.PostBack,
      Value = serializedValue
  });
} else {
  cardActions.Add(new CardAction
  {
      Title = t.GetDisplayTextByLocale(),
      Text = serializedValue,
      Type = ActionTypes.MessageBack,
      Value = serializedValue
  });
}

Note, the display text is set in Web Chat, not the Suggested Action from the Bot, and is undefined for postBack actions by design so it doesn't get displayed in the conversation transcript.

[Hatzman91]

Thanks we made it work with the first solution, we had an deployment issue, sorry!