MR feedback

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

@@ -1,7 +1,7 @@
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 import {useAppTheme} from "../../Layout/ThemeContextProvider"
-import {GenericObject, testset} from "@/lib/Types"
-import {renameVariables} from "@/lib/helpers/utils"
+import {ChatMessage, GenericObject, testset} from "@/lib/Types"
+import {removeKeys, renameVariables} from "@/lib/helpers/utils"
 import {createNewTestset, loadTestset, updateTestset, useLoadTestsetsList} from "@/lib/services/api"
 import {Button, Divider, Drawer, Form, Input, Modal, Select, Space, Typography, message} from "antd"
 import {useRouter} from "next/router"
@@ -28,6 +28,11 @@ const useStyles = createUseStyles({
             color: themeMode === "dark" ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.88)",
         },
     }),
+    chatContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+    },
 })
 
 type Props = React.ComponentProps<typeof Drawer> & {
@@ -81,11 +86,12 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, isChatVariant, ...props})
     const addToTestSet = useCallback(
         (name: string, csvdata: Record<string, string>[], rowData: GenericObject) => {
             rowData = {...rowData}
-            Object.keys(rowData).forEach((key) => {
-                if (rowData[key] && typeof rowData[key] !== "string") {
-                    rowData[key] = JSON.stringify(rowData[key])
-                }
-            })
+            if (isChatVariant) {
+                rowData.chat = JSON.stringify(
+                    rowData.chat.map((item: ChatMessage) => removeKeys(item, ["id"])),
+                )
+                rowData.correct_answer = JSON.stringify(removeKeys(rowData.correct_answer, ["id"]))
+            }
 
             setLoading(true)
 
@@ -106,7 +112,7 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, isChatVariant, ...props})
                 })
                 .finally(() => setLoading(false))
         },
-        [selectedTestset, props.onClose],
+        [selectedTestset, props.onClose, isChatVariant],
     )
 
     const onFinish = useCallback(
@@ -219,7 +225,7 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, isChatVariant, ...props})
         >
             {isChatVariant ? (
                 <div>
-                    <Space direction="vertical" size="middle">
+                    <div className={classes.chatContainer}>
                         <Typography.Text strong>Chat</Typography.Text>
                         <ChatInputs
                             defaultValue={
@@ -230,11 +236,11 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, isChatVariant, ...props})
                                 dirty.current = true
                             }}
                         />
-                    </Space>
+                    </div>
 
                     <Divider />
 
-                    <Space direction="vertical" size="middle">
+                    <div className={classes.chatContainer}>
                         <Typography.Text strong>Correct Answer</Typography.Text>
                         <ChatInputs
                             defaultValue={
@@ -249,7 +255,7 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, isChatVariant, ...props})
                             disableAdd
                             disableRemove
                         />
-                    </Space>
+                    </div>
                 </div>
             ) : (
                 <Form

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

@@ -8,7 +8,6 @@ import {SyncOutlined} from "@ant-design/icons"
 import {useRouter} from "next/router"
 import {useQueryParam} from "@/hooks/useQuery"
 import AlertPopup from "../AlertPopup/AlertPopup"
-import TestContextProvider from "./TestsetContextProvider"
 import useBlockNavigation from "@/hooks/useBlockNavigation"
 
 const Playground: React.FC = () => {
@@ -221,33 +220,31 @@ const Playground: React.FC = () => {
         <div>
             {contextHolder}
 
-            <TestContextProvider>
-                <div style={{position: "relative"}}>
-                    <div style={{position: "absolute", zIndex: 1000, right: 5, top: 10}}>
-                        <SyncOutlined
-                            spin={isLoading}
-                            style={{color: "#1677ff", fontSize: "17px"}}
-                            onClick={() => {
-                                setIsLoading(true)
-                                fetchData()
-                            }}
-                        />
-                    </div>
-                    <Tabs
-                        type="editable-card"
-                        activeKey={activeKey}
-                        onChange={setActiveKey}
-                        onEdit={(_, action) => {
-                            if (action === "add") {
-                                setIsModalOpen(true)
-                            } else if (action === "remove") {
-                                deleteVariant()
-                            }
+            <div style={{position: "relative"}}>
+                <div style={{position: "absolute", zIndex: 1000, right: 5, top: 10}}>
+                    <SyncOutlined
+                        spin={isLoading}
+                        style={{color: "#1677ff", fontSize: "17px"}}
+                        onClick={() => {
+                            setIsLoading(true)
+                            fetchData()
                         }}
-                        items={tabItems}
                     />
                 </div>
-            </TestContextProvider>
+                <Tabs
+                    type="editable-card"
+                    activeKey={activeKey}
+                    onChange={setActiveKey}
+                    onEdit={(_, action) => {
+                        if (action === "add") {
+                            setIsModalOpen(true)
+                        } else if (action === "remove") {
+                            deleteVariant()
+                        }
+                    }}
+                    items={tabItems}
+                />
+            </div>
 
             <NewVariantModal
                 isModalOpen={isModalOpen}

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

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from "react"
+import React, {useState} from "react"
 import {Button, Input, Card, Row, Col, Space} from "antd"
 import {CaretRightOutlined, PlusOutlined} from "@ant-design/icons"
 import {callVariant} from "@/lib/services/api"
@@ -10,7 +10,6 @@ import {DeleteOutlined} from "@ant-design/icons"
 import {getErrorMessage} from "@/lib/helpers/errorHandler"
 import {createUseStyles} from "react-jss"
 import CopyButton from "@/components/CopyButton/CopyButton"
-import {TestContext} from "../TestsetContextProvider"
 import {useRouter} from "next/router"
 import ChatInputs, {getDefaultNewMessage} from "@/components/ChatInputs/ChatInputs"
 import {v4 as uuidv4} from "uuid"
@@ -205,7 +204,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
 const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVariant}) => {
     const router = useRouter()
     const appId = router.query.app_id as unknown as string
-    const {testList, setTestList} = useContext(TestContext)
+    const [testList, setTestList] = useState<GenericObject[]>([{}])
     const [resultsList, setResultsList] = useState<string[]>(testList.map(() => ""))
     const [params, setParams] = useState<Record<string, string> | null>(null)
     const classes = useStylesApp()
@@ -301,9 +300,9 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVa
             ...test,
             ...(isChatVariant
                 ? {
-                      chat: safeParse(test.chat, []).concat([
-                          safeParse(test.correct_answer, getDefaultNewMessage()),
-                      ]),
+                      chat: safeParse(test.chat, [])
+                          .concat([safeParse(test.correct_answer, getDefaultNewMessage())])
+                          .map((item: Partial<ChatMessage>) => ({...item, id: uuidv4()})),
                   }
                 : {}),
             _id: randString(6),

agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx

@@ -96,7 +96,7 @@ export default function VariantEndpoint() {
         }
     }, [variants, appId])
 
-    const {inputParams, optParams, isLoading, isError, error} = useVariant(appId, variant!)
+    const {inputParams, isChatVariant, isLoading, isError, error} = useVariant(appId, variant!)
     const createParams = (
         inputParams: Parameter[] | null,
         environmentName: string,
@@ -112,7 +112,14 @@ export default function VariantEndpoint() {
                 secondaryParams[item.name] = item.default || value
             }
         })
-        if (Object.keys(secondaryParams).length > 0) {
+        if (isChatVariant) {
+            mainParams["inputs"] = [
+                {
+                    role: "user",
+                    content: "Example message",
+                },
+            ]
+        } else if (Object.keys(secondaryParams).length > 0) {
             mainParams["inputs"] = secondaryParams
         }
 

examples/experimental/startup_feature_ideas/.gitignore

@@ -0,0 +1,7 @@
+# Environments 
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+myenv/