frontend[major]: Migrate to nextjs

frontend/.env.example

@@ -0,0 +1,14 @@
+# ------------------LangSmith tracing------------------
+LANGCHAIN_TRACING_V2=true
+LANGCHAIN_ENDPOINT="https://api.smith.langchain.com"
+LANGCHAIN_API_KEY=
+LANGCHAIN_PROJECT=
+# -----------------------------------------------------
+
+WEAVIATE_API_KEY=
+WEAVIATE_URL=
+WEAVIATE_INDEX_NAME=
+
+FIREWORKS_API_KEY=
+
+OPENAI_API_KEY=

frontend/.eslintrc.json

@@ -1,22 +1,3 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "env": {
-    "node": true
-  },
-  "rules": {
-    "@typescript-eslint/no-var-requires": 0,
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "18"
-    }
-  }
+  "extends": "next/core-web-vitals"
 }

frontend/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.yarn/

frontend/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "endOfLine": "lf"
+}

frontend/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

frontend/src/components/CreateExtractor.tsx → frontend/app/components/CreateExtractor.tsx

@@ -23,7 +23,7 @@ import CodeMirror from '@uiw/react-codemirror'
 import Ajv from 'ajv'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { suggestExtractor, useCreateExtractor } from '../api'
+import { suggestExtractor, useCreateExtractor } from '../utils/api'
 
 import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline'
 import { useMutation } from '@tanstack/react-query'

frontend/src/components/Extractor.tsx → frontend/app/components/Extractor.tsx

@@ -1,11 +1,11 @@
 import { Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@chakra-ui/react'
 import Form from '@rjsf/chakra-ui'
 import validator from '@rjsf/validator-ajv8'
-import { useGetExtractor } from '../api'
+import { useGetExtractor } from '../utils/api'
+import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 import { VStack } from '@chakra-ui/react'
 import SyntaxHighlighter from 'react-syntax-highlighter'
-import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 
 export const Extractor = ({ extractorId }: { extractorId: string }) => {
   const { data, isLoading, isError } = useGetExtractor(extractorId)
@@ -33,8 +33,7 @@ export const Extractor = ({ extractorId }: { extractorId: string }) => {
             <Form
               schema={data.schema}
               validator={validator}
-              children={true} // Hide the submit button
-            />
+            ></Form>
           </TabPanel>
           <TabPanel>
             <Text className="mt-1 mb-5">

frontend/src/components/Playground.tsx → frontend/app/components/Playground.tsx

@@ -1,7 +1,7 @@
 import { Button, Textarea } from '@chakra-ui/react'
 import { useMutation } from '@tanstack/react-query'
 import { useParams } from 'react-router'
-import { runExtraction } from '../api'
+import { runExtraction } from '../utils/api'
 import { Extractor } from './Extractor'
 import { ResultsTable } from './ResultsTable'
 

frontend/src/components/Sidebar.tsx → frontend/app/components/Sidebar.tsx

@@ -12,7 +12,7 @@ import {
 } from '@chakra-ui/react'
 import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { NavLink, useNavigate } from 'react-router-dom'
-import { useDeleteExtractor, useGetExtractors } from '../api'
+import { useDeleteExtractor, useGetExtractors } from '../utils/api'
 
 const NewIconImported = () => {
   return <Icon as={PencilSquareIcon} />

frontend/app/e/[extractorId].tsx

@@ -0,0 +1,3 @@
+import { Playground } from '../components/Playground';
+
+export default Playground;

frontend/app/layout.tsx

@@ -0,0 +1,50 @@
+import "./globals.css";
+import { ReactNode } from "react";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Sidebar } from './components/Sidebar'
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Chat LangChain",
+  description: "Chatbot for LangChain",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <html lang="en" className="h-full">
+      <head>
+        <link
+          rel="icon"
+          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦜</text></svg>"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>LangChain Extract</title>
+      </head>
+      <body className={`${inter.className} h-full`}>
+      <div className="flex flex-col w-100% h-full">
+        <div className="flex justify-between bg-slate-200 mb-4 p-3 items-center gap-2">
+          <div className="font-semibold">🦜⛏️ LangChain Extract</div>
+          <div className="text-s text-rose-800">
+            <strong>Research Preview</strong>: this app is unauthenticated and
+            all data can be found. Do not use with sensitive data.
+          </div>
+        </div>
+        <div className="flex gap-3 ml-5 mr-5">
+          <div className="w-1/6">
+            <Sidebar />
+          </div>
+          <div className="m-auto w-5/6">
+            {children}
+          </div>
+        </div>
+      </div>
+      </body>
+    </html>
+  );
+}

frontend/app/new/page.tsx

@@ -0,0 +1,3 @@
+import CreateExtractor from '../components/CreateExtractor'
+
+export default CreateExtractor;

frontend/app/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ToastContainer } from "react-toastify";
+import CreateExtractor from './components/CreateExtractor'
+
+import { ChakraProvider } from "@chakra-ui/react";
+
+export default function Home() {
+  return (
+    <ChakraProvider>
+      <ToastContainer />
+      <CreateExtractor />
+    </ChakraProvider>
+  );
+}

frontend/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

frontend/package.json

@@ -1,62 +1,63 @@
 {
-  "name": "langchain-extract",
+  "name": "langchain-extract-frontend",
+  "version": "0.1.0",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "license": "MIT",
+  "packageManager": "yarn@1.22.19",
   "scripts": {
-    "fix": "prettier --write . && eslint --fix --ext=js,jsx,ts,tsx .",
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && prettier --check"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write .",
+    "format:check": "prettier --config .prettierrc --check \"app\""
   },
   "dependencies": {
-    "@chakra-ui/card": "^2.2.0",
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8",
+    "@chakra-ui/icons": "^2.1.0",
+    "@chakra-ui/react": "^2.8.1",
     "@codemirror/lang-json": "^6.0.1",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@heroicons/react": "^2.1.1",
-    "@mui/material": "^5.15.10",
+    "@langchain/community": "^0.0.27",
+    "@langchain/core": "^0.1.26",
+    "@langchain/openai": "^0.0.14",
+    "@langchain/weaviate": "^0.0.1",
     "@rjsf/chakra-ui": "^5.17.1",
     "@rjsf/core": "^5.17.1",
     "@rjsf/utils": "^5.17.1",
     "@rjsf/validator-ajv8": "^5.17.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/react-query": "^5.22.2",
+    "@types/dompurify": "^3.0.5",
+    "@types/marked": "^5.0.1",
+    "@types/node": "20.4.9",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
     "@uiw/react-codemirror": "^4.21.24",
-    "axios": "^1.6.7",
-    "chakra-react-select": "^4.7.6",
-    "eslint-plugin-react": "^7.34.1",
-    "framer-motion": "^5",
-    "orval": "^6.25.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "autoprefixer": "10.4.14",
+    "axios": "^1.6.8",
+    "dompurify": "^3.0.8",
+    "emojisplosion": "^2.6.1",
+    "eslint": "8.46.0",
+    "eslint-config-next": "13.4.13",
+    "framer-motion": "^10.16.4",
+    "graphql": "^16.8.1",
+    "highlight.js": "^11.8.0",
+    "langchain": "^0.1.4",
+    "langsmith": "^0.0.41",
+    "marked": "^7.0.2",
+    "next": "13.5.4",
+    "postcss": "8.4.31",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "swr": "^2.2.5",
-    "vite-plugin-eslint": "^1.8.1",
-    "yarn": "^1.22.21"
+    "react-textarea-autosize": "^8.5.3",
+    "react-toastify": "^9.1.3",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6",
+    "weaviate-ts-client": "^2.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.17",
-    "daisyui": "^4.7.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "postcss": "^8.4.35",
-    "prettier": "3.2.5",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2",
-    "typescript-eslint": "^7.2.0",
-    "vite": "^5.1.4"
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "prettier": "^3.0.3",
+    "typescript": "5.1.6"
   }
 }

frontend/postcss.config.js

@@ -1,6 +1,6 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};