feat: incident copilot

keep-ui/app/incidents/[id]/incident-chat.css

@@ -0,0 +1,4 @@
+.copilotKitInput textarea {
+  height: unset !important;
+  max-height: unset !important;
+}

keep-ui/app/incidents/[id]/incident-chat.tsx

@@ -0,0 +1,51 @@
+import { CopilotChat } from "@copilotkit/react-ui";
+import { IncidentDto } from "../models";
+import { useIncidentAlerts } from "utils/hooks/useIncidents";
+import { EmptyStateCard } from "@/components/ui/EmptyStateCard";
+import { useRouter } from "next/navigation";
+import "./incident-chat.css";
+import Loading from "app/loading";
+
+export default function IncidentChat({ incident }: { incident: IncidentDto }) {
+  const router = useRouter();
+  const { data: alerts, isLoading: alertsLoading } = useIncidentAlerts(
+    incident.id
+  );
+
+  if (alertsLoading) return <Loading />;
+  if (!alerts?.items || alerts.items.length === 0)
+    return (
+      <EmptyStateCard
+        title="Chat not available"
+        description="No alerts found for this incident. Go to the alerts feed and assign alerts to interact with the incident."
+        buttonText="Assign alerts to this incident"
+        onClick={() => router.push("/alerts/feed")}
+      />
+    );
+
+  return (
+    <CopilotChat
+      className="h-full overflow-y-hidden"
+      instructions={`You are an expert incident responder.
+      You are responsible for resolving incidents and helping the incident responder team.
+      The information you are provided with is a JSON representing all the data about the incident and a list of alerts that are related to the incident.
+      Your job is to help the incident responder team to resolve the incident by providing insights and recommendations.
+
+      If you are not sure about the answer, you NEED to say you don't know and lack more context.
+
+      Here is the incident JSON with all the details: "${JSON.stringify(
+        incident
+      )}"
+      Here is the list of alerts related to the incident: "${JSON.stringify(
+        alerts.items
+      )}"`}
+      labels={{
+        title: "Incident Assitant",
+        initial:
+          "Hi! 👋 Lets work together to resolve thins incident! What can I help you with?",
+        placeholder:
+          "What do you think the root cause of this incident might be?",
+      }}
+    />
+  );
+}

keep-ui/app/incidents/[id]/incident.tsx

@@ -17,9 +17,10 @@ import IncidentAlerts from "./incident-alerts";
 import { ArrowUturnLeftIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/navigation";
 import IncidentTimeline from "./incident-timeline";
-import { CiBellOn, CiViewTimeline } from "react-icons/ci";
+import { CiBellOn, CiChat2, CiViewTimeline } from "react-icons/ci";
 import { IoIosGitNetwork } from "react-icons/io";
 import { EmptyStateCard } from "@/components/ui/EmptyStateCard";
+import IncidentChat from "./incident-chat";
 
 interface Props {
   incidentId: string;
@@ -58,15 +59,16 @@ export default function IncidentView({ incidentId }: Props) {
             </div>
             <div
               id="incidentTabs"
-              className="w-full xl:pl-2.5 overflow-x-scroll"
+              className="w-full xl:pl-2.5 overflow-x-scroll h-full overflow-hidden"
             >
-              <TabGroup defaultIndex={0}>
+              <TabGroup defaultIndex={0} className="h-full">
                 <TabList variant="line" color="orange">
                   <Tab icon={CiBellOn}>Alerts</Tab>
                   <Tab icon={CiViewTimeline}>Timeline</Tab>
                   <Tab icon={IoIosGitNetwork}>Topology</Tab>
+                  <Tab icon={CiChat2}>Chat</Tab>
                 </TabList>
-                <TabPanels>
+                <TabPanels className="h-full">
                   <TabPanel>
                     <IncidentAlerts incident={incident} />
                   </TabPanel>
@@ -83,6 +85,9 @@ export default function IncidentView({ incidentId }: Props) {
                       />
                     </div>
                   </TabPanel>
+                  <TabPanel className="h-[calc(100%-50px)]">
+                    <IncidentChat incident={incident} />
+                  </TabPanel>
                 </TabPanels>
               </TabGroup>
             </div>

keep-ui/app/incidents/[id]/layout.tsx

@@ -1,3 +1,13 @@
-export default function Layout({ children }: { children: any }) {
-  return <main>{children}</main>;
+"use client";
+
+import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotSidebar } from "@copilotkit/react-ui";
+import { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <CopilotKit runtimeUrl="/api/copilotkit">
+      <main>{children}</main>
+    </CopilotKit>
+  );
 }