Spaces:
Runtime error
Runtime error
File size: 1,894 Bytes
f3074ed |
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 |
import { useState } from 'react'
import './App.css'
import { chat as chatApi, reset as resetApi } from './api'
function App() {
const [user, setUser] = useState('default')
const [session, setSession] = useState('default')
const [prompt, setPrompt] = useState('')
const [messages, setMessages] = useState([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const sendPrompt = async () => {
if (!prompt.trim()) return
setLoading(true)
setError(null)
try {
const reply = await chatApi(user, session, prompt)
setMessages([...messages, { role: 'user', content: prompt }, { role: 'assistant', content: reply }])
setPrompt('')
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}
const handleReset = async () => {
setLoading(true)
setError(null)
try {
await resetApi(user, session)
setMessages([])
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}
return (
<div className="container">
<h1>LLM Chat</h1>
<div className="controls">
<label>User <input value={user} onChange={e => setUser(e.target.value)} /></label>
<label>Session <input value={session} onChange={e => setSession(e.target.value)} /></label>
<button onClick={handleReset} disabled={loading}>Reset</button>
</div>
<div className="chat-box">
{messages.map((m, i) => (
<div key={i} className={`msg ${m.role}`}>{m.role}: {m.content}</div>
))}
</div>
{error && <div className="error">{error}</div>}
<div className="input-area">
<textarea value={prompt} onChange={e => setPrompt(e.target.value)} rows="3" />
<button onClick={sendPrompt} disabled={loading}>Send</button>
</div>
</div>
)
}
export default App
|