Update src/App.js

src/App.js

@@ -1,25 +1,288 @@
-import logo from './logo.svg';
+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">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <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;
+export default App;