How to add a typing indicator for an AI chatbot

Typing indicators are a key feature of any chat user interface, and can enhance the user experience. This guide covers what typing indicators are, why they’re important, and how to add a typing indicator for an AI chatbot to your TalkJS chat.

To follow along with this guide, you need:

• A TalkJS account. TalkJS provides a ready-to-use chat client for your application. Get started for free.
• An existing project with an AI chatbot, to which you’d like to add a typing indicator.

What are typing indicators?

A typing indicator is the visual cue in a chat that informs you that another user is writing a message.

Typing indicators can come in many different forms. A common form of typing icon are three dots (also called ‘ellipsis’) animated inside a chat bubble when someone is typing. But a typing indicator can also just display the user’s name with text such as ‘is typing…’. 

Popular messaging apps, such as Slack, WhatsApp, Facebook Messenger, or Telegram, all make use of typing indicators.

Why are typing indicators important?

Typing awareness indicators are an important feature of any live chat. Knowing that a person is typing can help users avoid sending messages at the same time. Moreover, such real-time micro-interactions can make conversations feel more authentic. All in all, typing indicators give users a better, more effective chat experience.

Having a typing indicator is especially vital when you’re working with AI chatbots, which is getting increasingly common today. Statista research found that around 75% of respondents globally had used generative AI at work, and that more and more people are comfortable to use chatbots in customer support. An AI bot, after receiving a prompt, might take a few seconds to compose its response. But because a typing bot doesn’t type its response inside the message field, it doesn’t trigger the built-in typing dots. 

To make chatting with AI bots more effective, you can add a custom typing indicator to your chat. The next section outlines how to add an animated three dots typing indicator to your TalkJS chat. 

Add a real-time typing indicator for an AI chatbot

Here’s how to add a real-time typing indicator to your TalkJS chat.

Step 1: Create a typing indicator theme component

Begin by creating a custom typing indicator component:

1. In your TalkJS dashboard, go to the Themes page.
2. In the sidebar panel, from the section Custom Components, select the + (plus) icon to add a new component. 
3. Enter a name for your component. This guide uses the name BotTypingIndicator. Select OK to save your new custom component.
4. Add the following inside the BotTypingIndicator component:

<!-- A typing indicator for a bot -->

<template>
    <div class="message-row by-other UserMessage">
        <Avatar photoUrl="https://talkjs.com/new-web/avatar-1.jpg" />

        <t:set showAuthor="{{ true }}" />
        <div class="message {{ showAuthor | then: 'has-author' }}">
            <!-- in group chats, show the message sender name in a random color -->
            <div t:if="{{ showAuthor }}" class="message-author" style="color: black">
                AI chatbot
            </div>

            <div class="text timestamp-float-{{ floatTimestamp }}">
                <div class="typing-indicator">
                    <TypingIndicator />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.message-row {
    margin-bottom: 16px;
    margin-left: 16px;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.message {
    white-space: normal;
    overflow: hidden;
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: solid;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    border-color: #ececec;
    background-color: #f7f7f7;
    color: #111;
}

.by-other .message {
    margin-left: 0.50rem;
}

.message-author {
    font-size: 75%;
    font-weight: bold;
    padding: 0.75rem 1rem 0 1rem;
    margin-bottom: -0.75rem;
}

.text {
    padding: 0.75rem 1rem;
    white-space: pre-wrap;
}

</style>

Your changes are saved automatically.

This code does the following: 

• Adds a user avatar and the display name AI chatbot to the component.
• Uses the built-in typing indicator component.
• Styles the typing indicator as belonging to the other user in the chat. You can adjust the styling to fit your own needs.

You now have a custom bot typing indicator component in your theme. But your typing indicator currently doesn’t show up yet. Let’s change that.

Step 2: Detect when the bot is typing

To make the typing indicator show up whenever the bot is typing, you can use custom conversation properties. Custom conversation properties allow your theme to detect when the bot is typing.

How does this work? Let your theme check for a specific custom conversation property that’s present whenever the AI chatbot is typing. (You’ll set the custom property itself in step 3.) If the custom property is present, then your theme shows the typing indicator. If the custom property isn’t present, then your theme doesn’t show the typing indicator. 

Take the following steps:

1. On the Themes page of your TalkJS dashboard, in the section Built-in Components, go to the MessageField built-in theme component.
2. Add the following code to the top of the MessageField component, right after the opening of the <template> tag:

<BotTypingIndicator t:if="{{ conversation.custom.typing == 'true' }}"/>

<!--- rest of the MessageField code --->

Your changes are saved automatically.

This code does the following: 

• Detects if, for a given conversation, the custom property typing is true.
• If typing is true, then it shows your BotTypingIndicator custom theme component.
• If typing is either missing or set to false, then your theme shows no typing indicator.

Your theme is now ready to show the bot typing indicator whenever the custom property typing is true for a conversation. 

But currently your conversations don’t have any custom property typing set to them yet. Let’s change that too, so that your theme can detect when to show the bot typing indicator.

Step 3: Set a custom property while the bot is typing

To set a custom property whenever the bot is composing its response, you can use the REST API:

1. When you receive the request to the chatbot, use the REST API to set a custom property typing to true for your conversation. Your theme now automatically shows the custom typing indicator in the chat.
2. Once your AI chatbot has generated its response, again use the REST API to set the custom property typing to false, or clear it altogether. The bot typing indicator then disappears from the chat.

The result should look something like the following:

This way, the bot’s typing indicator shows up whenever the bot is generating its response.

Next steps

You’ve now added a real-time typing indicator for an AI chatbot to your theme. Whenever your bot is composing its response, your user knows that a reply is coming. 

Would you like to customize your chat further? Use the theme editor, or check out the wide range of code samples for more customization ideas.

Stuck? Got more questions on typing indicators for AI chatbots? We’re here to help! Contact a TalkJS developer.