WIP adding kapa ai to the app

samejr · samejr · commit c71509bc50cb · 2025-03-25T18:26:36.000Z
diff --git a/apps/webapp/app/env.server.ts b/apps/webapp/app/env.server.ts
@@ -672,6 +672,9 @@ const EnvironmentSchema = z.object({
 
   QUEUE_SSE_AUTORELOAD_INTERVAL_MS: z.coerce.number().int().default(5_000),
   QUEUE_SSE_AUTORELOAD_TIMEOUT_MS: z.coerce.number().int().default(60_000),
+
+  // kapa.ai
+  KAPA_AI_WEBSITE_ID: z.string().optional(),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;
diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx
@@ -1,10 +1,10 @@
 import type { LinksFunction, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
-import { UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExternalScripts } from "remix-utils/external-scripts";
-import type { ToastMessage } from "~/models/message.server";
 import { commitSession, getSession } from "~/models/message.server";
+import type { ToastMessage } from "~/models/message.server";
 import tailwindStylesheetUrl from "~/tailwind.css";
 import { RouteErrorDisplay } from "./components/ErrorDisplay";
 import { AppContainer, MainCenteredContainer } from "./components/layout/AppLayout";
@@ -14,6 +14,8 @@ import { featuresForRequest } from "./features.server";
 import { usePostHog } from "./hooks/usePostHog";
 import { getUser } from "./services/session.server";
 import { appEnvTitleTag } from "./utils";
+import { type Handle } from "./utils/handle";
+import { useEffect } from "react";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
@@ -40,6 +42,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const posthogProjectKey = env.POSTHOG_PROJECT_KEY;
   const features = featuresForRequest(request);
 
+  const kapa = {
+    websiteId: env.KAPA_AI_WEBSITE_ID,
+  };
+
   return typedjson(
     {
       user: await getUser(request),
@@ -48,6 +54,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       features,
       appEnv: env.APP_ENV,
       appOrigin: env.APP_ORIGIN,
+      kapa,
     },
     { headers: { "Set-Cookie": await commitSession(session) } }
   );
@@ -86,8 +93,8 @@ export function ErrorBoundary() {
   );
 }
 
-function App() {
-  const { posthogProjectKey } = useTypedLoaderData<typeof loader>();
+export default function App() {
+  const { posthogProjectKey, kapa, features } = useTypedLoaderData<typeof loader>();
   usePostHog(posthogProjectKey);
 
   return (
@@ -96,6 +103,17 @@ function App() {
         <head>
           <Meta />
           <Links />
+          {features.isManagedCloud && (
+            <script
+              src="/resources/kapa-widget"
+              crossOrigin="anonymous"
+              async
+              data-website-id={kapa.websiteId}
+              data-project-name="Trigger.dev"
+              data-project-color="#ff9900"
+              data-project-logo="content.trigger.dev/trigger-logo-triangle.png"
+            />
+          )}
         </head>
         <body className="bg-darkBackground h-full overflow-hidden">
           <Outlet />
@@ -109,5 +127,3 @@ function App() {
     </>
   );
 }
-
-export default App;
diff --git a/apps/webapp/app/routes/resources.kapa-widget.ts b/apps/webapp/app/routes/resources.kapa-widget.ts
@@ -0,0 +1,13 @@
+import { type LoaderFunctionArgs } from "@remix-run/node";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const response = await fetch("https://widget.kapa.ai/kapa-widget.bundle.js");
+  const script = await response.text();
+
+  return new Response(script, {
+    headers: {
+      "Content-Type": "application/javascript",
+      "Cache-Control": "public, max-age=86400", // Cache for 1 day
+    },
+  });
+}
