adding updated agent arena frontend to gorilla repository

ShishirPatil · Sep 29, 2024 · a4ca82b · a4ca82b
1 parent ba19031
commit a4ca82b
Show file tree

Hide file tree

Showing 22 changed files with 4,895 additions and 625 deletions.
diff --git a/agent-arena/client/.gitignore b/agent-arena/client/.gitignore
@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 .DS_Store
 
+.env
diff --git a/agent-arena/client/package-lock.json b/agent-arena/client/package-lock.json
diff --git a/agent-arena/client/package.json b/agent-arena/client/package.json
@@ -3,22 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@uiw/codemirror-theme-material": "^4.23.2",
+    "@uiw/react-codemirror": "^4.23.2",
+    "@vercel/analytics": "^1.3.1",
     "ace-builds": "^1.35.2",
+    "ansi_up": "^6.0.2",
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
     "bootstrap-dark": "^1.0.3",
     "bootswatch": "^5.3.3",
+    "dompurify": "^3.1.6",
     "react": "^18.0.0",
     "react-ace": "^12.0.0",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.0.0",
+    "react-icons": "^5.3.0",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.0.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.8.0",
+    "react-terminal-ui": "^1.3.0",
     "react-toastify": "^10.0.5",
+    "sanitize-html": "^2.13.0",
     "styled-components": "^6.1.12",
     "web-vitals": "^2.1.4"
   },

diff --git a/agent-arena/client/public/agents_desc.txt b/agent-arena/client/public/agents_desc.txt
diff --git a/agent-arena/client/public/agents_list.txt b/agent-arena/client/public/agents_list.txt
@@ -0,0 +1,53 @@
+langchain brave-search agent
+langchain google-serper search agent
+langchain alpha-vantage stock agent
+sql agent plotter langchain
+sql agent plotter llamaindex
+openai assistant customer support chatbot
+langchain Google Jobs
+langchain ArXiv Article Fetcher
+openai assistant code interpreter
+openai assistant function calling
+openai general assistant
+anthropic pdf upload summarization
+anthropic web page reader
+anthropic sql query
+langchain You.com Search
+anthropic calculator tool
+anthropic customer service agent
+langchain Pandas DataFrame
+langchain Wolfram Alpha
+langchain NASA Toolkit
+langchain Yahoo Finance News
+langchain OpenWeatherMap
+langchain GraphQL API Integration
+crewai AI Crew for Game Building
+crewai AI Crew for Trip Planning
+crewai Meeting Preparation Agent Crew
+langchain Gmail Toolkit
+langchain Python REPL
+langchain JSON Toolkit
+langchain Google Lens
+langchain Shell
+langchain Wikipedia
+langchain PubMed Biomedical Literature Tool
+langchain YouTube Search
+langchain Golden Query Integration
+langchain AskNews
+langchain Tavily Search
+langchain Eden AI Integration
+langchain Exa Search Integration
+langchain Dall-E Image Generator
+langchain Riza Code Interpreter
+llamaindex ArXiv Article Fetcher
+llamaindex OpenWeatherMap
+llamaindex Exa Search Integration
+llamaindex Yahoo Finance News
+llamaindex brave-search agent
+llamaindex GraphQL API Integration
+llamaindex Wolfram Alpha
+llamaindex Tavily Research Tool
+llamaindex code interpreter
+llamaindex wikipedia
+llamaindex OpenAPI Tool
+llamaindex Yelp Tool
diff --git a/agent-arena/client/public/dark-theme.css b/agent-arena/client/public/dark-theme.css
@@ -77,3 +77,28 @@ select.form-control:focus {
   color: #ffffff;
   border: none;
 }
+
+.accordion-item {
+  background-color: #2e2e31;
+  border: none;
+}
+
+.accordion-button {
+  background-color: #28293d;
+  color: #b3b3b3;
+}
+
+.accordion-button:not(.collapsed) {
+  background-color: #4a90e2; /* Muted blue for active item */
+  color: #ffffff;
+}
+
+.accordion-body {
+  background-color: #34396d;
+  color: #b3b3b3;
+  border: none;
+}
+
+.accordion-button:focus {
+  box-shadow: none;
+}
diff --git a/agent-arena/client/public/index.html b/agent-arena/client/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Run and Rate LLM Agents"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

diff --git a/agent-arena/client/src/App.js b/agent-arena/client/src/App.js
@@ -1,24 +1,32 @@
-import React, { useState, useEffect, createContext, useCallback } from 'react';
-import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import React, { useState, useEffect, createContext, useCallback, useContext } from 'react';
+import { BrowserRouter as Router, Route, Routes, Link, useLocation } from 'react-router-dom';
 import AgentArena from './components/AgentArena';
 import UserProfile from './components/UserProfile';
 import SignUp from './components/SignUp';
 import Login from './components/Login';
 import UserList from './components/UserList';
 import UserPrompts from './components/UserPrompts';
 import PromptDetail from './components/PromptDetail';
+import ContactUs from './components/ContactUs';
 import Leaderboard from './components/Leaderboard';
+import FAQ from './components/FAQ';  
 import { Container, Navbar, Nav, Button } from 'react-bootstrap';
+import RequestPasswordReset from './components/RequestPasswordReset';
+import ResetPassword from './components/ResetPassword';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { ToastContainer } from 'react-toastify';
+import { FiSun, FiMoon } from 'react-icons/fi';
+import MonitoringDashboard from './components/MonitoringDashboard';
+
 import 'react-toastify/dist/ReactToastify.css';
 import './App.css';
 
 export const ThemeContext = createContext();
 
 const App = () => {
+
   const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [theme, setTheme] = useState('dark');
+  const [theme, setTheme] = useState('light');
 
   const applyTheme = useCallback((newTheme) => {
     const linkId = 'dynamic-theme';
@@ -43,7 +51,7 @@ const App = () => {
       setIsAuthenticated(true);
     }
 
-    const savedTheme = localStorage.getItem('theme') || 'dark';
+    const savedTheme = localStorage.getItem('theme') || 'light';
     setTheme(savedTheme);
     applyTheme(savedTheme);
   }, [applyTheme]);
@@ -64,33 +72,11 @@ const App = () => {
     <ThemeContext.Provider value={{ theme, toggleTheme }}>
       <div className={theme + '-theme'}>
         <Router>
-          <Navbar bg={theme === 'dark' ? 'dark' : 'light'} variant={theme === 'dark' ? 'dark' : 'light'} expand="lg" className="mb-4">
-            <Container>
-              <Navbar.Brand as={Link} to="/">LLM Agent Arena</Navbar.Brand>
-              <Navbar.Toggle aria-controls="basic-navbar-nav" />
-              <Navbar.Collapse id="basic-navbar-nav">
-                <Nav className="ms-auto">
-                  <Nav.Link as={Link} to="/">Arena</Nav.Link>
-                  <Nav.Link as={Link} to="/leaderboard">Leaderboard</Nav.Link>
-                  <Nav.Link as={Link} to="/users">Prompt Hub</Nav.Link>
-                  <Nav.Link as={Link} to="https://www.llm-agents.info/" target="_blank">Agent Marketplace</Nav.Link>
-                  {isAuthenticated ? (
-                    <>
-                      <Nav.Link as={Link} to="/profile">Profile/Prompts</Nav.Link>
-                      <Button variant={theme === 'dark' ? 'outline-light' : 'outline-dark'} onClick={handleLogout}>Logout</Button>
-                    </>
-                  ) : (
-                    <>
-                      <Nav.Link as={Link} to="/login">Login</Nav.Link>
-                    </>
-                  )}
-                  <Button variant={theme === 'dark' ? 'outline-light' : 'outline-dark'} onClick={toggleTheme}>
-                    {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
-                  </Button>
-                </Nav>
-              </Navbar.Collapse>
-            </Container>
-          </Navbar>
+          <NavbarComponent 
+            theme={theme} 
+            isAuthenticated={isAuthenticated} 
+            handleLogout={handleLogout} 
+          />
           <Container>
             <Routes>
               <Route path="/" element={<AgentArena />} />
@@ -101,6 +87,11 @@ const App = () => {
               <Route path="/signup" element={<SignUp onSignUp={() => setIsAuthenticated(true)} />} />
               <Route path="/leaderboard" element={<Leaderboard />} />
               <Route path="/prompts/:promptId" element={<PromptDetail />} />
+              <Route path="/request-password-reset" element={<RequestPasswordReset />} />
+              <Route path="/reset-password/:token" element={<ResetPassword />} />
+              <Route path="/faq" element={<FAQ />} /> {/* Add the FAQ route */}
+              <Route path="/contact-us" element={<ContactUs />} /> {/* Add the Contact Us route */}
+              <Route path="/dashboard" element={<MonitoringDashboard />} /> 
             </Routes>
             <ToastContainer />
           </Container>
@@ -110,4 +101,93 @@ const App = () => {
   );
 };
 
-export default App;
+// NavbarComponent is placed inside Router so useLocation works here
+const NavbarComponent = ({ theme, isAuthenticated, handleLogout }) => {
+  const location = useLocation(); // Now it is inside Router, so useLocation will work
+
+  const handleAgentArenaClick = (e) => {
+    if (location.pathname === '/') {
+      e.preventDefault();
+      window.location.reload();
+    }
+  };
+
+  const ThemeToggle = () => {
+    const { toggleTheme } = useContext(ThemeContext);
+
+    return (
+      <Nav.Link 
+        onClick={toggleTheme}
+        className="d-flex align-items-center"
+        style={{ padding: '0.5rem 0.5rem', marginLeft: '0.5rem' }}
+      >
+        <div 
+          style={{
+            width: '28px',
+            height: '28px',
+            borderRadius: '50%',
+            backgroundColor: theme === 'dark' ? '#4a4a4a' : '#e0e0e0',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'background-color 0.3s ease'
+          }}
+        >
+          {theme === 'dark' ? 
+            <FiSun color="#f1c40f" size={18} /> : 
+            <FiMoon color="#34495e" size={18} />
+          }
+        </div>
+      </Nav.Link>
+    );
+  };
+
+  return (
+    <Navbar bg={theme === 'dark' ? 'dark' : 'light'} variant={theme === 'dark' ? 'dark' : 'light'} expand="lg" className="mb-4">
+      <Container>
+        <Navbar.Brand 
+          as={Link} 
+          to="/" 
+          onClick={handleAgentArenaClick} // Handle reload logic on brand click
+          style={{ display: 'flex', flexDirection: 'column', color: theme === 'dark' ? '#ffffff' : '#007bff', textAlign: 'center' }}
+        >
+          <span>Agent Arena</span>
+          <span style={{ fontSize: '12px', color: theme === 'dark' ? '#b3b3b3' : '#6c757d' , textAlign:'center'}}>LMSYS Chatbot Arena  X  Gorilla 🦍</span>
+        </Navbar.Brand>
+
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="ms-auto">
+            <Nav.Link 
+              as={Link} 
+              to="/" 
+              onClick={handleAgentArenaClick} // Handle reload logic on nav link click
+            >
+              Arena
+            </Nav.Link>
+            <Nav.Link as={Link} to="/leaderboard">Leaderboard</Nav.Link>
+            <Nav.Link as={Link} to="/users">Prompt Hub</Nav.Link>
+            <Nav.Link as={Link} to="https://www.llm-agents.info/">Agent Marketplace</Nav.Link>
+            <Nav.Link as={Link} to="/faq">FAQ</Nav.Link>
+            {isAuthenticated ? (
+              <>
+                <Nav.Link as={Link} to="/profile">Profile/Prompts</Nav.Link>
+                <Button variant={theme === 'dark' ? 'outline-light' : 'outline-dark'} onClick={handleLogout}>Logout</Button>
+              </>
+            ) : (
+              <>
+                <Nav.Link as={Link} to="/login">Login</Nav.Link>
+              </>
+            )}
+
+            <ThemeToggle />
+
+
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};
+
+export default App;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,3 +23,4 @@ yarn-debug.log*
		yarn-error.log*
		.DS_Store

		.env