fix: handle the case when the OPEN_AI_API_KEY is not set

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/copilotkit/route.ts

@@ -3,20 +3,37 @@ import {
   OpenAIAdapter,
   copilotRuntimeNextJSAppRouterEndpoint,
 } from "@copilotkit/runtime";
-import OpenAI from "openai";
+import OpenAI, { OpenAIError } from "openai";
 import { NextRequest } from "next/server";
 
-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();
+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,
-    serviceAdapter,
+    runtime: runtimeOptions.runtime,
+    serviceAdapter: runtimeOptions.serviceAdapter,
     endpoint: "/api/copilotkit",
   });
 

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/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;
 }