| import { useState } from 'react'; |
| import { Code2, Play, Terminal, Sparkles } from 'lucide-react'; |
| import { chatApi } from '@/services/api'; |
| import ReactMarkdown from 'react-markdown'; |
| import toast from 'react-hot-toast'; |
|
|
| export default function CodePage() { |
| const [prompt, setPrompt] = useState('Write a Python function to parse CSV files and compute row counts.'); |
| const [loading, setLoading] = useState(false); |
| const [codeOutput, setCodeOutput] = useState<string | null>(null); |
|
|
| const handleGenerate = async () => { |
| if (!prompt.trim() || loading) return; |
| setLoading(true); |
| setCodeOutput(null); |
|
|
| const toastId = toast.loading('Code Agent generating solution...'); |
| try { |
| const res = await chatApi.sendMessage(prompt); |
| toast.success('Code generation complete!', { id: toastId }); |
| setCodeOutput(res.response || 'No code generated.'); |
| } catch { |
| toast.error('Code Agent request failed.', { id: toastId }); |
| } finally { |
| setLoading(false); |
| } |
| }; |
|
|
| return ( |
| <div className="p-6 lg:p-8 space-y-6 max-w-5xl mx-auto animate-fade-in"> |
| <div className="flex items-center justify-between"> |
| <div> |
| <h2 className="text-2xl font-bold text-white flex items-center gap-2"> |
| <Code2 size={24} className="text-purple-400" /> |
| Code Engineering Agent |
| </h2> |
| <p className="text-dark-400 text-sm mt-1"> |
| Generate, refactor, review, and explain code scripts in Python, SQL, TypeScript, and Shell. |
| </p> |
| </div> |
| <span className="text-xs px-2.5 py-1 rounded-full bg-purple-500/10 text-purple-400 border border-purple-500/20 font-semibold uppercase tracking-wider"> |
| Active Node |
| </span> |
| </div> |
| |
| <div className="glass-card p-6 space-y-4"> |
| <label className="text-sm font-medium text-dark-200 block"> |
| Describe the code requirement or algorithm to implement: |
| </label> |
| <div className="flex gap-3"> |
| <input |
| type="text" |
| value={prompt} |
| onChange={(e) => setPrompt(e.target.value)} |
| onKeyDown={(e) => e.key === 'Enter' && handleGenerate()} |
| className="input-glow flex-1 px-4 py-3 rounded-xl bg-dark-800 border border-dark-600 text-white placeholder-dark-500 text-sm" |
| /> |
| <button |
| onClick={handleGenerate} |
| disabled={!prompt.trim() || loading} |
| className="flex items-center gap-2 px-5 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold text-sm hover:from-purple-500 hover:to-indigo-500 active:scale-95 transition-all disabled:opacity-50" |
| > |
| {loading ? ( |
| <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> |
| ) : ( |
| <Play size={16} /> |
| )} |
| Generate Code |
| </button> |
| </div> |
| </div> |
| |
| {codeOutput && ( |
| <div className="glass-card p-6 space-y-4"> |
| <h3 className="text-white font-medium text-sm border-b border-dark-700 pb-3 flex items-center gap-2"> |
| <Terminal size={16} className="text-purple-400" /> |
| Generated Code & Explanation |
| </h3> |
| <div className="prose-dark text-sm"> |
| <ReactMarkdown>{codeOutput}</ReactMarkdown> |
| </div> |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
