Checkpoint Example

"use client";

import {
  Checkpoint,
  CheckpointIcon,
  CheckpointTrigger,
} from "@/components/ai-elements/checkpoint";
import { Conversation, ConversationContent } from "@/components/ai-elements/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import { nanoid } from "nanoid";
import { Fragment, useState } from "react";

type MessageType = {
  id: string;
  role: "user" | "assistant";
  content: string;
};

const initialMessages: MessageType[] = [
  {
    id: nanoid(),
    role: "user",
    content: "What is React?",
  },
  {
    id: nanoid(),
    role: "assistant",
    content:
      "React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Meta and a community of developers.",
  },
  {
    id: nanoid(),
    role: "user",
    content: "How does component state work?",
  },
];

const Example = () => {
  const [messages, setMessages] = useState<MessageType[]>(initialMessages);
  const [checkpoints] = useState([
    { messageCount: 2, timestamp: new Date(Date.now() - 3_600_000) },
  ]);

  const handleRestore = (messageCount: number) => {
    setMessages(initialMessages.slice(0, messageCount));
  };

  return (
    <div className="flex size-full flex-col rounded-lg border p-6">
      <Conversation>
        <ConversationContent>
          {messages.map((message, index) => {
            const checkpoint = checkpoints.find(
              (cp) => cp.messageCount === index + 1
            );

            return (
              <Fragment key={message.id}>
                <Message from={message.role}>
                  <MessageContent>
                    <MessageResponse>{message.content}</MessageResponse>
                  </MessageContent>
                </Message>
                {checkpoint && (
                  <Checkpoint>
                    <CheckpointIcon />
                    <CheckpointTrigger
                      onClick={() => handleRestore(checkpoint.messageCount)}
                      tooltip="Restores workspace and chat to this point"
                    >
                      Restore checkpoint
                    </CheckpointTrigger>
                  </Checkpoint>
                )}
              </Fragment>
            );
          })}
        </ConversationContent>
      </Conversation>
    </div>
  );
};

export default Example;