|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { useState, useRef, useEffect } from "react"; |
| 4 | +import { useSearchParams } from "next/navigation"; |
| 5 | +import { Button } from "@/components/ui/button"; |
| 6 | +import { Input } from "@/components/ui/input"; |
| 7 | +import { ScrollArea } from "@/components/ui/scroll-area"; |
| 8 | +import { Badge } from "@/components/ui/badge"; |
| 9 | +import { Send, StopCircle, Github, MessageSquare } from "lucide-react"; |
| 10 | +import { UserMessage } from "@/components/chat/user-message"; |
| 11 | +import { AiMessage } from "@/components/chat/ai-message"; |
| 12 | +import { ToolCard } from "@/components/chat/tool-card"; |
| 13 | + |
| 14 | +type Message = { |
| 15 | + id: string; |
| 16 | + type: "user" | "ai" | "tool"; |
| 17 | + content: string; |
| 18 | + toolName?: string; |
| 19 | + toolInput?: any; |
| 20 | + toolResult?: string; |
| 21 | + timestamp: Date; |
| 22 | +}; |
| 23 | + |
| 24 | +const mockMessages: Message[] = [ |
| 25 | + { |
| 26 | + id: "1", |
| 27 | + type: "user", |
| 28 | + content: "What are the main features of this repository?", |
| 29 | + timestamp: new Date(Date.now() - 120000), |
| 30 | + }, |
| 31 | + { |
| 32 | + id: "2", |
| 33 | + type: "tool", |
| 34 | + content: "", |
| 35 | + toolName: "Read", |
| 36 | + toolInput: { file_path: "/README.md" }, |
| 37 | + toolResult: `# Next.js |
| 38 | +
|
| 39 | +Next.js is a React framework for building full-stack web applications. |
| 40 | +
|
| 41 | +## Main Features |
| 42 | +
|
| 43 | +- **App Router**: A new router with support for layouts, nested routing, and more. |
| 44 | +- **Server Components**: React Server Components for improved performance. |
| 45 | +- **Data Fetching**: Simplified data fetching with async/await in Server Components. |
| 46 | +- **Styling**: Support for CSS Modules, Tailwind CSS, and CSS-in-JS. |
| 47 | +- **Optimizations**: Automatic image, font, and script optimizations. |
| 48 | +- **TypeScript**: Built-in TypeScript support. |
| 49 | +
|
| 50 | +## Getting Started |
| 51 | +
|
| 52 | +\`\`\`bash |
| 53 | +npx create-next-app@latest |
| 54 | +\`\`\` |
| 55 | +
|
| 56 | +## Learn More |
| 57 | +
|
| 58 | +Visit [nextjs.org](https://nextjs.org) to learn more.`, |
| 59 | + timestamp: new Date(Date.now() - 115000), |
| 60 | + }, |
| 61 | + { |
| 62 | + id: "3", |
| 63 | + type: "tool", |
| 64 | + content: "", |
| 65 | + toolName: "Grep", |
| 66 | + toolInput: { pattern: "export.*function", glob: "**/*.ts", output_mode: "files_with_matches" }, |
| 67 | + toolResult: `packages/next/src/server/app-render.tsx |
| 68 | +packages/next/src/server/base-server.ts |
| 69 | +packages/next/src/client/components/app-router.tsx |
| 70 | +packages/next/src/build/webpack/loaders/next-app-loader.ts |
| 71 | +packages/next/src/server/lib/render-server.ts |
| 72 | +[...25 more files]`, |
| 73 | + timestamp: new Date(Date.now() - 110000), |
| 74 | + }, |
| 75 | + { |
| 76 | + id: "4", |
| 77 | + type: "ai", |
| 78 | + content: `Based on the README and codebase structure, here are the main features of this repository: |
| 79 | +
|
| 80 | +**Core Features:** |
| 81 | +
|
| 82 | +1. **App Router** - A new routing system with support for layouts, nested routes, and loading UI |
| 83 | +2. **React Server Components** - Enables server-side rendering with reduced client-side JavaScript |
| 84 | +3. **Simplified Data Fetching** - Uses async/await directly in components |
| 85 | +4. **Built-in Optimizations** - Automatic image, font, and script optimizations for better performance |
| 86 | +5. **Styling Flexibility** - Support for CSS Modules, Tailwind CSS, Sass, and CSS-in-JS solutions |
| 87 | +6. **TypeScript Support** - First-class TypeScript integration out of the box |
| 88 | +
|
| 89 | +The codebase shows extensive server-side rendering capabilities and a robust build system. The App Router implementation spans across multiple modules handling routing, rendering, and webpack integration.`, |
| 90 | + timestamp: new Date(Date.now() - 105000), |
| 91 | + }, |
| 92 | +]; |
| 93 | + |
| 94 | +export default function ChatPage() { |
| 95 | + const searchParams = useSearchParams(); |
| 96 | + const repo = searchParams.get("repo") || ""; |
| 97 | + const [messages, setMessages] = useState<Message[]>(mockMessages); |
| 98 | + const [input, setInput] = useState(""); |
| 99 | + const [isRunning, setIsRunning] = useState(false); |
| 100 | + const scrollRef = useRef<HTMLDivElement>(null); |
| 101 | + |
| 102 | + const repoName = repo.split("/").slice(-2).join("/").replace(".git", ""); |
| 103 | + |
| 104 | + useEffect(() => { |
| 105 | + if (scrollRef.current) { |
| 106 | + scrollRef.current.scrollTop = scrollRef.current.scrollHeight; |
| 107 | + } |
| 108 | + }, [messages]); |
| 109 | + |
| 110 | + const handleSend = () => { |
| 111 | + if (!input.trim() || isRunning) return; |
| 112 | + |
| 113 | + const newMessage: Message = { |
| 114 | + id: Date.now().toString(), |
| 115 | + type: "user", |
| 116 | + content: input, |
| 117 | + timestamp: new Date(), |
| 118 | + }; |
| 119 | + |
| 120 | + setMessages((prev) => [...prev, newMessage]); |
| 121 | + setInput(""); |
| 122 | + setIsRunning(true); |
| 123 | + |
| 124 | + setTimeout(() => { |
| 125 | + const aiResponse: Message = { |
| 126 | + id: (Date.now() + 1).toString(), |
| 127 | + type: "ai", |
| 128 | + content: "This is a demo. In a real implementation, the AI would analyze the repository and provide insights based on the codebase.", |
| 129 | + timestamp: new Date(), |
| 130 | + }; |
| 131 | + setMessages((prev) => [...prev, aiResponse]); |
| 132 | + setIsRunning(false); |
| 133 | + }, 2000); |
| 134 | + }; |
| 135 | + |
| 136 | + const handleAbort = () => { |
| 137 | + setIsRunning(false); |
| 138 | + }; |
| 139 | + |
| 140 | + return ( |
| 141 | + <div className="flex flex-col h-screen bg-background"> |
| 142 | + <header className="border-b px-6 py-4 flex items-center gap-3"> |
| 143 | + <Github className="w-5 h-5" /> |
| 144 | + <div className="flex items-center gap-2 flex-1"> |
| 145 | + <span className="font-semibold">{repoName || "Repository"}</span> |
| 146 | + {repo && ( |
| 147 | + <Badge variant="secondary" className="font-normal"> |
| 148 | + <a |
| 149 | + href={repo} |
| 150 | + target="_blank" |
| 151 | + rel="noopener noreferrer" |
| 152 | + className="hover:underline" |
| 153 | + > |
| 154 | + {repo} |
| 155 | + </a> |
| 156 | + </Badge> |
| 157 | + )} |
| 158 | + </div> |
| 159 | + </header> |
| 160 | + |
| 161 | + <ScrollArea className="flex-1 px-6" ref={scrollRef}> |
| 162 | + <div className="max-w-4xl mx-auto py-6 space-y-6"> |
| 163 | + {messages.length === 0 ? ( |
| 164 | + <div className="text-center text-muted-foreground py-12"> |
| 165 | + <MessageSquare className="w-12 h-12 mx-auto mb-4 opacity-50" /> |
| 166 | + <p className="text-lg">Ask a question about this repository</p> |
| 167 | + </div> |
| 168 | + ) : ( |
| 169 | + messages.map((message) => { |
| 170 | + if (message.type === "user") { |
| 171 | + return <UserMessage key={message.id} content={message.content} />; |
| 172 | + } else if (message.type === "ai") { |
| 173 | + return <AiMessage key={message.id} content={message.content} />; |
| 174 | + } else if (message.type === "tool") { |
| 175 | + return ( |
| 176 | + <ToolCard |
| 177 | + key={message.id} |
| 178 | + toolName={message.toolName!} |
| 179 | + toolInput={message.toolInput} |
| 180 | + toolResult={message.toolResult} |
| 181 | + timestamp={message.timestamp} |
| 182 | + /> |
| 183 | + ); |
| 184 | + } |
| 185 | + return null; |
| 186 | + }) |
| 187 | + )} |
| 188 | + |
| 189 | + {isRunning && ( |
| 190 | + <div className="flex items-center gap-2 text-muted-foreground"> |
| 191 | + <div className="flex gap-1"> |
| 192 | + <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: "0ms" }} /> |
| 193 | + <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: "150ms" }} /> |
| 194 | + <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: "300ms" }} /> |
| 195 | + </div> |
| 196 | + <span className="text-sm">AI is thinking...</span> |
| 197 | + </div> |
| 198 | + )} |
| 199 | + </div> |
| 200 | + </ScrollArea> |
| 201 | + |
| 202 | + <div className="border-t px-6 py-4"> |
| 203 | + <div className="max-w-4xl mx-auto"> |
| 204 | + <form |
| 205 | + onSubmit={(e) => { |
| 206 | + e.preventDefault(); |
| 207 | + handleSend(); |
| 208 | + }} |
| 209 | + className="flex gap-2" |
| 210 | + > |
| 211 | + <Input |
| 212 | + value={input} |
| 213 | + onChange={(e) => setInput(e.target.value)} |
| 214 | + placeholder="Ask a question about this repository..." |
| 215 | + className="flex-1" |
| 216 | + disabled={isRunning} |
| 217 | + /> |
| 218 | + {isRunning ? ( |
| 219 | + <Button |
| 220 | + type="button" |
| 221 | + variant="destructive" |
| 222 | + onClick={handleAbort} |
| 223 | + className="gap-2" |
| 224 | + > |
| 225 | + <StopCircle className="w-4 h-4" /> |
| 226 | + Abort |
| 227 | + </Button> |
| 228 | + ) : ( |
| 229 | + <Button type="submit" disabled={!input.trim()} className="gap-2"> |
| 230 | + <Send className="w-4 h-4" /> |
| 231 | + Send |
| 232 | + </Button> |
| 233 | + )} |
| 234 | + </form> |
| 235 | + </div> |
| 236 | + </div> |
| 237 | + </div> |
| 238 | + ); |
| 239 | +} |
0 commit comments