Move copy message button in the playground to the text input

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

@@ -1,4 +1,4 @@
-import {ChatMessage, ChatRole} from "@/lib/Types"
+import {ChatMessage, ChatRole, JSSTheme} from "@/lib/Types"
 import {MinusOutlined, PlusOutlined} from "@ant-design/icons"
 import {Button, Input, Select, Space, Tooltip} from "antd"
 import {cloneDeep} from "lodash"
@@ -7,8 +7,9 @@ import {createUseStyles} from "react-jss"
 import {useUpdateEffect} from "usehooks-ts"
 import {v4 as uuidv4} from "uuid"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
+import CopyButton from "../CopyButton/CopyButton"
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles((theme: JSSTheme) => ({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -32,7 +33,16 @@ const useStyles = createUseStyles({
             maxWidth: 800,
         },
     },
-})
+    copyButton: {
+        position: "absolute",
+        right: 4,
+        border: 0,
+        height: 30,
+        opacity: 0.5,
+        bottom: 1,
+        color: theme.colorPrimary,
+    },
+}))
 
 export const getDefaultNewMessage = () => ({
     id: uuidv4(),
@@ -50,6 +60,7 @@ interface Props {
     disableEditRole?: boolean
     disableEditContent?: boolean
     readonly?: boolean
+    isLoading?: boolean
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -62,6 +73,7 @@ const ChatInputs: React.FC<Props> = ({
     disableEditRole,
     disableEditContent,
     readonly,
+    isLoading,
 }) => {
     const {appTheme} = useAppTheme()
     const classes = useStyles()
@@ -126,6 +138,8 @@ const ChatInputs: React.FC<Props> = ({
         if (Array.isArray(value)) setMessages(cloneDeep(value))
     }, [JSON.stringify(value)])
 
+    const lastAssistantMsg = messages.filter((msg) => msg.role === ChatRole.Assistant)
+
     return (
         <div className={classes.root}>
             {messages.map((msg, ix) => (
@@ -140,26 +154,44 @@ const ChatInputs: React.FC<Props> = ({
                         value={msg.role}
                         onChange={(newRole) => handleRoleChange(ix, newRole)}
                     />
-                    <Input.TextArea
-                        style={{
-                            maxWidth: "none",
-                            background: msg.content.startsWith("❌")
-                                ? appTheme === "dark"
-                                    ? "#490b0b"
-                                    : "#fff1f0"
-                                : "",
-                            color: msg.content.startsWith("❌")
-                                ? appTheme === "dark"
-                                    ? "#ffffffd9"
-                                    : "#000000e0"
-                                : "",
-                        }}
-                        disabled={disableEditContent}
-                        autoSize={{maxRows}}
-                        value={msg.content}
-                        onChange={(e) => handleInputChange(ix, e)}
-                        readOnly={readonly}
-                    />
+                    <div className="relative w-[100%]">
+                        <Input.TextArea
+                            style={{
+                                maxWidth: "none",
+                                background: msg.content.startsWith("❌")
+                                    ? appTheme === "dark"
+                                        ? "#490b0b"
+                                        : "#fff1f0"
+                                    : "",
+                                color: msg.content.startsWith("❌")
+                                    ? appTheme === "dark"
+                                        ? "#ffffffd9"
+                                        : "#000000e0"
+                                    : "",
+                            }}
+                            disabled={disableEditContent}
+                            autoSize={{maxRows}}
+                            value={msg.content}
+                            onChange={(e) => handleInputChange(ix, e)}
+                            readOnly={readonly}
+                        />
+                        {lastAssistantMsg[lastAssistantMsg.length - 1]?.id === msg.id && (
+                            <CopyButton
+                                buttonText={null}
+                                text={
+                                    !!lastAssistantMsg.length
+                                        ? lastAssistantMsg[lastAssistantMsg.length - 1].content
+                                        : ""
+                                }
+                                disabled={
+                                    isLoading ||
+                                    !lastAssistantMsg[lastAssistantMsg.length - 1]?.content
+                                }
+                                icon={true}
+                                className={classes.copyButton}
+                            />
+                        )}
+                    </div>
                     {messages.length > 1 && !disableRemove && (
                         <Tooltip title="Remove">
                             <Button

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

@@ -48,6 +48,7 @@ interface Props {
     form?: FormInstance<GenericObject>
     imageSize?: "small" | "large"
     isPlaygroundComponent?: boolean
+    isLoading?: boolean
 }
 
 const ParamsForm: React.FC<Props> = ({
@@ -59,6 +60,7 @@ const ParamsForm: React.FC<Props> = ({
     form,
     imageSize = "small",
     isPlaygroundComponent = false,
+    isLoading,
 }) => {
     const classes = useStyles()
     const imgHeight = imageSize === "small" ? 90 : 120
@@ -70,6 +72,7 @@ const ParamsForm: React.FC<Props> = ({
             value={useChatDefaultValue ? undefined : chat}
             defaultValue={useChatDefaultValue ? chat : undefined}
             onChange={(val) => onParamChange?.("chat", val)}
+            isLoading={isLoading}
         />
     ) : (
         <Form form={form} className={classes.form} onFinish={onFinish}>

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

@@ -2,7 +2,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, promptRevision} from "@/lib/services/api"
-import {ChatMessage, ChatRole, GenericObject, Parameter, Variant} from "@/lib/Types"
+import {ChatMessage, ChatRole, GenericObject, JSSTheme, Parameter, Variant} from "@/lib/Types"
 import {batchExecute, randString, removeKeys} from "@/lib/helpers/utils"
 import LoadTestsModal from "../LoadTestsModal"
 import AddToTestSetDrawer from "../AddToTestSetDrawer/AddToTestSetDrawer"
@@ -34,7 +34,7 @@ type StyleProps = {
 const {TextArea} = Input
 const LOADING_TEXT = "Loading..."
 
-const useStylesBox = createUseStyles({
+const useStylesBox = createUseStyles((theme: JSSTheme) => ({
     card: {
         marginTop: 16,
         border: "1px solid #ccc",
@@ -68,12 +68,20 @@ const useStylesBox = createUseStyles({
     },
     row3: {
         margin: "16px 0",
+        position: "relative",
         "& textarea": {
             height: "100%",
             width: "100%",
         },
     },
-})
+    copyButton: {
+        position: "absolute",
+        right: 6,
+        opacity: 0.5,
+        bottom: 6,
+        color: theme.colorPrimary,
+    },
+}))
 
 const useStylesApp = createUseStyles({
     testView: {
@@ -211,6 +219,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     form={form}
                     imageSize="large"
                     isPlaygroundComponent={true}
+                    isLoading={loading}
                 />
             </Row>
             {additionalData?.cost || additionalData?.latency ? (
@@ -247,12 +256,6 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     >
                         Add to Test Set
                     </Button>
-                    <CopyButton
-                        buttonText={isChatVariant ? "Copy last message" : "Copy result"}
-                        text={result}
-                        disabled={loading || !result}
-                        shape="round"
-                    />
                     {loading ? (
                         <Button
                             icon={<CloseCircleOutlined />}
@@ -299,6 +302,13 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                                 : "",
                         }}
                     />
+                    <CopyButton
+                        buttonText={null}
+                        text={result}
+                        disabled={loading || !result}
+                        icon={true}
+                        className={classes.copyButton}
+                    />
                 </Row>
             )}
         </Card>