feat: wip

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

@@ -13,7 +13,11 @@
 }
 
 .copilotKitMessages {
-  @apply px-4 !important;
+  @apply h-full flex flex-col !important;
+}
+
+.copilotKitMessages > div {
+  @apply flex-1 overflow-y-auto !important;
 }
 
 .copilotKitUserMessage {
@@ -25,9 +29,9 @@
 }
 
 .chat-container {
-  @apply max-h-[calc(100vh-31rem)] flex flex-col;
+  @apply h-full flex flex-col;
 }
 
 .chat-messages {
-  @apply flex-1 overflow-y-scroll overflow-x-hidden;
+  @apply flex-1 overflow-y-auto overflow-x-hidden;
 }

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

@@ -371,7 +371,7 @@ export function IncidentChat({ incident }: { incident: IncidentDto }) {
     );
 
   return (
-    <Card className="max-h-[calc(100vh-28rem)]">
+    <Card className="h-full">
       <div className="chat-container">
         <div className="chat-messages">
           <CopilotChat
@@ -380,7 +380,7 @@ export function IncidentChat({ incident }: { incident: IncidentDto }) {
             labels={{
               title: "Incident Assistant",
               initial:
-                "Hi! 👋 Lets work together to resolve this incident! Ask me anything",
+                "Hi! Lets work together to resolve this incident! Ask me anything",
               placeholder: "For example: Find the root cause of this incident",
             }}
           />

keep-ui/app/(keep)/incidents/[id]/incident-layout-client.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { IncidentDto } from "@/entities/incidents/model";
+import { IncidentChatClientPage } from "./chat/page.client";
+import { useIncident } from "@/utils/hooks/useIncidents";
+import { IncidentHeader } from "./incident-header";
+import { IncidentTabsNavigation } from "./incident-tabs-navigation";
+
+function ResizeHandle() {
+  return (
+    <PanelResizeHandle className="w-2 group hover:bg-tremor-brand-subtle transition-colors">
+      <div className="h-full w-1 mx-auto bg-tremor-border group-hover:bg-tremor-brand group-hover:w-1.5 transition-all" />
+    </PanelResizeHandle>
+  );
+}
+
+export function IncidentLayoutClient({
+  children,
+  initialIncident,
+  AIEnabled,
+}: {
+  children: ReactNode;
+  initialIncident: IncidentDto;
+  AIEnabled: boolean;
+}) {
+  const { data: incident } = useIncident(initialIncident.id, {
+    fallbackData: initialIncident,
+  });
+
+  if (!incident) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <IncidentHeader incident={incident} />
+      <IncidentTabsNavigation incident={incident} />
+      <PanelGroup direction="horizontal">
+        <Panel defaultSize={60} minSize={30}>
+          <div className="pr-2">
+            <div className="flex-1 min-w-0">{children}</div>
+          </div>
+        </Panel>
+        {AIEnabled && (
+          <>
+            <ResizeHandle />
+            <Panel defaultSize={40} minSize={25}>
+              <div className="pl-2">
+                <IncidentChatClientPage incident={incident} />
+              </div>
+            </Panel>
+          </>
+        )}
+      </PanelGroup>
+    </div>
+  );
+}

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

@@ -1,9 +1,7 @@
 import { ReactNode } from "react";
-import { IncidentTabsNavigation } from "./incident-tabs-navigation";
-import { IncidentHeader } from "./incident-header";
 import { getIncidentWithErrorHandling } from "./getIncidentWithErrorHandling";
 import { IncidentHeaderSkeleton } from "./incident-header-skeleton";
-import { IncidentChatClientPage } from "./chat/page.client";
+import { IncidentLayoutClient } from "./incident-layout-client";
 
 export default async function Layout({
   children,
@@ -17,18 +15,9 @@ export default async function Layout({
   try {
     const incident = await getIncidentWithErrorHandling(serverParams.id, false);
     return (
-      <div className="flex flex-col gap-4">
-        <IncidentHeader incident={incident} />
-        <IncidentTabsNavigation incident={incident} />
-        <div className="flex gap-4">
-          <div className="flex-1 min-w-0">{children}</div>
-          {AIEnabled && (
-            <div className="w-[40%] shrink-0">
-              <IncidentChatClientPage incident={incident} />
-            </div>
-          )}
-        </div>
-      </div>
+      <IncidentLayoutClient initialIncident={incident} AIEnabled={AIEnabled}>
+        {children}
+      </IncidentLayoutClient>
     );
   } catch (error) {
     return (

keep-ui/package.json

@@ -89,6 +89,7 @@
     "react-player": "^2.16.0",
     "react-querybuilder": "^6.5.4",
     "react-quill": "^2.0.0",
+    "react-resizable-panels": "^2.1.7",
     "react-select": "^5.8.0",
     "react-sliding-side-panel": "^2.0.3",
     "react-timeago": "^7.2.0",