Merge pull request #1470 from digma-ai/feature/agentic-link

Add link to Agentic

Author: kshmidt-digma

src/components/Admin/NavSidebar/NavMenu/NavMenuItem/index.tsx

@@ -23,7 +23,7 @@ export const NavMenuItem = ({ item, onClick }: NavMenuItemProps) => {
         e.preventDefault();
         setIsExpanded(!isExpanded);
       } else {
-        onClick?.();
+        onClick?.(e);
       }
     };
 

src/components/Admin/NavSidebar/NavMenu/NavMenuItem/types.ts

@@ -1,11 +1,12 @@
-import type { ReactNode } from "react";
+import type { MouseEvent, ReactNode } from "react";
 
 export interface NavigationItem {
   id: string;
   name: string;
   route: string;
   icon?: ReactNode;
   items?: NavigationItem[];
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
 }
 
 export interface ContainerProps {
@@ -14,5 +15,5 @@ export interface ContainerProps {
 
 export interface NavMenuItemProps {
   item: NavigationItem;
-  onClick?: () => void;
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
 }

src/components/Admin/NavSidebar/NavMenu/index.tsx

@@ -1,6 +1,7 @@
-import { useMemo } from "react";
+import { useMemo, type MouseEvent } from "react";
 import { getFeatureFlagValue } from "../../../../featureFlags";
 import { useGetAboutQuery } from "../../../../redux/services/digma";
+import { useConfigSelector } from "../../../../store/config/useConfigSelector";
 import { FeatureFlag } from "../../../../types";
 import { GlobeIcon } from "../../../common/icons/16px/GlobeIcon";
 import { HomeIcon } from "../../../common/icons/16px/HomeIcon";
@@ -17,6 +18,8 @@ export const NavMenu = () => {
     FeatureFlag.AreBlockedTracesEnabled
   );
 
+  const { isAgenticEnabled } = useConfigSelector();
+
   const navigationItems: NavigationItem[] = useMemo(
     () => [
       {
@@ -63,16 +66,33 @@ export const NavMenu = () => {
               ]
             }
           ]
+        : []),
+      ...(isAgenticEnabled
+        ? [
+            {
+              id: "aiSre",
+              name: "AI SRE",
+              route: `${window.location.origin}/agentic`,
+              onClick: (e: MouseEvent<HTMLAnchorElement>) => {
+                e.preventDefault();
+                window.open(
+                  `${window.location.origin}/agentic`,
+                  "_blank",
+                  "noopener noreferrer"
+                );
+              }
+            }
+          ]
         : [])
     ],
-    [isTroubleshootingEnabled]
+    [isTroubleshootingEnabled, isAgenticEnabled]
   );
 
   return (
     <nav>
       <s.NavigationList>
         {navigationItems.map((x) => (
-          <NavMenuItem key={x.id} item={x} />
+          <NavMenuItem key={x.id} item={x} onClick={x.onClick} />
         ))}
       </s.NavigationList>
     </nav>

src/components/Agentic/IncidentDetails/AgentSummary/styles.ts

@@ -23,7 +23,7 @@ export const ToolContainer = styled.details`
 `;
 
 export const ToolSummary = styled.summary`
-  background-color: ${({ theme }) => theme.colors.v3.surface.secondary};
+  background: ${({ theme }) => theme.colors.v3.surface.secondary};
   padding: 12px 16px;
   font-weight: 600;
   color: ${({ theme }) => theme.colors.v3.text.primary};

src/components/Agentic/IncidentsContainer/CreateIncidentChatOverlay/index.tsx

@@ -61,7 +61,7 @@ export const CreateIncidentChatOverlay = () => {
         {
           id: "__start_message",
           type: "human",
-          agent_name: "incident_entry",
+          agent_name: AGENT_ID,
           message: text,
           tool_name: null,
           mcp_name: null

src/components/Agentic/common/PulsatingDot/styles.ts

@@ -15,6 +15,6 @@ export const Container = styled.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.colors.v3.text.white};
+  background: ${({ theme }) => theme.colors.v3.text.white};
   animation: ${pulsate} 1s infinite alternate;
 `;