From 1e19dd2d3fafb6128133184db58ef3c8fe9cbd8f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 18 Feb 2024 23:59:32 +0100
Subject: [PATCH 1/4] modified input component to text component

---
 .../components/Playground/ParamsForm/ParamsForm.tsx | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
index 8068f9d3a2..ac83dc9b76 100644
--- a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -1,8 +1,7 @@
 import React from "react"
 import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import {GenericObject, Parameter} from "@/lib/Types"
-import {renameVariables} from "@/lib/helpers/utils"
-import {Form, FormInstance, Image, Input} from "antd"
+import {Form, FormInstance, Image, Typography} from "antd"
 import {createUseStyles} from "react-jss"
 
 const useStyles = createUseStyles({
@@ -92,16 +91,10 @@ const ParamsForm: React.FC<Props> = ({
                                             height={imgHeight}
                                             className={classes.cover}
                                             fallback="/assets/fallback.png"
+                                            alt={param.name}
                                         />
                                     )}
-                                <Input.TextArea
-                                    data-cy={`testview-input-parameters-${index}`}
-                                    key={index}
-                                    value={param.value}
-                                    placeholder={`${renameVariables(param.name)} (${type})`}
-                                    onChange={(e) => onParamChange?.(param.name, e.target.value)}
-                                    autoSize={{minRows: 2, maxRows: 8}}
-                                />
+                                <Typography.Text>{param.value}</Typography.Text>
                             </div>
                         </Form.Item>
                     )

From 219cb699375112540b89283de95269380727622a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Feb 2024 11:34:30 +0100
Subject: [PATCH 2/4] improve param value container

---
 .../Playground/ParamsForm/ParamsForm.tsx       | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
index ac83dc9b76..e5f7111f16 100644
--- a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -1,10 +1,11 @@
 import React from "react"
 import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import {GenericObject, Parameter} from "@/lib/Types"
-import {Form, FormInstance, Image, Typography} from "antd"
+import {Form, FormInstance, Image} from "antd"
 import {createUseStyles} from "react-jss"
+import {JSSTheme} from "@/lib/Types"
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles((theme: JSSTheme) => ({
     form: {
         width: "100%",
         "& .ant-form-item": {
@@ -25,7 +26,16 @@ const useStyles = createUseStyles({
         objectFit: "cover",
         borderRadius: 6,
     },
-})
+    paramValueContainer: {
+        border: `1px solid ${theme.colorBorder}`,
+        width: "100%",
+        borderRadius: theme.borderRadius,
+        padding: theme.paddingSM,
+        maxHeight: 300,
+        minHeight: 75,
+        overflowY: "scroll",
+    },
+}))
 
 const ASPECT_RATIO = 1.55
 
@@ -94,7 +104,7 @@ const ParamsForm: React.FC<Props> = ({
                                             alt={param.name}
                                         />
                                     )}
-                                <Typography.Text>{param.value}</Typography.Text>
+                                <div className={classes.paramValueContainer}>{param.value}</div>
                             </div>
                         </Form.Item>
                     )

From f4ffc39d4d1bfc569640c6ff576fd275e452426c Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Feb 2024 12:27:00 +0100
Subject: [PATCH 3/4] added conditional for playground input

---
 .../Playground/ParamsForm/ParamsForm.tsx      | 20 +++++++++++++++++--
 .../components/Playground/Views/TestView.tsx  |  1 +
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
index e5f7111f16..4a1cc9edb1 100644
--- a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -1,7 +1,8 @@
 import React from "react"
 import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import {GenericObject, Parameter} from "@/lib/Types"
-import {Form, FormInstance, Image} from "antd"
+import {renameVariables} from "@/lib/helpers/utils"
+import {Form, FormInstance, Image, Input} from "antd"
 import {createUseStyles} from "react-jss"
 import {JSSTheme} from "@/lib/Types"
 
@@ -47,6 +48,7 @@ interface Props {
     useChatDefaultValue?: boolean
     form?: FormInstance<GenericObject>
     imageSize?: "small" | "large"
+    isPlaygroundComponent?: boolean
 }
 
 const ParamsForm: React.FC<Props> = ({
@@ -57,6 +59,7 @@ const ParamsForm: React.FC<Props> = ({
     useChatDefaultValue,
     form,
     imageSize = "small",
+    isPlaygroundComponent = false,
 }) => {
     const classes = useStyles()
     const imgHeight = imageSize === "small" ? 90 : 120
@@ -104,7 +107,20 @@ const ParamsForm: React.FC<Props> = ({
                                             alt={param.name}
                                         />
                                     )}
-                                <div className={classes.paramValueContainer}>{param.value}</div>
+                                {isPlaygroundComponent ? (
+                                    <Input.TextArea
+                                        data-cy={`testview-input-parameters-${index}`}
+                                        key={index}
+                                        value={param.value}
+                                        placeholder={`${renameVariables(param.name)} (${type})`}
+                                        onChange={(e) =>
+                                            onParamChange?.(param.name, e.target.value)
+                                        }
+                                        autoSize={{minRows: 2, maxRows: 8}}
+                                    />
+                                ) : (
+                                    <div className={classes.paramValueContainer}>{param.value}</div>
+                                )}
                             </div>
                         </Form.Item>
                     )
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index 054075b5c4..dc3e13e5bd 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -217,6 +217,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     onParamChange={onInputParamChange}
                     form={form}
                     imageSize="large"
+                    isPlaygroundComponent={true}
                 />
             </Row>
             {additionalData?.cost || additionalData?.latency ? (

From 55aa83372a055207980e25c6bdf5c88a182c1f56 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 26 Feb 2024 13:41:58 +0100
Subject: [PATCH 4/4] aligned input rows in human eval

---
 agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
index 4a1cc9edb1..51a0df7133 100644
--- a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -33,7 +33,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         borderRadius: theme.borderRadius,
         padding: theme.paddingSM,
         maxHeight: 300,
-        minHeight: 75,
         overflowY: "scroll",
     },
 }))