Scripted Chat Thread

Turns a written conversation script into a chat screen that plays itself — handy for landing pages, feature tours or walking through a support flow. User messages spring in from the bottom right with a slight overshoot; before each assistant reply a three-dot typing indicator appears, then the bubble springs in from the left and the text streams character by character, while an attached code block appears line by line with line numbers and a copy button. Playback starts once the thread enters the viewport and auto-scrolls to the bottom as content arrives; turn on loop to fade out, clear and start over after each run. Optionally wrap it in a simplified CSS phone shell with frame="phone".

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ScriptedChatThread/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/scripted-chat-thread.en.json

Usage

import { ScriptedChatThread } from "@/components/ui/scripted-chat-thread";

<ScriptedChatThread
  frame="phone"
  loop
  messages={[
    { role: "user", content: "My order was placed three days ago and still hasn't shipped" },
    { role: "assistant", content: "Sorry for the wait! Could you share your order number?" },
    { role: "user", content: "#BK20261025" },
    {
      role: "assistant",
      typingMs: 1200,
      content: "It has been picked and should ship tomorrow. Lookup example:",
      code: {
        lang: "ts",
        text: 'const res = await fetch("https://api.example.com/v1/orders/BK20261025");',
      },
    },
  ]}
  onComplete={() => console.log("finished")}
/>

To control playback yourself, pass a ref to get restart():

const threadRef = React.useRef<ScriptedChatThreadHandle>(null);

<ScriptedChatThread ref={threadRef} autoplay={false} messages={script} />
<button onClick={() => threadRef.current?.restart()}>Replay</button>

Props

ScriptedChatMessage

ScriptedChatCode

ScriptedChatSpring

ScriptedChatThreadHandle

How it works

• Pacing: a user bubble springs in, then holds for 400ms; an assistant reply first shows the typing indicator for typingMs, then streams its text (charMs per character) and its code line by line (charMs × 8 per line); messages are separated by gapMs.
• Auto-scroll: the thread only follows new content when the reader is already at the bottom (within 24px); scrolling up pauses following and shows a small "Jump to latest" button that returns to the bottom and resumes.
• messages is compared by content, so an inline array does not restart playback when the parent re-renders.
• CSS variables: --wb-sct-char-ms sets the default streaming speed (the charMs prop wins), and --wb-sct-accent sets the accent color of the avatar and cursor.
• You can nest this component inside chat-scroller, but neither depends on the other; this component already has its own scroll-to-bottom and "Jump to latest" behavior.

Accessibility

• The scroll container is role="log" with aria-live="polite", named by ariaLabel (default "Conversation demo")
• Partial streaming text is hidden from assistive tech; only once a message completes is its full text (with the speaker) placed in a readable node, so screen readers do not read it out character by character
• The typing indicator carries an sr-only "Typing" label; the code copy button, "Jump to latest" and "Play conversation" are all type="button" with a visible focus ring
• When the system "reduce motion" setting is on, there is no spring-in, no streaming and no typing indicator — every message appears at once with a 150ms fade, and onComplete fires immediately