Merge pull request #1390 from digma-ai/feature/incident-creation

Add incident manual creation chat

Author: kshmidt-digma

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "15.2.0-alpha.0",
+  "version": "15.2.0-alpha.1",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",
@@ -120,6 +120,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.25.1",
     "@formkit/auto-animate": "^0.8.2",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-table": "^8.7.8",

package.json

@@ -0,0 +1,52 @@
+import { useParams } from "react-router";
+import { useStableSearchParams } from "../../../../hooks/useStableSearchParams";
+import {
+  useGetIncidentAgentChatEventsQuery,
+  useSendMessageToIncidentAgentChatMutation
+} from "../../../../redux/services/digma";
+import { AgentChat } from "../../common/AgentChat";
+
+const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
+const REFRESH_INTERVAL_DURING_STREAMING = 3 * 1000; // in milliseconds
+
+export const IncidentAgentChat = () => {
+  const params = useParams();
+  const incidentId = params.id;
+  const [searchParams] = useStableSearchParams();
+  const agentId = searchParams.get("agent");
+
+  const [sendMessage, { isLoading: isMessageSending }] =
+    useSendMessageToIncidentAgentChatMutation();
+
+  const handleMessageSend = (text: string) => {
+    void sendMessage({
+      incidentId: incidentId ?? "",
+      agentId: agentId ?? "",
+      data: { text }
+    });
+  };
+
+  const { data, isLoading } = useGetIncidentAgentChatEventsQuery(
+    {
+      incidentId: incidentId ?? "",
+      agentId: agentId ?? ""
+    },
+    {
+      skip: !incidentId || !agentId,
+      pollingInterval: isMessageSending
+        ? REFRESH_INTERVAL_DURING_STREAMING
+        : REFRESH_INTERVAL
+    }
+  );
+
+  return (
+    <AgentChat
+      data={data}
+      isDataLoading={isLoading}
+      incidentId={incidentId}
+      agentId={agentId ?? ""}
+      onMessageSend={handleMessageSend}
+      isMessageSending={isMessageSending}
+    />
+  );
+};

src/components/Agentic/IncidentDetails/Chat/index.tsx

@@ -18,7 +18,7 @@ import { trackingEvents } from "../tracking";
 import { AdditionalInfo } from "./AdditionalInfo";
 import { AgentEvents } from "./AgentEvents";
 import { AgentFlowChart } from "./AgentFlowChart";
-import { Chat } from "./Chat";
+import { IncidentAgentChat } from "./IncidentAgentChat";
 import { IncidentMetaData } from "./IncidentMetaData";
 import * as s from "./styles";
 import type { AgentViewMode } from "./types";
@@ -185,7 +185,7 @@ export const IncidentDetails = () => {
               </s.SummaryContainerToolbar>
               {agentId ? (
                 agentViewMode === "chat" ? (
-                  <Chat key={agentId} />
+                  <IncidentAgentChat key={agentId} />
                 ) : (
                   <AgentEvents key={agentId} />
                 )

src/components/Agentic/IncidentDetails/IncidentAgentChat/index.tsx

@@ -1,9 +1,8 @@
 import { useState } from "react";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
-import { CrossIcon } from "../../../common/icons/12px/CrossIcon";
+import { Dialog } from "../../common/Dialog";
 import { trackingEvents } from "../../tracking";
 import { ServerStep } from "./ServerStep";
-import * as s from "./styles";
 import { ToolsStep } from "./ToolsStep";
 import type { AddMCPServerDialogProps } from "./types";
 
@@ -45,24 +44,16 @@ export const AddMCPServerDialog = ({
     />
   ];
 
-  const handleCloseButtonClick = () => {
+  const handleDialogClose = () => {
     sendUserActionTrackingEvent(
-      trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_CLOSE_BUTTON_CLICKED
+      trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_CLOSED
     );
     onClose();
   };
 
   return (
-    <s.Container>
-      <s.Header>
-        <s.Header>
-          Wizard
-          <s.CloseButton onClick={handleCloseButtonClick}>
-            <CrossIcon color={"currentColor"} />
-          </s.CloseButton>
-        </s.Header>
-      </s.Header>
+    <Dialog title={"Wizard"} onClose={handleDialogClose}>
       {steps[currentStep]}
-    </s.Container>
+    </Dialog>
   );
 };