GradioInterface.tsx

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>
  );
}