Refactor - revamp use of prompt revisions in playground

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

@@ -17,7 +17,7 @@ import {
 import {useAppsData} from "@/contexts/app.context"
 import {isDemo} from "@/lib/helpers/utils"
 
-interface Props {
+interface PruseVariantops {
     variant: Variant
     handlePersistVariant: (variantName: string) => void
     environments: Environment[]
@@ -60,12 +60,11 @@ const ViewNavigation: React.FC<Props> = ({
         saveOptParams,
         isLoading,
         isChatVariant,
-        promptRevisions,
         historyStatus,
         setPromptOptParams,
-        setPromptRevisions,
         setHistoryStatus,
     } = useVariant(appId, variant)
+
     const [retrying, setRetrying] = useState(false)
     const [isParamsCollapsed, setIsParamsCollapsed] = useState("1")
     const [containerURI, setContainerURI] = useState("")
@@ -244,7 +243,8 @@ const ViewNavigation: React.FC<Props> = ({
                         tabID={tabID}
                         setHistoryStatus={setHistoryStatus}
                         setIsDrawerOpen={setIsDrawerOpen}
-                        setPromptRevisions={setPromptRevisions}
+                        isDrawerOpen={isDrawerOpen}
+                        historyStatus={historyStatus}
                     />
                 </Col>
             </Row>
@@ -259,12 +259,8 @@ const ViewNavigation: React.FC<Props> = ({
                         isChatVariant={!!isChatVariant}
                         compareMode={compareMode}
                         onStateChange={onStateChange}
-                        promptRevisions={promptRevisions}
-                        historyStatus={historyStatus}
                         setPromptOptParams={setPromptOptParams}
                         promptOptParams={promptOptParams}
-                        isDrawerOpen={isDrawerOpen}
-                        setIsDrawerOpen={setIsDrawerOpen}
                     />
                 </Col>
             </Row>

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

@@ -9,6 +9,13 @@ import {promptVersioning, removeVariant} from "@/lib/services/api"
 import {CloudUploadOutlined, DeleteOutlined, HistoryOutlined, SaveOutlined} from "@ant-design/icons"
 import {usePostHogAg} from "@/hooks/usePostHogAg"
 import {isDemo} from "@/lib/helpers/utils"
+import {useQueryParam} from "@/hooks/useQuery"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
+
+
+const PromptVersioningDrawer: any = dynamicComponent(
+    `PromptVersioningDrawer/PromptVersioningDrawer`,
+)
 
 interface Props {
     variant: Variant
@@ -30,8 +37,12 @@ interface Props {
     onStateChange: (isDirty: boolean) => void
     compareMode: boolean
     tabID: React.MutableRefObject<string>
+    isDrawerOpen: boolean
     setIsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>
-    setPromptRevisions: React.Dispatch<React.SetStateAction<IPromptVersioning | undefined>>
+    historyStatus: {
+        loading: boolean
+        error: boolean
+    }
     setHistoryStatus: React.Dispatch<
         React.SetStateAction<{
             loading: boolean
@@ -76,15 +87,18 @@ const ParametersView: React.FC<Props> = ({
     onStateChange,
     compareMode,
     tabID,
-    setHistoryStatus,
+    isDrawerOpen,
     setIsDrawerOpen,
-    setPromptRevisions,
+    historyStatus,
+    setHistoryStatus,
 }) => {
     const classes = useStyles()
     const posthog = usePostHogAg()
     const [messageApi, contextHolder] = message.useMessage()
     const [isPublishModalOpen, setPublishModalOpen] = useState(false)
     const isVariantExisting = !!variant.variantId
+    const [revisionNum, setRevisionNum] = useQueryParam("revision")
+    const [promptRevisions, setPromptRevisions] = useState<IPromptRevisions>()
 
     useEffect(() => {
         onStateChange(variant.persistent === false)
@@ -153,6 +167,10 @@ const ParametersView: React.FC<Props> = ({
         }
     }
 
+    let filteredRevisions
+    if (promptRevisions !== undefined) {
+        filteredRevisions = promptRevisions.filter((item) => item.revision !== 0)
+    }
     const items: CollapseProps["items"] = [
         {
             key: "1",
@@ -271,6 +289,14 @@ const ParametersView: React.FC<Props> = ({
                 setIsModalOpen={setPublishModalOpen}
                 environments={environments}
             />
+            <PromptVersioningDrawer
+                setIsDrawerOpen={setIsDrawerOpen}
+                setRevisionNum={setRevisionNum}
+                isDrawerOpen={isDrawerOpen}
+                historyStatus={historyStatus}
+                promptRevisions={filteredRevisions}
+                onStateChange={onStateChange}
+            />
         </div>
     )
 }

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

@@ -1,7 +1,7 @@
 import React, {useContext, useEffect, useRef, useState} from "react"
 import {Button, Input, Card, Row, Col, Space, Form, Modal} from "antd"
 import {CaretRightOutlined, CloseCircleOutlined, PlusOutlined} from "@ant-design/icons"
-import {callVariant} from "@/lib/services/api"
+import {callVariant, promptRevision} from "@/lib/services/api"
 import {
     ChatMessage,
     ChatRole,
@@ -31,9 +31,6 @@ import duration from "dayjs/plugin/duration"
 import {useQueryParam} from "@/hooks/useQuery"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 
-const PromptVersioningDrawer: any = dynamicComponent(
-    `PromptVersioningDrawer/PromptVersioningDrawer`,
-)
 
 dayjs.extend(relativeTime)
 dayjs.extend(duration)
@@ -143,15 +140,8 @@ interface TestViewProps {
     isChatVariant?: boolean
     compareMode: boolean
     onStateChange: (isDirty: boolean) => void
-    promptRevisions: IPromptVersioning | undefined
-    historyStatus: {
-        loading: boolean
-        error: boolean
-    }
     setPromptOptParams: React.Dispatch<React.SetStateAction<Parameter[] | null>>
     promptOptParams: Parameter[] | null
-    setIsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>
-    isDrawerOpen: boolean
 }
 
 interface BoxComponentProps {
@@ -330,10 +320,6 @@ const App: React.FC<TestViewProps> = ({
     compareMode,
     onStateChange,
     setPromptOptParams,
-    promptRevisions,
-    historyStatus,
-    isDrawerOpen,
-    setIsDrawerOpen,
 }) => {
     const router = useRouter()
     const appId = router.query.app_id as unknown as string
@@ -348,7 +334,6 @@ const App: React.FC<TestViewProps> = ({
     const [resultsList, setResultsList] = useState<string[]>(testList.map(() => ""))
     const [params, setParams] = useState<Record<string, string> | null>(null)
     const classes = useStylesApp({themeMode: appTheme} as StyleProps)
-    const filteredRevisions = promptRevisions?.revisions.filter((item) => item.revision !== 0)
 
     const rootRef = React.useRef<HTMLDivElement>(null)
     const [isLLMProviderMissingModalOpen, setIsLLMProviderMissingModalOpen] = useState(false)
@@ -364,41 +349,45 @@ const App: React.FC<TestViewProps> = ({
 
     useEffect(() => {
         if (!revisionNum) return
-
-        const revision = filteredRevisions?.find((rev) => rev.revision === parseInt(revisionNum))
-
-        if (!revision) return
-
-        setPromptOptParams((prevState: Parameter[] | null) => {
-            if (!prevState) {
-                return prevState
-            }
-
-            const parameterNames = [
-                "temperature",
-                "model",
-                "max_tokens",
-                "prompt_system",
-                "prompt_user",
-                "top_p",
-                "frequence_penalty",
-                "presence_penalty",
-                "inputs",
-            ]
-
-            return prevState.map((param: Parameter) => {
-                if (parameterNames.includes(param.name)) {
-                    const newValue = (revision?.config.parameters as Record<string, any>)[
-                        param.name
-                    ]
-                    if (newValue !== undefined) {
-                        param.default = newValue
-                    }
+
+        const fetchData = async () => {
+            const revision = await promptRevision(variant.variantId, parseInt(revisionNum))
+            if (!revision) return
+
+            setPromptOptParams((prevState: Parameter[] | null) => {
+                if (!prevState) {
+                    return prevState
                 }
-                return param
+
+                const parameterNames = [
+                    "temperature",
+                    "model",
+                    "max_tokens",
+                    "prompt_system",
+                    "prompt_user",
+                    "top_p",
+                    "frequence_penalty",
+                    "presence_penalty",
+                    "inputs",
+                ]
+
+                return prevState.map((param: Parameter) => {
+                    if (parameterNames.includes(param.name)) {
+                        const newValue = (revision?.config.parameters as Record<string, any>)[
+                            param.name
+                        ]
+                        if (newValue !== undefined) {
+                            param.default = newValue
+                        }
+                    }
+                    return param
+                })
             })
-        })
+        }
+
+        fetchData()
     }, [revisionNum])
+
 
     const abortControllersRef = useRef<AbortController[]>([])
     const [isRunningAll, setIsRunningAll] = useState(false)
@@ -684,14 +673,6 @@ const App: React.FC<TestViewProps> = ({
                     have a valid API key for the model you are using.
                 </p>
             </Modal>
-            <PromptVersioningDrawer
-                setIsDrawerOpen={setIsDrawerOpen}
-                setRevisionNum={setRevisionNum}
-                isDrawerOpen={isDrawerOpen}
-                historyStatus={historyStatus}
-                promptRevisions={filteredRevisions}
-                onStateChange={onStateChange}
-            />
         </div>
     )
 }

agenta-web/src/lib/hooks/useVariant.ts

@@ -1,6 +1,6 @@
 import {useState, useEffect} from "react"
 import {promptVersioning, saveNewVariant, updateVariantParams} from "@/lib/services/api"
-import {Variant, Parameter, IPromptVersioning} from "@/lib/Types"
+import {Variant, Parameter, IPromptRevisions} from "@/lib/Types"
 import {getAllVariantParameters, updateInputParams} from "@/lib/helpers/variantHelper"
 import {isDemo} from "../helpers/utils"
 import {PERMISSION_ERR_MSG} from "../helpers/axiosConfig"
@@ -13,7 +13,6 @@ import {PERMISSION_ERR_MSG} from "../helpers/axiosConfig"
  * @returns
  */
 export function useVariant(appId: string, variant: Variant) {
-    const [promptRevisions, setPromptRevisions] = useState<IPromptVersioning>()
     const [historyStatus, setHistoryStatus] = useState({loading: false, error: false})
     const [promptOptParams, setPromptOptParams] = useState<Parameter[] | null>(null)
     const [inputParams, setInputParams] = useState<Parameter[] | null>(null)
@@ -34,10 +33,6 @@ export function useVariant(appId: string, variant: Variant) {
                 variant,
             )
             setPromptOptParams(parameters)
-            if (variant.variantId && isDemo()) {
-                const revisions = await promptVersioning(variant.variantId)
-                setPromptRevisions(revisions)
-            }
             setInputParams(inputs)
             setURIPath(URIPath)
             setIsChatVariant(isChatVariant)
@@ -115,10 +110,8 @@ export function useVariant(appId: string, variant: Variant) {
         saveOptParams,
         refetch: fetchParameters,
         isChatVariant,
-        promptRevisions,
         historyStatus,
         setPromptOptParams,
-        setPromptRevisions,
         setHistoryStatus,
     }
 }