Fix: avatar display in various scenarios

[OEvgeny]

Fixes #5317

Changelog Entry

• Improved avatar display and grouping behavior by fixing rendering issues and activity sender identification, in PR #5346, by @OEvgeny

Description

This PR addresses two issues affecting avatar display in Web Chat:

1. Avatar rendering inconsistencies caused by component updates
2. Incorrect grouping of activities leading to mismatched avatar displays

Design

The solution implements two key improvements:

1. Direct Avatar Rendering

   • Replaced FixedWidthImage component with native img element
   • Added proper aspect ratio and object-fit handling
   • Improved overflow handling using modern CSS properties

2. Enhanced Activity Grouping

   • Added sender ID check in grouping logic
   • Optimized grouping algorithm performance

Specific Changes

• Updated ImageAvatar.tsx:
  • Replaced FixedWidthImage with optimized img element
  • Improved image overflow handling
• Updated createDefaultGroupActivitiesMiddleware.ts:
  • Added shouldGroupSender function to check both role and ID
  • Optimized bin function using for...of
• Updated ImageAvatar.ts styles:
  • Added aspect-ratio property
  • Updated overflow handling with fallback (for IE)
• Updated createCoreMiddleware.tsx:
  • Added CSS overflow fallback for better browser compatibility (IE)

-

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

Review Checklist

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

[OEvgeny]

Here is the difference between npm@main and the branch on the introduced test activity/grouping.multipleAvatars with disabled grouping by timestamp for cleaner diff: