make frontend read from bff - delete old next js api routes - enable …

agenta-bff/package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fastify/cors": "^8.2.1",
     "@prisma/client": "^4.13.0",
     "fastify": "^4.17.0",
     "fastify-zod": "^1.3.2",

agenta-bff/src/server.ts

@@ -1,10 +1,18 @@
 import Fastify from "fastify";
 import llmCallsRoutes from "./modules/llmCall/llmCall.route";
 import { llmCallSchemas } from "./modules/llmCall/llmCall.schema";
+import cors from '@fastify/cors'
 
 function buildServer() {
   const server = Fastify();
 
+  const urls = ["localhost", "127.0.0.1", "http://localhost:3000"]
+  server.register(cors, {
+    origin: urls,
+    // methods: ['GET', 'POST'],
+    // credentials: true
+  })
+
   server.get("/healthcheck", async function () {
     return { status: "OK" };
   });

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

@@ -1,4 +1,5 @@
 
+import { log } from 'console';
 import { useState, useEffect } from 'react';
 
 export default function LLMCallsTable() {
@@ -7,10 +8,13 @@ export default function LLMCallsTable() {
 
   useEffect(() => {
     setLoading(true)
-    fetch('/api/fetch-llm-calls')
+    fetch('http://127.0.0.1:3030/api/llm-calls', {
+      headers: {
+        "Content-Type": "application/json",
+      }
+    })
       .then((res) => res.json())
       .then((data) => {
-        console.log(data);
         setData(data)
         setLoading(false)
       })
@@ -41,17 +45,15 @@ export default function LLMCallsTable() {
             </tr>
           </thead>
           <tbody>
-            {data.map((item) => (
-              <tr className="bg-white" key={item._id} >
+            {data.map((item, index) => (
+              <tr className="bg-white" key={`tr-${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>
-
     </div>
   );
-}
+}

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

@@ -26,13 +26,11 @@ export default function Sidebar() {
 
         <ul className="pt-2">
           {menu.map((item, index) => (
-            <>
-              <li key={index} className="text-gray-200 text-sm flex items-center gap-x-4 cursor-pointer p-2 hover:bg-teal-700 rounded-md mt-2">
-                <span>
-                  {item.title}
-                </span>
-              </li>
-            </>
+            <li key={index} className="text-gray-200 text-sm flex items-center gap-x-4 cursor-pointer p-2 hover:bg-teal-700 rounded-md mt-2">
+              <span>
+                {item.title}
+              </span>
+            </li>
           ))}
         </ul>
       </div>