{"slug":"conversation-branches","category":"messages","job":"steer","added":"2026-11-07T23:13Z","title":"Conversation Branches","description":"Editing a sent message creates a new branch instead of overwriting it, with a ‹ 2 / 3 › switcher that swaps the message and its reply together.","url":"https://ai-patterns.app/patterns/messages/conversation-branches","markdown":"https://ai-patterns.app/patterns/messages/conversation-branches.md","json":"https://ai-patterns.app/api/patterns/messages/conversation-branches","seenIn":[{"team":"chatgpt","source":"https://help.openai.com/en/articles/6825453-chatgpt-release-notes"}],"spec":"# Conversation Branches\n\n## Summary\nEditing a message that has already been sent creates a new branch of the conversation instead of overwriting it. A small ‹ 2 / 3 › switcher under the message moves between versions, and the assistant's reply follows whichever version is shown. People can explore a different phrasing without losing an answer they liked.\n\n## When to use\n- Chat assistants where people often rephrase a question to get a better answer.\n- Exploratory work — naming, copy, ideas — where earlier answers stay useful after trying another angle.\n- Any product that lets people edit sent messages: branching makes the edit safe to try.\n\n## When not to use\n- Comparing two answers to the same prompt side by side — use Response Compare.\n- Small adjustments to an answer (shorter, more formal) — use Refinement Controls, which don't change the prompt.\n- Linear records where history must not fork, such as support tickets or audit trails.\n\n## Anatomy\n- User message with an edit button (shown on hover, always visible on touch).\n- Inline editor: the message text, a note that the original is kept, Cancel and Send.\n- Version switcher: previous, \"2 / 3\", next — shown once there is more than one version.\n- Reply area: the assistant's reply for the active version, with a placeholder while it is generated.\n\n## Behavior\n- Editing opens the message in place; Enter or Send creates a new branch and switches to it, Escape or Cancel leaves everything as it was. An unchanged or empty edit does nothing.\n- The new branch shows a loading placeholder until its reply arrives; earlier branches keep their replies.\n- Previous and next slide the message and reply together in the direction of travel, so it's clear the whole turn changed.\n- Retry and Regenerate add a version the same way, with the same prompt and a new reply.\n- Everything after the edited message belongs to its branch: switching versions swaps the rest of the conversation too.\n- The host keeps the active version for each message, and new messages continue from the version on screen.\n\n## Content guidelines\n- Tell people the original is kept (\"Sends as a new branch — the original is kept\"), so editing doesn't feel destructive.\n- Keep the counter terse: \"2 / 3\". Don't name versions.\n- Label the edit action \"Edit message\", not \"Regenerate\" — it changes the question, not just the answer.\n\n## Accessibility\n- Edit, previous and next are buttons with accessible names; previous and next are disabled at the ends.\n- The counter reads as \"Version 2 of 3\" to screen readers and is announced when it changes.\n- The reply area is `aria-busy` while a branch is generating.\n- The slide is skipped when the user prefers reduced motion; the counter still marks the change.\n\n## Related patterns\n- **Response Compare** — Use it instead to see two answers to the same prompt side by side.\n- **Refinement Controls** — Use it instead to tweak an answer without rewriting the question.\n- **Chat Bubble with Actions** — Use it as well; its action row hosts the edit button and this version switcher next to copy and feedback.\n- **Prompt Enhancer** — Use it as well to rewrite the prompt before sending it as a new branch.\n","code":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { ChevronLeft, ChevronRight, Pencil } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface Branch {\n id: string;\n prompt: string;\n /** Undefined while the reply for this branch is still being generated. */\n response?: React.ReactNode;\n}\n\nexport interface ConversationBranchesProps {\n branches: Branch[];\n /** Index of the branch on screen. */\n active: number;\n onActiveChange: (index: number) => void;\n /** Called with the edited prompt; the host appends a new branch and makes it active. */\n onEdit: (prompt: string) => void;\n className?: string;\n}\n\nexport function ConversationBranches({ branches, active, onActiveChange, onEdit, className }: ConversationBranchesProps) {\n const [editing, setEditing] = React.useState(false);\n const [draft, setDraft] = React.useState(\"\");\n const [direction, setDirection] = React.useState(1);\n const reduceMotion = useReducedMotion();\n const branch = branches[active];\n const pending = branch?.response === undefined;\n\n function go(index: number) {\n if (index < 0 || index >= branches.length || index === active) return;\n setDirection(index > active ? 1 : -1);\n onActiveChange(index);\n }\n\n function startEdit() {\n setDraft(branch.prompt);\n setEditing(true);\n }\n\n function save() {\n const text = draft.trim();\n setEditing(false);\n if (!text || text === branch.prompt) return;\n setDirection(1);\n onEdit(text);\n }\n\n if (!branch) return null;\n\n const slide = reduceMotion ? 0 : 16;\n\n return (\n
\n {/* The user's turn: the part that branches. */}\n