Spaces:
Build error
Build error
File size: 2,763 Bytes
8c3e275 | 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 | import { useState, useRef, useEffect } from 'react';
import { Send, Loader2, Bot, User } from 'lucide-react';
import { API_BASE_URL } from '../services/api';
export const ChatPanel = () => {
const [messages, setMessages] = useState<{ sender: 'bot' | 'user'; text: string }[]>([
{ sender: 'bot', text: 'Ask me anything about your notes, tasks, and transcripts.' }
]);
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);
const messagesEndRef = useRef<HTMLDivElement>(null);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
const handleSend = async (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim() || loading) return;
const userMessage = input;
setInput('');
setMessages(prev => [...prev, { sender: 'user', text: userMessage }]);
setLoading(true);
try {
const response = await fetch(`${API_BASE_URL}/chat`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: userMessage }),
});
if (!response.ok) throw new Error('Chat failed');
const data = await response.json();
setMessages(prev => [...prev, { sender: 'bot', text: data.response || 'No response.' }]);
} catch (err) {
setTimeout(() => {
setMessages(prev => [...prev, {
sender: 'bot',
text: `[Offline] Found 3 items related to "${userMessage}" in local records.`
}]);
}, 800);
} finally {
setLoading(false);
}
};
return (
<div className="chat-panel">
<div className="chat-messages">
{messages.map((m, idx) => (
<div key={idx} className={`chat-msg ${m.sender}`}>
{m.sender === 'bot' ? <Bot size={14} style={{ flexShrink: 0, marginTop: 2, color: 'var(--purple)' }} /> : <User size={14} style={{ flexShrink: 0, marginTop: 2, color: 'var(--accent)' }} />}
<span>{m.text}</span>
</div>
))}
{loading && (
<div className="flex items-center gap-2 text-xs text-tertiary" style={{ padding: 8 }}>
<Loader2 size={14} className="animate-spin" /> AI reading context...
</div>
)}
<div ref={messagesEndRef} />
</div>
<form className="chat-input-row" onSubmit={handleSend}>
<input
type="text"
value={input}
onChange={e => setInput(e.target.value)}
placeholder="Ask about notes/tasks..."
className="input"
disabled={loading}
/>
<button type="submit" className="btn btn-primary btn-sm" disabled={loading}>
<Send size={14} />
</button>
</form>
</div>
);
};
|