Feature Request: support for display custom avatar/name

[giautm]

trafficstars

Currently, to custom avatar/name in a channel with multi-users. I have to write custom components (MessageAvatar and MessageFooter) for them.

Common case to see is: I have a group chat with employers from companies, they chat as their company. So, I have to show Company Logo and Company Name instead of their name. All information ready attached to User profile. But I can't custom it for now.

See:

https://github.com/GetStream/stream-chat-react-native/blob/5fa9f2946d56cb1a2e69e4bbae5f9d9f52754e4d/package/src/components/Message/MessageSimple/MessageAvatar.tsx#L67-L68

https://github.com/GetStream/stream-chat-react-native/blob/5fa9f2946d56cb1a2e69e4bbae5f9d9f52754e4d/package/src/components/Message/MessageSimple/MessageFooter.tsx#L148-L150

[giautm]

Unable change Reactions name/avatar, because it has transformed before passing into OverlayReactions.

https://github.com/GetStream/stream-chat-react-native/blob/2bb1f14ce60d7455c4ff7272440965be0a7e32c8/package/src/components/MessageOverlay/MessageOverlay.tsx#L507-L513

Currently, I can't override MessageOverlay component, because OverlayProvider directly import it. Almost dependency of OverlayProvider are exported, except ChannelsStateProvider.

https://github.com/GetStream/stream-chat-react-native/blob/eab95f0be97226793f9bc8bc2bc2ad4cfe2c93aa/package/src/contexts/overlayContext/OverlayProvider.tsx#L29-L31

[giautm]

Currently, I have a hook that returns formatAvatar and formatName functions. I injected it into components which I want to custom.

I think this approaches can be apply on the core module.

function useCustomFormat<Us extends DefaultUserType = DefaultUserType>(): {
    readonly formatAvatar: (user?: UserResponse<Us> | null) => string | undefined;
    readonly formatName: (user?: UserResponse<Us> | null) => string;
}

Example for MessageAvatar:

[giautm]

package/src/contexts/formatContext/FormatContext.tsx

import React, { PropsWithChildren, useContext } from 'react';
import type { UserResponse } from 'stream-chat';

import type { DefaultUserType, UnknownType } from '../../types/types';

export type FormatAvatar<Us> = (user?: UserResponse<Us> | null) => string | undefined;
export type FormatName<Us> = (user?: UserResponse<Us> | null) => string | undefined;

export type FormatContextValue<Us extends UnknownType = DefaultUserType> = {
  readonly formatAvatar: FormatAvatar<Us>;
  readonly formatName: FormatName<Us>;
};

export const FormatContext = React.createContext<FormatContextValue>({
  formatAvatar: (user?: UserResponse<DefaultUserType> | null) => user?.image,
  formatName: (user?: UserResponse<DefaultUserType> | null) =>
    user?.name || user?.username || user?.id,
});

export const FormatProvider = <Us extends UnknownType = DefaultUserType>({
  children,
  value,
}: PropsWithChildren<{ value: FormatContextValue<Us> }>) => (
  <FormatContext.Provider value={value as unknown as FormatContextValue}>
    {children}
  </FormatContext.Provider>
);

export const useCustomFormat = <Us extends UnknownType = DefaultUserType>() =>
  useContext(FormatContext) as unknown as FormatContextValue<Us>;

[vanGalilea]

Hey team! Please add your planning poker estimate with ZenHub @Enigma-I-am @khushal87 @madsroskar @vishalnarkhede @santhoshvai

[vanGalilea]

We will make sure Avatar is customizable everywhere and user object is accessible in every Avatar comp. will add it to our backlog

[aharwood9]

Hi 👋 Just wanted to bump this additional customisation feature request for formatting the name. I was hoping we could pass a formatName function to the Channel that would override user.name places with this format.

I think this would impact, MessageFooter, useTypingString, OverlayReactions, ImageGalleryHeader and ChannelPreview and mentions.

Again for a very similar use-case as mentioned in the issue to include additional metadata next to the name that is on the user object. I appreciate that all of these places are mostly already customisable but you have to copy and paste a lot of code just to override a single line or disable certain features.

Thanks for all the existing customisation 🙌

[jetaggart]

@vanGalilea How do we show the user name alongside the avatar in the MessageFooter?

[khushal87]

Hey @jetaggart, just to help you with your question, can you share a design of how you would like to have the avatar on receiver and sender side? This will help me address you better.

[jetaggart]

@khushal87 I realized this only shows when there's 3+ people in the chat, then it shows as expected. What I'd love is the ability to always show the name+avatar (it doesn't seem configurable). Our use case: we're putting two people together in a chat that don't necessarily know each other well and having their name is useful even if it's only two people. We also send system messages from a system/dashboard account which does not get a name since the chat room only technically has 2 users in it, even though there's at least 3 people chatting (one being the system account).