Branching

Overviews

Branching

Overview

Dialog branching occurs when a user’s message is edited, when the assistant’s response model is changed, or when the assistant’s response is reloaded.

To enable thread branching and the ability to edit messages, pass the enableBracnhes through the props.

Structure

Each message must have a parentId that equals the previous message to which the user/assistant responded. For the first messages in the thread, the parentId should be undefined.

⚠️

Make sure that parentId is set to undefined only for the user’s message. Otherwise, the chat may not work correctly.

Example

In this example, we edited the user message with id 3-1, and from that moment, a new branch of the thread began.

Collapse code

Expand code

<ChatPage
  initialThread={threads[0]}
  threads={threads}
  handleStopMessageStreaming={handleStopMessageStreaming}
  onUserMessageSent={onUserMessageSent}
  enableBracnhes
/>

import * as React from "react";
import {
  ChatPage,
  useAssistantAnswerMock,
  Thread,
} from "@plteam/chat-ui";
import Box from "@mui/material/Box";

const UserMessageEditingExample: React.FC = () => {
  const [threads] = React.useState<Thread[]>([
    {
      id: "test-thread",
      title: "Welcome message",
      messages: [
        {
          id: "1",
          role: "user",
          content: "Hello!",
        },
        {
          id: "2",
          parentId: "1",
          role: "assistant",
          content: "Hello there! How can I assist you today?",
        },
        {
          id: "3-1",
          parentId: "2",
          role: "user",
          content: "Explain gravity in simple terms.",
        },
        {
          id: "4-1",
          parentId: "3-1",
          role: "assistant",
          content: "Sure. Gravity is a pull between masses. It makes apples fall. It keeps us on the ground.",
        },
        {
          id: "5-1-1",
          parentId: "4-1",
          role: "user",
          content: "Got it. Can you do a quick math problem? What's 12% of 250?",
        },
        {
          id: "6-1-1",
          parentId: "5-1-1",
          role: "assistant",
          content: "Yes. Multiply 250 by 0.12. The answer is 30.",
        },
        // User message 3-1 has been edited, creating a branch.
        {
          id: "3-2",
          parentId: "2",
          role: "user",
          content: "Let's talk about healthy eating.",
        },
        {
          id: "4-2",
          parentId: "3-2",
          role: "assistant",
          content: "Great choice. What do you need help with?",
        },
        {
          id: "5-2-1",
          parentId: "4-2",
          role: "user",
          content: "I need simple dinner ideas.",
        },
        {
          id: "6-2-1",
          parentId: "5-2-1",
          role: "assistant",
          content: "How about grilled chicken with veggies?",
        },
      ],
    },
  ]);

  const { onUserMessageSent, handleStopMessageStreaming } =
    useAssistantAnswerMock();

  return (
    <Box height={"100dvh"} width={"100dvw"}>
      <ChatPage
        initialThread={threads[0]}
        threads={threads}
        handleStopMessageStreaming={handleStopMessageStreaming}
        onUserMessageSent={onUserMessageSent}
        enableBracnhes
      />
    </Box>
  );
}

export default UserMessageEditingExample;

Awaiting Response Chat Constructor