Chore/admin/upgrade-to-react-router-v7

ui/admin/.gitignore

@@ -5,3 +5,5 @@ node_modules
 /public/build
 .env
 .idea/
+
+.react-router/

ui/admin/app/components/agent/AgentPublishStatus.tsx

@@ -1,6 +1,6 @@
-import { Link } from "@remix-run/react";
 import { useMemo } from "react";
-import { $path } from "remix-routes";
+import { Link } from "react-router";
+import { $path } from "safe-routes";
 import useSWR from "swr";
 
 import { Agent } from "~/lib/model/agents";

ui/admin/app/components/composed/FirstModelProviderBanner.tsx

@@ -1,5 +1,5 @@
-import { Link, useLocation } from "@remix-run/react";
-import { $path } from "remix-routes";
+import { Link, useLocation } from "react-router";
+import { $path } from "safe-routes";
 
 import { assetUrl } from "~/lib/utils";
 
@@ -10,7 +10,9 @@ import { useModelProviders } from "~/hooks/model-providers/useModelProviders";
 export function FirstModelProviderBanner() {
     const { configured: modelProviderConfigured } = useModelProviders();
     const location = useLocation();
-    const isModelsProviderPage = location.pathname.includes("/model-providers");
+    const isModelsProviderPage = location.pathname.includes(
+        $path("/model-providers")
+    );
 
     return isModelsProviderPage || modelProviderConfigured ? null : (
         <div className="w-full">

ui/admin/app/components/errors/RouteError.tsx

@@ -1,4 +1,4 @@
-import { ErrorResponse } from "@remix-run/react";
+import { ErrorResponse } from "react-router";
 
 import { ObotLogo } from "~/components/branding/ObotLogo";
 import { Button } from "~/components/ui/button";

ui/admin/app/components/header/HeaderNav.tsx

@@ -1,6 +1,6 @@
-import { Link, UIMatch, useLocation, useMatches } from "@remix-run/react";
 import React from "react";
-import { $path } from "remix-routes";
+import { Link, UIMatch, useLocation, useMatches } from "react-router";
+import { $path } from "safe-routes";
 
 import { RouteHandle } from "~/lib/service/routeHandles";
 import { cn } from "~/lib/utils";

ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx

@@ -11,7 +11,7 @@ import {
     UploadIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { $path } from "remix-routes";
+import { $path } from "safe-routes";
 import useSWR, { SWRResponse } from "swr";
 
 import { Agent, KNOWLEDGE_TOOL } from "~/lib/model/agents";

ui/admin/app/components/model-providers/ModelProviderLists.tsx

@@ -1,5 +1,5 @@
-import { Link } from "@remix-run/react";
 import { CircleCheckIcon, CircleSlashIcon } from "lucide-react";
+import { Link } from "react-router";
 
 import { ModelProvider } from "~/lib/model/modelProviders";
 

ui/admin/app/components/sidebar/Sidebar.tsx

@@ -1,4 +1,3 @@
-import { Link, useLocation } from "@remix-run/react";
 import {
     BotIcon,
     BoxesIcon,
@@ -10,7 +9,8 @@ import {
     WebhookIcon,
     Wrench,
 } from "lucide-react";
-import { $path } from "remix-routes";
+import { Link, useLocation } from "react-router";
+import { $path } from "safe-routes";
 
 import { cn } from "~/lib/utils";
 

ui/admin/app/components/thread/ThreadMeta.tsx

@@ -1,5 +1,5 @@
 import { EditIcon, ExternalLink, FileIcon, FilesIcon } from "lucide-react";
-import { $path } from "remix-routes";
+import { $path } from "safe-routes";
 
 import { Agent } from "~/lib/model/agents";
 import { KnowledgeFile } from "~/lib/model/knowledge";

ui/admin/app/components/ui/link.tsx

@@ -1,9 +1,6 @@
-import {
-    Link as RemixLink,
-    LinkProps as RemixLinkProps,
-} from "@remix-run/react";
 import { VariantProps, cva } from "class-variance-authority";
 import { forwardRef } from "react";
+import { Link as RemixLink, LinkProps as RemixLinkProps } from "react-router";
 
 import { cn } from "~/lib/utils";
 

ui/admin/app/components/webhooks/WebhookActions.tsx

@@ -1,5 +1,5 @@
 import { EllipsisIcon } from "lucide-react";
-import { $path } from "remix-routes";
+import { $path } from "safe-routes";
 
 import { Webhook } from "~/lib/model/webhooks";
 

ui/admin/app/components/webhooks/WebhookConfirmation.tsx

@@ -1,4 +1,4 @@
-import { $path } from "remix-routes";
+import { $path } from "safe-routes";
 
 import { Webhook } from "~/lib/model/webhooks";
 import { cn } from "~/lib/utils";

ui/admin/app/components/workflow/CreateWorkflow.tsx

@@ -1,6 +1,6 @@
-import { useNavigate } from "@remix-run/react";
 import { PlusIcon } from "lucide-react";
-import { $path } from "remix-routes";
+import { useNavigate } from "react-router";
+import { $path } from "safe-routes";
 import { toast } from "sonner";
 import { mutate } from "swr";
 

ui/admin/app/entry.client.tsx

@@ -3,15 +3,15 @@
  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
  * For more information, see https://remix.run/file-conventions/entry.client
  */
-import { RemixBrowser } from "@remix-run/react";
 import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
 
 startTransition(() => {
     hydrateRoot(
         document,
         <StrictMode>
-            <RemixBrowser />
+            <HydratedRouter />
         </StrictMode>
     );
 });

ui/admin/app/hooks/useRouteInfo.ts

@@ -1,5 +1,5 @@
-import { Location, useLocation, useParams } from "@remix-run/react";
 import { useMemo } from "react";
+import { Location, useLocation, useParams } from "react-router";
 
 import { RouteService } from "~/lib/service/routeService";
 

ui/admin/app/lib/service/routeService.ts

@@ -1,10 +1,10 @@
 import queryString from "query-string";
-import { $params, $path, Routes, RoutesWithParams } from "remix-routes";
+import { $path, type Routes, type RoutesWithParams } from "safe-routes";
 import { ZodNull, ZodSchema, ZodType, z } from "zod";
 
 // note: If you see a linter error related to `Routes`, or `RoutesWithParams`,
 // it's probably because you need to run `pnpm run dev` or `pnpm run build`
-// these types are generated by remix-routes, and are used to provide type
+// these types are generated by safe-routes, and are used to provide type
 // safety when navigating through the app
 
 const QuerySchemas = {
@@ -137,16 +137,26 @@ type QueryInfo<T extends keyof Routes> = z.infer<
     (typeof RouteHelperMap)[T]["schema"]
 >;
 
-type PathInfo<T extends keyof RoutesWithParams> = ReturnType<
-    typeof $params<T, Routes[T]["params"]>
->;
+type PathInfo<T extends keyof RoutesWithParams> = {
+    [key in keyof Routes[T]["params"]]: string;
+};
+
+type RoutePathInfo<T extends keyof Routes> = T extends keyof RoutesWithParams
+    ? PathInfo<T>
+    : unknown;
 
 export type RouteInfo<T extends keyof Routes = keyof Routes> = {
     path: T;
     query: QueryInfo<T> | null;
-    pathParams: T extends keyof RoutesWithParams ? PathInfo<T> : unknown;
+    pathParams: RoutePathInfo<T>;
 };
 
+function convertToStringObject(obj: object) {
+    return Object.fromEntries(
+        Object.entries(obj).map(([key, value]) => [key, String(value)])
+    );
+}
+
 function getRouteInfo<T extends keyof Routes>(
     path: T,
     url: URL,
@@ -157,7 +167,7 @@ function getRouteInfo<T extends keyof Routes>(
     return {
         path,
         query: parseQuery(url.search, helper.schema),
-        pathParams: $params(path as keyof RoutesWithParams, params) as Todo,
+        pathParams: convertToStringObject(params) as RoutePathInfo<T>,
     };
 }
 
@@ -178,10 +188,7 @@ function getUnknownRouteInfo(
             return {
                 path: route.path,
                 query: parseQuery(url.search, route.schema as ZodSchema),
-                pathParams: $params(
-                    route.path as keyof RoutesWithParams,
-                    params
-                ),
+                pathParams: convertToStringObject(params),
             } as UnknownRouteInfo;
     }
 
@@ -200,5 +207,4 @@ export const RouteService = {
     getUnknownRouteInfo,
     getRouteInfo,
     getQueryParams,
-    getPathParams: $params,
 };

ui/admin/app/root.tsx

@@ -1,12 +1,6 @@
-import type { LinksFunction } from "@remix-run/node";
-import {
-    Links,
-    Meta,
-    Outlet,
-    Scripts,
-    ScrollRestoration,
-} from "@remix-run/react";
 import { CircleCheckIcon } from "lucide-react";
+import type { LinksFunction } from "react-router";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import { SWRConfig } from "swr";
 
 import { AuthProvider } from "~/components/auth/AuthContext";

ui/admin/app/routes.ts

@@ -0,0 +1,3 @@
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes();

ui/admin/app/routes/_auth.agents.$agent.tsx

@@ -1,12 +1,12 @@
+import { useCallback } from "react";
 import {
     ClientLoaderFunctionArgs,
     redirect,
     useLoaderData,
     useMatch,
     useNavigate,
-} from "@remix-run/react";
-import { useCallback } from "react";
-import { $path } from "remix-routes";
+} from "react-router";
+import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
 import { AgentService } from "~/lib/service/api/agentService";

ui/admin/app/routes/_auth.agents._index.tsx

@@ -1,9 +1,9 @@
 import { PlusIcon } from "@radix-ui/react-icons";
-import { useNavigate } from "@remix-run/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { SquarePen } from "lucide-react";
 import { useMemo } from "react";
-import { $path } from "remix-routes";
+import { useNavigate } from "react-router";
+import { $path } from "safe-routes";
 import useSWR, { mutate, preload } from "swr";
 
 import { Agent } from "~/lib/model/agents";

ui/admin/app/routes/_auth.threads.$id.tsx

@@ -1,12 +1,12 @@
+import { ArrowLeftIcon } from "lucide-react";
 import {
     ClientLoaderFunctionArgs,
     Link,
     redirect,
     useLoaderData,
     useMatch,
-} from "@remix-run/react";
-import { ArrowLeftIcon } from "lucide-react";
-import { $path } from "remix-routes";
+} from "react-router";
+import { $path } from "safe-routes";
 
 import { AgentService } from "~/lib/service/api/agentService";
 import { ThreadsService } from "~/lib/service/api/threadsService";

ui/admin/app/routes/_auth.threads._index.tsx

@@ -1,15 +1,15 @@
 import { PersonIcon, ReaderIcon } from "@radix-ui/react-icons";
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
+import { PuzzleIcon, Trash, XIcon } from "lucide-react";
+import { useMemo } from "react";
 import {
     ClientLoaderFunctionArgs,
     Link,
     useLoaderData,
     useNavigate,
     useSearchParams,
-} from "@remix-run/react";
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { PuzzleIcon, Trash, XIcon } from "lucide-react";
-import { useMemo } from "react";
-import { $path } from "remix-routes";
+} from "react-router";
+import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
 import { Agent } from "~/lib/model/agents";

ui/admin/app/routes/_auth.tsx

@@ -1,4 +1,4 @@
-import { Outlet, isRouteErrorResponse, useRouteError } from "@remix-run/react";
+import { Outlet, isRouteErrorResponse, useRouteError } from "react-router";
 import { preload } from "swr";
 
 import { ForbiddenError, UnauthorizedError } from "~/lib/service/api/apiErrors";

ui/admin/app/routes/_auth.users.tsx

@@ -1,6 +1,6 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
-import { $path } from "remix-routes";
+import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
 import { Thread } from "~/lib/model/threads";

ui/admin/app/routes/_auth.webhooks.$webhook.tsx

@@ -2,7 +2,7 @@ import {
     ClientLoaderFunctionArgs,
     useLoaderData,
     useMatch,
-} from "@remix-run/react";
+} from "react-router";
 import useSWR, { preload } from "swr";
 
 import { WebhookApiService } from "~/lib/service/api/webhookApiService";

ui/admin/app/routes/_auth.webhooks._index.tsx

@@ -1,8 +1,8 @@
-import { useNavigate } from "@remix-run/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { PlusIcon } from "lucide-react";
 import { useMemo } from "react";
-import { $path } from "remix-routes";
+import { useNavigate } from "react-router";
+import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
 import { Webhook } from "~/lib/model/webhooks";

ui/admin/app/routes/_auth.workflows.$workflow.tsx

@@ -1,12 +1,12 @@
+import { useCallback } from "react";
 import {
     ClientLoaderFunctionArgs,
     redirect,
     useLoaderData,
     useMatch,
     useNavigate,
-} from "@remix-run/react";
-import { useCallback } from "react";
-import { $path } from "remix-routes";
+} from "react-router";
+import { $path } from "safe-routes";
 import useSWR, { preload } from "swr";
 
 import { WorkflowService } from "~/lib/service/api/workflowService";

ui/admin/app/routes/_auth.workflows._index.tsx

@@ -1,8 +1,8 @@
-import { useNavigate } from "@remix-run/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { PenSquareIcon } from "lucide-react";
 import { useMemo } from "react";
-import { $path } from "remix-routes";
+import { useNavigate } from "react-router";
+import { $path } from "safe-routes";
 import useSWR, { mutate, preload } from "swr";
 
 import { Workflow } from "~/lib/model/workflows";

ui/admin/app/routes/_index.tsx

@@ -1,5 +1,5 @@
-import { redirect, useLoaderData } from "@remix-run/react";
-import { $path } from "remix-routes";
+import { redirect, useLoaderData } from "react-router";
+import { $path } from "safe-routes";
 
 export const clientLoader = async () => {
     throw redirect($path("/agents"));