feat: add animation and update some props

razorpay · Jan 31, 2025 · 79016b6 · 79016b6
1 parent 1344e46
commit 79016b6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx b/packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx
@@ -15,18 +15,27 @@ const Template = (args) => (
       {' '}
       Demo
     </ChatBubble>
-    <ChatBubble senderType="other">this is a demo message</ChatBubble>
+    <ChatBubble
+      senderType="other"
+      leading={<RayIcon size="xlarge" color="surface.background.sea.intense" />}
+    >
+      this is a demo message
+    </ChatBubble>
     <ChatBubble messageType="self" senderType="self">
       message
     </ChatBubble>
     <ChatBubble>Hi, can you tell me how can i join fight club?</ChatBubble>
+    <ChatBubble
+      senderType="other"
+      leading={<RayIcon size="xlarge" color="surface.background.sea.intense" />}
+      isLoading
+      loadingText="Analyzing your response..."
+    />
+
     <ChatBubble
       senderType="other"
       leading={<RayIcon size="xlarge" color="surface.background.sea.intense" />}
     >
-      Yo! i am the bot
-    </ChatBubble>
-    <ChatBubble isLoading>
       {' '}
       Yo! i am the bot. this is a very very very big chat bubble yo yo
     </ChatBubble>

diff --git a/packages/blade/src/components/ChatBubble/ChatBubble.tsx b/packages/blade/src/components/ChatBubble/ChatBubble.tsx
@@ -12,7 +12,7 @@ export type ChatBubbleProps = {
   errorText?: string;
   onClick?: () => void;
   footerActions?: React.ReactNode;
-  children: React.ReactNode | string;
+  children?: React.ReactNode | string;
   leading?: React.ReactNode;
   loadingText?: string;
 };
@@ -32,7 +32,8 @@ const ChatBubble = ({
     // their can be a case where childrens are passed like  "{' '} some text" so we need to check if children is string or not
     const shouldWrapInText =
       typeof children === 'string' ||
-      (Array.isArray(children) && children.every((child) => typeof child === 'string'));
+      (Array.isArray(children) && children.every((child) => typeof child === 'string')) ||
+      isLoading;
     // console.log(children.every((child) => typeof child === 'string'));
     // convert children to an array if it is not an array
 
@@ -44,7 +45,7 @@ const ChatBubble = ({
           variant="body"
           size="medium"
         >
-          {children}
+          {isLoading ? loadingText : children}
         </Text>
       );
     }

diff --git a/packages/blade/src/components/ChatBubble/ResponseMessageBubble.tsx b/packages/blade/src/components/ChatBubble/ResponseMessageBubble.tsx
@@ -19,10 +19,10 @@ const ResponseMessageBubble = ({
     <BaseBox maxWidth="296px" onClick={onClick}>
       <BaseBox display="flex" gap="spacing.4" justifyContent="left">
         <BaseBox>
-          <Rotate>{leading}</Rotate>
+          <Rotate animate={isLoading}>{leading}</Rotate>
         </BaseBox>
         <BaseBox display="flex" alignItems="center" maxWidth="256px">
-          {isLoading ? loadingText : children}
+          {children}
         </BaseBox>
       </BaseBox>
     </BaseBox>

diff --git a/packages/blade/src/components/ChatBubble/Rotate.tsx b/packages/blade/src/components/ChatBubble/Rotate.tsx
@@ -1,23 +1,32 @@
 import React from 'react';
 import { LazyMotion, domAnimation, m } from 'framer-motion';
-import { makeMotionTime } from '~utils';
+import { castWebType } from '~utils';
 import { useTheme } from '~components/BladeProvider';
+import { msToSeconds } from '~utils/msToSeconds';
+import { cssBezierToArray } from '~utils/cssBezierToArray';
 
-const Rotate = ({ children }: { children: React.ReactElement }): React.ReactElement => {
+const Rotate = ({
+  children,
+  animate,
+}: {
+  children: React.ReactElement;
+  animate: boolean;
+}): React.ReactElement => {
   const { theme } = useTheme();
+
   return (
-    // eslint-disable-next-line react/jsx-no-comment-textnodes
     <LazyMotion features={domAnimation}>
-      {/* //TODO: use blade tokens for duration and repeat */}
       <m.div
         style={{
           display: 'flex',
         }}
-        animate={{ rotate: 360 }}
+        // use animate prop to control the animation
+        animate={{ rotate: animate ? 90 : 0 }}
         transition={{
-          duration: 2,
+          duration: msToSeconds(theme.motion.duration.gentle),
           repeat: Infinity,
-          ease: 'linear',
+          ease: cssBezierToArray(castWebType(theme.motion.easing.emphasized)),
+          delay: msToSeconds(theme.motion.delay.gentle),
         }}
       >
         {children}