Issue 1209/ implement fe changes to playground, eval and deployment view for prompt versioning

agenta-web/cypress/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "es5",
         "lib": ["es5", "dom"],
-        "types": ["cypress", "node"]
+        "types": ["cypress", "node"],
     },
-    "include": ["**/*.ts"]
+    "include": ["**/*.ts"],
 }

agenta-web/src/components/DeploymentHistory/DeploymentHistory.tsx

@@ -0,0 +1,260 @@
+import {Button, Card, Divider, Result, Space, Typography} from "antd"
+import React, {useEffect, useState} from "react"
+import {createUseStyles} from "react-jss"
+import {useAppTheme} from "../Layout/ThemeContextProvider"
+import {LoadingOutlined} from "@ant-design/icons"
+import {promptVersioning} from "@/lib/services/api"
+import {IPromptRevisions, IPromptVersioning, Variant} from "@/lib/Types"
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+import duration from "dayjs/plugin/duration"
+dayjs.extend(relativeTime)
+dayjs.extend(duration)
+
+type StyleProps = {
+    themeMode: "dark" | "light"
+}
+
+type DeploymentHistoryProps = {
+    variant: Variant
+}
+
+const {Text} = Typography
+
+const useStyles = createUseStyles({
+    container: {
+        display: "flex",
+        gap: 20,
+    },
+    historyItemsContainer: ({themeMode}: StyleProps) => ({
+        flex: 0.2,
+        backgroundColor: themeMode === "dark" ? "#333" : "#eceff1",
+        overflowY: "scroll",
+        padding: 10,
+        borderRadius: 10,
+        minWidth: 300,
+        height: "600px",
+    }),
+    historyItems: {
+        display: "flex",
+        flexDirection: "column",
+        padding: "10px 20px",
+        margin: "20px 0",
+        borderRadius: 10,
+        cursor: "pointer",
+    },
+    promptHistoryCard: {
+        margin: "30px",
+    },
+    promptHistoryInfo: ({themeMode}: StyleProps) => ({
+        flex: 0.8,
+        backgroundColor: themeMode === "dark" ? "#333" : "#eceff1",
+        padding: 20,
+        borderRadius: 10,
+    }),
+    promptHistoryInfoHeader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        "& h1": {
+            fontSize: 32,
+        },
+    },
+    emptyContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: "30px auto",
+        fontSize: 20,
+        fontWeight: "bold",
+    },
+    divider: {
+        margin: "10px 0",
+    },
+    historyItemsTitle: ({themeMode}: StyleProps) => ({
+        fontSize: 14,
+        "& span": {
+            color: themeMode === "dark" ? "#f1f5f8" : "#656d76",
+        },
+    }),
+})
+
+const DeploymentHistory: React.FC<DeploymentHistoryProps> = ({variant}) => {
+    const {appTheme} = useAppTheme()
+    const classes = useStyles({themeMode: appTheme} as StyleProps)
+    const [deploymentRevisions, setDeploymentRevisions] = useState<IPromptVersioning>()
+    const [isLoading, setIsLoading] = useState(false)
+    const [filtered, setFiltered] = useState<IPromptRevisions[]>()
+
+    const [showDeployments, setShowDeployments] = useState<IPromptRevisions>()
+    const [activeItem, setActiveItem] = useState(0)
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setIsLoading(true)
+            try {
+                const data = await promptVersioning(variant.variantId)
+                setDeploymentRevisions(data)
+
+                setFiltered(
+                    data?.revisions.filter(
+                        (item: IPromptRevisions) =>
+                            Object.keys(item.config.parameters).length !== 0,
+                    ),
+                )
+            } catch (error) {
+                setIsLoading(false)
+                console.log(error)
+            } finally {
+                setIsLoading(false)
+            }
+        }
+
+        fetchData()
+    }, [variant.variantId])
+
+    useEffect(() => {
+        if (filtered && filtered.length) {
+            setShowDeployments(filtered[0])
+        }
+    }, [filtered])
+
+    const handleShowDeployments = (id: number, index: number) => {
+        setActiveItem(index)
+        const findPrompt = deploymentRevisions?.revisions.find((prompt) => prompt.revision === id)
+
+        setShowDeployments(findPrompt)
+    }
+
+    const handleRevert = (id: number) => {}
+
+    return (
+        <>
+            {isLoading ? (
+                <Result icon={<LoadingOutlined />} subTitle="Loading..." />
+            ) : !!filtered?.length ? (
+                <div className={classes.container}>
+                    <div className={classes.historyItemsContainer}>
+                        {filtered?.map((item, index) => (
+                            <div
+                                key={item.revision}
+                                style={{
+                                    backgroundColor:
+                                        activeItem === index
+                                            ? appTheme === "dark"
+                                                ? "#1668dc"
+                                                : "#b3e5fc"
+                                            : appTheme === "dark"
+                                              ? "#1f1f1f"
+                                              : "#fff",
+                                    border:
+                                        activeItem === index
+                                            ? "1px solid #2196f3"
+                                            : "1px solid transparent",
+                                }}
+                                className={classes.historyItems}
+                                onClick={() => handleShowDeployments(item.revision, index)}
+                            >
+                                <Space style={{justifyContent: "space-between"}}>
+                                    <Text className={classes.historyItemsTitle}>
+                                        <b>Revision</b> <span>#{item.revision}</span>
+                                    </Text>
+                                    <Text className={classes.historyItemsTitle}>
+                                        <span style={{fontSize: 12}}>
+                                            {dayjs(item.created_at).fromNow()}
+                                        </span>
+                                    </Text>
+                                </Space>
+
+                                <Divider className={classes.divider} />
+
+                                <Space direction="vertical">
+                                    <div>
+                                        <Text strong>Config Name: </Text>
+                                        <Text>{item.config.config_name}</Text>
+                                    </div>
+                                    <div>
+                                        <Text strong>Modified By: </Text>
+                                        <Text>{item.modified_by}</Text>
+                                    </div>
+                                </Space>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className={classes.promptHistoryInfo}>
+                        <div className={classes.promptHistoryInfoHeader}>
+                            <h1>Information</h1>
+
+                            <Button
+                                type="primary"
+                                onClick={() => handleRevert(showDeployments?.revision!)}
+                            >
+                                Revert
+                            </Button>
+                        </div>
+
+                        <div>{dayjs(showDeployments?.created_at).format("DD-MM-YYYY mm:ss")}</div>
+
+                        <Card title="Prompt System" className={classes.promptHistoryCard}>
+                            <div>{showDeployments?.config.parameters?.prompt_system}</div>
+                        </Card>
+
+                        <Card title="Model Parameters" className={classes.promptHistoryCard}>
+                            <Space direction="vertical">
+                                {showDeployments?.config.parameters?.temperature && (
+                                    <Typography.Text>
+                                        Temperature:{" "}
+                                        {showDeployments?.config.parameters?.temperature}
+                                    </Typography.Text>
+                                )}
+
+                                {showDeployments?.config.parameters?.model && (
+                                    <Typography.Text>
+                                        Model: {showDeployments?.config.parameters?.model}
+                                    </Typography.Text>
+                                )}
+
+                                {showDeployments?.config.parameters?.max_tokens && (
+                                    <Typography.Text>
+                                        Max tokens: {showDeployments?.config.parameters?.max_tokens}
+                                    </Typography.Text>
+                                )}
+
+                                {showDeployments?.config.parameters?.top_p && (
+                                    <Typography.Text>
+                                        Top p: {showDeployments?.config.parameters?.top_p}
+                                    </Typography.Text>
+                                )}
+
+                                {showDeployments?.config.parameters?.frequence_penalty ||
+                                showDeployments?.config.parameters?.frequence_penalty == 0 ? (
+                                    <Typography.Text>
+                                        Frequence penalty:{" "}
+                                        {showDeployments?.config.parameters?.frequence_penalty}
+                                    </Typography.Text>
+                                ) : (
+                                    ""
+                                )}
+
+                                {showDeployments?.config.parameters?.presence_penalty ||
+                                showDeployments?.config.parameters?.presence_penalty == 0 ? (
+                                    <Typography.Text>
+                                        Presence penalty:{" "}
+                                        {showDeployments?.config.parameters?.presence_penalty}
+                                    </Typography.Text>
+                                ) : (
+                                    ""
+                                )}
+                            </Space>
+                        </Card>
+                    </div>
+                </div>
+            ) : (
+                <div className={classes.emptyContainer}>You have no saved prompts</div>
+            )}
+        </>
+    )
+}
+
+export default DeploymentHistory

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

@@ -15,6 +15,7 @@ import {arrayMove, SortableContext, horizontalListSortingStrategy} from "@dnd-ki
 import DraggableTabNode from "../DraggableTabNode/DraggableTabNode"
 import {useLocalStorage} from "usehooks-ts"
 import TestContextProvider from "./TestContextProvider"
+import PromptVersioningProvider from "./PromptVersioningProvider"
 
 const Playground: React.FC = () => {
     const router = useRouter()
@@ -239,18 +240,22 @@ const Playground: React.FC = () => {
         key: variant.variantName,
         label: `Variant ${variant.variantName}`,
         children: (
-            <ViewNavigation
-                compareMode={compareMode}
-                variant={variant}
-                handlePersistVariant={handlePersistVariant}
-                environments={environments}
-                deleteVariant={deleteVariant}
-                onStateChange={(isDirty) =>
-                    setUnsavedVariants((prev) => ({...prev, [variant.variantName]: isDirty}))
-                }
-                getHelpers={(helpers) => (variantHelpers.current[variant.variantName] = helpers)}
-                tabID={tabID}
-            />
+            <PromptVersioningProvider>
+                <ViewNavigation
+                    compareMode={compareMode}
+                    variant={variant}
+                    handlePersistVariant={handlePersistVariant}
+                    environments={environments}
+                    deleteVariant={deleteVariant}
+                    onStateChange={(isDirty) =>
+                        setUnsavedVariants((prev) => ({...prev, [variant.variantName]: isDirty}))
+                    }
+                    getHelpers={(helpers) =>
+                        (variantHelpers.current[variant.variantName] = helpers)
+                    }
+                    tabID={tabID}
+                />
+            </PromptVersioningProvider>
         ),
         closable: !variant.persistent,
     }))

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

@@ -0,0 +1,49 @@
+import {IPromptVersioning} from "@/lib/Types"
+import {Dispatch, PropsWithChildren, SetStateAction, createContext, useState} from "react"
+
+export const PromptVersioningContext = createContext<{
+    promptRevisions: IPromptVersioning | undefined
+    setPromptRevisions: Dispatch<SetStateAction<IPromptVersioning | undefined>>
+    isDrawerOpen: boolean
+    setIsDrawerOpen: Dispatch<SetStateAction<boolean>>
+    historyStatus: {
+        loading: boolean
+        error: boolean
+    }
+    setHistoryStatus: Dispatch<
+        SetStateAction<{
+            loading: boolean
+            error: boolean
+        }>
+    >
+}>({
+    promptRevisions: undefined,
+    setPromptRevisions: () => {},
+    isDrawerOpen: false,
+    setIsDrawerOpen: () => {},
+    historyStatus: {loading: false, error: false},
+    setHistoryStatus: () => {},
+})
+
+const PromptVersioningProvider: React.FC<PropsWithChildren> = ({children}) => {
+    const [promptRevisions, setPromptRevisions] = useState<IPromptVersioning>()
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [historyStatus, setHistoryStatus] = useState({loading: false, error: false})
+
+    return (
+        <PromptVersioningContext.Provider
+            value={{
+                promptRevisions,
+                setPromptRevisions,
+                isDrawerOpen,
+                setIsDrawerOpen,
+                historyStatus,
+                setHistoryStatus,
+            }}
+        >
+            {children}
+        </PromptVersioningContext.Provider>
+    )
+}
+
+export default PromptVersioningProvider

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

@@ -60,6 +60,7 @@ const ViewNavigation: React.FC<Props> = ({
         saveOptParams,
         isLoading,
         isChatVariant,
+        setOptParams,
     } = useVariant(appId, variant)
     const [retrying, setRetrying] = useState(false)
     const [isParamsCollapsed, setIsParamsCollapsed] = useState("1")
@@ -249,6 +250,7 @@ const ViewNavigation: React.FC<Props> = ({
                         variant={variant}
                         isChatVariant={!!isChatVariant}
                         compareMode={compareMode}
+                        setOptParams={setOptParams}
                     />
                 </Col>
             </Row>

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

@@ -127,7 +127,7 @@ export const ModelParameters: React.FC<ModelParametersProps> = ({
                                         )}
                                         {param.type === "array" && (
                                             <Select
-                                                defaultValue={param.default}
+                                                value={param.default}
                                                 onChange={(value) =>
                                                     handleParamChange(param.name, value)
                                                 }
@@ -197,7 +197,7 @@ export const StringParameters: React.FC<StringParametersProps> = ({
                         <Card className={classes.card} title={renameVariables(param.name)}>
                             <Input.TextArea
                                 rows={5}
-                                defaultValue={param.default}
+                                value={param.default}
                                 onChange={(e) => handleParamChange(param.name, e.target.value)}
                                 bordered={false}
                                 className={classes.textarea}