'use client'; import { AIBranch, AIBranchMessages, AIBranchNext, AIBranchPage, AIBranchPrevious, AIBranchSelector, } from '@/components/ui/shadcn-io/branch-ai'; import { AIMessage, AIMessageAvatar, AIMessageContent } from '@/components/ui/shadcn-io/message-ai'; const userMessages = [ { id: 1, content: 'What are the key strategies for optimizing React performance?', }, { id: 2, content: 'How can I improve the performance of my React application?', }, { id: 3, content: 'What performance optimization techniques should I use in React?', }, ]; const assistantMessages = [ { id: 1, content: "Here's the first response to your question. This approach focuses on performance optimization.", }, { id: 2, content: "Here's an alternative response. This approach emphasizes code readability and maintainability over pure performance.", }, { id: 3, content: "And here's a third option. This balanced approach considers both performance and maintainability, making it suitable for most use cases.", }, ]; const Example = () => { const handleBranchChange = (branchIndex: number) => { console.log('Branch changed to:', branchIndex); }; return (

{userMessages.map((message) => ( {message.content} ))} {assistantMessages.map((message) => ( {message.content} ))}

); }; export default Example;

AI Branch