Follow modePro

Follow what a teammate or an agent is viewing; scroll yourself and you take over.

Markdown

On this page

ProFollow an agent through the refund policy as it checks a case; scroll and you take over.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/follow-mode

Usage

tsx

import { FollowMode, FollowMarker } from "@/components/ui/chatcn/pro/follow-mode"

<FollowMode
  members={[
    { ...quill, presence: "working", anchor: "refund-window", location: "Refund window, reading" },
    { ...noor, presence: "here", anchor: "approvals", location: "Approvals" },
  ]}
  defaultFollowing="quill"
>
  <PolicyDocument />
</FollowMode>

Pick someone and the view travels with them: whenever their anchor changes it scrolls that element into view, the frame takes a thin accent edge with their name in the corner, and the bar says where they are in words. Scrolling, clicking or typing in the view means you took over: following stops and the bar offers to follow again. The view's own scrolling never counts as you. Esc stops too. If the followed member leaves, it stops and says so. FollowMarker puts small avatars in the margin of the block each person is on.

Examples

States

ProPicking someone, following with a long location, nobody to follow and after you take over.

Props

Prop	Type	Notes
`members`	`(CollabMember & { presence?, location?, anchor? })[]`	`anchor` is an element id inside the view
`following`, `defaultFollowing`, `onFollowingChange`	`string \| null`	With a reason when it stops
`children`	`ReactNode`	The shared view
`height`	`number \| string`	Default 360
`breakOnInteract`	`boolean`	Default true
`viewportClassName`, `labels`		Styling and every string

Labels

labels covers Follow, following(name), viewing(location), Stop following, the took over and left notices, Follow again, the agent tag, the nobody line and the view's name.

Keyboard

Key	Action
Esc	Stop following
Tab	Into the view (a focusable region), then its content
Arrow keys in the view	Scroll, and take over

Accessibility

The bar is a toolbar; who you follow and where they are is a status line.
The view is a labelled, focusable region so keyboard users can scroll it.
The frame and tag are decorative; the bar says the same in words.

Motion

The view scrolls smoothly to each anchor, instantly under reduced motion. The frame fades in over 200 ms; the location rolls up 4 px when it changes.