src/App.tsx

  import React from 'react';
import { AgentProvider, useAgent } from './contexts/AgentContext';
import FloatingChat from './components/FloatingChat';
import LandingPage from './components/LandingPage';
import { Box, CssBaseline, ThemeProvider } from '@mui/material';
import theme from './theme';

  function App() {
    return (
      <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ bgcolor: 'background.paper', minHeight: '100vh' }}>
        <AgentProvider>
          <AppContent />
        </AgentProvider>
      </Box>
    </ThemeProvider>
  );
}

// Main app content
function AppContent() {
  const { selectedAgent, availableAgents, setSelectedAgent } = useAgent();
  const [showChat, setShowChat] = React.useState(false);

  const handleAgentSelect = (agent: any) => {
    setSelectedAgent(agent);
    setShowChat(true);
  };

  const handleCloseChat = () => {
    setShowChat(false);
    setSelectedAgent(null);
  };

  // Filter out the grapher agent and only show Biz and Lexa
  const displayAgents = availableAgents.filter(
    agent => ['rival-lens', 'lexa-legal'].includes(agent.id)
  );

  return (
    <>
      {!showChat ? (
        <LandingPage 
          agents={displayAgents} 
          onAgentSelect={handleAgentSelect} 
        />
      ) : (
        <FloatingChat onClose={handleCloseChat} />
      )}
    </>
  );
}

export default App;