Merge pull request #3318 from Agenta-AI/improve/add-copy-button-on-evaluation-cells

[fix]: added copy button on evaluation cell

Author: ashrafchowdury

web/oss/src/components/EvalRunDetails/components/TableCells/CellContentPopover.tsx

@@ -2,26 +2,50 @@ import {memo, type ReactNode} from "react"
 
 import {Popover} from "antd"
 
+import CopyButton from "@/oss/components/CopyButton/CopyButton"
+
 interface CellContentPopoverProps {
     children: ReactNode
     content: ReactNode
     disabled?: boolean
+    copyContent?: string
 }
 
 /**
  * Wraps table cell content with a hover popover that shows the full content.
  * Used to preview truncated cell content without opening the focus drawer.
  */
-const CellContentPopover = ({children, content, disabled}: CellContentPopoverProps) => {
+const CellContentPopover = ({
+    children,
+    content,
+    disabled,
+    copyContent,
+}: CellContentPopoverProps) => {
     if (disabled) {
         return <>{children}</>
     }
 
+    const popoverContent = (
+        <div className="relative">
+            <div className="max-w-[400px] max-h-[300px] overflow-auto text-xs pr-6">{content}</div>
+            {copyContent && (
+                <div className="absolute -top-1 -right-1">
+                    <CopyButton
+                        text={copyContent}
+                        icon={true}
+                        buttonText={null}
+                        size="small"
+                        stopPropagation={true}
+                        type="text"
+                    />
+                </div>
+            )}
+        </div>
+    )
+
     return (
         <Popover
-            content={
-                <div className="max-w-[400px] max-h-[300px] overflow-auto text-xs">{content}</div>
-            }
+            content={popoverContent}
             trigger="hover"
             mouseEnterDelay={0.5}
             mouseLeaveDelay={0.1}

web/oss/src/components/EvalRunDetails/components/TableCells/InputCell.tsx

@@ -168,7 +168,7 @@ const PreviewEvaluationInputCell = ({
 
     if (chatNodes && chatNodes.length) {
         return (
-            <CellContentPopover content={popoverContent}>
+            <CellContentPopover content={popoverContent} copyContent={safeJsonStringify(value)}>
                 <div ref={ref} className={CONTAINER_CLASS} style={widthStyle}>
                     <div className="flex w-full flex-col gap-2">{chatNodes}</div>
                 </div>
@@ -179,7 +179,7 @@ const PreviewEvaluationInputCell = ({
     // Render JSON objects/arrays using the JSON editor
     if (isJson) {
         return (
-            <CellContentPopover content={popoverContent}>
+            <CellContentPopover content={popoverContent} copyContent={safeJsonStringify(jsonValue)}>
                 <div ref={ref} className={CONTAINER_CLASS} style={widthStyle}>
                     <JsonContent value={jsonValue} />
                 </div>
@@ -188,7 +188,7 @@ const PreviewEvaluationInputCell = ({
     }
 
     return (
-        <CellContentPopover content={popoverContent}>
+        <CellContentPopover content={popoverContent} copyContent={displayValue}>
             <div ref={ref} className={CONTAINER_CLASS} style={widthStyle}>
                 <span className="scenario-table-text whitespace-pre-wrap">{displayValue}</span>
             </div>

web/oss/src/components/EvalRunDetails/components/TableCells/InvocationCell.tsx

@@ -215,8 +215,9 @@ const PreviewEvaluationInvocationCell = ({
             </div>
         )
 
+        const errorCopyContent = `${stepError?.message}${stepError?.stacktrace ? `\n${stepError?.stacktrace}` : ""}`
         return (
-            <CellContentPopover content={errorPopoverContent}>
+            <CellContentPopover content={errorPopoverContent} copyContent={errorCopyContent}>
                 <div
                     ref={ref}
                     className={clsx(CONTAINER_CLASS, "!justify-between")}
@@ -264,7 +265,7 @@ const PreviewEvaluationInvocationCell = ({
 
     if (chatNodes && chatNodes.length) {
         return (
-            <CellContentPopover content={popoverContent}>
+            <CellContentPopover content={popoverContent} copyContent={safeJsonStringify(value)}>
                 <div ref={ref} className={CONTAINER_CLASS} style={widthStyle}>
                     <div className="scenario-invocation-content flex-1 min-h-0 overflow-hidden">
                         <div className="flex w-full flex-col gap-2">{chatNodes}</div>
@@ -284,7 +285,7 @@ const PreviewEvaluationInvocationCell = ({
     // Render JSON objects/arrays using the JSON editor
     if (isJson) {
         return (
-            <CellContentPopover content={popoverContent}>
+            <CellContentPopover content={popoverContent} copyContent={safeJsonStringify(jsonValue)}>
                 <div
                     ref={ref}
                     className={clsx(CONTAINER_CLASS, "!justify-between")}
@@ -306,7 +307,7 @@ const PreviewEvaluationInvocationCell = ({
     }
 
     return (
-        <CellContentPopover content={popoverContent}>
+        <CellContentPopover content={popoverContent} copyContent={displayValue}>
             <div ref={ref} className={clsx(CONTAINER_CLASS, "!justify-between")} style={widthStyle}>
                 <div className="scenario-invocation-content flex-1 min-h-0 overflow-hidden">
                     <span className="scenario-table-text whitespace-pre-wrap">{displayValue}</span>

web/oss/src/components/EvalRunDetails/components/TableCells/MetricCell.tsx

@@ -277,8 +277,9 @@ const PreviewEvaluationMetricCell = ({
             </div>
         )
 
+        const errorCopyContent = `${stepError.message}${stepError.stacktrace ? `\n${stepError.stacktrace}` : ""}`
         return (
-            <CellContentPopover content={errorPopoverContent}>
+            <CellContentPopover content={errorPopoverContent} copyContent={errorCopyContent}>
                 <div
                     ref={ref}
                     className={CONTAINER_CLASS}