Merge pull request #1391 from Agenta-AI/issue-1232/-make-inputs-unmod…

…ifyable-in-human-evaluation-view Make inputs unmodifyable in human evaluation view
Agenta-AI · Mar 4, 2024 · 83f02f9 · 83f02f9
2 parents facb1c8 + 5913f95
commit 83f02f9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -4,8 +4,9 @@ import {GenericObject, Parameter} from "@/lib/Types"
 import {renameVariables} from "@/lib/helpers/utils"
 import {Form, FormInstance, Image, Input} 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": {
@@ -26,7 +27,15 @@ const useStyles = createUseStyles({
         objectFit: "cover",
         borderRadius: 6,
     },
-})
+    paramValueContainer: {
+        border: `1px solid ${theme.colorBorder}`,
+        width: "100%",
+        borderRadius: theme.borderRadius,
+        padding: theme.paddingSM,
+        maxHeight: 300,
+        overflowY: "scroll",
+    },
+}))
 
 const ASPECT_RATIO = 1.55
 
@@ -38,6 +47,7 @@ interface Props {
     useChatDefaultValue?: boolean
     form?: FormInstance<GenericObject>
     imageSize?: "small" | "large"
+    isPlaygroundComponent?: boolean
 }
 
 const ParamsForm: React.FC<Props> = ({
@@ -48,6 +58,7 @@ const ParamsForm: React.FC<Props> = ({
     useChatDefaultValue,
     form,
     imageSize = "small",
+    isPlaygroundComponent = false,
 }) => {
     const classes = useStyles()
     const imgHeight = imageSize === "small" ? 90 : 120
@@ -92,16 +103,23 @@ 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}}
-                                />
+                                {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
@@ -217,6 +217,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     onParamChange={onInputParamChange}
                     form={form}
                     imageSize="large"
+                    isPlaygroundComponent={true}
                 />
             </Row>
             {additionalData?.cost || additionalData?.latency ? (