"use client"; import { Checkpoint, CheckpointIcon, CheckpointTrigger, } from "@/components/ai-elements/checkpoint"; import { CodeBlock } from "@/components/ai-elements/code-block"; import { Conversation, ConversationContent } from "@/components/ai-elements/conversation"; import { FileTree, FileTreeFile, FileTreeFolder, } from "@/components/ai-elements/file-tree"; import { Message, MessageContent, MessageResponse, } from "@/components/ai-elements/message"; import { Plan, PlanAction, PlanContent, PlanDescription, PlanHeader, PlanTitle, PlanTrigger, } from "@/components/ai-elements/plan"; import type { PromptInputMessage } from "@/components/ai-elements/prompt-input"; import { PromptInput, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, } from "@/components/ai-elements/prompt-input"; import { Queue, QueueItem, QueueItemContent, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger, } from "@/components/ai-elements/queue"; import { Task, TaskContent, TaskItemFile, TaskTrigger, } from "@/components/ai-elements/task"; import { Terminal, TerminalContent } from "@/components/ai-elements/terminal"; import { cn } from "@/lib/utils"; import { CheckCircle2Icon, ListTodoIcon } from "lucide-react"; import { nanoid } from "nanoid"; import { useCallback, useEffect, useState } from "react"; import type { BundledLanguage } from "shiki"; // Types interface MockFile { path: string; name: string; language: BundledLanguage; content: string; } interface MessageType { key: string; from: "user" | "assistant"; content: string; } interface TaskItem { id: string; title: string; status: "pending" | "in_progress" | "completed"; } // Mock file contents const mockFiles: MockFile[] = [ { content: `import { useState } from "react"; import { Button } from "./components/button"; import { Input } from "./components/input"; import { validateForm } from "./utils/helpers"; export function App() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [errors, setErrors] = useState([]); const handleSubmit = () => { const validation = validateForm({ name, email }); if (!validation.isValid) { setErrors(validation.errors); return; } console.log("Form submitted:", { name, email }); }; return (

Contact Form

setName(e.target.value)} /> setEmail(e.target.value)} /> {errors.map((error) => (

{error}

))}

); }`, language: "tsx", name: "app.tsx", path: "src/app.tsx", }, { content: `import { forwardRef, type ButtonHTMLAttributes } from "react"; import { cn } from "../utils/helpers"; interface ButtonProps extends ButtonHTMLAttributes { variant?: "primary" | "secondary" | "ghost"; size?: "sm" | "md" | "lg"; } export const Button = forwardRef( ({ className, variant = "primary", size = "md", ...props }, ref) => { return (

Misc - Cursor Blocks

Select an Item to view its code