Updated dashboard

agenta-web/next.config.js

@@ -1,7 +1,18 @@
 /** @type {import('next').NextConfig} */
+const withSvgr = require('@svgr/webpack');
+
 const nextConfig = {
   output: 'standalone',
   reactStrictMode: true,
-}
+
+  webpack(config, options) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [options.defaultLoaders.babel, '@svgr/webpack'],
+    });
+
+    return config;
+  },
+};
 
 module.exports = nextConfig

agenta-web/package.json

@@ -10,22 +10,26 @@
     "test": "yarn cypress run"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.0.17",
+    "@svgr/webpack": "^7.0.0",
+    "@tremor/react": "^2.4.0",
     "@types/node": "18.16.3",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
-    "autoprefixer": "10.4.14",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.4",
     "mongoose": "^7.1.0",
     "next": "13.3.4",
-    "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.14",
     "cypress": "^12.11.0",
-    "node-mocks-http": "^1.12.2"
+    "node-mocks-http": "^1.12.2",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2"
   }
 }

agenta-web/src/components/Header/Header.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+const Header = () => {
+    return (
+        <div>
+
+
+            <nav className="bg-white border-gray-200 dark:bg-gray-900">
+                <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+                    <div className="flex items-center">
+                        <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Agenta</span>
+                    </div>
+                    <button data-collapse-toggle="navbar-default" type="button" className="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+                        <span className="sr-only">Open main menu</span>
+                        <svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+                    </button>
+                    <div className="hidden w-full md:block md:w-auto" id="navbar-default">
+                        <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+                            <li>
+                                <a href="#" className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
+                            </li>
+                            <li>
+                                <a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
+                            </li>
+                            <li>
+                                <a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
+                            </li>
+                            <li>
+                                <a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
+                            </li>
+                            <li>
+                                <a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+
+        </div>
+        // <div classNameName="bg-gray-800 text-white w-full h-16 flex items-center justify-center">
+        //     <h1 className="text-2xl font-semibold">Header</h1>
+        // </div>
+    );
+};
+
+export default Header;

agenta-web/src/components/LLMCallsTable/LLMCallsTable.tsx

@@ -1,5 +1,18 @@
 
 import { useState, useEffect } from 'react';
+import {
+  Card,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeaderCell,
+  TableBody,
+  TableCell,
+  Text,
+  Title,
+  Badge,
+} from "@tremor/react";
+
 
 export default function LLMCallsTable() {
   const [data, setData] = useState<any[]>([]);
@@ -22,36 +35,62 @@ export default function LLMCallsTable() {
   else if (!data.length) return <div>No data</div>
 
   return (
-    <div>
-      <h1 className="text-2xl font-semibold pb-10">LLM Calls</h1>
-
-      <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
-        <table className="w-full text-sm text-left text-gray-500">
-          <thead className="text-xs text-gray-700 uppercase bg-gray-200">
-            <tr>
-              <th scope="col" className="px-6 py-3">
-                Output
-              </th>
-              <th scope="col" className="px-6 py-3">
-                Prompt
-              </th>
-              <th scope="col" className="px-6 py-3">
-                Params
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((item) => (
-              <tr className="bg-white" key={item._id} >
-                <td className="px-6 py-4">{item.output}</td>
-                <td className="px-6 py-4">{item.prompt}</td>
-                <td className="px-6 py-4">{item.params}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+    <div className='h-full w-full'>
+      <div className=" px-7 ">
+        <div>
+          <nav className="bg-white dark:bg-gray-700">
+            <div className="max-w-screen-xl px-4 py-3 mx-auto">
+              <div className="flex items-center">
+                <ul className="flex flex-row font-medium mt-0 mr-6 space-x-20 text-sm">
+                  <li>
+                    <a href="#" className="text-gray-900 dark:text-white hover:underline" aria-current="page">V1</a>
+                  </li>
+                  <li>
+                    <a href="#" className="text-gray-900 dark:text-white hover:underline">V2</a>
+                  </li>
+                  <li>
+                    <a href="#" className="text-gray-900 dark:text-white hover:underline">V3</a>
+                  </li>
+                  <li>
+                    <a href="#" className="text-gray-900 dark:text-white hover:underline">V4</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+        </div>
+
+        <div className='py-7'>
+          <Card className="flex-grow w-full">
+            <Title className='text-2xl'>Calls</Title>
+            <Table className="mt-5">
+              <TableHead>
+                <TableRow className='text-xl'>
+                  <TableHeaderCell>Prompt</TableHeaderCell>
+                  <TableHeaderCell>Ouput</TableHeaderCell>
+                  <TableHeaderCell>Parameters</TableHeaderCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {data.map((item) => (
+                  <TableRow key={item._id}>
+                    <TableCell>
+                      <Text className='text-xl'>{item.prompt}</Text>
+                    </TableCell>
+                    <TableCell>
+                      <Text className='text-xl'>{item.output}</Text>
+                    </TableCell>
+                    <TableCell>
+                      <Text className='text-xl'>{item.params}</Text>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Card>
+        </div>
       </div>
 
-    </div>
+    </div >
   );
 }