Add typing indicator animation

samples/apps/copilot-chat-app/WebApp/package.json

@@ -21,6 +21,7 @@
     "@azure/msal-react": "^1.5.1",
     "@fluentui/react-components": "^9.13.0",
     "@fluentui/react-icons": "^2.0.193",
+    "@fluentui/react-northstar": "^0.66.4",
     "@reduxjs/toolkit": "^1.9.1",
     "debug": "^4.3.4",
     "react": "^18.2.0",

samples/apps/copilot-chat-app/WebApp/src/assets/custom.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+    import * as React from 'react';
+
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
+
+    const src: string;
+    export default src;
+}

samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx

@@ -8,32 +8,24 @@ import { Constants } from '../../Constants';
 import { AlertType } from '../../libs/models/AlertType';
 import { useAppDispatch } from '../../redux/app/hooks';
 import { setAlert } from '../../redux/features/app/appSlice';
+import { TypingIndicatorRenderer } from './typing-indicator/TypingIndicatorRenderer';
 
 const log = debug(Constants.debug.root).extend('chat-input');
 
 const useClasses = makeStyles({
     root: {
         display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        position: 'relative',
-    },
-    claim: {
-        position: 'absolute',
-        top: '-150px',
-        width: '100%',
+        flexDirection: 'column',
+        ...shorthands.margin(0, '72px'),
+        alignContent: 'stretch',
     },
-    claimContent: {
-        ...shorthands.margin(0, 'auto'),
-        backgroundColor: tokens.colorNeutralBackground4,
-        ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalM),
-        ...shorthands.borderRadius(tokens.borderRadiusMedium, tokens.borderRadiusMedium, 0, 0),
+    typingIndicator: {
+        height: '28px',
     },
     content: {
         ...shorthands.gap(tokens.spacingHorizontalM),
         display: 'flex',
         flexDirection: 'row',
-        maxWidth: '900px',
         width: '100%',
     },
     input: {
@@ -50,11 +42,13 @@ const useClasses = makeStyles({
 });
 
 interface ChatInputProps {
+    // Hardcode to single user typing. For multi-users, it should be a list of ChatUser who are typing.
+    isTyping?: boolean;
     onSubmit: (value: string) => void;
 }
 
 export const ChatInput: React.FC<ChatInputProps> = (props) => {
-    const { onSubmit } = props;
+    const { isTyping, onSubmit } = props;
     const classes = useClasses();
     const dispatch = useAppDispatch();
     const [value, setValue] = React.useState('');
@@ -80,6 +74,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
     return (
         <div className={classes.root}>
+            <div className={classes.typingIndicator}>{isTyping ? <TypingIndicatorRenderer /> : null}</div>
             <div className={classes.content}>
                 <Textarea
                     id="chat-input"

samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx

@@ -45,6 +45,10 @@ export const ChatRoom: React.FC = () => {
     const scrollViewTargetRef = React.useRef<HTMLDivElement>(null);
     const scrollTargetRef = React.useRef<HTMLDivElement>(null);
     const [shouldAutoScroll, setShouldAutoScroll] = React.useState(true);
+
+    // hardcode to care only about the bot typing for now.
+    const [isBotTyping, setIsBotTyping] = React.useState(false);
+
     const chat = useChat();
 
     React.useEffect(() => {
@@ -81,8 +85,13 @@ export const ChatRoom: React.FC = () => {
             sender: account?.homeAccountId,
             content: value,
         };
+        setIsBotTyping(true);
         dispatch(updateConversation({ message: chatInput }));
-        await chat.getResponse(value, selectedId);
+        try {
+            await chat.getResponse(value, selectedId);
+        } finally {
+            setIsBotTyping(false);
+        }
         setShouldAutoScroll(true);
     };
 
@@ -95,7 +104,7 @@ export const ChatRoom: React.FC = () => {
                 </div>
             </div>
             <div className={classes.input}>
-                <ChatInput onSubmit={handleSubmit} />
+                <ChatInput isTyping={isBotTyping} onSubmit={handleSubmit} />
             </div>
         </div>
     );

samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicator.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved.
+
+import { Image, makeStyles } from '@fluentui/react-components';
+import React from 'react';
+import typingBalls from '../../../assets/typing-balls-light.svg';
+
+const useStyles = makeStyles({
+    root: {
+        contain: 'strict',
+        height: '28px',
+        overflowY: 'hidden',
+        width: '28px',
+    },
+    image: {
+        animationDuration: '2.3s',
+        animationIterationCount: 'infinite',
+        animationName: {
+            from: { transform: 'translateY(0)' },
+            // 28px Height * 68 Steps = 1904px
+            to: { transform: 'translateY(-1904px)' },
+        },
+        animationTimingFunction: 'steps(68)',
+    },
+});
+
+export const TypingIndicator: React.FC<{}> = () => {
+    const classes = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <Image role="presentation" className={classes.image} src={typingBalls} />
+        </div>
+    );
+};

samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicatorRenderer.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft. All rights reserved.
+
+import { Persona, makeStyles } from '@fluentui/react-components';
+import { Animation } from '@fluentui/react-northstar';
+import * as React from 'react';
+import { useAppSelector } from '../../../redux/app/hooks';
+import { RootState } from '../../../redux/app/store';
+import { TypingIndicator } from './TypingIndicator';
+
+const useClasses = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+    },
+});
+
+export const TypingIndicatorRenderer: React.FC = () => {
+    // TODO: Make this stateless React component. No need to connect to app state.
+    const { conversations, selectedId } = useAppSelector((state: RootState) => state.conversations);
+    const classes = useClasses();
+
+    const typingIndicator = (
+        <div className={classes.root}>
+            <Persona size="extra-small" avatar={{ image: { src: conversations[selectedId].botProfilePicture } }} />
+            <TypingIndicator />
+        </div>
+    );
+
+    return <Animation name="slideInCubic" keyframeParams={{ distance: '2.4rem' }} children={typingIndicator} />;
+};

samples/apps/copilot-chat-app/WebApp/tsconfig.json

@@ -32,5 +32,5 @@
         "types": [],
         "composite": true
     },
-    "include": ["src"]
+    "include": ["src", "src/assets/custom.d.ts"]
 }