minor: fix latte actions preview animation

Author: csansoon

apps/web/src/components/LatteChat/_components/ChatInteraction/CollapsedInteractionSteps.tsx

@@ -1,64 +1,46 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { LatteInteractionStep } from '$/hooks/latte/types'
 import { InteractionStep } from './InteractionStep'
-import { cn } from '@latitude-data/web-ui/utils'
+
+const STEP_LINE_HEIGHT = 1.25 // rem
 
 export const CollapsedInteractionSteps = ({
   steps,
+  isLoading = false,
 }: {
   steps: LatteInteractionStep[]
+  isLoading?: boolean
 }) => {
-  const [displayedItem, setDisplayedItem] = useState<'last' | 'previous'>(
-    'last',
-  )
-  const isFirstRender = useRef(true)
+  const [currentLine, setCurrentLine] = useState(0)
 
   useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false
-      return
-    }
-
-    if (steps.length === 0) return
-
-    setDisplayedItem('previous')
-    setTimeout(() => {
-      setDisplayedItem('last')
-    }, 1) // Delay to allow the transition to take effect
+    setCurrentLine(steps.length) // +1 for the initial thinking step
+    console.log('current line =', steps.length)
   }, [steps.length])
 
   return (
     <div className='w-full relative overflow-hidden h-6 leading-6'>
       <div
-        className={cn('absolute inset-x-0 top-0 transform', {
-          'transition-transform duration-500 ease-in-out':
-            displayedItem === 'last',
-
-          '-translate-y-full': displayedItem === 'last',
-          'translate-y-0': displayedItem === 'previous',
-        })}
-      >
-        <InteractionStep
-          key={steps.length - 2}
-          step={steps[steps.length - 2]}
-          singleLine
-        />
-      </div>
-
-      <div
-        className={cn('absolute inset-x-0 top-0 transform', {
-          'transition-transform duration-500 ease-in-out':
-            displayedItem === 'last',
-
-          'translate-y-0': displayedItem === 'last',
-          'translate-y-full': displayedItem === 'previous',
-        })}
+        className='absolute inset-x-0 transition-transform duration-500 ease-in-out flex flex-col justify-center'
+        style={{
+          transform: `translateY(-${currentLine * STEP_LINE_HEIGHT}rem)`,
+        }}
       >
+        {/* Thinking step*/}
         <InteractionStep
-          key={steps.length - 1}
-          step={steps[steps.length - 1]}
+          key={-1}
+          step={undefined}
+          isLoading={isLoading}
           singleLine
-        />
+        />{' '}
+        {steps.map((step, index) => (
+          <InteractionStep
+            key={index}
+            step={step}
+            isLoading={isLoading && index === steps.length - 1}
+            singleLine
+          />
+        ))}
       </div>
     </div>
   )

apps/web/src/components/LatteChat/_components/ChatInteraction/InteractionStep.tsx

@@ -6,9 +6,11 @@ import { Text } from '@latitude-data/web-ui/atoms/Text'
 export function InteractionStep({
   step,
   singleLine,
+  isLoading = false,
 }: {
   step?: LatteInteractionStep
   singleLine?: boolean
+  isLoading?: boolean
 }) {
   if (!step) {
     return (
@@ -30,25 +32,34 @@ export function InteractionStep({
         noWrap={singleLine}
         ellipsis={singleLine}
         whiteSpace='preWrap'
+        animate={isLoading}
       >
         {step.content}
       </Text.H5>
     )
   }
 
   if (step.type === 'action') {
-    return <EditActionStep step={step} singleLine={singleLine} />
+    return (
+      <EditActionStep
+        step={step}
+        singleLine={singleLine}
+        isLoading={isLoading}
+      />
+    )
   }
 
-  return <ToolStep step={step} singleLine={singleLine} />
+  return <ToolStep step={step} singleLine={singleLine} isLoading={isLoading} />
 }
 
 function ToolStep({
   step,
   singleLine,
+  isLoading,
 }: {
   step: Extract<LatteInteractionStep, { type: 'tool' }>
   singleLine?: boolean
+  isLoading?: boolean
 }) {
   return (
     <div className='flex flex-row gap-2 items-start max-w-full'>
@@ -62,6 +73,7 @@ function ToolStep({
         noWrap={singleLine}
         ellipsis={singleLine}
         color='foregroundMuted'
+        animate={isLoading}
       >
         {step.finished
           ? (step.finishedDescription ?? step.activeDescription)
@@ -104,9 +116,11 @@ const editAction = (
 function EditActionStep({
   step,
   singleLine,
+  isLoading,
 }: {
   step: Extract<LatteInteractionStep, { type: 'action' }>
   singleLine?: boolean
+  isLoading?: boolean
 }) {
   const { icon, operationDescription } = editAction(step.action)
 
@@ -117,6 +131,7 @@ function EditActionStep({
         noWrap={singleLine}
         ellipsis={singleLine}
         color='foregroundMuted'
+        animate={isLoading}
       >
         {operationDescription}
       </Text.H5>

apps/web/src/components/LatteChat/_components/ChatInteraction/index.tsx

@@ -36,14 +36,22 @@ export function ChatInteraction({
             })}
           />
           <div className='flex flex-col gap-4 flex-grow max-w-full px-2'>
-            {interaction.steps.length == 0 ? (
-              <InteractionStep />
-            ) : isOpen ? (
+            {isOpen && interaction.steps.length > 0 ? (
               interaction.steps.map((step, i) => (
-                <InteractionStep key={i} step={step} />
+                <InteractionStep
+                  key={i}
+                  step={step}
+                  isLoading={
+                    interaction.output === undefined &&
+                    i === interaction.steps.length - 1
+                  }
+                />
               ))
             ) : (
-              <CollapsedInteractionSteps steps={interaction.steps} />
+              <CollapsedInteractionSteps
+                steps={interaction.steps}
+                isLoading={interaction.output === undefined}
+              />
             )}
           </div>
         </div>