docs(ai-chat-log): modified scrollable exmaple

twilio-labs · Jan 14, 2025 · 21ff802 · 21ff802
1 parent e8c1874
commit 21ff802
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx b/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx
@@ -44,13 +44,51 @@ export interface AIChatMessageBodyProps extends HTMLPasteProps<"div"> {
    * @memberof AIChatMessageBodyProps
    */
   animated?: boolean;
+  /**
+   * A callback when the animation is started
+   *
+   * @default false
+   * @type {() => void}
+   * @memberof AIChatMessageBodyProps
+   */
+  onAnimationStart?: () => void;
+  /**
+   * A callback when the animation is complete
+   *
+   * @default false
+   * @type {() => void}
+   * @memberof AIChatMessageBodyProps
+   */
+  onAnimationEnd?: () => void;
 }
 
 export const AIChatMessageBody = React.forwardRef<HTMLDivElement, AIChatMessageBodyProps>(
-  ({ children, size = "default", element = "AI_CHAT_MESSAGE_BODY", animated = false, ...props }, ref) => {
+  (
+    {
+      children,
+      size = "default",
+      element = "AI_CHAT_MESSAGE_BODY",
+      animated = false,
+      onAnimationEnd,
+      onAnimationStart,
+      ...props
+    },
+    ref,
+  ) => {
     const { id } = React.useContext(AIMessageContext);
+    const [showAnimation] = React.useState(animated && children !== undefined);
     const animationSpeed = size === "fullScreen" ? 8 : 10;
-    const childrenToRender = animated ? useAnimatedText(children, animationSpeed) : children;
+    const { animatedChildren, isAnimating } = useAnimatedText(children, animationSpeed, showAnimation);
+
+    React.useEffect(() => {
+      if (onAnimationStart && animated && isAnimating) {
+        onAnimationStart();
+      }
+
+      if (animated && !isAnimating && onAnimationEnd) {
+        onAnimationEnd();
+      }
+    }, [isAnimating, showAnimation]);
 
     return (
       <Box
@@ -66,7 +104,7 @@ export const AIChatMessageBody = React.forwardRef<HTMLDivElement, AIChatMessageB
         whiteSpace="pre-wrap"
         id={id}
       >
-        {childrenToRender}
+        {animatedChildren}
       </Box>
     );
   },

diff --git a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx
@@ -60,7 +60,6 @@ import {
   messageGenerationError,
   sendingMessageError,
   systemError,
-  animatedBotWithFeedback,
   animatedBotScrollable
 } from "../../../component-examples/AIChatLogExamples";
 import ComponentPageLayout from "../../../layouts/ComponentPageLayout";
@@ -296,34 +295,9 @@ The SkeletonLoader lengths vary on each render to give a more natural pending me
 </LivePreview>
 
 #### Animating
-The `AIChatMessageBody` component has an optional `animated` prop that can be used to apply a typewriter animation to the text. This should only be applied to the most recent message received from the AI.
+The `AIChatMessageBody` component has an optional `animated` prop that can be used to apply a typewriter animation to the text. This should only be applied to the messages received from the AI.
 
-<LivePreview
-  scope={{
-    AIChatLog,
-    AIChatMessage,
-    AIChatMessageAuthor,
-    AIChatMessageBody,
-    AIChatMessageActionCard,
-    AIChatMessageActionGroup,
-    Button,
-    ThumbsUpIcon,
-    ThumbsDownIcon,
-    CopyIcon,
-    RefreshIcon,
-    Button,
-    ResetIcon,    
-    Anchor,
-    InlineCode
-  }}
-  language="jsx"
-  noInline
->
-  {animatedBotWithFeedback}
-</LivePreview>
-
-##### Scrolling
-The `AIChatMessageBody` component has an optional `animated` prop that can be used to apply a typewriter animation to the text. This should only be applied to the most recent message received from the AI.
+It also accepts `onAnimationStart` and `onAnimationEnd` props to trigger actions when the animation starts and ends allowing additional logic such as scrolling to be implemented.
 
 <LivePreview
   scope={{