Warn users when they leave the playground without saving a variant

agenta-web/src/components/Playground/VersionTabs.tsx

@@ -17,6 +17,7 @@ function addTab(
     variants: Variant[],
     templateVariantName: string,
     newVariantName: string,
+    setIsChanged: React.Dispatch<React.SetStateAction<boolean>>,
 ) {
     // Find the template variant
     const templateVariant = variants.find((variant) => variant.variantName === templateVariantName)
@@ -51,6 +52,7 @@ function addTab(
 
     setVariants((prevState: any) => [...prevState, newVariant])
     setActiveKey(updateNewVariantName)
+    setIsChanged(true)
 }
 
 function removeTab(setActiveKey: any, setVariants: any, variants: Variant[], activeKey: string) {
@@ -73,7 +75,6 @@ const VersionTabs: React.FC = () => {
     const appName = router.query.app_name as unknown as string
     const [templateVariantName, setTemplateVariantName] = useState("") // We use this to save the template variant name when the user creates a new variant
     const [activeKey, setActiveKey] = useState("1")
-    const [tabList, setTabList] = useState([])
     const [isModalOpen, setIsModalOpen] = useState(false)
     const [variants, setVariants] = useState<Variant[]>([]) // These are the variants that exist in the backend
     const [isLoading, setIsLoading] = useState(true)
@@ -84,6 +85,7 @@ const VersionTabs: React.FC = () => {
     const [removalVariantName, setRemovalVariantName] = useState<string | null>(null)
     const [isDeleteLoading, setIsDeleteLoading] = useState(false)
     const [messageApi, contextHolder] = message.useMessage()
+    const [isChanged, setIsChanged] = useState(false)
 
     const fetchData = async () => {
         try {
@@ -164,6 +166,8 @@ const VersionTabs: React.FC = () => {
                 setRemovalVariantName={setRemovalVariantName}
                 setRemovalWarningModalOpen={setRemovalWarningModalOpen2}
                 isDeleteLoading={isDeleteLoading && removalVariantName === variant.variantName}
+                isChanged={isChanged}
+                setIsChanged={setIsChanged}
             />
         ),
         closable: !variant.persistent,
@@ -203,7 +207,14 @@ const VersionTabs: React.FC = () => {
                 isModalOpen={isModalOpen}
                 setIsModalOpen={setIsModalOpen}
                 addTab={() =>
-                    addTab(setActiveKey, setVariants, variants, templateVariantName, newVariantName)
+                    addTab(
+                        setActiveKey,
+                        setVariants,
+                        variants,
+                        templateVariantName,
+                        newVariantName,
+                        setIsChanged,
+                    )
                 }
                 variants={variants}
                 setNewVariantName={setNewVariantName}

agenta-web/src/components/Playground/ViewNavigation.tsx

@@ -1,11 +1,13 @@
-import React from "react"
+import React, {useEffect} from "react"
 import {Col, Row, Divider, Button, Tooltip, Spin, notification} from "antd"
 import TestView from "./Views/TestView"
 import ParametersView from "./Views/ParametersView"
 import {useVariant} from "@/lib/hooks/useVariant"
 import {RestartVariantDocker, Variant} from "@/lib/Types"
 import {useRouter} from "next/router"
 import {useState} from "react"
+import useBlockNavigation from "@/hooks/useBlockNavigation"
+import useStateCallback from "@/hooks/useStateCallback"
 import axios from "axios"
 import {createUseStyles} from "react-jss"
 import {getAppContainerURL, restartAppVariantContainer, waitForAppToStart} from "@/lib/services/api"
@@ -16,6 +18,8 @@ interface Props {
     setRemovalVariantName: (variantName: string) => void
     setRemovalWarningModalOpen: (value: boolean) => void
     isDeleteLoading: boolean
+    isChanged: boolean
+    setIsChanged: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const useStyles = createUseStyles({
@@ -33,6 +37,8 @@ const ViewNavigation: React.FC<Props> = ({
     setRemovalVariantName,
     setRemovalWarningModalOpen,
     isDeleteLoading,
+    isChanged,
+    setIsChanged,
 }) => {
     const classes = useStyles()
     const router = useRouter()
@@ -48,6 +54,26 @@ const ViewNavigation: React.FC<Props> = ({
         isLoading,
     } = useVariant(appName, variant)
 
+    const [unSavedChanges, setUnSavedChanges] = useStateCallback(false)
+
+    useBlockNavigation(unSavedChanges, {
+        title: "Unsaved changes",
+        message:
+            "You have unsaved changes in your playground. Do you want to save these changes before leaving the page?",
+        okText: "Save",
+        onOk: async () => {
+            await saveOptParams(optParams!, true, variant.persistent)
+            return !!optParams
+        },
+        cancelText: "Proceed without saving",
+    })
+
+    useEffect(() => {
+        if (isChanged) {
+            setUnSavedChanges(true)
+        }
+    }, [optParams])
+
     const [isParamsCollapsed, setIsParamsCollapsed] = useState("1")
     const [containerURIPath, setContainerURIPath] = useState("")
     const [restarting, setRestarting] = useState<boolean>(false)
@@ -192,6 +218,8 @@ const ViewNavigation: React.FC<Props> = ({
                         isDeleteLoading={isDeleteLoading}
                         isParamsCollapsed={isParamsCollapsed}
                         setIsParamsCollapsed={setIsParamsCollapsed}
+                        setUnSavedChanges={setUnSavedChanges}
+                        setIsChanged={setIsChanged}
                     />
                 </Col>
             </Row>

agenta-web/src/components/Playground/Views/ParametersView.tsx

@@ -1,4 +1,4 @@
-import {useState} from "react"
+import {Dispatch, useState} from "react"
 import React from "react"
 import {Parameter} from "@/lib/Types"
 import {Row, Col, Button, Tooltip, message, Space, Collapse} from "antd"
@@ -17,6 +17,8 @@ interface Props {
     isPersistent: boolean
     isParamsCollapsed: string
     setIsParamsCollapsed: (value: string) => void
+    setUnSavedChanges: Dispatch<React.SetStateAction<boolean>>
+    setIsChanged: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const useStyles = createUseStyles({
@@ -53,19 +55,23 @@ const ParametersView: React.FC<Props> = ({
     isPersistent,
     isParamsCollapsed,
     setIsParamsCollapsed,
+    setUnSavedChanges,
+    setIsChanged,
 }) => {
     const classes = useStyles()
     const [inputValue, setInputValue] = useState(1)
     const [messageApi, contextHolder] = message.useMessage()
     const onChange = (param: Parameter, newValue: number | string) => {
         setInputValue(+newValue)
         handleParamChange(param.name, newValue)
+        setIsChanged(true)
     }
     const handleParamChange = (name: string, newVal: any) => {
         const newOptParams = optParams?.map((param) =>
             param.name === name ? {...param, default: newVal} : param,
         )
         newOptParams && onOptParamsChange(newOptParams, false, false)
+        setIsChanged(true)
     }
     const success = () => {
         messageApi.open({
@@ -93,6 +99,8 @@ const ParametersView: React.FC<Props> = ({
                                     type="primary"
                                     onClick={async () => {
                                         await onOptParamsChange(optParams!, true, isPersistent)
+                                        setUnSavedChanges(false)
+                                        setIsChanged(false)
                                         success()
                                     }}
                                     loading={isParamSaveLoading}