Skip to main content

Typing Indicator

In this example, we will demonstrate how to build a custom TypingIndicator using the default component as a guide.

Create the Component#

Using the typing object provided by the TypingContext, we can access the name and role of users currently typing in a channel. The threadList prop will allow us to conditionally render the typing indicator in the main message list, or at the bottom of a thread.

export const CustomTypingIndicator = (props: TypingIndicatorProps) => {
const { threadList } = props;

const { channelConfig, thread } = useChannelStateContext();
const { client } = useChatContext();
const { typing = {} } = useTypingContext();

if (channelConfig?.typing_events === false) {
return null;
}

const typingInChannel = !threadList
? Object.values(typing).filter(
({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,
)
: [];

const typingInThread = threadList
? Object.values(typing).filter(
({ parent_id, user }) => user?.id !== client.user?.id && parent_id === thread?.id,
)
: [];

return (
<div
className={`str-chat__typing-indicator ${
(threadList && typingInThread.length) || (!threadList && typingInChannel.length)
? 'str-chat__typing-indicator--typing'
: ''
}`}
>
<div className='str-chat__typing-indicator__avatars'>
{(threadList ? typingInThread : typingInChannel).map(({ user }, i) => (
<div className='username'>
<div className='typing-indicator-name'>{user?.name}</div>
<div className='typing-indicator-role '>{user?.role}</div>
</div>
))}
</div>
<div className='str-chat__typing-indicator__dots'>
<div className='str-chat__typing-indicator__dot' />
<div className='str-chat__typing-indicator__dot' />
<div className='str-chat__typing-indicator__dot' />
</div>
</div>
);
};
.str-chat__typing-indicator__dots {
border: none;
display: flex;
margin-left: 0;
width: fit-content;
}

.str-chat__typing-indicator__dot {
background: var(--grey);
opacity: 1;
height: 4px;
width: 4px;
border-radius: var(--border-radius-round);
display: flex;
}

.str-chat__typing-indicator__dot:nth-child(3) {
opacity: 1;
}

.str-chat__typing-indicator__dot:nth-child(2) {
opacity: 1;
}

.typing-indicator-name {
font-weight: var(--font-weight-bold);
color: var(--grey);
}
.typing-indicator-role {
font-weight: var(--font-weight-regular);
color: var(--grey-whisper);
margin-left: var(--xxs-m);
}

.username {
display: flex;
}

From here, all we need to do is override the default component in Channel:

<Channel TypingIndicator={CustomTypingIndicator}>{/* children of Channel component */}</Channel>

The Result#

Custom Typing Indicator UI Component for Chat

Did you find this page helpful?