Upgrade to latest NextJS + switch to turbopack

web/next.config.js

@@ -10,7 +10,6 @@ const { withSentryConfig } = require("@sentry/nextjs");
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
-  swcMinify: true,
   publicRuntimeConfig: {
     version,
   },

web/package.json

@@ -3,7 +3,7 @@
   "version": "0.2-dev",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -12,6 +12,8 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@headlessui/react": "^2.2.0",
     "@headlessui/tailwindcss": "^0.2.1",
     "@phosphor-icons/react": "^2.0.8",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -39,7 +41,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.454.0",
     "mdast-util-find-and-replace": "^3.0.1",
-    "next": "^14.2.3",
+    "next": "^15.0.2",
     "npm": "^10.8.0",
     "postcss": "^8.4.31",
     "posthog-js": "^1.176.0",
@@ -71,5 +73,8 @@
     "eslint": "^8.48.0",
     "eslint-config-next": "^14.1.0",
     "prettier": "2.8.8"
+  },
+  "overrides": {
+    "react-is": "^19.0.0-rc-69d4b800-20241021"
   }
 }

web/src/app/admin/assistants/[id]/page.tsx

@@ -10,7 +10,8 @@ import { AdminPageTitle } from "@/components/admin/Title";
 import CardSection from "@/components/admin/CardSection";
 import Title from "@/components/ui/title";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const [values, error] = await fetchAssistantEditorInfoSS(params.id);
 
   let body;

web/src/app/admin/bot/[id]/page.tsx

@@ -13,7 +13,8 @@ import {
 } from "@/lib/assistants/fetchAssistantsSS";
 import { getStandardAnswerCategoriesIfEE } from "@/components/standardAnswers/getStandardAnswerCategoriesIfEE";
 
-async function Page({ params }: { params: { id: string } }) {
+async function Page(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const tasks = [
     fetchSS("/manage/admin/slack-bot/config"),
     fetchSS("/manage/document-set"),

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -16,7 +16,7 @@ import { Button } from "@/components/ui/button";
 import Title from "@/components/ui/title";
 import { Separator } from "@/components/ui/separator";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, use } from "react";
 import useSWR, { mutate } from "swr";
 import { AdvancedConfigDisplay, ConfigDisplay } from "./ConfigDisplay";
 import { DeletionButton } from "./DeletionButton";
@@ -278,7 +278,8 @@ function Main({ ccPairId }: { ccPairId: number }) {
   );
 }
 
-export default function Page({ params }: { params: { ccPairId: string } }) {
+export default function Page(props: { params: Promise<{ ccPairId: string }> }) {
+  const params = use(props.params);
   const ccPairId = parseInt(params.ccPairId);
 
   return (

web/src/app/admin/connectors/[connector]/auth/callback/route.ts

@@ -9,14 +9,15 @@ import {
 import { processCookies } from "@/lib/userSS";
 
 export const GET = async (request: NextRequest) => {
+  const requestCookies = await cookies();
   const connector = request.url.includes("gmail") ? "gmail" : "google-drive";
   const callbackEndpoint = `/manage/connector/${connector}/callback`;
   const url = new URL(buildUrl(callbackEndpoint));
   url.search = request.nextUrl.search;
 
   const response = await fetch(url.toString(), {
     headers: {
-      cookie: processCookies(cookies()),
+      cookie: processCookies(requestCookies),
     },
   });
 
@@ -33,7 +34,7 @@ export const GET = async (request: NextRequest) => {
       ? GMAIL_AUTH_IS_ADMIN_COOKIE_NAME
       : GOOGLE_DRIVE_AUTH_IS_ADMIN_COOKIE_NAME;
 
-  if (cookies().get(authCookieName)?.value?.toLowerCase() === "true") {
+  if (requestCookies.get(authCookieName)?.value?.toLowerCase() === "true") {
     return NextResponse.redirect(
       new URL(`/admin/connectors/${connector}`, getDomain(request))
     );

web/src/app/admin/connectors/[connector]/page.tsx

@@ -1,11 +1,10 @@
 import { ConfigurableSources } from "@/lib/types";
 import ConnectorWrapper from "./ConnectorWrapper";
 
-export default async function Page({
-  params,
-}: {
-  params: { connector: string };
+export default async function Page(props: {
+  params: Promise<{ connector: string }>;
 }) {
+  const params = await props.params;
   return (
     <ConnectorWrapper
       connector={params.connector.replace("-", "_") as ConfigurableSources}

web/src/app/admin/documents/explorer/page.tsx

@@ -3,11 +3,10 @@ import { ZoomInIcon } from "@/components/icons/icons";
 import { Explorer } from "./Explorer";
 import { fetchValidFilterInfo } from "@/lib/search/utilsSS";
 
-const Page = async ({
-  searchParams,
-}: {
-  searchParams: { [key: string]: string };
+const Page = async (props: {
+  searchParams: Promise<{ [key: string]: string }>;
 }) => {
+  const searchParams = await props.searchParams;
   const { connectors, documentSets } = await fetchValidFilterInfo();
 
   return (

web/src/app/admin/documents/sets/[documentSetId]/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { use } from "react";
 
 import { ErrorCallout } from "@/components/ErrorCallout";
 import { refreshDocumentSets, useDocumentSets } from "../hooks";
@@ -93,11 +94,10 @@ function Main({ documentSetId }: { documentSetId: number }) {
   );
 }
 
-export default function Page({
-  params,
-}: {
-  params: { documentSetId: string };
+export default function Page(props: {
+  params: Promise<{ documentSetId: string }>;
 }) {
+  const params = use(props.params);
   const documentSetId = parseInt(params.documentSetId);
 
   return (

web/src/app/admin/indexing/[id]/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { use } from "react";
 
 import { BackButton } from "@/components/BackButton";
 import { ErrorCallout } from "@/components/ErrorCallout";
@@ -46,7 +47,8 @@ function Main({ id }: { id: number }) {
   );
 }
 
-export default function Page({ params }: { params: { id: string } }) {
+export default function Page(props: { params: Promise<{ id: string }> }) {
+  const params = use(props.params);
   const id = parseInt(params.id);
 
   return (

web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx

@@ -5,6 +5,7 @@ import {
   TableHead,
   TableBody,
   TableCell,
+  TableHeader,
 } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -363,52 +364,54 @@ export function CCPairIndexingStatusTable({
 
   return (
     <Table>
-      <ConnectorRow
-        invisible
-        ccPairsIndexingStatus={{
-          cc_pair_id: 1,
-          name: "Sample File Connector",
-          cc_pair_status: ConnectorCredentialPairStatus.ACTIVE,
-          last_status: "success",
-          connector: {
+      <TableHeader>
+        <ConnectorRow
+          invisible
+          ccPairsIndexingStatus={{
+            cc_pair_id: 1,
             name: "Sample File Connector",
-            source: "file",
-            input_type: "poll",
-            connector_specific_config: {
-              file_locations: ["/path/to/sample/file.txt"],
+            cc_pair_status: ConnectorCredentialPairStatus.ACTIVE,
+            last_status: "success",
+            connector: {
+              name: "Sample File Connector",
+              source: "file",
+              input_type: "poll",
+              connector_specific_config: {
+                file_locations: ["/path/to/sample/file.txt"],
+              },
+              refresh_freq: 86400,
+              prune_freq: null,
+              indexing_start: new Date("2023-07-01T12:00:00Z"),
+              id: 1,
+              credential_ids: [],
+              time_created: "2023-07-01T12:00:00Z",
+              time_updated: "2023-07-01T12:00:00Z",
             },
-            refresh_freq: 86400,
-            prune_freq: null,
-            indexing_start: new Date("2023-07-01T12:00:00Z"),
-            id: 1,
-            credential_ids: [],
-            time_created: "2023-07-01T12:00:00Z",
-            time_updated: "2023-07-01T12:00:00Z",
-          },
-          credential: {
-            id: 1,
-            name: "Sample Credential",
-            source: "file",
-            user_id: "1",
-            time_created: "2023-07-01T12:00:00Z",
-            time_updated: "2023-07-01T12:00:00Z",
-            credential_json: {},
-            admin_public: false,
-          },
-          access_type: "public",
-          docs_indexed: 1000,
-          last_success: "2023-07-01T12:00:00Z",
-          last_finished_status: "success",
-          latest_index_attempt: null,
-          owner: "1",
-          error_msg: "",
-          deletion_attempt: null,
-          is_deletable: true,
-          in_progress: false,
-          groups: [], // Add this line
-        }}
-        isEditable={false}
-      />
+            credential: {
+              id: 1,
+              name: "Sample Credential",
+              source: "file",
+              user_id: "1",
+              time_created: "2023-07-01T12:00:00Z",
+              time_updated: "2023-07-01T12:00:00Z",
+              credential_json: {},
+              admin_public: false,
+            },
+            access_type: "public",
+            docs_indexed: 1000,
+            last_success: "2023-07-01T12:00:00Z",
+            last_finished_status: "success",
+            latest_index_attempt: null,
+            owner: "1",
+            error_msg: "",
+            deletion_attempt: null,
+            is_deletable: true,
+            in_progress: false,
+            groups: [], // Add this line
+          }}
+          isEditable={false}
+        />
+      </TableHeader>
       <div className="flex -mt-12 items-center w-0 m4 gap-x-2">
         <input
           type="text"

web/src/app/admin/tools/edit/[toolId]/page.tsx

@@ -9,7 +9,10 @@ import { AdminPageTitle } from "@/components/admin/Title";
 import { BackButton } from "@/components/BackButton";
 import { ToolIcon } from "@/components/icons/icons";
 
-export default async function Page({ params }: { params: { toolId: string } }) {
+export default async function Page(props: {
+  params: Promise<{ toolId: string }>;
+}) {
+  const params = await props.params;
   const tool = await fetchToolByIdSS(params.toolId);
 
   let body;

web/src/app/api/[...path]/route.ts

@@ -6,50 +6,57 @@ each request type >:( */
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { path: string[] } }
+  props: { params: Promise<{ path: string[] }> }
 ) {
+  const params = await props.params;
   return handleRequest(request, params.path);
 }
 
 export async function POST(
   request: NextRequest,
-  { params }: { params: { path: string[] } }
+  props: { params: Promise<{ path: string[] }> }
 ) {
+  const params = await props.params;
   return handleRequest(request, params.path);
 }
 
 export async function PUT(
   request: NextRequest,
-  { params }: { params: { path: string[] } }
+  props: { params: Promise<{ path: string[] }> }
 ) {
+  const params = await props.params;
   return handleRequest(request, params.path);
 }
 
 export async function PATCH(
   request: NextRequest,
-  { params }: { params: { path: string[] } }
+  props: { params: Promise<{ path: string[] }> }
 ) {
+  const params = await props.params;
   return handleRequest(request, params.path);
 }
 
 export async function DELETE(
   request: NextRequest,
-  { params }: { params: { path: string[] } }
+  props: { params: Promise<{ path: string[] }> }
 ) {
+  const params = await props.params;
   return handleRequest(request, params.path);
 }
 
 export async function HEAD(
   request: NextRequest,
-  { params }: { params: { path: string[] } }
+  props: { params: Promise<{ path: string[] }> }
 ) {
+  const params = await props.params;
   return handleRequest(request, params.path);
 }
 
 export async function OPTIONS(
   request: NextRequest,
-  { params }: { params: { path: string[] } }
+  props: { params: Promise<{ path: string[] }> }
 ) {
+  const params = await props.params;
   return handleRequest(request, params.path);
 }
 

web/src/app/assistants/edit/[id]/page.tsx

@@ -9,7 +9,8 @@ import { DeletePersonaButton } from "@/app/admin/assistants/[id]/DeletePersonaBu
 import { LargeBackButton } from "../../LargeBackButton";
 import Title from "@/components/ui/title";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const [values, error] = await fetchAssistantEditorInfoSS(params.id);
 
   let body;