From f0367443c7c8691d1b602c1fa60f95d53cae0db7 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Wed, 12 Nov 2025 09:05:09 +0800
Subject: [PATCH 1/2] chore: expand ai test result

---
 .../src/components/VariablesList/index.tsx    | 63 ++++++++++++++-----
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/VariablesList/index.tsx b/packages/frontend/src/components/VariablesList/index.tsx
index 87e63c2d30..56430933f5 100644
--- a/packages/frontend/src/components/VariablesList/index.tsx
+++ b/packages/frontend/src/components/VariablesList/index.tsx
@@ -1,6 +1,6 @@
 import { TDataOutMetadatumType } from '@plumber/types'
 
-import { useMemo, useRef } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { IconType } from 'react-icons/lib'
 import {
   Accordion,
@@ -25,6 +25,7 @@ import TableVariableItem from './TableVariableItem'
 
 const VARIABLE_ITEM_HEIGHT = 77
 const SUGGESTION_VARIABLE_ITEM_HEIGHT = 61
+const CHARACTER_LIMIT = 100
 
 function VariableTag({
   type,
@@ -92,12 +93,17 @@ export function VariableItem({
   isLast?: boolean
   withIcon?: IconType
 }): JSX.Element {
+  const [isExpanded, setIsExpanded] = useState(false)
   const shouldShowBottomBorder = !withIcon && (onClick || isLast)
 
   const displayValue =
     variable.displayedValue ?? variable.value?.toString() ?? ''
 
   const isSuggestionVariable = onClick && !withIcon
+
+  const shouldShowToggle =
+    variable.type === 'ai_response' && displayValue.length > CHARACTER_LIMIT
+
   return (
     <Box
       key={`suggestion-${variable.name}`}
@@ -105,11 +111,15 @@ export function VariableItem({
       h={
         isSuggestionVariable
           ? SUGGESTION_VARIABLE_ITEM_HEIGHT
+          : shouldShowToggle
+          ? 'auto'
           : VARIABLE_ITEM_HEIGHT
       }
       maxH={
         isSuggestionVariable
           ? SUGGESTION_VARIABLE_ITEM_HEIGHT
+          : shouldShowToggle
+          ? 'auto'
           : VARIABLE_ITEM_HEIGHT
       }
       overflowY="hidden"
@@ -149,22 +159,41 @@ 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
+            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>
   )

From e139f1961534d8ac4c2e3dfc2f56ba84ce95bd65 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Tue, 18 Nov 2025 18:20:53 +0800
Subject: [PATCH 2/2] minor refactor, fix display on expand

---
 .../src/components/VariablesList/index.tsx    | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/VariablesList/index.tsx b/packages/frontend/src/components/VariablesList/index.tsx
index 56430933f5..0021fc5de5 100644
--- a/packages/frontend/src/components/VariablesList/index.tsx
+++ b/packages/frontend/src/components/VariablesList/index.tsx
@@ -1,6 +1,6 @@
 import { TDataOutMetadatumType } from '@plumber/types'
 
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { IconType } from 'react-icons/lib'
 import {
   Accordion,
@@ -25,7 +25,6 @@ import TableVariableItem from './TableVariableItem'
 
 const VARIABLE_ITEM_HEIGHT = 77
 const SUGGESTION_VARIABLE_ITEM_HEIGHT = 61
-const CHARACTER_LIMIT = 100
 
 function VariableTag({
   type,
@@ -94,6 +93,8 @@ export function VariableItem({
   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 =
@@ -101,8 +102,18 @@ export function VariableItem({
 
   const isSuggestionVariable = onClick && !withIcon
 
-  const shouldShowToggle =
-    variable.type === 'ai_response' && displayValue.length > CHARACTER_LIMIT
+  // 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
@@ -119,10 +130,10 @@ export function VariableItem({
         isSuggestionVariable
           ? SUGGESTION_VARIABLE_ITEM_HEIGHT
           : shouldShowToggle
-          ? 'auto'
+          ? undefined
           : VARIABLE_ITEM_HEIGHT
       }
-      overflowY="hidden"
+      overflowY={shouldShowToggle && isExpanded ? 'visible' : 'hidden'}
       padding={isSuggestionVariable ? '0.5rem 1rem' : '1rem'}
       borderBottom={shouldShowBottomBorder ? undefined : '1px solid #EDEDED'}
       _hover={
@@ -162,6 +173,7 @@ export function VariableItem({
       <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'}
@@ -236,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,
   })
 
@@ -261,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}