"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, memo, useCallback, useState } from "react"; interface MessageType { id: string; role: "user" | "assistant"; content: string; } const initialMessages: MessageType[] = [ { content: "What is React?", id: nanoid(), role: "user", }, { 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: "assistant", }, { content: "How does component state work?", id: nanoid(), role: "user", }, ]; interface CheckpointItemProps { checkpoint: { messageCount: number; timestamp: Date }; onRestore: (messageCount: number) => void; } const CheckpointItem = memo( ({ checkpoint, onRestore }: CheckpointItemProps) => { const handleClick = useCallback( () => onRestore(checkpoint.messageCount), [onRestore, checkpoint.messageCount] ); return ( Restore checkpoint ); } ); CheckpointItem.displayName = "CheckpointItem"; const Example = () => { const [messages, setMessages] = useState(initialMessages); const [checkpoints] = useState([ { messageCount: 2, timestamp: new Date(Date.now() - 3_600_000) }, ]); const handleRestore = useCallback((messageCount: number) => { setMessages(initialMessages.slice(0, messageCount)); }, []); return (

{messages.map((message, index) => { const checkpoint = checkpoints.find( (cp) => cp.messageCount === index + 1 ); return ( {message.content} {checkpoint && ( )} ); })}

); }; export default Example;

Ai - Checkpoint Blocks

Select an Item to view its code