Spaces:
Sleeping
Sleeping
File size: 3,987 Bytes
964103b | 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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | import { useState } from 'react'
import './App.css'
import { askQuestion, ApiError } from './services/api'
interface Message {
role: 'user' | 'assistant';
content: string;
confidenceExplanation?: string;
responseType?: 'answer' | 'escalation';
}
function App() {
const [messages, setMessages] = useState<Message[]>([]);
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim() || loading) return;
const userMessage: Message = {
role: 'user',
content: input.trim()
};
setMessages(prev => [...prev, userMessage]);
const questionText = input.trim();
setInput('');
setLoading(true);
try {
const response = await askQuestion(questionText);
const assistantMessage: Message = {
role: 'assistant',
content: response.message,
confidenceExplanation: response.confidence_explanation,
responseType: response.response_type
};
setMessages(prev => [...prev, assistantMessage]);
} catch (error) {
console.error('API Error:', error);
let errorMessage = 'Sorry, something went wrong. Please try again.';
if (error instanceof ApiError) {
errorMessage = error.message;
}
const errorResponse: Message = {
role: 'assistant',
content: errorMessage,
confidenceExplanation: 'Error occurred while processing your request',
responseType: 'escalation'
};
setMessages(prev => [...prev, errorResponse]);
} finally {
setLoading(false);
}
};
return (
<div className="chat-container">
<header className="chat-header">
<h1>TaskFlow Support Chat</h1>
<p>Ask questions about TaskFlow features and documentation</p>
</header>
<div className="chat-messages">
{messages.length === 0 && (
<div className="empty-state">
<p>Start a conversation by asking a question below</p>
</div>
)}
{messages.map((message, index) => (
<div
key={index}
className={`message ${message.role} ${message.responseType || ''}`}
>
<div className="message-content">
<strong className="message-role">
{message.role === 'user' ? 'You' : 'Assistant'}
</strong>
<p>{message.content}</p>
{message.confidenceExplanation && (
<div className="confidence-indicator">
<span className="confidence-label">Confidence:</span>
<span className="confidence-text">{message.confidenceExplanation}</span>
</div>
)}
{message.responseType === 'escalation' && (
<div className="escalation-badge">
Escalated to Human Support
</div>
)}
</div>
</div>
))}
{loading && (
<div className="message assistant loading">
<div className="message-content">
<strong className="message-role">Assistant</strong>
<p className="loading-text">Thinking...</p>
</div>
</div>
)}
</div>
<form className="chat-input-form" onSubmit={handleSubmit}>
<input
type="text"
className="chat-input"
placeholder="Ask a question about TaskFlow..."
value={input}
onChange={(e) => setInput(e.target.value)}
disabled={loading}
/>
<button
type="submit"
className="chat-submit"
disabled={loading || !input.trim()}
>
{loading ? 'Sending...' : 'Send'}
</button>
</form>
</div>
)
}
export default App
|