Typing Indicator

The typing indicator shows a real-time "Typing..." animation with bouncing dots when the other user is composing a message.

How It Works

When a user starts typing in the message input field, the other participant sees an animated typing indicator in real-time. This helps create a more natural conversation flow, similar to popular messaging apps.

Features

• Real-time detection — Typing status is broadcast instantly via WebSocket
• Debounced display — Indicator appears after a brief delay to avoid flickering
• Auto-clear — Indicator disappears after 2 seconds of inactivity or when a message is sent
• Role-based — Client sees freelancer typing and vice versa

User Experience

For the Sender

1. Start typing in the message input field
2. The other user will see a "Typing..." indicator appear
3. Stop typing for 2 seconds — the indicator disappears
4. Send the message — the indicator clears immediately

For the Receiver

1. When the other user types, an animated indicator appears below their last message
2. The indicator shows bouncing dots animation
3. When they stop typing, the indicator fades away
4. When they send a message, the indicator is replaced by the new message

Technical Details

• Broadcasting: Uses Pusher WebSocket on private-chat.{chatId} channel
• Event: user-typing with payload { liveChatId, fromUser, isTyping, senderId }
• Debounce: 2-second timeout before clearing typing status
• Routes:
  • Client: POST /client/live/typing
  • Freelancer: POST /freelancer/live/typing

Configuration

The typing indicator is enabled by default. No additional configuration is required.

To disable the typing indicator, you can modify the chat JavaScript files:

• core/Modules/Chat/Resources/views/components/client/client-chat-js.blade.php
• core/Modules/Chat/Resources/views/components/freelancer/freelancer-chat-js.blade.php

Last updated: September 2026