Typing presencePro

Who is typing, as a line of text in the composer footer, with agents described by what they are doing.

Markdown

On this page

ProTeammates and an agent type in a shared thread; the composer footer says who, in words.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/typing-presence

Usage

tsx

import { TypingPresence } from "@/components/ui/chatcn/pro/typing-presence"

<TypingPresence
  typers={[
    { id: "tomasz", name: "Tomasz Wielgus" },
    { id: "ledger", name: "Ledger", kind: "agent", activity: "checking the payout" },
  ]}
  fallback="Enter to send, Shift Enter for a new line"
/>

No bouncing dots: the line says it. People go by their first name ("Tomasz and Noor are typing"), agents by what they do ("Ledger is checking the payout"), and past three names the tail becomes a count. Raw typing signals are noisy, so someone shows only after delay and stays for linger after they stop; the footer changes when the situation changes, not on every key. The line keeps its height whether or not anyone types and shows fallback (the send hint, a character count) when nobody does. The viewer is always left out.

Examples

States

ProOne person, two, five, an agent at work, mixed, nobody, no avatars and a narrow footer.

Props

Prop	Type	Notes
`typers`	`(CollabMember & { activity? })[]`	Who is typing now
`CollabMember`	`{ id, name, kind?, avatar?, mark?, role?, you? }`	`kind: "agent"` draws a squircle and the agent label; `mark` is the provider mark you supply
`fallback`	`ReactNode`	Shown when nobody types
`delay`, `linger`	`number`	Ms. Default 300 and 1500
`avatars`	`boolean`	16 px avatars before the names. Default true
`fullNames`	`boolean`	Use full names for people. Default false
`locale`	`string`	Names join with `Intl.ListFormat`
`labels`	`Partial<TypingPresenceLabels>`	Every string, for translation

Labels

labels.typing(names, count) and labels.writing(names, count) build the people and agent parts, labels.acting(name, activity) the single agent with an activity, labels.others(count) the overflow and labels.join glues the parts.

Accessibility

A polite status region announces the line when the set of typers changes, never per keystroke.
Avatars are decorative; the names are in the text.

Motion

A new wording rolls up 4 px and fades in over 180 ms. Reduced motion keeps the fade only. Typing is never animated beyond that.