feat: Animate in widget components (DSN-2530) (#312)

voiceflow · Nov 14, 2024 · d06153e · d06153e
1 parent 7f4f45e
commit d06153e
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 14 deletions.
diff --git a/packages/chat/src/components/Header/styles.css.ts b/packages/chat/src/components/Header/styles.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@/styles/colors';
@@ -9,12 +9,24 @@ import { transition } from '@/styles/transitions';
 
 import { buttonReset } from '../Button/reset.css';
 
+export const fadeIn = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-10px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
 export const headerContainer = style({
   display: 'flex',
   alignItems: 'center',
   backgroundColor: PALETTE.colors[500],
   padding: '12px 16px 12px 20px',
   height: parseInt(SIZES.sm, 10) + 24, // Add the top and bottom padding
+  animation: `${fadeIn} .3s ease-in`,
 });
 
 export const headerInnerContainer = style({

diff --git a/packages/chat/src/components/NewFooter/NewFooter.css.ts b/packages/chat/src/components/NewFooter/NewFooter.css.ts
@@ -9,8 +9,29 @@ import { transition } from '@/styles/transitions';
 
 const BUTTON_ROW_MARGIN = 10;
 
+const fadeInAndSlideUp = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(10px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
+const fadeIn = keyframes({
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+});
+
 export const footerContainer = style({
   width: '100%',
+  animation: `${fadeInAndSlideUp} 0.5s ease-in-out`,
 });
 
 export const buttonsContainer = style({
@@ -24,15 +45,6 @@ export const buttonsContainer = style({
   padding: '0 20px',
 });
 
-const fadeIn = keyframes({
-  from: {
-    opacity: 0,
-  },
-  to: {
-    opacity: 1,
-  },
-});
-
 export const scrollButtonContainer = style({
   display: 'flex',
   justifyContent: 'center',

diff --git a/packages/chat/src/components/SystemResponse/styles.css.ts b/packages/chat/src/components/SystemResponse/styles.css.ts
@@ -28,7 +28,7 @@ export const systemMessageContainer = recipe({
     display: 'flex',
     alignItems: 'flex-end',
     marginBottom: 4,
-    animation: `${fadeInSlideUp} .05s ease-in`,
+    animation: `${fadeInSlideUp} .3s ease-in`,
   },
 });
 

diff --git a/packages/chat/src/components/UserResponse/styles.css.ts b/packages/chat/src/components/UserResponse/styles.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@/styles/colors';
@@ -9,6 +9,17 @@ import { SIZES } from '@/styles/sizes';
 import { SMALL_AVATAR_SIZE } from '../Avatar/styles.css';
 import { MESSAGE_PADDING } from '../SystemResponse/styles.css';
 
+const fadeInSlideUp = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(10px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
 export const messageContainer = recipe({
   base: {
     fontFamily: FAMILY,
@@ -38,6 +49,7 @@ export const messageRow = recipe({
     alignItems: 'center',
     justifyContent: 'flex-end',
     marginBottom: '16px',
+    animation: `${fadeInSlideUp} 0.3s ease-out`,
   },
   variants: {
     isFirst: {

diff --git a/packages/chat/src/components/WelcomeMessage/WelcomeMessage.css.ts b/packages/chat/src/components/WelcomeMessage/WelcomeMessage.css.ts
@@ -1,15 +1,27 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 
 import { COLORS } from '@/styles/colors';
 import { FAMILY } from '@/styles/font';
 
+export const fadeIn = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-10px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
 export const welcomeMessageContainer = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   fontFamily: FAMILY,
   padding: '48px 20px 44px 20px',
   textAlign: 'center',
+  animation: `${fadeIn} 0.5s ease-in-out`,
 });
 
 export const avatarContainer = style({

diff --git a/packages/chat/src/views/ChatWidget/index.tsx b/packages/chat/src/views/ChatWidget/index.tsx
@@ -27,7 +27,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ shadowRoot, chatAPI, rea
 
   const { isOpen } = useContext(RuntimeStateContext);
 
-  /** initialization */
+  /** initialization  */
   const [isHidden, setHidden] = useState(false);
   const [proactiveMessages, setProactiveMessages] = useState<Trace.AnyTrace[]>([]);
   const isMobile = useMemo(() => window.matchMedia('(max-width: 768px)').matches, []);