Spaces:
Configuration error
Configuration error
File size: 3,527 Bytes
eb9b2b9 |
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 |
import React, { useState } from 'react';
import { Upload, MessageSquare } from 'lucide-react';
import { AgentCard } from '../components/AgentCard';
import { ChatMessage } from '../components/ChatMessage';
import { processFile } from '../utils/fileProcessing';
interface Message {
content: string;
sender: 'user' | 'agent';
timestamp: Date;
}
export default function GradioInterface() {
const [messages, setMessages] = useState<Message[]>([]);
const [inputText, setInputText] = useState('');
const [agents] = useState([
{
config: {
name: 'MGA Analyst',
goal: 'Analyze insurance queries and delegate tasks',
backstory: 'Expert executive-director agent'
},
status: 'idle' as const
},
{
config: {
name: 'Underwriter',
goal: 'Evaluate risks and recommend policies',
backstory: 'Expert risk assessor'
},
status: 'idle' as const
}
]);
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
const processedFile = await processFile(file);
setMessages(prev => [...prev, {
content: `File uploaded: ${file.name}`,
sender: 'user',
timestamp: new Date()
}]);
}
};
const handleSendMessage = () => {
if (inputText.trim()) {
setMessages(prev => [...prev, {
content: inputText,
sender: 'user',
timestamp: new Date()
}]);
setInputText('');
}
};
return (
<div className="min-h-screen bg-gray-50">
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-12 gap-6">
<div className="col-span-8 bg-white rounded-lg shadow-lg p-6">
<div className="flex flex-col h-[600px]">
<div className="flex-1 overflow-y-auto mb-4">
{messages.map((msg, idx) => (
<ChatMessage key={idx} {...msg} />
))}
</div>
<div className="flex gap-4">
<label className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer">
<Upload className="w-5 h-5 mr-2" />
Upload File
<input
type="file"
className="hidden"
onChange={handleFileUpload}
accept=".csv,.xls,.doc,.pdf"
/>
</label>
<input
type="text"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
className="flex-1 px-4 py-2 border rounded-lg"
placeholder="Type your message..."
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
/>
<button
onClick={handleSendMessage}
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg"
>
<MessageSquare className="w-5 h-5 mr-2" />
Send
</button>
</div>
</div>
</div>
<div className="col-span-4 bg-white rounded-lg shadow-lg p-6">
<h2 className="text-xl font-bold mb-4">Agent Status</h2>
{agents.map((agent, idx) => (
<AgentCard key={idx} {...agent} />
))}
</div>
</div>
</div>
</div>
);
} |