How to update Bot avatar image per Activity

We are using React app with below version

"botframework-webchat": "^4.11.0"

Case

We need to show a different bot avatar on Activity basis. Example - We have a handoff feature, where Bot avatar should be an agent icon when the user is chatting with Live Agent and once the chat ended we need to show the old/original bot avatar.

We are using avatarMiddleware to achieve the above case.
Code Sample

const avatarMiddleware = () => next => ({​​ fromUser, ...otherArgs }​​) => {​​
const renderAvatar = next({​​ fromUser, ...otherArgs }​​);



if (otherArgs.styleOptions !== null && otherArgs.styleOptions !== undefined) {​​
otherArgs.styleOptions.userAvatarImage = avatarImg.userAvatarImage;
otherArgs.styleOptions.userAvatarInitials = avatarImg.userAvatarInitials;
otherArgs.styleOptions.botAvatarInitials = avatarImg.botAvatarInitials;
if (isLiveChatStarted) {​​
otherArgs.styleOptions.botAvatarImage = 'data:image/png;base64,xxxxxx';
}​​
}​​



if (!isLiveChatStarted) {​​
otherArgs.styleOptions.botAvatarImage = eva.imageData;
}​​
return (
renderAvatar &&
(() => (
<AvatarWithLPStatus lpStatus={​​isLiveChatStarted}​​ fromUser={​​fromUser}​​>
{​​renderAvatar()}​​
</AvatarWithLPStatus>
))
);
}​​;

Issue

The above logic is updating the bot avatar image however it is updating the old activities bot avatar also. We are looking for middleware to update bot avatar image per activity.

Thanks,
Kundan(Ecolab)

Start with the avatarMiddleware shown in the issue and trace how its styleOptions are applied to activities in the React Web Chat integration. Reproduce the handoff transition with old and new activities; done means the current activity uses the agent avatar while earlier activities retain their original bot avatar.