refactor: migrate remaining API routes to App router

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

@@ -2,13 +2,27 @@
 
 import { IncidentChat } from "./incident-chat";
 import { IncidentDto } from "@/entities/incidents/model";
+import { EmptyStateCard } from "@/shared/ui";
+import { useConfig } from "@/utils/hooks/useConfig";
 import { CopilotKit } from "@copilotkit/react-core";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
 export function IncidentChatClientPage({
   incident,
 }: {
   incident: IncidentDto;
 }) {
+  const { data: config } = useConfig();
+  if (config && !config.OPEN_AI_API_KEY_SET) {
+    return (
+      <EmptyStateCard
+        icon={ExclamationTriangleIcon}
+        title="Chat is not available"
+        description="The OpenAI API key is not set. Ask your administrator to set it to enable chat."
+      />
+    );
+  }
+
   return (
     <CopilotKit runtimeUrl="/api/copilotkit">
       <IncidentChat incident={incident} />

keep-ui/app/api/aws-marketplace/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest } from "next/server";
+import { redirect } from "next/navigation";
+
+export async function POST(request: NextRequest) {
+  try {
+    // In App Router, we need to parse the request body manually
+    const body = await request.json();
+
+    const token = body["x-amzn-marketplace-token"];
+    const offerType = body["x-amzn-marketplace-offer-type"];
+
+    // Base64 encode the token
+    const base64EncodedToken = encodeURIComponent(btoa(token));
+
+    // In App Router, we use the redirect function for redirects
+    return redirect(`/signin?amt=${base64EncodedToken}`);
+  } catch (error) {
+    console.error("Error processing request:", error);
+    return new Response("Bad Request", { status: 400 });
+  }
+}

keep-ui/app/api/copilotkit/route.ts

@@ -0,0 +1,41 @@
+import {
+  CopilotRuntime,
+  OpenAIAdapter,
+  copilotRuntimeNextJSAppRouterEndpoint,
+} from "@copilotkit/runtime";
+import OpenAI, { OpenAIError } from "openai";
+import { NextRequest } from "next/server";
+
+function initializeCopilotRuntime() {
+  try {
+    const openai = new OpenAI({
+      organization: process.env.OPEN_AI_ORGANIZATION_ID,
+      apiKey: process.env.OPEN_AI_API_KEY,
+    });
+    const serviceAdapter = new OpenAIAdapter({ openai });
+    const runtime = new CopilotRuntime();
+    return { runtime, serviceAdapter };
+  } catch (error) {
+    if (error instanceof OpenAIError) {
+      console.log("Error connecting to OpenAI", error);
+    } else {
+      console.error("Error initializing Copilot Runtime", error);
+    }
+    return null;
+  }
+}
+
+const runtimeOptions = initializeCopilotRuntime();
+
+export const POST = async (req: NextRequest) => {
+  if (!runtimeOptions) {
+    return new Response("Error initializing Copilot Runtime", { status: 500 });
+  }
+  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+    runtime: runtimeOptions.runtime,
+    serviceAdapter: runtimeOptions.serviceAdapter,
+    endpoint: "/api/copilotkit",
+  });
+
+  return handleRequest(req);
+};

keep-ui/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

keep-ui/package.json

@@ -54,7 +54,7 @@
     "moment": "^2.29.4",
     "next": "^14.2.13",
     "next-auth": "^5.0.0-beta.25",
-    "openai": "^4.72.0",
+    "openai": "^4.73.0",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-js": "^4.0.1",

keep-ui/shared/lib/server/getConfig.ts

@@ -54,5 +54,6 @@ export function getConfig() {
     POSTHOG_HOST: process.env.POSTHOG_HOST,
     SENTRY_DISABLED: process.env.SENTRY_DISABLED,
     READ_ONLY: process.env.KEEP_READ_ONLY === "true",
+    OPEN_AI_API_KEY_SET: !!process.env.OPEN_AI_API_KEY,
   };
 }

keep-ui/shared/ui/EmptyState/EmptyStateCard.tsx

@@ -0,0 +1,36 @@
+import { Card } from "@tremor/react";
+import { CircleStackIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+
+export function EmptyStateCard({
+  title,
+  icon,
+  description,
+  className,
+  children,
+}: {
+  icon?: React.ElementType;
+  title: string;
+  description: string;
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  const Icon = icon || CircleStackIcon;
+  return (
+    <Card className={clsx("sm:mx-auto w-full max-w-5xl", className)}>
+      <div className="text-center">
+        <Icon
+          className="mx-auto h-7 w-7 text-tremor-content-subtle dark:text-dark-tremor-content-subtle"
+          aria-hidden={true}
+        />
+        <p className="mt-2 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">
+          {title}
+        </p>
+        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
+          {description}
+        </p>
+        {children}
+      </div>
+    </Card>
+  );
+}

keep-ui/shared/ui/EmptyState/index.ts

@@ -0,0 +1 @@
+export { EmptyStateCard } from "./EmptyStateCard";

keep-ui/shared/ui/index.ts

@@ -2,3 +2,4 @@ export { TablePagination } from "./TablePagination";
 export { TabLinkNavigation, TabNavigationLink } from "./TabLinkNavigation";
 export { DateTimeField } from "./DateTimeField";
 export { FieldHeader } from "./FieldHeader";
+export { EmptyStateCard } from "./EmptyState";

keep-ui/types/internal-config.ts

@@ -18,4 +18,5 @@ export interface InternalConfig {
   SENTRY_DISABLED: string;
   // READ ONLY
   READ_ONLY: boolean;
+  OPEN_AI_API_KEY_SET: boolean;
 }