feat: activity actions decorator

[OEvgeny]

Activity Actions Decorator

Changelog Entry

Added

• Added ActivityActionsDecorator for customizing activity actions layout, in PR #5419, by @OEvgeny
  • Exposed ActivityButton component to be used in activity actions toolbar, in PR #5419, by @OEvgeny
  • Exposed useShowModal hook for displaying custom modal dialogs, in PR #5419, by @OEvgeny

Description

This PR introduces a new decorator API that allows customizing the layout and behavior of activity actions (buttons like copy, view code, feedback etc.). The decorator provides a flexible way to modify how these actions are presented and interact with each other.

Key additions:

• New ActivityActionsDecorator component for wrapping activity actions
• Exposed ActivityButton component for consistent action button styling
• Example implementations demonstrating custom action layouts and modal interactions

Design

1. For now activity actions decoration is handled separately from the activity decoration, but it is expected to change.

2. Activity is passed as a prop rather than part of the middleware request because:

   • Actions often need direct access to activity data for rendering decisions when activity is already finalized
   • The request object focused on generic decoration concerns (livestreaming state, sender type)
   • Allow more flexible action handling without polluting the request object

Specific Changes

• Added new public exports:

  export { ActivityActionsDecorator } from 'botframework-webchat-api/decorator';
  export { ActivityButton } from 'botframework-webchat-component';
  export { hooks } from 'botframework-webchat-component';
  const { useShowModal } = hooks;

• Created supporting middleware infrastructure:

  • ActivityActionsDecoratorMiddleware.ts
  • useActivityDecoratorRequest hook
  • Integrated with createDecoratorComposer

• Moved ActivityButton to public API for reuse

• Added test covering:

  • Custom action layouts
  • Modal interactions
  • Integration with existing activity decorators

Example Usage

// Custom layout with modal integration
function Actions({ activity, children }) {
  const showModal = useShowModal();
  // It is advised to use a schema.org compatible parsing solution
  if (activity.entities?.[0].isBasedOn?.['@type'] === 'ImageObject') {
    return (
      <div className="custom-actions-layout">
        <ActivityButton
          onClick={() => showModal(() => <ImagePreview />, { className: 'image-modal' })}
          text="View Image"
        />
        {children}
      </div>
    );
  }
  return <>{children}</>;
}

// Middleware setup
const decoratorMiddleware = [
  init =>
    init === 'activity actions' &&
    (next => request => (!request.livestreamingState ? Actions : next(request)))
];

// Usage in app
<DecoratorComposer middleware={decoratorMiddleware}>
  <WebChat />
</DecoratorComposer>

• 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)

[compulim]

It feels like each of button in this 3 button set should be their own middleware.

Say...

() => next => request => {
  if (activity.type === 'message' && isBasedOnSoftwareSourceCode(messageThing) && messageThing.isBasedOn.text) {
    return <><ActivityViewCodeButton ... />{next(request)}</>;
  }

  return next(request);
}

[OEvgeny]

Except this is v2-style middleware, so it should return a component. We also don't want to expose activity on the request level, do we? Or, are you speaking about a dedicated middleware stack for activity actions?

[compulim]

Dedicated middleware stack for activity actions.

[OEvgeny]

I'll let future us decide which would be better. Apparently Web Chat doesn't need such functionality right now, so we'll revisit it when we have a use-case for such "decoration" mechanism.

[compulim]

I think we should let web devs to compute this value from activity themselves.