Message branch is a production-ready ai component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useEffect, useRef, useState } from "react";
import { MessageBranch, SAMPLE_ASSISTANT_VERSIONS, SAMPLE_USER_VERSIONS, type MessageVersion } from "@/components/ui/bjork-message-branch";
const REWRITES = [
"Your drafts now live on your device first. Lose the connection mid-sentence and Fieldnotes simply carries on, then syncs the moment you're back.",
"New: offline drafts. Fieldnotes saves locally and syncs later, so a flaky connection never eats your work.",
"Write without a signal. Fieldnotes keeps drafts on your device and syncs them when you reconnect.",
];
function Demo() {
const [user, setUser] = useState<MessageVersion[]>(SAMPLE_USER_VERSIONS);
const [assistant, setAssistant] = useState<MessageVersion[]>(SAMPLE_ASSISTANT_VERSIONS);
const [writing, setWriting] = useState<{ id: string; text: string; shown: number } | null>(null);
const timers = useRef<number[]>([]);
const rewrites = useRef(0);
useEffect(() => () => timers.current.forEach((t) => window.clearTimeout(t)), []);
// Streams the pending rewrite into the newest assistant version, a few characters per tick.
useEffect(() => {
if (!writing) return;
if (writing.shown >= writing.text.length) {
const id = window.setTimeout(() => {
setAssistant((list) => list.map((v) => (v.id === writing.id ? { ...v, streaming: false } : v)));
setWriting(null);
}, 0);
return () => window.clearTimeout(id);
}
const id = window.setTimeout(() => {
const shown = Math.min(writing.text.length, writing.shown + 4);
setAssistant((list) =>
list.map((v) => (v.id === writing.id ? { ...v, content: writing.text.slice(0, shown) } : v)),
);
setWriting({ ...writing, shown });
}, 28);
return () => window.clearTimeout(id);
}, [writing]);
// A real backend would start a request here. The demo adds an empty streaming version after a short wait.
const startRewrite = () => {
const n = ++rewrites.current;
const t = window.setTimeout(() => {
const id = `rewrite-${n}`;
setAssistant((list) => [...list, { id, content: "", model: "Halcyon 3 Pro", createdAt: Date.now(), streaming: true }]);
setWriting({ id, text: REWRITES[(n - 1) % REWRITES.length], shown: 0 });
}, 900);
timers.current.push(t);
};
return (
<div className="flex w-[min(560px,calc(100vw-56px))] flex-col gap-5">
<MessageBranch
role="user"
versions={user}
onEdit={(content) => {
setUser((list) => [...list, { id: `u${list.length + 1}`, content, createdAt: Date.now() }]);
startRewrite();
}}
/>
<MessageBranch
role="assistant"
versions={assistant}
defaultIndex={1}
onRegenerate={startRewrite}
/>
</div>
);
}
function SourceDemo(){
const [session, setSession] = useState(0);
return <>
<Demo key={session} />
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}