diff --git a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css
index 50bca9be6..5ee1ad1df 100644
--- a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css
+++ b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css
@@ -33,7 +33,7 @@
}
.chat-container {
- @apply max-h-[calc(100vh-37rem)] flex flex-col;
+ @apply max-h-[calc(100vh-30rem)] flex flex-col;
scroll-behavior: smooth;
}
diff --git a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx
index 4afed77f4..cf185c6f3 100644
--- a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx
+++ b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx
@@ -1,4 +1,8 @@
-import { CopilotChat, useCopilotChatSuggestions } from "@copilotkit/react-ui";
+import {
+ CopilotChat,
+ ResponseButtonProps,
+ useCopilotChatSuggestions,
+} from "@copilotkit/react-ui";
import type { IncidentDto } from "@/entities/incidents/model";
import { useIncidentAlerts } from "utils/hooks/useIncidents";
import { EmptyStateCard } from "@/components/ui/EmptyStateCard";
@@ -7,6 +11,7 @@ import {
useCopilotAction,
useCopilotReadable,
useCopilotMessagesContext,
+ useCopilotChat,
} from "@copilotkit/react-core";
import {
ActionExecutionMessage,
@@ -21,6 +26,13 @@ import { useEffect, useMemo } from "react";
import "@copilotkit/react-ui/styles.css";
import "./incident-chat.css";
import { useSession } from "next-auth/react";
+import { TrashIcon } from "@radix-ui/react-icons";
+
+const INSTRUCTIONS = `You are an expert incident resolver who's capable of resolving incidents in a variety of ways. You can get traces from providers, search for traces, create incidents, update incident name and summary, and more. You can also ask the user for information if you need it.
+You should always answer short and concise answers, always trying to suggest the next best action to investigate or resolve the incident.
+Any time you're not sure about something, ask the user for clarification.
+If you used some provider's method to get data, present the icon of the provider you used.
+If you think your response is relevant for the root cause analysis, add a "root_cause" tag to the message and call the "enrichRCA" method to enrich the incident.`;
export function IncidentChat({ incident }: { incident: IncidentDto }) {
const router = useRouter();
@@ -29,6 +41,27 @@ export function IncidentChat({ incident }: { incident: IncidentDto }) {
incident.id
);
const { messages, setMessages } = useCopilotMessagesContext();
+ const { runChatCompletion } = useCopilotChat();
+
+ function CustomResponseButton({ onClick, inProgress }: ResponseButtonProps) {
+ return (
+
+
+
+ );
+ }
//https://docs.copilotkit.ai/guides/messages-localstorage
// save to local storage when messages change
@@ -122,6 +155,34 @@ export function IncidentChat({ incident }: { incident: IncidentDto }) {
});
// Actions
+ useCopilotAction({
+ name: "enrichRCA",
+ description:
+ "This action is used by the copilot chat to enrich the incident with root cause analysis. It takes the messages and the incident and enriches the incident with the root cause analysis.",
+ parameters: [
+ {
+ name: "rootCausePoint",
+ type: "string",
+ description:
+ "The bullet you think should be added to the list of root cause analysis points",
+ },
+ {
+ name: "rcaProvider",
+ type: "string",
+ description:
+ "The provider you used to get the root cause analysis point",
+ },
+ ],
+ handler: async ({ rootCausePoint, rcaProvider }) => {
+ const rcaPoints = incident.enrichments["rca_points"] || [];
+ await enrichIncident(incident.id, {
+ rca_points: [
+ ...rcaPoints,
+ { content: rootCausePoint, providerType: rcaProvider },
+ ],
+ });
+ },
+ });
useCopilotAction({
name: "invokeProviderMethod",
description:
@@ -377,13 +438,14 @@ export function IncidentChat({ incident }: { incident: IncidentDto }) {
diff --git a/keep-ui/app/(keep)/incidents/[id]/incident-overview.tsx b/keep-ui/app/(keep)/incidents/[id]/incident-overview.tsx
index 48ec6180b..854179bd2 100644
--- a/keep-ui/app/(keep)/incidents/[id]/incident-overview.tsx
+++ b/keep-ui/app/(keep)/incidents/[id]/incident-overview.tsx
@@ -3,7 +3,6 @@
import {
useIncidentActions,
type IncidentDto,
- type PaginatedIncidentAlertsDto,
} from "@/entities/incidents/model";
import React, { useState } from "react";
import { useIncident, useIncidentAlerts } from "@/utils/hooks/useIncidents";
@@ -33,6 +32,7 @@ import {
import { IncidentOverviewSkeleton } from "../incident-overview-skeleton";
import { AlertDto } from "@/entities/alerts/model";
import { useRouter } from "next/navigation";
+import { RootCauseAnalysis } from "@/components/ui/RootCauseAnalysis";
interface Props {
incident: IncidentDto;
@@ -214,7 +214,7 @@ export function IncidentOverview({ incident: initialIncidentData }: Props) {
return (
// Adding padding bottom to visually separate from the tabs
-
+
@@ -225,6 +225,7 @@ export function IncidentOverview({ incident: initialIncidentData }: Props) {
alerts={alerts.items}
incident={incident}
/>
+ {/* @tb: not sure how we use this, but leaving it here for now
{incident.user_summary && incident.generated_summary ? (
- ) : null}
+ ) : null} */}
{incident.merged_into_incident_id && (
)}
+