[Agent Builder] Add typewriter effect to conversation title (elastic#234526)

Author: chrisbmar

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_title.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { EuiTitle, EuiPageHeaderSection, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@@ -15,6 +15,9 @@ export const ConversationTitle: React.FC<{}> = () => {
   const { euiTheme } = useEuiTheme();
   const { title, isLoading } = useConversationTitle();
 
+  const [previousTitle, setPreviousTitle] = useState<string>('');
+  const [currentText, setCurrentText] = useState<string>('');
+
   const labels = {
     ariaLabel: i18n.translate('xpack.onechat.conversationTitle.ariaLabel', {
       defaultMessage: 'Conversation title',
@@ -27,6 +30,32 @@ export const ConversationTitle: React.FC<{}> = () => {
     ),
   };
 
+  useEffect(() => {
+    if (isLoading) return;
+
+    const fullText = title || labels.newConversationDisplay;
+
+    // Typewriter effect: only when transitioning from "New conversation" to actual title
+    if (previousTitle === labels.newConversationDisplay && title) {
+      if (currentText.length < fullText.length) {
+        // start typewriter effect
+        const typingSpeed = 50;
+        const timeout = setTimeout(() => {
+          setCurrentText(fullText.substring(0, currentText.length + 1));
+        }, typingSpeed);
+
+        return () => clearTimeout(timeout);
+      }
+    } else if (title && title !== previousTitle) {
+      // Normal title change: set immediately without typewriter effect I.e. when changing from one conversation to another
+      setCurrentText(fullText);
+    }
+    // always track the previous title
+    setPreviousTitle(fullText);
+  }, [title, currentText, labels.newConversationDisplay, isLoading, previousTitle]);
+
+  const titleDisplayText = currentText || previousTitle;
+
   const sectionStyles = css`
     display: flex;
     flex-direction: row;
@@ -37,7 +66,7 @@ export const ConversationTitle: React.FC<{}> = () => {
     <EuiPageHeaderSection css={sectionStyles}>
       {!isLoading && (
         <EuiTitle aria-label={labels.ariaLabel} size="xxs">
-          <h1>{title || labels.newConversationDisplay}</h1>
+          <h1>{titleDisplayText}</h1>
         </EuiTitle>
       )}
     </EuiPageHeaderSection>