[Odie] Experiment preparations bottom interaction

client/odie/context/index.tsx

@@ -95,13 +95,22 @@ const OdieAssistantProvider = ( {
 
 	const addMessage = ( message: Message ) => {
 		setMessages( ( prevMessages ) => {
-			const newMessages = [ ...prevMessages, message ];
-			setChat( ( prevChat ) => ( {
-				...prevChat,
-				messages: newMessages,
-			} ) );
-			return newMessages;
+			const lastMessage = prevMessages[ prevMessages.length - 1 ];
+			// If the last message is placeholder type, replace it with the new message
+			if ( lastMessage?.type === 'placeholder' ) {
+				return [ ...prevMessages.slice( 0, -1 ), message ];
+			}
+			// Otherwise, add the new message
+			return [ ...prevMessages, message ];
 		} );
+
+		setChat( ( prevChat ) => ( {
+			...prevChat,
+			messages:
+				prevChat.messages[ prevChat.messages.length - 1 ].type === 'placeholder'
+					? [ ...prevChat.messages.slice( 0, -1 ), message ]
+					: [ ...prevChat.messages, message ],
+		} ) );
 	};
 
 	return (
@@ -125,7 +134,7 @@ const OdieAssistantProvider = ( {
 			} }
 		>
 			{ children }
-			<OdieAssistant />
+			<OdieAssistant botNameSlug="wapuu" simple />
 		</OdieAssistantContext.Provider>
 	);
 };

client/odie/index.tsx

@@ -13,7 +13,13 @@ import './style.scss';
 export const WAPUU_ERROR_MESSAGE =
 	"Wapuu oopsie! 😺 My bad, but even cool pets goof. Let's laugh it off! 🎉, ask me again as I forgot what you said!";
 
-const OdieAssistant = () => {
+type OdieAssistantProps = {
+	botNameSlug: string;
+	simple?: boolean;
+};
+
+const OdieAssistant = ( props: OdieAssistantProps ) => {
+	const { simple } = props;
 	const {
 		lastNudge,
 		chat,
@@ -29,6 +35,7 @@ const OdieAssistant = () => {
 	const [ input, setInput ] = useState( '' );
 	const { mutateAsync: sendOdieMessage } = useOdieSendMessage();
 	const { data: chatData } = useOdieGetChatPollQuery( chat.chat_id ?? null );
+	const [ userInteracted, setUserInteracted ] = useState( false );
 
 	const dispatch = useDispatch();
 
@@ -87,6 +94,13 @@ const OdieAssistant = () => {
 			} );
 
 			setInput( '' );
+
+			addMessage( {
+				content: '...',
+				role: 'bot',
+				type: 'placeholder',
+			} );
+
 			const response = await sendOdieMessage( {
 				message: { content: input, role: 'user', type: 'message' },
 			} );
@@ -109,6 +123,7 @@ const OdieAssistant = () => {
 
 	const handleToggleVisibility = () => {
 		const newVisibility = ! isVisible;
+		setUserInteracted( true );
 
 		dispatch(
 			recordTracksEvent( 'calypso_odie_chat_toggle_visibility_click', {
@@ -142,17 +157,38 @@ const OdieAssistant = () => {
 	return (
 		<div
 			className={ classnames( 'chatbox', {
-				'chatbox-show': isVisible,
-				'chatbox-hide': ! isVisible,
+				'chatbox-show': isVisible && ! simple,
+				'chatbox-hide': ! isVisible && ! simple,
+				'chatbox-show-vertical': isVisible && simple,
+				'chatbox-hide-vertical': ! isVisible && simple,
 				'using-environment-badge': environmentBadge,
 			} ) }
 		>
-			<WapuuRibbon
-				onToggleVisibility={ handleToggleVisibility }
-				isNudging={ isNudging }
-				isLoading={ isLoading }
-			/>
-			<div className="chatbox-header">Wapuu Assistant</div>
+			{ ! simple && (
+				<WapuuRibbon
+					onToggleVisibility={ handleToggleVisibility }
+					isNudging={ isNudging }
+					isLoading={ isLoading }
+				/>
+			) }
+			<div className="chatbox-header">
+				{ ! simple ? (
+					'Wapuu Assistant'
+				) : (
+					<>
+						<button className="chatbox-header-button" onClick={ handleToggleVisibility }>
+							<span
+								className={ classnames( {
+									'chatbox-attention': ! userInteracted || isNudging,
+								} ) }
+							>
+								Wapuu Assistant
+							</span>
+						</button>
+					</>
+				) }
+			</div>
+
 			<div className="chat-box-message-container">
 				<div className="chatbox-messages">
 					{ chat.messages.map( ( message, index ) => (

client/odie/message/index.tsx

@@ -1,3 +1,4 @@
+import { Spinner } from '@wordpress/components';
 import { RefObject } from 'react';
 import AsyncLoad from 'calypso/components/async-load';
 import CustomALink from './custom-a-link';
@@ -23,17 +24,23 @@ const ChatMessage = ( { message, isLast, messageEndRef }: ChatMessageProps ) =>
 				isUser ? 'odyssus-chatbox-message-user' : 'odyssus-chatbox-message-wapuu'
 			}` }
 		>
-			<AsyncLoad
-				require="react-markdown"
-				placeholder={ null }
-				transformLinkUri={ uriTransformer }
-				components={ {
-					a: CustomALink,
-				} }
-			>
-				{ message.content }
-			</AsyncLoad>
-			<LikeDislikeButtons isUser={ isUser } messageType={ message.type } />
+			{ message.type === 'placeholder' ? (
+				<Spinner />
+			) : (
+				<>
+					<AsyncLoad
+						require="react-markdown"
+						placeholder={ null }
+						transformLinkUri={ uriTransformer }
+						components={ {
+							a: CustomALink,
+						} }
+					>
+						{ message.content }
+					</AsyncLoad>
+					<LikeDislikeButtons isUser={ isUser } messageType={ message.type } />
+				</>
+			) }
 		</div>
 	);
 };

client/odie/style.scss

@@ -18,14 +18,11 @@
 
 .chatbox-header {
 	width: 100%;
-	font-size: large;
-	font-weight: normal;
-	text-align: left;
-	line-height: 62px;
 	background-color: #23282d;
 	color: #fff;
 	border-radius: 4px;
 	text-indent: 16px;
+	line-height: 62px;
 }
 
 .chatbox-show {
@@ -74,6 +71,7 @@
 }
 
 .chatbox-input {
+	padding-left: 8px;
 	width: 80%;
 }
 
@@ -162,3 +160,50 @@
 .using-environment-badge {
 	bottom: 64px;
 }
+
+/* When chatbox is hidden */
+.chatbox-hide-vertical {
+	transform: translateY(calc(100% + 5px));
+}
+
+/* When chatbox is visible */
+.chatbox-show-vertical {
+	transform: translateY(0);
+}
+
+@keyframes fadeToColor {
+	0%,
+	10%,
+	30%,
+	50%,
+	70% {
+		color: #ece6f6;
+	}
+	20%,
+	40%,
+	60% {
+		color: #007cba;
+	}
+	80%,
+	90%,
+	100% {
+		color: #ece6f6;
+	}
+}
+
+.chatbox-attention {
+	animation: fadeToColor 4s linear infinite;
+}
+
+.chatbox-header-button {
+	color: #ece6f6;
+	border: none;
+	outline: none;
+	padding: 0;
+	cursor: pointer;
+	background: none;
+	font-size: large;
+	font-weight: normal;
+	text-align: left;
+	width: 100%;
+}

client/odie/types/index.ts

@@ -14,7 +14,7 @@ export type Nudge = {
 
 export type MessageRole = 'user' | 'bot';
 
-export type MessageType = 'message' | 'action' | 'meta' | 'error';
+export type MessageType = 'message' | 'action' | 'meta' | 'error' | 'placeholder';
 
 export type Message = {
 	content: string;