chore: expand ai test result

packages/frontend/src/components/VariablesList/index.tsx

@@ -1,6 +1,6 @@
 import { TDataOutMetadatumType } from '@plumber/types'
 
-import { useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { IconType } from 'react-icons/lib'
 import {
   Accordion,
@@ -92,27 +92,48 @@ export function VariableItem({
   isLast?: boolean
   withIcon?: IconType
 }): JSX.Element {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+  const textRef = useRef<HTMLParagraphElement>(null)
   const shouldShowBottomBorder = !withIcon && (onClick || isLast)
 
   const displayValue =
     variable.displayedValue ?? variable.value?.toString() ?? ''
 
   const isSuggestionVariable = onClick && !withIcon
+
+  // Check if text is overflowing after render
+  useEffect(() => {
+    if (variable.type === 'ai_response' && textRef.current && !isExpanded) {
+      const element = textRef.current
+      const isTextOverflowing =
+        element.scrollHeight > element.clientHeight ||
+        element.scrollWidth > element.clientWidth
+      setIsOverflowing(isTextOverflowing)
+    }
+  }, [variable.type, isExpanded])
+
+  const shouldShowToggle = variable.type === 'ai_response' && isOverflowing
+
   return (
     <Box
       key={`suggestion-${variable.name}`}
       data-test="variable-suggestion-item"
       h={
         isSuggestionVariable
           ? SUGGESTION_VARIABLE_ITEM_HEIGHT
+          : shouldShowToggle
+          ? 'auto'
           : VARIABLE_ITEM_HEIGHT
       }
       maxH={
         isSuggestionVariable
           ? SUGGESTION_VARIABLE_ITEM_HEIGHT
+          : shouldShowToggle
+          ? undefined
           : VARIABLE_ITEM_HEIGHT
       }
-      overflowY="hidden"
+      overflowY={shouldShowToggle && isExpanded ? 'visible' : 'hidden'}
       padding={isSuggestionVariable ? '0.5rem 1rem' : '1rem'}
       borderBottom={shouldShowBottomBorder ? undefined : '1px solid #EDEDED'}
       _hover={
@@ -149,22 +170,42 @@ export function VariableItem({
       >
         {variable.label ?? variable.name} <VariableTag type={variable.type} />
       </Text>
-      <Flex alignItems="center" gap={2}>
-        <Text
-          textStyle="body-2"
-          color="base.content.medium"
-          whiteSpace="nowrap"
-          overflow="hidden"
-          textOverflow="ellipsis"
-          textDecoration={withIcon ? 'underline' : undefined}
-        >
-          {displayValue.length ? (
-            displayValue
-          ) : (
-            <i style={{ opacity: 0.5 }}>empty</i>
-          )}
-        </Text>
-        {withIcon && <Icon as={withIcon} />}
+      <Flex flexDirection="column" gap={1}>
+        <Flex alignItems="center" gap={2}>
+          <Text
+            ref={textRef}
+            textStyle="body-2"
+            color="base.content.medium"
+            whiteSpace={isExpanded ? 'pre-wrap' : 'nowrap'}
+            overflow={isExpanded ? 'visible' : 'hidden'}
+            textOverflow={isExpanded ? 'clip' : 'ellipsis'}
+            textDecoration={withIcon ? 'underline' : undefined}
+          >
+            {displayValue.length ? (
+              displayValue
+            ) : (
+              <i style={{ opacity: 0.5 }}>empty</i>
+            )}
+          </Text>
+          {withIcon && <Icon as={withIcon} />}
+        </Flex>
+        {shouldShowToggle && (
+          <Text
+            textStyle="body-2"
+            color="primary.500"
+            cursor="pointer"
+            _hover={{ textDecoration: 'underline' }}
+            onClick={(e) => {
+              e.stopPropagation()
+              setIsExpanded(!isExpanded)
+            }}
+            onMouseDown={(e) => {
+              e.stopPropagation()
+            }}
+          >
+            {isExpanded ? 'Show less' : 'Show more'}
+          </Text>
+        )}
       </Flex>
     </Box>
   )
@@ -207,6 +248,7 @@ export default function VariablesList(props: VariablesListProps) {
     getScrollElement: () => parentRef.current,
     estimateSize: () =>
       onClick ? SUGGESTION_VARIABLE_ITEM_HEIGHT : VARIABLE_ITEM_HEIGHT,
+    measureElement: (element) => element.getBoundingClientRect().height,
     overscan: 50,
   })
 
@@ -232,6 +274,7 @@ export default function VariablesList(props: VariablesListProps) {
             <Box
               key={virtualItem.key}
               data-index={virtualItem.index}
+              ref={virtualizer.measureElement}
               position="absolute"
               top={0}
               left={0}