nicer transition when iframe switches to different conversation

components/ai_chat/resources/page/chat_ui.tsx

@@ -58,9 +58,20 @@ function Content() {
 function ConversationEntries(props: ConversationEntriesProps) {
   const conversationContext = useConversation()
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
+  const hasNotifiedLoaded = React.useRef(false)
+
+  React.useEffect(() => {
+    hasNotifiedLoaded.current = false
+  }, [conversationContext.conversationUuid])
 
   React.useEffect(() => {
     const listener = (height: number) => {
+      // Use the first height change to notify that the iframe has loaded,
+      // in lieu of an actual "has rendered the conversation entries" event.
+      if (!hasNotifiedLoaded.current && height > 0) {
+        hasNotifiedLoaded.current = true
+        props.onLoad()
+      }
       if (iframeRef.current) {
         iframeRef.current.style.height = height + 'px'
         props.onHeightChanged()
@@ -71,13 +82,13 @@ function ConversationEntries(props: ConversationEntriesProps) {
     return () => {
       api.conversationEntriesFrameObserver.removeListener(id)
     }
-  }, [props.onHeightChanged])
+  }, [props.onHeightChanged, props.onLoad])
 
   return (
     <iframe
+      key={conversationContext.conversationUuid}
       src={"chrome-untrusted://leo-ai-conversation-entries/" + conversationContext.conversationUuid}
       ref={iframeRef}
-      onLoad={props.onLoad}
     />
   )
 }

components/ai_chat/resources/page/components/main/index.tsx

@@ -47,6 +47,10 @@ function Main() {
   const [isConversationListOpen, setIsConversationsListOpen] = React.useState(false)
   const [isContentReady, setIsContentReady] = React.useState(false)
 
+  React.useEffect(() => {
+    setIsContentReady(false)
+  }, [conversationContext.conversationUuid])
+
   const shouldShowPremiumSuggestionForModel =
     aiChatContext.hasAcceptedAgreement &&
     !aiChatContext.isPremiumStatusFetching && // Avoid flash of content

components/ai_chat/resources/page/components/main/style.module.scss

@@ -62,12 +62,12 @@
 
   // Hide until content is ready
   opacity: 0;
-  transition: opacity 0.125s ease-out;
+  // Hide immediately when changing content
+  transition: none;
 
   &.contentReady {
     opacity: 1;
-    // Hide immediately when changing content
-    transition: none;
+    transition: opacity 0.125s ease-out;
   }
 }
 

components/ai_chat/resources/page/stories/story_utils/ConversationEntries.tsx

@@ -6,15 +6,19 @@
 import * as React from 'react'
 import ConversationEntries from '../../../untrusted_conversation_frame/components/conversation_entries'
 import { ConversationEntriesProps } from '../../state/ai_chat_context'
+import { useConversation } from '../../state/conversation_context'
 
 // The real WebUI has an iframe with the ConversationEntries component but
 // in storybook it's easier to just include it directly
 export default function StorybookConversationEntries (props: ConversationEntriesProps) {
+  const conversationContext = useConversation()
   React.useEffect(() => {
-    props.onLoad()
-  }, [])
+    setTimeout(() => {
+      props.onLoad()
+    }, 0)
+  }, [conversationContext.conversationUuid])
 
   return (
-    <ConversationEntries />
+    <ConversationEntries key={conversationContext.conversationUuid} />
   )
 }