refactor: Use next.js instead of vite

2025-04-10 11:47:43 -07:00
parent aaee53e3e6
commit 25524792ec
18 changed files with 3761 additions and 5448 deletions
--- a/index.html
+++ b/index.html
@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Agent Chat</title>
-    <link href="/src/styles.css" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
--- a/package.json
+++ b/package.json
@@ -10,19 +10,17 @@
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "preview": "vite preview"
+    "format:check": "prettier --check ."
  },
  "dependencies": {
-    "@langchain/core": "^0.3.41",
-    "@langchain/langgraph": "^0.2.54",
-    "@langchain/langgraph-api": "^0.0.15",
-    "@langchain/langgraph-cli": "^0.0.15",
-    "@langchain/langgraph-sdk": "^0.0.53",
+    "@langchain/core": "^0.3.44",
+    "@langchain/langgraph": "^0.2.63",
    "@radix-ui/react-avatar": "^1.1.3",
    "@radix-ui/react-dialog": "^1.1.6",
    "@radix-ui/react-label": "^2.1.2",
@@ -30,8 +28,6 @@
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-switch": "^1.1.3",
    "@radix-ui/react-tooltip": "^1.1.8",
-    "@tailwindcss/postcss": "^4.0.9",
-    "@tailwindcss/vite": "^4.0.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
@@ -47,7 +43,6 @@
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-markdown": "^10.0.1",
-    "react-router-dom": "^6.17.0",
    "react-syntax-highlighter": "^15.5.0",
    "recharts": "^2.15.1",
    "rehype-katex": "^7.0.1",
@@ -62,23 +57,25 @@
  },
  "devDependencies": {
    "@eslint/js": "^9.19.0",
+    "@tailwindcss/postcss": "^4.0.13",
    "@types/lodash": "^4.17.16",
    "@types/node": "^22.13.5",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@types/react-syntax-highlighter": "^15.5.13",
-    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "dotenv": "^16.4.7",
    "eslint": "^9.19.0",
+    "eslint-config-next": "15.2.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
+    "next": "^15.2.3",
+    "postcss": "^8.5.3",
    "tailwind-scrollbar": "^4.0.1",
-    "tailwindcss": "^4.0.6",
+    "tailwindcss": "^4.0.13",
    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0"
+    "typescript-eslint": "^8.22.0"
  },
  "overrides": {
    "react-is": "^19.0.0-rc-69d4b800-20241021",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +0,0 @@
-import "./App.css";
-import { Thread } from "@/components/thread";
-
-function App() {
-  return <Thread />;
-}
-
-export default App;
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Inter } from "next/font/google";
+import React from "react";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+
+const inter = Inter({
+  subsets: ["latin"],
+  preload: true,
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Agent Inbox",
+  description: "Agent Inbox UX by LangChain",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <NuqsAdapter>{children}</NuqsAdapter>
+      </body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Thread } from "@/components/thread";
+import { StreamProvider } from "@/providers/Stream";
+import { ThreadProvider } from "@/providers/Thread";
+import { Toaster } from "@/components/ui/sonner";
+import React from "react";
+
+export default function DemoPage(): React.ReactNode {
+  return (
+    <React.Suspense fallback={<div>Loading (layout)...</div>}>
+      <Toaster />
+      <ThreadProvider>
+        <StreamProvider>
+          <Thread />
+        </StreamProvider>
+      </ThreadProvider>
+    </React.Suspense>
+  );
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,21 +0,0 @@
-import "./index.css";
-import App from "./App.tsx";
-import { createRoot } from "react-dom/client";
-import { StreamProvider } from "./providers/Stream.tsx";
-import { ThreadProvider } from "./providers/Thread.tsx";
-import { Toaster } from "@/components/ui/sonner";
-import { NuqsAdapter } from "nuqs/adapters/react-router/v6";
-import { BrowserRouter } from "react-router-dom";
-
-createRoot(document.getElementById("root")!).render(
-  <BrowserRouter>
-    <NuqsAdapter>
-      <ThreadProvider>
-        <StreamProvider>
-          <App />
-        </StreamProvider>
-      </ThreadProvider>
-      <Toaster />
-    </NuqsAdapter>
-  </BrowserRouter>,
-);
--- a/src/providers/Stream.tsx
+++ b/src/providers/Stream.tsx
@@ -128,9 +128,11 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
  children,
 }) => {
  // Get environment variables
-  const envApiUrl: string | undefined = import.meta.env.VITE_API_URL;
-  const envAssistantId: string | undefined = import.meta.env.VITE_ASSISTANT_ID;
-  const envApiKey: string | undefined = import.meta.env.VITE_LANGSMITH_API_KEY;
+  const envApiUrl: string | undefined = process.env.NEXT_PUBLIC_API_URL;
+  const envAssistantId: string | undefined =
+    process.env.NEXT_PUBLIC_ASSISTANT_ID;
+  const envApiKey: string | undefined =
+    process.env.NEXT_PUBLIC_LANGSMITH_API_KEY;

  // Use URL params with env var fallbacks
  const [apiUrl, setApiUrl] = useQueryState("apiUrl", {
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2023",
-    "useDefineForClassFields": true,
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "module": "ES2022",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src", "agent"]
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +1,34 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
  "compilerOptions": {
-    "baseUrl": ".",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
    "paths": {
      "@/*": ["./src/*"]
-    }
-  }
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/hooks/use-threads",
+    "src/app/thread/[threadId]"
+  ],
+  "exclude": ["node_modules"]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,14 +0,0 @@
-import path from "path";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});