stream-chat-react/dist/components/TextareaComposer/SuggestionList/UserItem.js

React components to create chat conversations or livestream style chat

import React from 'react';
import clsx from 'clsx';
import { Avatar as DefaultAvatar } from '../../Avatar';
/**
 * UI component for mentions rendered in suggestion list
 */
export const UserItem = ({ Avatar = DefaultAvatar, entity }) => {
    const hasEntity = !!Object.keys(entity).length;
    if (!hasEntity)
        return null;
    const { parts, token } = entity.tokenizedDisplayName;
    const renderName = () => parts.map((part, i) => {
        const matches = part.toLowerCase() === token;
        const partWithHTMLSpacesAround = part.replace(/^\s+|\s+$/g, '\u00A0');
        return (React.createElement("span", { className: clsx({
                'str-chat__emoji-item--highlight': matches,
                'str-chat__emoji-item--part': !matches,
            }), key: `part-${i}` }, partWithHTMLSpacesAround));
    });
    return (React.createElement("div", { className: 'str-chat__user-item' },
        React.createElement(Avatar, { className: 'str-chat__avatar--autocomplete-item', image: entity.image, name: entity.name || entity.id }),
        React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'user-item-name' }, renderName()),
        React.createElement("div", { className: 'str-chat__user-item-at' }, "@")));
};