From 788b2c738ca8a0593d8ad893ba051e068d9bf0c7 Mon Sep 17 00:00:00 2001
From: ghandic <andrewchallis@hotmail.co.uk>
Date: Tue, 29 Apr 2025 13:49:43 +1000
Subject: [PATCH] Adding tab and discovering if user is using agents component

---
 .../src/features/agents/components/Agents.tsx | 12 ++++++++++
 .../features/agents/components/AgentsView.tsx | 15 ++++++++++++
 .../src/layouts/DeploymentDashboardLayout.tsx | 11 +++++++--
 .../src/lib/logos/BotIcon.tsx                 | 23 +++++++++++++++++++
 .../src/pages/agents.tsx                      |  3 +++
 5 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 npm-packages/dashboard-common/src/features/agents/components/Agents.tsx
 create mode 100644 npm-packages/dashboard-common/src/features/agents/components/AgentsView.tsx
 create mode 100644 npm-packages/dashboard-common/src/lib/logos/BotIcon.tsx
 create mode 100644 npm-packages/dashboard-self-hosted/src/pages/agents.tsx

diff --git a/npm-packages/dashboard-common/src/features/agents/components/Agents.tsx b/npm-packages/dashboard-common/src/features/agents/components/Agents.tsx
new file mode 100644
index 000000000..930196a91
--- /dev/null
+++ b/npm-packages/dashboard-common/src/features/agents/components/Agents.tsx
@@ -0,0 +1,12 @@
+import { Nent } from "@common/lib/useNents";
+
+export function Agents({ nents: allNents }: { nents: Nent[] }) {
+  const nents = allNents.filter((nent) => nent.name !== null);
+  const usingAgentComponent = nents.some(
+    (nent) => nent.name === "agent" && nent.path === "agent"
+  );
+  if (usingAgentComponent) {
+    return <div>Using AI Agents... show dashboard</div>;
+  }
+  return <div>Not using agents... follow docs to get set up</div>;
+}
diff --git a/npm-packages/dashboard-common/src/features/agents/components/AgentsView.tsx b/npm-packages/dashboard-common/src/features/agents/components/AgentsView.tsx
new file mode 100644
index 000000000..84fab5be3
--- /dev/null
+++ b/npm-packages/dashboard-common/src/features/agents/components/AgentsView.tsx
@@ -0,0 +1,15 @@
+import { DeploymentPageTitle } from "@common/elements/DeploymentPageTitle";
+import { LoadingTransition } from "@ui/Loading";
+import { PageContent } from "@common/elements/PageContent";
+import { useNents } from "@common/lib/useNents";
+import { Agents } from "@common/features/agents/components/Agents";
+
+export function AgentsView() {
+  const { nents } = useNents();
+  return (
+    <PageContent>
+      <DeploymentPageTitle title="AI Agents" />
+      <LoadingTransition>{nents && <Agents nents={nents} />}</LoadingTransition>
+    </PageContent>
+  );
+}
diff --git a/npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx b/npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx
index f2045c33a..dd0aa81eb 100644
--- a/npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx
+++ b/npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx
@@ -21,6 +21,7 @@ import { FunctionRunnerWrapper } from "@common/features/functionRunner/component
 import { FunctionsProvider } from "@common/lib/functions/FunctionsProvider";
 import { useIsGlobalRunnerShown } from "@common/features/functionRunner/lib/functionRunner";
 import { useIsCloudDeploymentInSelfHostedDashboard } from "@common/lib/useIsCloudDeploymentInSelfHostedDashboard";
+import { BotIcon } from "@common/lib/logos/BotIcon";
 
 type LayoutProps = {
   children: JSX.Element;
@@ -79,6 +80,12 @@ export function DeploymentDashboardLayout({
       ),
       href: `${uriPrefix}/logs`,
     },
+    {
+      key: "agent",
+      label: "AI Agents",
+      Icon: (props: any) => <BotIcon {...props} />,
+      href: `${uriPrefix}/agents`,
+    },
   ];
 
   const sidebarItems = [
@@ -125,7 +132,7 @@ export function DeploymentDashboardLayout({
           <div
             className={classNames(
               "flex w-full grow overflow-x-hidden",
-              !isGlobalRunnerVertical && "flex-col",
+              !isGlobalRunnerVertical && "flex-col"
             )}
           >
             {/* If the function runner is fully expanded, hide the content */}
@@ -155,7 +162,7 @@ function PauseBanner() {
   const deploymentState = useQuery(udfs.deploymentState.deploymentState);
 
   const { useCurrentTeam, useCurrentUsageBanner } = useContext(
-    DeploymentInfoContext,
+    DeploymentInfoContext
   );
 
   const team = useCurrentTeam();
diff --git a/npm-packages/dashboard-common/src/lib/logos/BotIcon.tsx b/npm-packages/dashboard-common/src/lib/logos/BotIcon.tsx
new file mode 100644
index 000000000..c575d8f6f
--- /dev/null
+++ b/npm-packages/dashboard-common/src/lib/logos/BotIcon.tsx
@@ -0,0 +1,23 @@
+export function BotIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-content-secondary"
+    >
+      <path d="M12 8V4H8" />
+      <rect width="16" height="12" x="4" y="8" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </svg>
+  );
+}
diff --git a/npm-packages/dashboard-self-hosted/src/pages/agents.tsx b/npm-packages/dashboard-self-hosted/src/pages/agents.tsx
new file mode 100644
index 000000000..186710458
--- /dev/null
+++ b/npm-packages/dashboard-self-hosted/src/pages/agents.tsx
@@ -0,0 +1,3 @@
+import { AgentsView } from "@common/features/agents/components/AgentsView";
+
+export default AgentsView;