File size: 3,190 Bytes
c9d42cc cce8120 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 'use client';
import React, { useState, useEffect, useRef } from 'react';
import { api } from '../../services/api';
export default function AIChatPanel({ sessionId }) {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);
const chatEndRef = useRef(null);
useEffect(() => {
if (sessionId) {
loadHistory();
}
}, [sessionId]);
const loadHistory = async () => {
try {
const history = await api.getChatHistory(sessionId);
if (Array.isArray(history)) setMessages(history);
} catch (err) {
console.error("Failed to load chat history:", err);
}
};
const handleSend = async (e) => {
e.preventDefault();
if (!input.trim() || !sessionId || loading) return;
const userMessage = { role: 'user', content: input };
setMessages((prev) => [...prev, userMessage]);
const currentPrompt = input;
setInput('');
setLoading(true);
try {
const res = await api.sendChatMessage(sessionId, 'user', currentPrompt);
if (res && res.content) {
setMessages((prev) => [...prev, { role: 'assistant', content: res.content }]);
}
} catch (err) {
setMessages((prev) => [...prev, { role: 'assistant', content: "Error communicating with AI agent." }]);
} finally {
setLoading(false);
chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}
};
return (
<div className="w-80 bg-slate-900 border-l border-slate-800 flex flex-col h-full text-slate-200">
<div className="p-3 border-b border-slate-800 font-semibold text-xs uppercase tracking-wider text-slate-400">
AI Workspace Assistant
</div>
<div className="flex-1 overflow-y-auto p-3 space-y-3 text-sm">
{messages.map((msg, idx) => (
<div
key={idx}
className={`p-3 rounded-lg max-w-[90%] whitespace-pre-wrap ${
msg.role === 'user'
? 'bg-blue-600 text-white ml-auto'
: 'bg-slate-800 border border-slate-700 text-slate-200'
}`}
>
<div className="text-[10px] opacity-60 mb-1 uppercase font-bold">{msg.role}</div>
{msg.content}
</div>
))}
{loading && (
<div className="bg-slate-800 text-slate-400 p-3 rounded-lg text-xs animate-pulse">
AI is thinking & generating code...
</div>
)}
<div ref={chatEndRef} />
</div>
<form onSubmit={handleSend} className="p-3 border-t border-slate-800 flex gap-2">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Ask AI to generate code..."
className="flex-1 bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
/>
<button
type="submit"
disabled={loading}
className="bg-blue-600 hover:bg-blue-500 text-white px-3 py-1.5 rounded text-xs font-medium disabled:opacity-50"
>
Send
</button>
</form>
</div>
);
}
|