feat: add animations to proactive messages (COR-4271)

apps/documentation/src/pages/ProactiveMessage.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const inputStyle = {
+  border: 'solid 1px black',
+  borderRadius: '4px',
+  padding: '2px',
+};
+
+const sendButtonStyle = {
+  background: '#e8e8e8',
+  borderRadius: '4px',
+  padding: '4px 8px',
+  marginLeft: '4px',
+};
+
+export default function ProactiveMessage() {
+  const [message, setMessage] = useState('');
+
+  const send = () => {
+    (window as any).voiceflow.chat.proactive.push({ type: 'text', payload: { message } });
+    setMessage('');
+  };
+
+  return (
+    <div>
+      Add proactive message:
+      <input type="text" style={inputStyle} value={message} onChange={(e) => setMessage(e.target.value)} />
+      <button type="button" style={sendButtonStyle} onClick={send}>
+        Send
+      </button>
+    </div>
+  );
+}

apps/documentation/src/pages/chat.tsx

@@ -2,6 +2,8 @@ import 'regenerator-runtime/runtime';
 
 import { ChatScript } from '@/components/ChatScript';
 
+import ProactiveMessage from './ProactiveMessage';
+
 export const getServerSideProps = async (context: any) => ({
   // will be passed to the page component as props
   props: {
@@ -13,12 +15,13 @@ export const getServerSideProps = async (context: any) => ({
 export default function ChatPage(props: any) {
   return (
     <>
-      <div style={{ position: 'relative' }}>
-        You can switch projects by changing the URL `projectID=...`
-        {props.projectID && <ChatScript {...props} />}
-      </div>
-
       <div style={{ height: '100vh', padding: '30px' }}>
+        <div style={{ position: 'relative' }}>
+          You can switch projects by changing the URL `projectID=...`
+          {props.projectID && <ChatScript {...props} />}
+        </div>
+        <ProactiveMessage />
+
         <div style={{ width: '600px', height: '100%', margin: '0 auto' }} id="chat_embed"></div>
       </div>
     </>

packages/chat/src/components/Proactive/index.tsx

@@ -5,10 +5,18 @@ import { useEffect, useMemo, useState } from 'react';
 import { match } from 'ts-pattern';
 
 import { ClassName } from '@/constants';
+import { fadeInAndUp } from '@/styles/animation-utils.css';
 
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-import { closeButton, closeButtonIcon, messageContainer, proactiveContainer, singleMessage } from './styles.css';
+import {
+  closeButton,
+  closeButtonIcon,
+  closed,
+  messageContainer,
+  proactiveContainer,
+  singleMessage,
+} from './styles.css';
 
 interface ProactiveQueueProps {
   side: WidgetSettingsWidgetPosition;
@@ -23,7 +31,7 @@ export const Proactive: React.FC<ProactiveQueueProps> = ({ side, messages }) =>
       messages.map((message, index) =>
         match(message)
           .with({ type: Trace.TraceType.TEXT }, ({ payload }) => (
-            <div className={singleMessage} key={index}>
+            <div className={clsx(singleMessage, fadeInAndUp)} key={index}>
               {String(payload.message)}
             </div>
           ))
@@ -37,11 +45,15 @@ export const Proactive: React.FC<ProactiveQueueProps> = ({ side, messages }) =>
     setIsClosed(false);
   }, [queue]);
 
-  if (isClosed || !queue.length) return null;
+  const close = () => {
+    setIsClosed(true);
+  };
+
+  if (!queue.length) return null;
 
   return (
-    <div className={clsx(ClassName.PROACTIVE, proactiveContainer({ side }))}>
-      <Button round className={closeButton} onClick={() => setIsClosed(true)}>
+    <div className={clsx(ClassName.PROACTIVE, proactiveContainer({ side }), isClosed && closed)}>
+      <Button round className={closeButton} onClick={() => close()}>
         <Icon className={closeButtonIcon} svg="closeV2" />
       </Button>
       <div className={messageContainer}>{queue}</div>

packages/chat/src/components/Proactive/styles.css.ts

@@ -13,6 +13,7 @@ export const proactiveContainer = recipe({
     width: 256,
     display: 'flex',
     flexDirection: 'column',
+    transition: transition(['opacity']),
   },
 
   variants: {
@@ -40,6 +41,8 @@ export const singleMessage = style({
   fontSize: 14,
   lineHeight: '20px',
   fontFamily: THEME.fontFamily,
+  opacity: 0,
+  transition: transition(['opacity']),
 });
 
 export const messageContainer = style({
@@ -82,3 +85,8 @@ export const closeButtonIcon = style({
   height: 10,
   marginBottom: 2,
 });
+
+export const closed = style({
+  opacity: 0,
+  pointerEvents: 'none',
+});