src/App.js

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [isConnected, setIsConnected] = useState(false);
  const [messages, setMessages] = useState([]);
  const [inputMessage, setInputMessage] = useState('');
  const [agentType, setAgentType] = useState('intent');
  const [loading, setLoading] = useState(false);
  const [serverUrl, setServerUrl] = useState('http://localhost:8080');

  // Test different agent endpoints
  const agentEndpoints = {
    intent: '/api/intent',
    order: '/api/order',
    support: '/api/support'
  };

  const testServerConnection = async () => {
    try {
      const response = await fetch(`${serverUrl}/health`);
      if (response.ok) {
        setIsConnected(true);
        addMessage('System', 'Connected to AI Agent server');
      } else {
        setIsConnected(false);
        addMessage('System', 'Server not responding');
      }
    } catch (error) {
      setIsConnected(false);
      addMessage('System', `Connection failed: ${error.message}`);
    }
  };

  const addMessage = (sender, content) => {
    setMessages(prev => [...prev, {
      id: Date.now(),
      sender,
      content,
      timestamp: new Date().toLocaleTimeString()
    }]);
  };

  const testAgent = async () => {
    if (!inputMessage.trim()) return;

    setLoading(true);
    addMessage('User', inputMessage);

    try {
      let requestBody;
      
      // Prepare request based on agent type
      switch (agentType) {
        case 'intent':
          requestBody = { query: inputMessage };
          break;
        case 'order':
          requestBody = {
            customerId: 'test-customer-123',
            productId: 'test-product-456',
            quantity: 1,
            paymentMethod: 'card'
          };
          break;
        case 'support':
          requestBody = {
            customerId: 'test-customer-123',
            query: inputMessage,
            channel: 'chat'
          };
          break;
        default:
          requestBody = { query: inputMessage };
      }

      const response = await fetch(`${serverUrl}${agentEndpoints[agentType]}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody)
      });

      const data = await response.json();
      
      if (response.ok) {
        addMessage(`${agentType} Agent`, JSON.stringify(data, null, 2));
      } else {
        addMessage('Error', `Request failed: ${data.error || 'Unknown error'}`);
      }
    } catch (error) {
      addMessage('Error', `Network error: ${error.message}`);
    } finally {
      setLoading(false);
      setInputMessage('');
    }
  };

  const clearMessages = () => {
    setMessages([]);
  };

  useEffect(() => {
    testServerConnection();
  }, [serverUrl]);

  return (
    <div className="App" style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <header style={{ marginBottom: '20px' }}>
        <h1>AI Agent System Tester</h1>
        <div style={{ marginBottom: '10px' }}>
          <label>Server URL: </label>
          <input 
            type="text" 
            value={serverUrl}
            onChange={(e) => setServerUrl(e.target.value)}
            style={{ marginLeft: '10px', padding: '5px', width: '300px' }}
          />
          <button onClick={testServerConnection} style={{ marginLeft: '10px' }}>
            Test Connection
          </button>
        </div>
        <div style={{ 
          padding: '10px', 
          backgroundColor: isConnected ? '#d4edda' : '#f8d7da',
          color: isConnected ? '#155724' : '#721c24',
          borderRadius: '5px'
        }}>
          Status: {isConnected ? 'Connected' : 'Disconnected'}
        </div>
      </header>

      <div style={{ display: 'flex', gap: '20px' }}>
        {/* Control Panel */}
        <div style={{ width: '300px' }}>
          <h3>Test Configuration</h3>
          
          <div style={{ marginBottom: '15px' }}>
            <label>Agent Type:</label>
            <select 
              value={agentType} 
              onChange={(e) => setAgentType(e.target.value)}
              style={{ width: '100%', padding: '5px', marginTop: '5px' }}
            >
              <option value="intent">Intent Agent</option>
              <option value="order">Order Processing Agent</option>
              <option value="support">Customer Support Agent</option>
            </select>
          </div>

          <div style={{ marginBottom: '15px' }}>
            <label>Test Input:</label>
            <textarea
              value={inputMessage}
              onChange={(e) => setInputMessage(e.target.value)}
              placeholder={
                agentType === 'intent' ? 'Enter a query to classify intent...' :
                agentType === 'order' ? 'Order will use test data, but enter description...' :
                'Enter customer support query...'
              }
              style={{ 
                width: '100%', 
                height: '100px', 
                padding: '10px', 
                marginTop: '5px',
                resize: 'vertical'
              }}
            />
          </div>

          <div style={{ marginBottom: '15px' }}>
            <button 
              onClick={testAgent}
              disabled={loading || !isConnected}
              style={{
                width: '100%',
                padding: '10px',
                backgroundColor: loading || !isConnected ? '#ccc' : '#007bff',
                color: 'white',
                border: 'none',
                borderRadius: '5px',
                cursor: loading || !isConnected ? 'not-allowed' : 'pointer'
              }}
            >
              {loading ? 'Testing...' : `Test ${agentType} Agent`}
            </button>
          </div>

          <button 
            onClick={clearMessages}
            style={{
              width: '100%',
              padding: '8px',
              backgroundColor: '#6c757d',
              color: 'white',
              border: 'none',
              borderRadius: '5px',
              cursor: 'pointer'
            }}
          >
            Clear Messages
          </button>

          {/* Quick Test Examples */}
          <div style={{ marginTop: '20px' }}>
            <h4>Quick Tests:</h4>
            <div style={{ fontSize: '12px' }}>
              <div>
                <strong>Intent:</strong> "I want to place an order"
              </div>
              <div style={{ marginTop: '5px' }}>
                <strong>Support:</strong> "My order is delayed"
              </div>
              <div style={{ marginTop: '5px' }}>
                <strong>Order:</strong> Uses test customer data
              </div>
            </div>
          </div>
        </div>

        {/* Messages Panel */}
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <h3>Test Results</h3>
            <span style={{ fontSize: '12px', color: '#666' }}>
              {messages.length} messages
            </span>
          </div>
          
          <div style={{
            height: '500px',
            overflowY: 'auto',
            border: '1px solid #ddd',
            borderRadius: '5px',
            padding: '10px',
            backgroundColor: '#f8f9fa'
          }}>
            {messages.length === 0 ? (
              <p style={{ color: '#666', textAlign: 'center', marginTop: '50px' }}>
                No messages yet. Test an agent to see results.
              </p>
            ) : (
              messages.map(message => (
                <div 
                  key={message.id}
                  style={{
                    marginBottom: '15px',
                    padding: '10px',
                    backgroundColor: message.sender === 'User' ? '#e3f2fd' : 
                                   message.sender === 'System' ? '#fff3e0' :
                                   message.sender === 'Error' ? '#ffebee' : '#f1f8e9',
                    borderRadius: '8px',
                    borderLeft: `4px solid ${
                      message.sender === 'User' ? '#2196f3' :
                      message.sender === 'System' ? '#ff9800' :
                      message.sender === 'Error' ? '#f44336' : '#4caf50'
                    }`
                  }}
                >
                  <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between',
                    marginBottom: '5px'
                  }}>
                    <strong>{message.sender}</strong>
                    <span style={{ fontSize: '12px', color: '#666' }}>
                      {message.timestamp}
                    </span>
                  </div>
                  <div style={{ 
                    whiteSpace: 'pre-wrap',
                    fontFamily: message.content.startsWith('{') ? 'monospace' : 'inherit',
                    fontSize: message.content.startsWith('{') ? '12px' : '14px'
                  }}>
                    {message.content}
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;