Adding a feedback form on reaction button click

[lexi-taylor]

Description

This adds the ability for end users to submit feedback to the bot utilizing a generic feedback form. The form will only show up if the feedbackLoop property is present and if the feedback buttons are placed in the activity actions section. On click of a feedback button, it will render the form. Feedback will not be submitted unless a user actually submits the form.

Specific Changes

1. Created the new FeedbackForm under activity
2. Created a new FeedbackFormTextArea which has specific formatting
3. Added support for recognizing the feedbackLoop property
4. Added support for sending the feedback to the bot when a user presses submit
5. Added localization for title, description, and buttons
6. Added the ability to customize the generic webchat feedback form

-

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[beyackle2]

Nothing stands out to me as wrong enough to block this going through, but I'll defer to William to make the actual call here. I left a few comments that should be treated as suggestions.

[OEvgeny]

Looks great, just a few nits

[compulim]

Why, when the activity does not support feedback loop, we still inject something to pretend the activity support feedback loop?

Will it accidentally overwrite the Message entity if the bot send us one?

[lexi-taylor]

The logic after the if statement is the same as before. It will use the entities on the activity, if no entities are present then no buttons show. If the entities don’t have the feedback actions then they also won’t show.

[compulim]

Ahhh... if the activity has feedback loop, the activity payload may not look as good as we want, so we need to hack the traffic to add LikeAction/DislikeAction.

[compulim]

Let's do this in the chat adapter patches in MCS, will send things to you on Teams.

[compulim]

Notes to myself, the patch code looks something like this.

function getMessageEntity(activity): Entity | undefined {
  return activity.entities.find(entity =>
    entity['@context'] === 'https://schema.org' &&
    entity['@id'] === '' &&
    entity['@type'] === 'Message'
  );
}

if (hasFeedbackLoop(activity)) {
  const messageEntity = getMessageEntity(activity);
  const patchedMessageEntity = Object.freeze({
    '@context': 'https://schema.org',
    '@id': '',
    '@type': 'Message',
    type: 'https://schema.org/Message',

    ...messageEntity, // Could be undefined

    potentialAction: [...messageEntity.potentialAction || []] // Clone before modify
  });

  patchedMessageEntity.potentialAction.find(action => action['@type'] === 'LikeAction') ||
    patchedMessageEntity.push({
      '@type': 'LikeAction',
      actionStatus: 'PotentialActionStatus'
    });

  patchedMessageEntity.potentialAction.find(action => action['@type'] === 'DislikeAction') ||
    patchedMessageEntity.push({
      '@type': 'DislikeAction',
      actionStatus: 'PotentialActionStatus'
    });

  Object.freeze(patchedMessageEntity.potentialAction);

  return Object.freeze({
    ...activity,
    entities: activity.entities.map(
    entity => entity === messageEntity ? patchedMessageEntity : entity)
  });
}

[compulim]

@lexi-taylor let's revert changes related to patch and move it to MCS side.

[compulim]

@OEvgeny or @lexi-taylor could you refactor this in another PR so we don't have two copies of same UI?

[compulim]

Follow-ups:

• Remove activity patch code by fixing it properly in backend
• Refactor Fluent.TextArea and FeedbackFormTextArea into a single component