fix: dependabot vulnerability for jsondiffpatch by upgrading to AI SDK v5 (#360)

frontend/package.json

@@ -18,12 +18,15 @@
     "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload"
   },
   "dependencies": {
-    "@ai-sdk/react": "^1.1.24",
+    "@ai-sdk/openai": "^2.0.40",
+    "@ai-sdk/provider": "^2.0.0",
+    "@ai-sdk/provider-utils": "^3.0.0",
+    "@ai-sdk/react": "^2.0.59",
     "@emoji-mart/data": "^1.2.1",
-    "@hookform/resolvers": "^3.10.0",
-    "@payloadcms/db-sqlite": "^3.51.0",
-    "@payloadcms/next": "^3.51.0",
-    "@payloadcms/richtext-lexical": "^3.51.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@payloadcms/db-sqlite": "^3.58.0",
+    "@payloadcms/next": "^3.58.0",
+    "@payloadcms/richtext-lexical": "^3.58.0",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-avatar": "^1.1.2",
@@ -48,7 +51,7 @@
     "@sentry/nextjs": "^9.0.1",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-table": "^8.21.2",
-    "ai": "^4.1.20",
+    "ai": "^5.0.59",
     "archiver": "^7.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -70,8 +73,8 @@
     "lucide-react": "^0.474.0",
     "next": "^15.5.2",
     "next-themes": "^0.4.6",
-    "ollama-ai-provider": "^1.2.0",
-    "payload": "^3.51.0",
+    "ollama-ai-provider-v2": "^1.4.1",
+    "payload": "^3.58.0",
     "pdf-parse": "^1.1.1",
     "pm2": "^6.0.10",
     "react": "^19.0.0",
@@ -90,7 +93,7 @@
     "tesseract.js": "^6.0.0",
     "vaul": "^1.1.2",
     "webpack": "^5.99.5",
-    "zod": "^3.24.2",
+    "zod": "^4.1.11",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
@@ -115,5 +118,25 @@
     "tailwindcss": "^3.4.1",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5"
+  },
+  "overrides": {
+    "esbuild": "^0.25.10",
+    "pino": "^9.13.0",
+    "prismjs": "^1.30.0",
+    "@esbuild-kit/core-utils": {
+      "esbuild": "^0.25.10"
+    },
+    "@esbuild-kit/esm-loader": {
+      "esbuild": "^0.25.10"
+    },
+    "drizzle-kit": {
+      "esbuild": "^0.25.10",
+      "@esbuild-kit/esm-loader": {
+        "esbuild": "^0.25.10"
+      },
+      "@esbuild-kit/core-utils": {
+        "esbuild": "^0.25.10"
+      }
+    }
   }
 }

frontend/src/app/(app)/workspace/chat/history/page.tsx

@@ -33,6 +33,7 @@ import { usePersonaStore } from '@/lib/store/persona-store'
 import { Badge } from '@/components/ui/badge'
 import { useContextAvailability } from '@/lib/hooks/use-context-availability'
 import { getSelectContextDescription } from '@/lib/utils/context-messages'
+import { extractTextFromMessage } from '@/lib/utils/message'
 
 export default function ChatHistoryPage() {
   const [, setIsMobile] = useState(false)
@@ -53,7 +54,7 @@ export default function ChatHistoryPage() {
 
   const filteredChats = chatArray.filter((chat) =>
     chat.messages.some((message) =>
-      message.content.toLowerCase().includes(searchTerm.toLowerCase()),
+      extractTextFromMessage(message).toLowerCase().includes(searchTerm.toLowerCase()),
     ),
   )
 
@@ -185,7 +186,7 @@ export default function ChatHistoryPage() {
                         )}
                       </CardTitle>
                       <CardDescription className="ml-2 max-w-[240px] truncate text-sm">
-                        {chat.messages[1].content}
+                        {extractTextFromMessage(chat.messages[1])}
                       </CardDescription>
                     </div>
                     <div className="flex items-center space-x-2">

frontend/src/app/(app)/workspace/chat/page.tsx

@@ -11,7 +11,7 @@ import { generateUUID } from '@/lib/utils'
 import Chat from '@/components/chat/chat'
 import { useEffect, useState } from 'react'
 import { ContextRequirementMessage } from '@/components/context-requirement-message'
-import { Message } from '@ai-sdk/react'
+import { UIMessage } from '@ai-sdk/react'
 import { useContextAvailability } from '@/lib/hooks/use-context-availability'
 import { usePersonaStore } from '@/lib/store/persona-store'
 
@@ -53,14 +53,19 @@ export default function ChatPage() {
     id: 'Bagaimana saya dapat membantu Anda hari ini? ',
     en: 'How can I help you today? ',
   }
-  const prompt = prompts[lang] ?? prompts.en
+  const prompt = (prompts[lang as 'en' | 'id'] ?? prompts.en) as string
 
-  const welcomeMessage: Message[] = [
+  const welcomeMessage: UIMessage[] = [
     {
       id: 'welcome-1',
       role: 'assistant',
-      content: greeting + prompt,
-      createdAt: new Date(),
+      parts: [
+        {
+          type: 'text',
+          text: greeting + prompt,
+        },
+      ],
+      metadata: { createdAt: Date.now() },
     },
   ]
 

frontend/src/app/(app)/workspace/courses/create/page.tsx

@@ -16,7 +16,7 @@ import {
   Search,
   X,
 } from 'lucide-react'
-import { zodResolver } from '@hookform/resolvers/zod'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { useModelStore } from '@/lib/store/model-store'
@@ -147,7 +147,7 @@ export default function CreateCoursePage() {
   }
 
   const form = useForm<CourseFormValues>({
-    resolver: zodResolver(courseFormSchema),
+    resolver: standardSchemaResolver(courseFormSchema),
     defaultValues,
     mode: 'onBlur', // Validate on blur (not on every change)
     reValidateMode: 'onSubmit', // Only re-validate on submit, not on every change

frontend/src/app/(app)/workspace/courses/edit/[id]/page.tsx

@@ -6,7 +6,7 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
 import { AlertCircle, ArrowLeft, Check, Loader2, X } from 'lucide-react'
-import { zodResolver } from '@hookform/resolvers/zod'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { useModelStore } from '@/lib/store/model-store'
@@ -163,7 +163,7 @@ export default function EditCoursePage({ params }: { params: Promise<{ id: strin
   }, [coursesData])
 
   const form = useForm<CourseFormValues>({
-    resolver: zodResolver(courseFormSchema),
+    resolver: standardSchemaResolver(courseFormSchema),
     mode: 'onBlur', // Validate on blur (not on every change)
     reValidateMode: 'onSubmit', // Only re-validate on submit, not on every change
     defaultValues: staticDefaultValues,

frontend/src/app/(app)/workspace/programmes/create/page.tsx

@@ -16,7 +16,7 @@ import {
   AlertCircle,
   ChevronUp,
 } from 'lucide-react'
-import { zodResolver } from '@hookform/resolvers/zod'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { Button } from '@/components/ui/button'
@@ -109,7 +109,7 @@ export default function CreateProgrammePage() {
   }
 
   const form = useForm<ProgrammeFormValues>({
-    resolver: zodResolver(programmeFormSchema),
+    resolver: standardSchemaResolver(programmeFormSchema),
     defaultValues,
     mode: 'onBlur', // Validate on blur (not on every change)
     reValidateMode: 'onSubmit', // Only re-validate on submit, not on every change

frontend/src/app/(app)/workspace/programmes/edit/[id]/page.tsx

@@ -5,7 +5,7 @@
 
 import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
-import { zodResolver } from '@hookform/resolvers/zod'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { useForm, FieldErrors } from 'react-hook-form'
 import { z } from 'zod'
 import { Button } from '@/components/ui/button'
@@ -91,7 +91,7 @@ export default function EditProgrammePage({ params }: { params: Promise<{ id: st
   }, [programme, programmes, router])
 
   const form = useForm<ProgrammeFormValues>({
-    resolver: zodResolver(programmeFormSchema),
+    resolver: standardSchemaResolver(programmeFormSchema),
     mode: 'onChange',
   })