Chat features

These make the chat feel alive for the person writing and for you. Most work out of the box; the ones that store data need one database script, listed below.

Typing and Seen

Both sides see an animated typing bubble while the other types. Your last reply shows Delivered, then Seen once the visitor has opened it. Needs supabase/migrations/0006_live_chat.sql.

Unread badge on the chat icon

When you reply and the visitor has the chat closed, the chat button shows a red number. It resets when they open the chat, and survives restarts. On the web it is built in. In the mobile SDKs OctokanChatButton shows it, and you can read the same number to badge your own icon:

// React Native
const unread = useOctokanUnread();

// Flutter
ValueListenableBuilder<int>(valueListenable: Octokan.unread, builder: (_, n, __) => Badge(label: Text('$n')))

// Android (Compose)
Octokan.watchUnread()
val n by Octokan.unread.collectAsState()   // or OctokanUnreadBadge()

// iOS (SwiftUI)
@ObservedObject var unread = OctokanUnread.shared   // unread.count

Photos, files and voice notes

On the web chat, visitors and you can attach photos, PDFs, text, zip and Office files up to 10 MB, and record voice notes. Files are stored in a private bucket and shown through short-lived links. Needs supabase/migrations/0007_attachments_nicknames.sql.

In the mobile SDKs, attachments from support appear in the chat and open when tapped. In Expo apps, visitors can send a photo from React Native: the setup command installs expo-image-picker for you and a paperclip appears in the chat. Sending from Flutter, Android and iOS is next.

Nicknames and emoji avatars

Every visitor gets an emoji and a soft color automatically, so people are easy to tell apart. Click a visitor's name in the inbox to give them a nickname (for example "Ada from the pricing page") and pick a different icon. Only you see these, and the nickname appears in Telegram and email alerts. Needs migration 0007.