update to react 19 and other packages

Author: Veikkosuhonen

package-lock.json

@@ -46,8 +46,8 @@
     "@types/multer-s3": "^3.0.3",
     "@types/node": "^22.0.0",
     "@types/node-cron": "^3.0.11",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^8.33.1",
@@ -83,7 +83,7 @@
     "@mui/icons-material": "^6.4.12",
     "@mui/material": "^6.4.12",
     "@mui/utils": "^6.1.5",
-    "@mui/x-date-pickers": "^7.0.0",
+    "@mui/x-date-pickers": "^8.11.2",
     "@sentry/node": "^8.0.0",
     "@sentry/react": "^9.40.0",
     "@sentry/vite-plugin": "^4.0.0",
@@ -108,8 +108,8 @@
     "notistack": "^3.0.1",
     "pdf-parse-fork": "^1.2.0",
     "pg": "^8.11.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "react-i18next": "^15.0.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.0",
@@ -128,6 +128,6 @@
     "winston-gelf-transporter": "^1.0.2",
     "winston-loki": "^6.1.3",
     "xlsx": "^0.18.5",
-    "zod": "3.25.61"
+    "zod": "^4.1.8"
   }
 }

package.json

@@ -1,16 +1,14 @@
 import { Box, Button, CircularProgress, CssBaseline, Snackbar } from '@mui/material'
 import { ThemeProvider } from '@mui/material/styles'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { fi } from 'date-fns/locale'
 import { SnackbarProvider } from 'notistack'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect } from 'react'
 import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom'
 import { initShibbolethPinger } from 'unfuck-spa-shibboleth-session'
-import { PUBLIC_URL } from '../config'
 import { Feedback } from './components/Feedback'
 import NavBar, { EmbeddedNavBar } from './components/NavBar'
-import { AppContext } from './contexts/AppContext'
 import { EmbeddedProvider, useIsEmbedded } from './contexts/EmbeddedContext'
 import useCurrentUser from './hooks/useCurrentUser'
 import { AnalyticsProvider } from './stores/analytics'
@@ -97,19 +95,17 @@ const App = () => {
 }
 
 const Layout = () => {
-  const appRef = useRef<HTMLDivElement>(null)
   const isEmbedded = useIsEmbedded()
 
   return (
-    <AppContext.Provider value={appRef}>
+    <>
       <Box
         sx={{
           display: 'flex',
           flexDirection: 'column',
           minHeight: '100vh',
           height: 'auto',
         }}
-        ref={appRef}
       >
         {isEmbedded ? <EmbeddedNavBar /> : <NavBar />}
         <Box sx={{ flex: 1, mt: '4rem' }}>
@@ -118,7 +114,7 @@ const Layout = () => {
         <Feedback />
       </Box>
       <AdminLoggedInAsBanner />
-    </AppContext.Provider>
+    </>
   )
 }
 

src/client/App.tsx

@@ -2,7 +2,8 @@ import { KeyboardReturn } from '@mui/icons-material'
 import { Accordion, AccordionActions, AccordionSummary, Box, Button, Typography } from '@mui/material'
 import { grey } from '@mui/material/colors'
 import { useTranslation } from 'react-i18next'
-import { User } from '../../../types'
+import type { User } from '../../../types'
+import type { JSX } from 'react'
 
 const UserAccordion = ({
   user,

src/client/components/Admin/Usage/UserAccordion.tsx

@@ -1,6 +1,7 @@
 import { TextField, Typography } from '@mui/material'
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 import { useTranslation } from 'react-i18next'
+import type { JSX } from 'react'
 
 const VisibilityOff = () => {
   const { t } = useTranslation()

src/client/components/ChatV2/AssistantInstructionsInput.tsx

@@ -31,7 +31,7 @@ export const ChatBox = ({
   isMobile,
 }: {
   disabled: boolean
-  fileInputRef: React.RefObject<HTMLInputElement>
+  fileInputRef: React.RefObject<HTMLInputElement | null>
   fileName: string
   tokenUsageWarning: string
   tokenUsageAlertOpen: boolean

src/client/components/ChatV2/ChatBox.tsx

@@ -1,5 +1,4 @@
 import { Tabs } from '@mui/material'
-import { get } from 'lodash'
 import React from 'react'
 import { matchPath, useLocation } from 'react-router-dom'
 
@@ -10,7 +9,7 @@ export const RouterTabs = ({ children }: { children: (React.ReactElement | false
 
   const activeIndex = React.Children.toArray(children)
     .filter((c) => React.isValidElement(c))
-    .findIndex((c) => !!matchPath(pathname, stripSearch(get(c, 'props.to'))))
+    .findIndex((c) => !!matchPath(pathname, stripSearch((c.props as { to: string }).to)))
 
   return <Tabs value={activeIndex < 0 ? 0 : activeIndex}>{children}</Tabs>
 }

src/client/components/common/RouterTabs.tsx

@@ -27,6 +27,7 @@ const mockSearch: typeof search = async (_index: RagIndex, _params: { query: str
 
 export const getMockRagIndexSearchTool: typeof getRagIndexSearchTool = (ragIndex: RagIndex) =>
   tool(
+    // @ts-expect-error Langchain types seem slightly broken, "cannot assign unknown to { query: string }"
     async ({ query }: { query: string }) => {
       console.log('Mock search tool invoked with query:', query)
       const { results: documents } = await mockSearch(ragIndex, SearchSchema.parse({ query }))

src/client/contexts/AppContext.ts

@@ -4,8 +4,13 @@ import { RagIndex } from '../../db/models'
 import { search } from './search'
 import { SearchSchema } from '../../../shared/rag'
 
+const schema = z.object({
+  query: z.string().describe('the query to search for'),
+})
+
 export const getRagIndexSearchTool = (ragIndex: RagIndex) =>
   tool(
+    // @ts-expect-error Langchain types seem slightly broken, "cannot assign unknown to { query: string }"
     async ({ query }: { query: string }) => {
       console.log('Search tool invoked with query:', query)
       const { results: documents } = await search(ragIndex, SearchSchema.parse({ query }))
@@ -15,9 +20,7 @@ export const getRagIndexSearchTool = (ragIndex: RagIndex) =>
     {
       name: `document_search`, // Gotcha: function name must match '^[a-zA-Z0-9_\.-]+$' at least in AzureOpenAI. This name must satisfy the name in ChatToolDef type
       description: `Search documents in the materials (titled '${ragIndex.metadata.name}'). Prefer ${ragIndex.metadata.language}, which is the language used in the documents.`,
-      schema: z.object({
-        query: z.string().describe('the query to search for'),
-      }),
+      schema,
       responseFormat: 'content_and_artifact',
     },
   )