cozy-sharing 36.5.0 → 37.0.1

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [37.0.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@37.0.0...cozy-sharing@37.0.1) (2026-07-17)
+
+### Bug Fixes
+
+- **cozy-sharing:** Restore federated recipient management ([7442f26](https://github.com/cozy/cozy-libs/commit/7442f26f6cdb757d62d656f19d237d7694335c0c))
+
+# [37.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.5.0...cozy-sharing@37.0.0) (2026-07-16)
+
+### Features
+
+- Display correct icon and colors for group avatar ([e630c7a](https://github.com/cozy/cozy-libs/commit/e630c7a9c9cc2d3b784c3bce1848bdcbbf257c25))
+- Update cozy-ui ([8d1d2a1](https://github.com/cozy/cozy-libs/commit/8d1d2a1a32963e7b1fc8efdc07ca76f3e48a430b))
+
+### BREAKING CHANGES
+
+- You need cozy-ui >= 140.5.0
+
 # [36.5.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.4.2...cozy-sharing@36.5.0) (2026-07-09)
 
 ### Features

package/dist/components/Avatar/AvatarList.js

@@ -88,7 +88,8 @@ var AvatarList = function AvatarList(_ref2) {
         "data-testid": "AvatarList-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
         key: recipient.index
       }, /*#__PURE__*/React.createElement(GroupAvatar, {
-        size: size
+        size: size,
+        color: recipient.color
       }));
     }
 

package/dist/components/Avatar/GroupAvatar.js

@@ -1,16 +1,20 @@
-import { Icon, Team } from '@linagora/twake-icons';
 import React from 'react';
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import { Icon, Peoples } from '@linagora/twake-icons';
+import Avatar, { colorToGradient } from 'cozy-ui/transpiled/react/Avatar';
+import { COLORS } from 'cozy-ui/transpiled/react/ColorList/helpers';
+var DEFAULT_COLOR = COLORS[4];
 
 var GroupAvatar = function GroupAvatar(_ref) {
   var size = _ref.size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? DEFAULT_COLOR : _ref$color,
       className = _ref.className;
   return /*#__PURE__*/React.createElement(Avatar, {
     size: size,
-    className: className,
-    border: true
+    color: colorToGradient(color),
+    className: className
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: Team
+    icon: Peoples
   }));
 };
 

package/dist/components/ContactSuggestion.js

@@ -18,7 +18,8 @@ export var ContactSuggestion = function ContactSuggestion(_ref) {
     return /*#__PURE__*/React.createElement(ListItem, {
       button: true
     }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
-      size: "m"
+      size: "m",
+      color: contactOrGroup.color
     })), /*#__PURE__*/React.createElement(ListItemText, {
       primary: contactOrGroup.name,
       secondary: t('Share.members.count', {

package/dist/components/FederatedFolder/FederatedFolderModal.js

@@ -54,6 +54,7 @@ var FederatedFolderModalContent = function FederatedFolderModalContent(_ref) {
       t = _useI18n.t;
 
   var _useSharingContext = useSharingContext(),
+      canReshare = _useSharingContext.canReshare,
       share = _useSharingContext.share,
       getSharingById = _useSharingContext.getSharingById,
       getSharingLink = _useSharingContext.getSharingLink,
@@ -278,6 +279,7 @@ var FederatedFolderModalContent = function FederatedFolderModalContent(_ref) {
   var documentPermissions = documentId ? getDocumentPermissions(documentId) : [];
   var displayedLink = existingDocument !== null && existingDocument !== void 0 && existingDocument.driveId ? getFederatedShareLink(existingDocument) : getSharingLink(existingDocument === null || existingDocument === void 0 ? void 0 : existingDocument._id);
   var isCurrentUserOwner = documentId ? isOwner(documentId) : false;
+  var canManageSharing = isCurrentUserOwner || (documentId ? canReshare(documentId) : false);
 
   var handleRevokeSelf = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(document) {
@@ -389,6 +391,7 @@ var FederatedFolderModalContent = function FederatedFolderModalContent(_ref) {
       enableCreateContact: true
     }))), /*#__PURE__*/React.createElement(WhoHasAccess, {
       isOwner: isCurrentUserOwner,
+      canManageSharing: canManageSharing,
       isSharedDrive: true,
       recipients: isSending ? frozenRecipients : existingRecipients,
       document: isSending ? frozenDoc : existingDocument,

package/dist/components/FederatedFolder/FederatedFolderModal.spec.js

@@ -19,6 +19,7 @@ var mockShareByLink = jest.fn();
 var mockRevoke = jest.fn();
 var mockRevokeSelf = jest.fn();
 var mockIsOwner = jest.fn();
+var mockCanReshare = jest.fn();
 var mockGetSharingLink = jest.fn();
 var mockGetFederatedShareLink = jest.fn();
 var mockGetRecipients = jest.fn().mockReturnValue([]);
@@ -38,6 +39,7 @@ jest.mock('../../hooks/useSharingContext', function () {
         revoke: mockRevoke,
         revokeSelf: mockRevokeSelf,
         isOwner: mockIsOwner,
+        canReshare: mockCanReshare,
         getSharingLink: mockGetSharingLink,
         getFederatedShareLink: mockGetFederatedShareLink,
         getDocumentPermissions: mockGetDocumentPermissions,
@@ -133,6 +135,7 @@ describe('FederatedFolderModal', function () {
     mockRevoke.mockResolvedValue();
     mockRevokeSelf.mockResolvedValue();
     mockIsOwner.mockReturnValue(false);
+    mockCanReshare.mockReturnValue(false);
     mockGetDocumentPermissions.mockReturnValue([]);
     mockFetchSharedDriveSharingLinks.mockResolvedValue([]);
     mockGetSharingLink.mockReturnValue('https://example.com/share/abc123');
@@ -726,36 +729,73 @@ describe('FederatedFolderModal', function () {
         }
       }, _callee19);
     })));
-  });
-  describe('onClose callback', function () {
-    it('should call onClose when close button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-      var _setup17, findByRole, closeButton;
+    it('should allow a write recipient to revoke another recipient', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+      var otherRecipient, _setup17, findByLabelText;
 
       return _regeneratorRuntime.wrap(function _callee20$(_context20) {
         while (1) switch (_context20.prev = _context20.next) {
           case 0:
-            _setup17 = setup(), findByRole = _setup17.findByRole;
-            _context20.next = 3;
+            otherRecipient = {
+              instance: 'https://other.mycozy.cloud',
+              memberIndex: 2,
+              sharingId: 'sharing-id',
+              type: 'two-way'
+            };
+            mockCanReshare.mockReturnValue(true);
+            mockGetRecipients.mockReturnValue([otherRecipient]);
+            _setup17 = setup(), findByLabelText = _setup17.findByLabelText;
+            _context20.t0 = fireEvent;
+            _context20.next = 7;
+            return findByLabelText('Remove from sharing');
+
+          case 7:
+            _context20.t1 = _context20.sent;
+
+            _context20.t0.click.call(_context20.t0, _context20.t1);
+
+            _context20.next = 11;
+            return waitFor(function () {
+              expect(mockCanReshare).toHaveBeenCalledWith(mockDocument._id);
+              expect(mockRevoke).toHaveBeenCalledWith(mockDocument, otherRecipient.sharingId, otherRecipient.memberIndex);
+              expect(mockRevokeSelf).not.toHaveBeenCalled();
+            });
+
+          case 11:
+          case "end":
+            return _context20.stop();
+        }
+      }, _callee20);
+    })));
+  });
+  describe('onClose callback', function () {
+    it('should call onClose when close button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+      var _setup18, findByRole, closeButton;
+
+      return _regeneratorRuntime.wrap(function _callee21$(_context21) {
+        while (1) switch (_context21.prev = _context21.next) {
+          case 0:
+            _setup18 = setup(), findByRole = _setup18.findByRole;
+            _context21.next = 3;
             return findByRole('button', {
               name: /close/i
             });
 
           case 3:
-            closeButton = _context20.sent;
+            closeButton = _context21.sent;
             fireEvent.click(closeButton);
             expect(mockOnClose).toHaveBeenCalled();
 
           case 6:
           case "end":
-            return _context20.stop();
+            return _context21.stop();
         }
-      }, _callee20);
+      }, _callee21);
     })));
-    it('should ask confirmation when close button is clicked with pending recipients', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-      var _setup18, getByRole, findByRole, getByText, closeButton;
+    it('should ask confirmation when close button is clicked with pending recipients', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+      var _setup19, getByRole, findByRole, getByText, closeButton;
 
-      return _regeneratorRuntime.wrap(function _callee21$(_context21) {
-        while (1) switch (_context21.prev = _context21.next) {
+      return _regeneratorRuntime.wrap(function _callee22$(_context22) {
+        while (1) switch (_context22.prev = _context22.next) {
           case 0:
             usePendingRecipients.mockReturnValue({
               pendingRecipients: [{
@@ -766,14 +806,14 @@ describe('FederatedFolderModal', function () {
               selectedOption: 'readWrite',
               setSelectedOption: jest.fn()
             });
-            _setup18 = setup(), getByRole = _setup18.getByRole, findByRole = _setup18.findByRole, getByText = _setup18.getByText;
-            _context21.next = 4;
+            _setup19 = setup(), getByRole = _setup19.getByRole, findByRole = _setup19.findByRole, getByText = _setup19.getByText;
+            _context22.next = 4;
             return findByRole('button', {
               name: /close/i
             });
 
           case 4:
-            closeButton = _context21.sent;
+            closeButton = _context22.sent;
             fireEvent.click(closeButton);
             expect(getByText("Discard the changes you haven't saved?")).toBeTruthy();
             expect(mockOnClose).not.toHaveBeenCalled();
@@ -784,15 +824,15 @@ describe('FederatedFolderModal', function () {
 
           case 10:
           case "end":
-            return _context21.stop();
+            return _context22.stop();
         }
-      }, _callee21);
+      }, _callee22);
     })));
-    it('should close after discard confirmation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
-      var _setup19, getByRole, findByRole, getByText, closeButton;
+    it('should close after discard confirmation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+      var _setup20, getByRole, findByRole, getByText, closeButton;
 
-      return _regeneratorRuntime.wrap(function _callee22$(_context22) {
-        while (1) switch (_context22.prev = _context22.next) {
+      return _regeneratorRuntime.wrap(function _callee23$(_context23) {
+        while (1) switch (_context23.prev = _context23.next) {
           case 0:
             usePendingRecipients.mockReturnValue({
               pendingRecipients: [{
@@ -803,14 +843,14 @@ describe('FederatedFolderModal', function () {
               selectedOption: 'readWrite',
               setSelectedOption: jest.fn()
             });
-            _setup19 = setup(), getByRole = _setup19.getByRole, findByRole = _setup19.findByRole, getByText = _setup19.getByText;
-            _context22.next = 4;
+            _setup20 = setup(), getByRole = _setup20.getByRole, findByRole = _setup20.findByRole, getByText = _setup20.getByText;
+            _context23.next = 4;
             return findByRole('button', {
               name: /close/i
             });
 
           case 4:
-            closeButton = _context22.sent;
+            closeButton = _context23.sent;
             fireEvent.click(closeButton);
             expect(getByText("Discard the changes you haven't saved?")).toBeTruthy();
             fireEvent.click(getByRole('button', {
@@ -820,9 +860,9 @@ describe('FederatedFolderModal', function () {
 
           case 9:
           case "end":
-            return _context22.stop();
+            return _context23.stop();
         }
-      }, _callee22);
+      }, _callee23);
     })));
   });
 });

package/dist/components/Recipient/GroupRecipient.js

@@ -17,6 +17,7 @@ import { GroupAvatar } from '../Avatar/GroupAvatar';
 
 var GroupRecipient = function GroupRecipient(props) {
   var name = props.name,
+      color = props.color,
       members = props.members,
       fadeIn = props.fadeIn,
       owner = props.owner,
@@ -60,7 +61,8 @@ var GroupRecipient = function GroupRecipient(props) {
     gutters: isMobile ? 'default' : 'double',
     size: "small"
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
-    size: "m"
+    size: "m",
+    color: color
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: /*#__PURE__*/React.createElement(Typography, {
       variant: "body1"

package/dist/components/Recipient/GroupRecipientPermissions.js

@@ -1,8 +1,8 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { Icon, CrossCircleOutline } from '@linagora/twake-icons';
 import React, { useState, useRef } from 'react';
+import { Icon, CrossCircleOutline } from '@linagora/twake-icons';
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu';
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions';
 import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader';
@@ -19,6 +19,7 @@ import { GroupAvatar } from '../Avatar/GroupAvatar';
 
 var GroupRecipientPermissions = function GroupRecipientPermissions(_ref) {
   var name = _ref.name,
+      color = _ref.color,
       isOwner = _ref.isOwner,
       isReadOnly = _ref.isReadOnly,
       sharingId = _ref.sharingId,
@@ -118,7 +119,8 @@ var GroupRecipientPermissions = function GroupRecipientPermissions(_ref) {
     autoClose: true,
     onClose: hideMenu
   }, /*#__PURE__*/React.createElement(ActionsMenuMobileHeader, null, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
-    size: "m"
+    size: "m",
+    color: color
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: name,
     primaryTypographyProps: {

package/dist/components/ShareAutosuggest.js

@@ -188,7 +188,8 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
         id: "recipient_".concat(idx),
         key: "key_recipient_".concat(idx),
         avatar: isContactGroup ? /*#__PURE__*/React.createElement(GroupAvatar, {
-          size: "xs"
+          size: "xs",
+          color: recipient.color
         }) : /*#__PURE__*/React.createElement(Avatar, {
           size: "xs"
         }, avatarText),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "36.5.0",
+  "version": "37.0.1",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -58,8 +58,8 @@
     "cozy-device-helper": "^4.0.0",
     "cozy-intent": "^2.31.1",
     "cozy-minilog": "^3.10.1",
-    "cozy-ui": "^139.0.2",
-    "cozy-ui-plus": "^12.0.1",
+    "cozy-ui": "^140.5.0",
+    "cozy-ui-plus": "^12.0.3",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
     "react": "16.12.0",
@@ -75,7 +75,7 @@
     "cozy-flags": ">=4.8.1",
     "cozy-intent": ">=2.29.1",
     "cozy-minilog": ">=3.9.1",
-    "cozy-ui": ">=139.0.2",
+    "cozy-ui": ">=140.5.0",
     "cozy-ui-plus": ">=6.0.0",
     "prop-types": ">=15.7.2",
     "react": ">=16.12.0",
@@ -85,5 +85,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "8f766c3da5a35109325e1a3451e78e7c1b30e515"
+  "gitHead": "6326a5cba450641157e2f03754a99a38cc634d5a"
 }

package/src/components/Avatar/AvatarList.jsx

@@ -92,7 +92,7 @@ const AvatarList = ({
               }`}
               key={recipient.index}
             >
-              <GroupAvatar size={size} />
+              <GroupAvatar size={size} color={recipient.color} />
             </span>
           )
         }

package/src/components/Avatar/GroupAvatar.jsx

@@ -1,12 +1,15 @@
-import { Icon, Team } from '@linagora/twake-icons'
 import React from 'react'
 
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import { Icon, Peoples } from '@linagora/twake-icons'
+import Avatar, { colorToGradient } from 'cozy-ui/transpiled/react/Avatar'
+import { COLORS } from 'cozy-ui/transpiled/react/ColorList/helpers'
 
-const GroupAvatar = ({ size, className }) => {
+const DEFAULT_COLOR = COLORS[4]
+
+const GroupAvatar = ({ size, color = DEFAULT_COLOR, className }) => {
   return (
-    <Avatar size={size} className={className} border>
-      <Icon icon={Team} />
+    <Avatar size={size} color={colorToGradient(color)} className={className}>
+      <Icon icon={Peoples} />
     </Avatar>
   )
 }

package/src/components/ContactSuggestion.jsx

@@ -18,7 +18,7 @@ export const ContactSuggestion = ({ contactOrGroup }) => {
     return (
       <ListItem button>
         <ListItemIcon>
-          <GroupAvatar size="m" />
+          <GroupAvatar size="m" color={contactOrGroup.color} />
         </ListItemIcon>
         <ListItemText
           primary={contactOrGroup.name}

package/src/components/FederatedFolder/FederatedFolderModal.jsx

@@ -35,6 +35,7 @@ const FederatedFolderModalContent = ({
   const client = useClient()
   const { t } = useI18n()
   const {
+    canReshare,
     share,
     getSharingById,
     getSharingLink,
@@ -224,6 +225,8 @@ const FederatedFolderModalContent = ({
     ? getFederatedShareLink(existingDocument)
     : getSharingLink(existingDocument?._id)
   const isCurrentUserOwner = documentId ? isOwner(documentId) : false
+  const canManageSharing =
+    isCurrentUserOwner || (documentId ? canReshare(documentId) : false)
 
   const handleRevokeSelf = async document => {
     await revokeSelf(document)
@@ -323,6 +326,7 @@ const FederatedFolderModalContent = ({
           </div>
           <WhoHasAccess
             isOwner={isCurrentUserOwner}
+            canManageSharing={canManageSharing}
             isSharedDrive
             recipients={isSending ? frozenRecipients : existingRecipients}
             document={isSending ? frozenDoc : existingDocument}

package/src/components/FederatedFolder/FederatedFolderModal.spec.jsx

@@ -13,6 +13,7 @@ const mockShareByLink = jest.fn()
 const mockRevoke = jest.fn()
 const mockRevokeSelf = jest.fn()
 const mockIsOwner = jest.fn()
+const mockCanReshare = jest.fn()
 const mockGetSharingLink = jest.fn()
 const mockGetFederatedShareLink = jest.fn()
 const mockGetRecipients = jest.fn().mockReturnValue([])
@@ -31,6 +32,7 @@ jest.mock('../../hooks/useSharingContext', () => ({
     revoke: mockRevoke,
     revokeSelf: mockRevokeSelf,
     isOwner: mockIsOwner,
+    canReshare: mockCanReshare,
     getSharingLink: mockGetSharingLink,
     getFederatedShareLink: mockGetFederatedShareLink,
     getDocumentPermissions: mockGetDocumentPermissions,
@@ -109,6 +111,7 @@ describe('FederatedFolderModal', () => {
     mockRevoke.mockResolvedValue()
     mockRevokeSelf.mockResolvedValue()
     mockIsOwner.mockReturnValue(false)
+    mockCanReshare.mockReturnValue(false)
     mockGetDocumentPermissions.mockReturnValue([])
     mockFetchSharedDriveSharingLinks.mockResolvedValue([])
     mockGetSharingLink.mockReturnValue('https://example.com/share/abc123')
@@ -472,6 +475,31 @@ describe('FederatedFolderModal', () => {
         expect(onRevokeSuccess).toHaveBeenCalledWith(mockDocument)
       })
     })
+
+    it('should allow a write recipient to revoke another recipient', async () => {
+      const otherRecipient = {
+        instance: 'https://other.mycozy.cloud',
+        memberIndex: 2,
+        sharingId: 'sharing-id',
+        type: 'two-way'
+      }
+      mockCanReshare.mockReturnValue(true)
+      mockGetRecipients.mockReturnValue([otherRecipient])
+
+      const { findByLabelText } = setup()
+
+      fireEvent.click(await findByLabelText('Remove from sharing'))
+
+      await waitFor(() => {
+        expect(mockCanReshare).toHaveBeenCalledWith(mockDocument._id)
+        expect(mockRevoke).toHaveBeenCalledWith(
+          mockDocument,
+          otherRecipient.sharingId,
+          otherRecipient.memberIndex
+        )
+        expect(mockRevokeSelf).not.toHaveBeenCalled()
+      })
+    })
   })
 
   describe('onClose callback', () => {

package/src/components/Recipient/GroupRecipient.jsx

@@ -19,7 +19,7 @@ import {
 import { GroupAvatar } from '../Avatar/GroupAvatar'
 
 const GroupRecipient = props => {
-  const { name, members, fadeIn, owner, isOwner } = props
+  const { name, color, members, fadeIn, owner, isOwner } = props
   const { t } = useI18n()
   const client = useClient()
   const { isMobile } = useBreakpoints()
@@ -52,7 +52,7 @@ const GroupRecipient = props => {
           size="small"
         >
           <ListItemIcon>
-            <GroupAvatar size="m" />
+            <GroupAvatar size="m" color={color} />
           </ListItemIcon>
           <ListItemText
             primary={<Typography variant="body1">{name}</Typography>}

package/src/components/Recipient/GroupRecipientPermissions.jsx

@@ -1,6 +1,6 @@
-import { Icon, CrossCircleOutline } from '@linagora/twake-icons'
 import React, { useState, useRef } from 'react'
 
+import { Icon, CrossCircleOutline } from '@linagora/twake-icons'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
@@ -18,6 +18,7 @@ import { GroupAvatar } from '../Avatar/GroupAvatar'
 
 const GroupRecipientPermissions = ({
   name,
+  color,
   isOwner,
   isReadOnly,
   sharingId,
@@ -83,7 +84,7 @@ const GroupRecipientPermissions = ({
           >
             <ActionsMenuMobileHeader>
               <ListItemIcon>
-                <GroupAvatar size="m" />
+                <GroupAvatar size="m" color={color} />
               </ListItemIcon>
               <ListItemText
                 primary={name}

package/src/components/ShareAutosuggest.jsx

@@ -161,7 +161,7 @@ const ShareAutosuggest = ({
             key={`key_recipient_${idx}`}
             avatar={
               isContactGroup ? (
-                <GroupAvatar size="xs" />
+                <GroupAvatar size="xs" color={recipient.color} />
               ) : (
                 <Avatar size="xs">{avatarText}</Avatar>
               )