From e178ea32e5f4e3a1d499e542082b5a770c38a743 Mon Sep 17 00:00:00 2001
From: Vivien Hung <vivihung@microsoft.com>
Date: Tue, 11 Apr 2023 13:19:14 -0700
Subject: [PATCH 1/6] Add typing indicator.

---
 .../apps/copilot-chat-app/WebApp/package.json |   1 +
 .../WebApp/src/components/chat/ChatInput.tsx  |  25 +-
 .../WebApp/src/components/chat/ChatRoom.tsx   |  15 +-
 .../src/components/chat/TypingIndicator.tsx   |  34 ++
 .../chat/TypingIndicatorRenderer.tsx          |  28 ++
 .../apps/copilot-chat-app/WebApp/yarn.lock    | 358 +++++++++++++++++-
 6 files changed, 438 insertions(+), 23 deletions(-)
 create mode 100644 samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator.tsx
 create mode 100644 samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicatorRenderer.tsx

diff --git a/samples/apps/copilot-chat-app/WebApp/package.json b/samples/apps/copilot-chat-app/WebApp/package.json
index c42525b8456c..ac2281778a90 100644
--- a/samples/apps/copilot-chat-app/WebApp/package.json
+++ b/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",
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
index ac664cd729ab..04dc9df24996 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
+++ b/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 './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"
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx
index f5c92fa13e4d..f7e08678d9d1 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx
+++ b/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,15 @@ 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);
+        } catch (error) {
+            setIsBotTyping(false);
+            throw error;
+        }
+        setIsBotTyping(false);
         setShouldAutoScroll(true);
     };
 
@@ -95,7 +106,7 @@ export const ChatRoom: React.FC = () => {
                 </div>
             </div>
             <div className={classes.input}>
-                <ChatInput onSubmit={handleSubmit} />
+                <ChatInput isTyping={isBotTyping} onSubmit={handleSubmit} />
             </div>
         </div>
     );
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator.tsx
new file mode 100644
index 000000000000..10d8e099f3c5
--- /dev/null
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved.
+
+import { Image, makeStyles } from '@fluentui/react-components';
+import * as React from 'react';
+
+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();
+    const imageUrl = `https://staticsint.teams.cdn.office.net/evergreen-assets/messaging/typing-balls-light.svg`; // hardcoded for now
+
+    return (
+        <div className={classes.root}>
+            <Image role="presentation" className={classes.image} src={imageUrl} />
+        </div>
+    );
+};
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicatorRenderer.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicatorRenderer.tsx
new file mode 100644
index 000000000000..a3e618c8f1c4
--- /dev/null
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicatorRenderer.tsx
@@ -0,0 +1,28 @@
+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} />;
+};
diff --git a/samples/apps/copilot-chat-app/WebApp/yarn.lock b/samples/apps/copilot-chat-app/WebApp/yarn.lock
index aaf31e2bf98b..cfbbd564893a 100644
--- a/samples/apps/copilot-chat-app/WebApp/yarn.lock
+++ b/samples/apps/copilot-chat-app/WebApp/yarn.lock
@@ -1232,7 +1232,7 @@
   resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.21.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -1483,6 +1483,22 @@
   dependencies:
     "@floating-ui/core" "^1.2.4"
 
+"@fluentui/accessibility@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/accessibility/-/accessibility-0.66.4.tgz#cfc0b985f1d224bf0bf839df7f01d43bee156654"
+  integrity sha512-u9KuZKOmD2Dnxij1htOIIpDkTONoH9My8qIwcJlm+OOT6mebV6Mpd5EWhTXwDSRDJPZR1oNf3dVGUUjEmI2e9w==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    lodash "^4.17.15"
+
+"@fluentui/dom-utilities@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@fluentui/dom-utilities/-/dom-utilities-1.1.2.tgz#1a53e51e1ab1d40696ae7d355a970c68d496845f"
+  integrity sha512-XqPS7l3YoMwxdNlaYF6S2Mp0K3FmVIOIy2K3YkMc+eRxu9wFK6emr2Q/3rBhtG5u/On37NExRT7/5CTLnoi9gw==
+  dependencies:
+    "@uifabric/set-version" "^7.0.24"
+    tslib "^1.10.0"
+
 "@fluentui/keyboard-keys@^9.0.2":
   version "9.0.2"
   resolved "https://registry.npmjs.org/@fluentui/keyboard-keys/-/keyboard-keys-9.0.2.tgz"
@@ -1564,6 +1580,25 @@
     "@griffel/react" "^1.5.2"
     "@swc/helpers" "^0.4.14"
 
+"@fluentui/react-bindings@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-bindings/-/react-bindings-0.66.4.tgz#e09d9ee5b1fdb6b8c9c46f28b2bdff78572a4cb8"
+  integrity sha512-IfkonhU7nKJo+fHONjLBhpd59ShfcS80Zu7KbRMixxbkh08LXs4padIo4UAchPi3wz0+zEk0/27Ic1cMFp18jw==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@fluentui/accessibility" "^0.66.4"
+    "@fluentui/dom-utilities" "^1.1.1"
+    "@fluentui/react-component-event-listener" "^0.66.4"
+    "@fluentui/react-component-ref" "^0.66.4"
+    "@fluentui/react-northstar-fela-renderer" "^0.66.4"
+    "@fluentui/react-northstar-styles-renderer" "^0.66.4"
+    "@fluentui/state" "^0.66.4"
+    "@fluentui/styles" "^0.66.4"
+    classnames "^2.2.6"
+    lodash "^4.17.15"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@fluentui/react-button@^9.3.5":
   version "9.3.5"
   resolved "https://registry.npmjs.org/@fluentui/react-button/-/react-button-9.3.5.tgz"
@@ -1623,6 +1658,29 @@
     "@griffel/react" "^1.5.2"
     "@swc/helpers" "^0.4.14"
 
+"@fluentui/react-component-event-listener@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.66.4.tgz#ebce7c62be482cbc6d687fe31d6b2ca42c8d85d7"
+  integrity sha512-AS6tB0PiAR4kSqSRIHSy9SqzP/IE6t/DNk58410RpPg5chZ5WK2L1eoG+bv46AnESEJ//7Ifmb+gzd91VczxDg==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+
+"@fluentui/react-component-nesting-registry@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-nesting-registry/-/react-component-nesting-registry-0.66.4.tgz#bdb2aa17675a62ae63813f055f48923bbd45ff87"
+  integrity sha512-UsbH1fLntj586xScQNsTwUNNhtF/+EzsB563DT+N0Qr6uyhJBOdK8MaRClLP5gbVYM8l8De8cMQP0XuY0Lx9IQ==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    prop-types "^15.7.2"
+
+"@fluentui/react-component-ref@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.66.4.tgz#854720b0dc448e759414ab194973953174748c86"
+  integrity sha512-5PG6hiHa3skCGMaCX9AVOuFQUAeUwRnCvm5oAQPNVCemC8TIMcoBl1goMTPiATfQSWrYkhczLwrluPZvcCO01A==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    react-is "^17.0.2"
+
 "@fluentui/react-components@^9.13.0":
   version "9.18.3"
   resolved "https://registry.npmjs.org/@fluentui/react-components/-/react-components-9.18.3.tgz"
@@ -1723,6 +1781,17 @@
     "@griffel/react" "^1.5.2"
     "@swc/helpers" "^0.4.14"
 
+"@fluentui/react-icons-northstar@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-icons-northstar/-/react-icons-northstar-0.66.4.tgz#ffab0ab84b31be3584dabb6ef3f6a1f855e42bf8"
+  integrity sha512-STW2zH+/1ZRDGk8E6Yz/5BRO7I5MLxcXX+0DrIVdDs8Dn26XwSgRzgzx32rddYffQhaEokDee1Bk1UKCuHk6dQ==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@fluentui/accessibility" "^0.66.4"
+    "@fluentui/react-bindings" "^0.66.4"
+    "@fluentui/styles" "^0.66.4"
+    classnames "^2.2.6"
+
 "@fluentui/react-icons@^2.0.193", "@fluentui/react-icons@^2.0.196":
   version "2.0.197"
   resolved "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.197.tgz"
@@ -1809,6 +1878,63 @@
     "@griffel/react" "^1.5.2"
     "@swc/helpers" "^0.4.14"
 
+"@fluentui/react-northstar-fela-renderer@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-northstar-fela-renderer/-/react-northstar-fela-renderer-0.66.4.tgz#38fd4abd0113e6c7e8f45aed5e909ae1f4b2a18b"
+  integrity sha512-8m3MLz549xVCysd6xjPj+4y0PSxgg5IiM2Di8ebyX8tmOiTB4N3I3RZ36KNjNxddr4Was+J4H2thphOdaq2BmQ==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@fluentui/react-northstar-styles-renderer" "^0.66.4"
+    "@fluentui/styles" "^0.66.4"
+    css-in-js-utils "^3.0.0"
+    fela "^10.6.1"
+    fela-dom "^11.7.0"
+    fela-plugin-embedded "^10.6.1"
+    fela-plugin-fallback-value "^10.6.1"
+    fela-plugin-placeholder-prefixer "^10.6.1"
+    fela-plugin-rtl "^10.6.1"
+    fela-tools "^10.6.1"
+    fela-utils "^11.7.0"
+    inline-style-expand-shorthand "^1.2.0"
+    lodash "^4.17.15"
+    stylis "^3.5.4"
+
+"@fluentui/react-northstar-styles-renderer@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-northstar-styles-renderer/-/react-northstar-styles-renderer-0.66.4.tgz#aee2763604e40458b9f1d3e01ef97635bec097fc"
+  integrity sha512-vcWwA8R8UaG1ysNbmDL3L560hl0CQYUhHrGkcGZP1G/vNpaqWoaP/yFt//xDKBvaxv1RE9euPZiTjFXktzr6Cg==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@fluentui/styles" "^0.66.4"
+
+"@fluentui/react-northstar@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-northstar/-/react-northstar-0.66.4.tgz#5834e0bc7ff94d8a450b4332cbb2918cf7d38cb9"
+  integrity sha512-NP+xBAHRIEJEBk1Hi+xsxD0wfaTtDSoMdjVsx1L3WW84WZJC34Br1T3BMBJN3DpXCj+7ss7fhetA3KBT9frt1A==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@fluentui/accessibility" "^0.66.4"
+    "@fluentui/dom-utilities" "^1.1.1"
+    "@fluentui/react-bindings" "^0.66.4"
+    "@fluentui/react-component-event-listener" "^0.66.4"
+    "@fluentui/react-component-nesting-registry" "^0.66.4"
+    "@fluentui/react-component-ref" "^0.66.4"
+    "@fluentui/react-icons-northstar" "^0.66.4"
+    "@fluentui/react-northstar-styles-renderer" "^0.66.4"
+    "@fluentui/react-portal-compat-context" "^9.0.4"
+    "@fluentui/react-proptypes" "^0.66.4"
+    "@fluentui/state" "^0.66.4"
+    "@fluentui/styles" "^0.66.4"
+    "@popperjs/core" "~2.4.3"
+    body-scroll-lock "^3.1.5"
+    classnames "^2.2.6"
+    compute-scroll-into-view "1.0.11"
+    downshift "5.0.5"
+    lodash "^4.17.15"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.1"
+
 "@fluentui/react-overflow@^9.0.12":
   version "9.0.12"
   resolved "https://registry.npmjs.org/@fluentui/react-overflow/-/react-overflow-9.0.12.tgz"
@@ -1851,6 +1977,13 @@
     "@griffel/react" "^1.5.2"
     "@swc/helpers" "^0.4.14"
 
+"@fluentui/react-portal-compat-context@^9.0.4":
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.5.tgz#f1e93631a0887316ed71a8286f368e7be7d5ef09"
+  integrity sha512-vgGvv74jPi/salcxv37TCm06lOFn44CfNLX5wZw5HQIe9LYGUw/J7vkaniwNIzmQZsn62Y+fVxDS6Sq5S823tA==
+  dependencies:
+    "@swc/helpers" "^0.4.14"
+
 "@fluentui/react-portal@^9.2.2":
   version "9.2.2"
   resolved "https://registry.npmjs.org/@fluentui/react-portal/-/react-portal-9.2.2.tgz"
@@ -1887,6 +2020,15 @@
     "@griffel/react" "^1.5.2"
     "@swc/helpers" "^0.4.14"
 
+"@fluentui/react-proptypes@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-proptypes/-/react-proptypes-0.66.4.tgz#aef0d190aaae87478452f05449c19e243ddeb270"
+  integrity sha512-hszbwXxiR5S8TPO79dNsvqlt819jwFt5EyqtFz1meyeD+AtmKG7cTyvIrslso9ljO8BPGKIhDawqs+JM/VpK3Q==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    lodash "^4.17.15"
+    prop-types "^15.7.2"
+
 "@fluentui/react-provider@^9.4.5":
   version "9.4.5"
   resolved "https://registry.npmjs.org/@fluentui/react-provider/-/react-provider-9.4.5.tgz"
@@ -2145,6 +2287,22 @@
     "@griffel/react" "^1.5.2"
     "@swc/helpers" "^0.4.14"
 
+"@fluentui/state@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/state/-/state-0.66.4.tgz#21b4b5e183c62719836524f5af6a08def7131655"
+  integrity sha512-RzimlEVmWrU90ffsULVMI390/z5GeFNXLkoifSmfs5YZQ7OXRstp/9DWP6+fBXWt5hnGHrbpy5RDLTLR/cpD1g==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+
+"@fluentui/styles@^0.66.4":
+  version "0.66.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/styles/-/styles-0.66.4.tgz#32589d54ccafa9a7b90c5ce795892ab7da3d89f1"
+  integrity sha512-zq7G/NO23Hf6K4V3olkJkooH+C6gQRAKCLwLsdz/bL7DBk3sVC4vymehatAG2lv++upZIbFR8BjvU8L/8aG43A==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    csstype "^3.0.2"
+    lodash "^4.17.15"
+
 "@fluentui/tokens@1.0.0-alpha.4":
   version "1.0.0-alpha.4"
   resolved "https://registry.npmjs.org/@fluentui/tokens/-/tokens-1.0.0-alpha.4.tgz"
@@ -2512,6 +2670,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@popperjs/core@~2.4.3":
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
+  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+
 "@reduxjs/toolkit@^1.9.1":
   version "1.9.3"
   resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz"
@@ -3215,6 +3378,13 @@
     "@typescript-eslint/types" "5.57.0"
     eslint-visitor-keys "^3.3.0"
 
+"@uifabric/set-version@^7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-7.0.24.tgz#8c67d8f1d67c1636a170efa8b622132da2d294a9"
+  integrity sha512-t0Pt21dRqdC707/ConVJC0WvcQ/KF7tKLU8AZY7YdjgJpMHi1c0C427DB4jfUY19I92f60LOQyhJ4efH+KpFEg==
+  dependencies:
+    tslib "^1.10.0"
+
 "@vue/compiler-core@3.2.47":
   version "3.2.47"
   resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz"
@@ -3978,6 +4148,11 @@ body-parser@1.20.1:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
+body-scroll-lock@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
+
 bonjour-service@^1.0.11:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.1.1.tgz#960948fa0e0153f5d26743ab15baf8e33752c135"
@@ -4208,6 +4383,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.2.6:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^5.2.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224"
@@ -4365,6 +4545,16 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.11.tgz#7ff0a57f9aeda6314132d8994cce7aeca794fecf"
+  integrity sha512-uUnglJowSe0IPmWOdDtrlHXof5CTIJitfJEyITHBW6zDVOGu9Pjk5puaLM73SLcwak0L4hEjO7Td88/a6P5i7A==
+
+compute-scroll-into-view@^1.0.9:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
+  integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -4503,6 +4693,13 @@ css-has-pseudo@^3.0.4:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-in-js-utils@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
+  integrity sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==
+  dependencies:
+    hyphenate-style-name "^1.0.3"
+
 css-loader@^6.5.1:
   version "6.7.3"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
@@ -4669,6 +4866,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.5.5:
+  version "2.6.21"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+
 csstype@^3.0.10, csstype@^3.0.2:
   version "3.1.1"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
@@ -4904,6 +5106,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -4980,6 +5190,16 @@ dotenv@^10.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
+downshift@5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-5.0.5.tgz#1cc90dc09ae62998ce28a4ce457e0f1cdd0bfcfa"
+  integrity sha512-V1idov3Rkvz1YWA1K67aIx51EgokIDvep4x6KmU7HhsayI8DvTEZBeH4O92zeFVGximKujRO7ChBzBAf4PKWFA==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    compute-scroll-into-view "^1.0.9"
+    prop-types "^15.7.2"
+    react-is "^16.9.0"
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -5713,6 +5933,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-loops@^1.0.0, fast-loops@^1.0.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
+  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
+
 fastq@^1.6.0:
   version "1.15.0"
   resolved "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz"
@@ -5734,6 +5959,92 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fela-dom@^11.7.0:
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-11.7.0.tgz#8706aaedf348af6e2d761d38c0f97d8d6607a99b"
+  integrity sha512-mYboADGGQc/EihhyPOs8Xo2aJ0cOQI4q3+aWQ11KPzaCAT3TTVdXuTslT5QeXoE6cT6nS77GvvrRzXb3U/gY6Q==
+  dependencies:
+    css-in-js-utils "^3.0.0"
+    fast-loops "^1.0.1"
+    fela-utils "^11.7.0"
+    sort-css-media-queries "^1.4.3"
+
+fela-plugin-custom-property@^10.8.2:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela-plugin-custom-property/-/fela-plugin-custom-property-10.8.2.tgz#41847826be4bf4495eee5072df16228f5f8827a8"
+  integrity sha512-SFbuMRQpetEUYwMsG0ngZrdEB7N7ytH+jsXeWt54GKhdz68XcvbAEIoc5vWSPiNVBKH47jV3+dwXjhejd5AdaQ==
+  dependencies:
+    css-in-js-utils "^3.0.0"
+    isobject "^3.0.1"
+
+fela-plugin-embedded@^10.6.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela-plugin-embedded/-/fela-plugin-embedded-10.8.2.tgz#3369b0bd67864c696cb0b8ccb142a1de78d1eb48"
+  integrity sha512-HeLyDJHQgpBEMbWjsCES1Jtptawtaqnp0Ml3zKebPMrryCQj4j0k4VdyzcS+QzE4M0JD1r0FYhKla+mpuMP5Qw==
+  dependencies:
+    fast-loops "^1.0.0"
+    isobject "^3.0.1"
+
+fela-plugin-fallback-value@^10.6.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela-plugin-fallback-value/-/fela-plugin-fallback-value-10.8.2.tgz#c34ba7e369478f03bf24e798f64789d7306485e2"
+  integrity sha512-pjNQ4TJVJz8rDS8kEB7afRDHelQFzi0kIOhLSR0/LWLLFC7CfaQ3Vop9/w5Ot7iJtH8oR1dAxSQEyk497QcyPw==
+  dependencies:
+    css-in-js-utils "^3.0.0"
+    isobject "^3.0.1"
+
+fela-plugin-placeholder-prefixer@^10.6.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela-plugin-placeholder-prefixer/-/fela-plugin-placeholder-prefixer-10.8.2.tgz#9af6aa3d450f3b174fbbcc001db5f9fe1d49239c"
+  integrity sha512-5Uh1ceC03mnfZanlxb4Y4F3MJNoqcReb5lFhme9Yuh74gwFYUAFgsA/vjE2FXfJ8DG4OP69cB/JEGc5cBRtjAg==
+  dependencies:
+    fast-loops "^1.0.0"
+    fela-plugin-custom-property "^10.8.2"
+
+fela-plugin-rtl@^10.6.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela-plugin-rtl/-/fela-plugin-rtl-10.8.2.tgz#287e993e73e371ba9a65c124821baf14ff1d9cb3"
+  integrity sha512-Xc3uYTNU0TponAtMwqfJQc/F33gACCCPr7QOMqpJurlYUU9VaYhchgs7YMocqns6kBPRGrYc0mYiQqNCfpKsjw==
+  dependencies:
+    rtl-css-js "^1.1.3"
+
+fela-tools@^10.6.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela-tools/-/fela-tools-10.8.2.tgz#de8916173abd7d0436a6d9f726f7434209d70ee0"
+  integrity sha512-9HVPA7PABxCh8ybiDlhhVKuFlVeFazmhthlf5CybiFcxh6DVKDEacYsFdXSC7NGJW2i4cWACiy7pjUvOyvqhRQ==
+  dependencies:
+    css-in-js-utils "^3.0.0"
+    fast-loops "^1.0.0"
+    fela "^10.8.2"
+    fela-utils "^10.8.2"
+
+fela-utils@^10.8.2:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-10.8.2.tgz#b9d38e043aaf5d3d48012686ffb84e6378f24a35"
+  integrity sha512-RmoDOIby14Zb3Xn03noLolyMC2528xcNO5KcNCaznyByd1Acq8DnvQn91Ph9nBLcLqdC1rGme5HwRcrCOHG+kA==
+  dependencies:
+    css-in-js-utils "^3.0.0"
+    fast-loops "^1.0.0"
+
+fela-utils@^11.7.0:
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-11.7.0.tgz#ad91df64320d005ae131a8ad72f9ce7454198428"
+  integrity sha512-s/3QJtkCesH+2/yJDpedHVAvMgKy9hSt2++6l7Xjio5BixiUnvkwbqdCV/fcAb4E3reJLNzYeatgPdcw4HVXRQ==
+  dependencies:
+    css-in-js-utils "^3.0.0"
+    fast-loops "^1.0.0"
+
+fela@^10.6.1, fela@^10.8.2:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/fela/-/fela-10.8.2.tgz#f72ffad692f425489abf7ddc7c840b584c098ec7"
+  integrity sha512-rdF2h6U9gBhLged2WpOE43zqDG3f9rV7PNmcCoTuMIoKZqN0tYsc71nJRS7aNQtk+kRB5VsvMpoK0JGbs4s0qA==
+  dependencies:
+    css-in-js-utils "^3.0.0"
+    csstype "^2.5.5"
+    fast-loops "^1.0.0"
+    fela-utils "^10.8.2"
+    isobject "^3.0.1"
+
 figures@^1.3.5:
   version "1.7.0"
   resolved "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz"
@@ -6365,6 +6676,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6460,6 +6776,11 @@ ini@^1.3.4, ini@^1.3.5:
   resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+inline-style-expand-shorthand@^1.2.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/inline-style-expand-shorthand/-/inline-style-expand-shorthand-1.6.0.tgz#0891f8fa6858cb4c64266c13c5d5eb6b95c16b02"
+  integrity sha512-REormb3TCk/CIeL5/Q1rdHYM9tW8YKGKzbvgAH4IXrDsJmq9BnV69yhIGGMzV2IRkR/J6MuLNhY7UfoIJjunog==
+
 input@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/input/-/input-1.0.1.tgz"
@@ -6786,6 +7107,11 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@@ -7672,7 +7998,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@4.17.21, lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.3.0, lodash@^4.6.1, lodash@^4.7.0:
+lodash@4.17.21, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.3.0, lodash@^4.6.1, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9012,7 +9338,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9170,12 +9496,12 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
+react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -9257,6 +9583,16 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-transition-group@^4.4.1:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -9539,7 +9875,7 @@ rollup@^2.43.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rtl-css-js@^1.16.1:
+rtl-css-js@^1.1.3, rtl-css-js@^1.16.1:
   version "1.16.1"
   resolved "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz"
   integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==
@@ -9852,6 +10188,11 @@ sockjs@^0.3.24:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
+sort-css-media-queries@^1.4.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-1.5.4.tgz#24182b12002a13d01ba943ddf74f5098d7c244ce"
+  integrity sha512-YP5W/h4Sid/YP7Lp87ejJ5jP13/Mtqt2vx33XyhO+IAugKlufRPbOrPlIiEUuxmpNBSBd3EeeQpFhdu3RfI2Ag==
+
 source-list-map@^2.0.0, source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -10150,6 +10491,11 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
+stylis@^3.5.4:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 stylis@^4.0.13:
   version "4.1.3"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz"

From e057fa82309b0e99b3f4187dc8b8679d70aa2c38 Mon Sep 17 00:00:00 2001
From: Vivien Hung <vivihung@microsoft.com>
Date: Tue, 11 Apr 2023 15:27:25 -0700
Subject: [PATCH 2/6] Reorganize components

---
 .../chat/{ => TypingIndicator}/TypingIndicator.tsx         | 7 ++++---
 .../chat/{ => TypingIndicator}/TypingIndicatorRenderer.tsx | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)
 rename samples/apps/copilot-chat-app/WebApp/src/components/chat/{ => TypingIndicator}/TypingIndicator.tsx (81%)
 rename samples/apps/copilot-chat-app/WebApp/src/components/chat/{ => TypingIndicator}/TypingIndicatorRenderer.tsx (89%)

diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicator.tsx
similarity index 81%
rename from samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator.tsx
rename to samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicator.tsx
index 10d8e099f3c5..e6e179d4b638 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator.tsx
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicator.tsx
@@ -1,7 +1,9 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { Image, makeStyles } from '@fluentui/react-components';
-import * as React from 'react';
+import React from 'react';
+import typingBalls from '../../../assets/typing-balls-light.svg';
+//const typingBalls = require('../../../assets/typing-balls-light.svg');
 
 const useStyles = makeStyles({
     root: {
@@ -24,11 +26,10 @@ const useStyles = makeStyles({
 
 export const TypingIndicator: React.FC<{}> = () => {
     const classes = useStyles();
-    const imageUrl = `https://staticsint.teams.cdn.office.net/evergreen-assets/messaging/typing-balls-light.svg`; // hardcoded for now
 
     return (
         <div className={classes.root}>
-            <Image role="presentation" className={classes.image} src={imageUrl} />
+            <Image role="presentation" className={classes.image} src={typingBalls} />
         </div>
     );
 };
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicatorRenderer.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicatorRenderer.tsx
similarity index 89%
rename from samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicatorRenderer.tsx
rename to samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicatorRenderer.tsx
index a3e618c8f1c4..0bd75c092f5b 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicatorRenderer.tsx
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicatorRenderer.tsx
@@ -1,8 +1,8 @@
 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 { useAppSelector } from '../../../redux/app/hooks';
+import { RootState } from '../../../redux/app/store';
 import { TypingIndicator } from './TypingIndicator';
 
 const useClasses = makeStyles({

From ca1f1c28d31ba81c35980aab8b58723daa810f7d Mon Sep 17 00:00:00 2001
From: Vivien Hung <vivihung@microsoft.com>
Date: Tue, 11 Apr 2023 15:27:56 -0700
Subject: [PATCH 3/6] Reorganize components

---
 .../copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
index 04dc9df24996..f660bd13ddfc 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
@@ -8,7 +8,7 @@ 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 './TypingIndicatorRenderer';
+import { TypingIndicatorRenderer } from './TypingIndicator/TypingIndicatorRenderer';
 
 const log = debug(Constants.debug.root).extend('chat-input');
 

From d84e572a7d307fedf68491d7ab9557713336b223 Mon Sep 17 00:00:00 2001
From: Vivien Hung <vivihung@microsoft.com>
Date: Tue, 11 Apr 2023 15:28:29 -0700
Subject: [PATCH 4/6] Add TS support to load SVG

---
 .../apps/copilot-chat-app/WebApp/src/assets/custom.d.ts   | 8 ++++++++
 .../WebApp/src/assets/typing-balls-light.svg              | 1 +
 samples/apps/copilot-chat-app/WebApp/tsconfig.json        | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 samples/apps/copilot-chat-app/WebApp/src/assets/custom.d.ts
 create mode 100644 samples/apps/copilot-chat-app/WebApp/src/assets/typing-balls-light.svg

diff --git a/samples/apps/copilot-chat-app/WebApp/src/assets/custom.d.ts b/samples/apps/copilot-chat-app/WebApp/src/assets/custom.d.ts
new file mode 100644
index 000000000000..b3e634907e95
--- /dev/null
+++ b/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;
+}
diff --git a/samples/apps/copilot-chat-app/WebApp/src/assets/typing-balls-light.svg b/samples/apps/copilot-chat-app/WebApp/src/assets/typing-balls-light.svg
new file mode 100644
index 000000000000..7b03c8a0bfcf
--- /dev/null
+++ b/samples/apps/copilot-chat-app/WebApp/src/assets/typing-balls-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 8280"><path fill="#5b5fc7" d="M93.6 171.8c4.9-1.1 10.6-1.3 15 1.7 6.3 4.3 5.7 15.4-1 19-6.8 4.1-17.6 2.7-21.3-5-3-6.1.6-14 7.3-15.7zm.9 121c4.7-.8 9.8-.8 14 1.7 6.4 3.9 5.9 14.7-.6 18.4a18 18 0 0 1-17 .2c-5.8-3-7.4-11.6-3.2-16.5a13 13 0 0 1 6.9-3.8zm-.9 121c5.6-1 12.3-1.3 16.8 2.8 4.3 4.6 3.2 13.5-2.7 16.5a19 19 0 0 1-17.5-.3c-5.6-3.2-6.6-12.1-1.7-16.4a12.2 12.2 0 0 1 5.1-2.6zm-.2 117.7a17 17 0 0 1 15.2 1.8c6.1 4.3 5.7 14.8-.5 18.8-6.7 4.6-17.8 3.2-21.6-4.5-3.1-6 .2-14.3 6.9-16.1zm.1 116c8.1-4 19.4 2 19.4 11.4 1 7.8-6.3 14.7-13.9 14.5-7.1 0-13.8-6.1-13.7-13.4a13.3 13.3 0 0 1 8.2-12.5zm-77.9 364.2c5.3-1.8 12-1.5 16.5 2.2 5.5 4.4 4.7 14.2-1.3 17.8-7 4.5-18 3.2-22-4.6-3-5.9.3-13.7 6.8-15.4zm.9 123.1c5.3-.8 11.2-1 15.8 2 6.4 4.5 3.8 16-3.9 17.5a20.7 20.7 0 0 1-16.3-1.5c-4.6-2.8-5.8-9.4-3-13.8 1.7-2.4 4.6-3.6 7.4-4.2zm-3 121.9c5.6-1.8 12-2 17.6.3 3.6 1.4 5.3 5.4 4.7 9 .2 5-4.5 8.6-9 9.3-5.5.8-11.8.8-16.2-3-4.9-4.3-3.7-13.7 2.9-15.6zm.9 120a28 28 0 0 1 16.4.4c7 2.6 6.7 13.8.2 16.8a22.7 22.7 0 0 1-18 .2c-5.3-2.2-7-9.5-3.8-14a9.8 9.8 0 0 1 5.2-3.4zm2 120.8c5.2-.3 10.8-1 15.7 1.3 4 1.8 4.3 7 3.3 10.7-1.5 4.2-6.3 5.9-10.4 6.1-4.5.2-9.5.4-13.5-2-4-2.5-5-8.3-2.7-12.2 1.6-2.6 4.7-3.6 7.6-4zm1 119.1c5-.3 10.6-.8 15.2 1.8 3.6 2.2 3.8 7.2 2.7 10.8a10 10 0 0 1-7.3 5.4c-5 1.1-10.7 1.1-15.5-1-5.2-2.2-6.5-9.9-2.8-14 2-2 5-2.7 7.7-3zm36.4 115.2c6-1.6 12.8-1.4 18 2.1 5.2 3.4 5.3 11.7.6 15.5a19.6 19.6 0 0 1-23.4.4c-3.7-2.8-5-8.3-2.8-12.5 1.5-2.9 4.5-4.6 7.6-5.5zm-37.6.4c5.3-1.2 11.2-1 15.8 2 3.8 2.6 4.5 7.8 3.2 12-1.5 4.2-6 6.5-10.2 7-4.6.7-9.7.2-13.5-2.8-4-3-5-9.1-2.4-13.4 1.5-2.5 4.3-4.1 7.1-4.8zm35.4 123.4a33.5 33.5 0 0 1 18 0c3.8 1 7.2 4.3 7 8.4.1 4.7-4 8.2-8 9.5a26 26 0 0 1-16.9-.3c-3.8-1.4-7.4-4.9-7.2-9.2-.3-4.2 3.3-7.4 7-8.4zm0 121a32.2 32.2 0 0 1 20.5 1c5.7 2.5 5.8 11.2.8 14.4-6 3.9-13.6 4-20.3 2.2-4.1-1.2-8.3-4.5-8.1-9.2-.4-4.2 3.3-7.5 7-8.4zm2.8 120.9c5.9-.3 12.1-1 17.7 1.4 5.1 1.9 6 9.5 1.9 13-3.7 2.8-8.5 3.3-13 3.4-4.6 0-9.5-.4-13.4-3-3.7-2.6-4.3-8.7-1-11.8 2.1-1.9 5-2.6 7.8-3zm2 117.8c5.4-.1 11.3-.6 16.2 2.1 4.2 2.4 5 8.6 2 12.2-3.1 3.5-8.1 4.2-12.5 4.6a24 24 0 0 1-14-3.1 8.2 8.2 0 0 1-1.8-11.6c2.4-3 6.5-3.9 10.1-4.2zm34.2 839.4c5.9-1.9 12.6-2 18.3.4 6.5 3.2 5.6 13.3 0 17a17.5 17.5 0 0 1-20.9-1.2c-4.6-4.5-4.2-14 2.6-16.2zm4.8 119.5c4.6-.4 9.7-.5 14 1.6 5.6 3 5.2 11.5.8 15.4-5.1 4.7-13.2 4.9-19.3 2-5.2-2.5-7.8-9.6-4.7-14.6 2-3 5.8-4.1 9.2-4.4zm-4.8 121.6a32 32 0 0 1 18.3.4c6.2 2.5 5.8 11.8 1 15.6-5.2 4-12.6 4-18.5 1.7-4.7-2-7.6-7.5-6.1-12.4.5-2.6 2.8-4.5 5.3-5.3zm0 119.9c6-1.6 12.5-1.7 18.3.3 5.8 2.4 5.8 10.7 1.9 14.8-3.8 4-9.7 4.4-14.9 3.9-5-.5-10.1-3.9-10.8-9.1-1-4.1 1.3-8.8 5.5-9.9zm2.9 116c5.4-.9 11.8-1.2 16.5 2.3 5.6 4.5 3.8 14.4-2.4 17.6-7.5 4.4-20.2 2-22.3-7.5a10 10 0 0 1 8.2-12.4zm-39.8 480.1c6-1.6 12.9-1.4 18.2 2.1 5.2 3.5 5.2 12 .3 15.7a19.7 19.7 0 0 1-23.2.2 10.3 10.3 0 0 1-3.1-12c1.4-3.1 4.6-5 7.8-6zm-2.3 123.8a33.5 33.5 0 0 1 18.2 0c3.8 1 7.2 4.3 7 8.4.1 4.6-3.9 8.2-8 9.5a26.1 26.1 0 0 1-16.9-.3c-3.8-1.4-7.4-4.8-7.2-9.2-.3-4.2 3.2-7.4 7-8.4zm.1 121a32.5 32.5 0 0 1 20.6 1c5.3 2.3 6 10.3 1.5 13.9-5.5 4.2-13.1 4.5-19.7 3-4.6-1-9.6-4.3-9.4-9.5-.4-4.2 3.2-7.4 7-8.4zm2.9 120.9c5.8-.3 12.1-1 17.7 1.4 5.1 1.9 6 9.6 1.9 13-3.7 2.8-8.5 3.3-13 3.4-4.6 0-9.5-.4-13.4-3-3.8-2.6-4.3-8.8-1-11.9 2.2-1.8 5-2.5 7.8-3zm-1.7 118.4c6.4-1 13.3-1.4 19.3 1.2 5.4 2.4 5.8 10.7 1 14-6 3.7-13.5 3.6-20.2 2.1-4.3-.9-8.7-4.5-8.2-9.4 0-4.3 4.2-7.2 8.1-8zm40 595.9c6.2-1.7 13.5-1.3 18.8 2.8 4.3 3.7 4 11-.2 14.6-5.8 5.1-14.8 5.4-21.4 2-4.1-2-7-6.8-5.9-11.4.8-4.2 4.8-7 8.7-8zm2.6 122.7c5.6-.3 11.7-.4 16.6 2.8 4.3 2.9 4.3 9.7.6 13.2-3.9 3.5-9.5 4.4-14.6 4.2-4.6-.2-9.5-1.5-12.6-5-2.3-2.4-2.5-6-1.6-8.9 2-4.4 7.2-5.8 11.6-6.3zm-4.8 122.1a33.8 33.8 0 0 1 19.3.5 8.2 8.2 0 0 1 5 10.7c-1.1 3.4-4.4 5.4-7.6 6.4a27 27 0 0 1-17.6-.7c-3.5-1.4-6.7-4.6-6.4-8.6-.4-4.3 3.5-7.4 7.3-8.3zm3.8 120.8c5.8-.2 12.1-.9 17.4 2 4.4 2.3 4.7 9.2 1 12.3-3.4 3-8.3 3.4-12.6 3.6-4.8 0-10-.3-14-3.2-3-2.1-3.4-6.2-2.4-9.4 2-3.9 6.7-5 10.6-5.3zm1.1 117.9c5.5-.1 11.7-.7 16.6 2.6 3.1 2 3.4 6.2 2.5 9.5-1 3.2-4.3 5-7.3 5.8a29 29 0 0 1-19.2-1.3c-4.4-2.1-6.1-8.2-3.2-12.2 2.4-3.2 6.8-4 10.6-4.4zm-79.9 356.4a18.1 18.1 0 0 1 16 1.7c6.1 4.3 5.5 14.6-.8 18.3-6.8 4.4-18 3.2-21.9-4.6-3-5.8.3-13.7 6.7-15.4zm1.1 123.1c5.4-.8 11.7-1 16.3 2.4 5 4.3 3.7 13.6-2.4 16.2a20.8 20.8 0 0 1-17.8-.2c-5-2.5-6.6-9.6-3.5-14.2 1.7-2.5 4.6-3.6 7.4-4.2zm-3.1 121.9c5.6-1.8 12-2 17.6.3 3.6 1.4 5.2 5.4 4.7 9 .1 5-4.6 8.6-9.1 9.3-5.4.8-11.7.8-16.1-3-4.9-4.3-3.7-13.7 2.9-15.6zm1 119.9a28 28 0 0 1 16.3.5c3.6 1.3 5.6 5.3 5 9 .3 5.1-4.7 8.7-9.4 9.3-5.5.7-12 .7-16.3-3.3-4.7-4.8-2.6-14.3 4.4-15.5zm1.9 120.8c5.2-.2 10.8-.9 15.7 1.4 4 1.8 4.3 7 3.3 10.7-1.4 4.2-6.3 5.9-10.4 6.1-4.6.2-9.5.4-13.6-2.1-4.3-2.7-5.2-9.3-1.9-13 1.8-2 4.4-2.7 6.8-3zm1 119.2c5-.3 10.6-.8 15.2 1.8 3.7 2.3 3.8 7.2 2.7 10.9a10 10 0 0 1-7.4 5.4c-5 1-10.6 1-15.4-1.1-5.2-2.2-6.5-9.9-2.8-14 2-2 5-2.7 7.7-3zm-1.1 115.6c5-1.1 10.5-1 15 1.5 6.3 3.6 5.9 14-.3 17.5-5.3 3-12.2 3-17.7.4-5.5-2.5-7.3-10.3-3.8-15.2 1.6-2.2 4.1-3.5 6.8-4.2zm74.3 2.5a27.4 27.4 0 0 1 17.7 0c6.2 2.6 6.7 11.5 2.3 15.9-3.4 3.7-8.9 4.7-13.7 4.1-5.3-.3-10.9-3.9-11.7-9.4-1.2-4.3 1-9.2 5.4-10.6zm4.8 119.5c5.2-.4 11.3-.7 15.6 2.8 4.5 4.4 2.6 12.7-2.6 15.7-6.2 3.6-15 3.2-20.4-1.7-3.2-3.2-4.2-8.6-1.8-12.5 2-3 5.8-4 9.2-4.3zm-4.7 121.6a32 32 0 0 1 18.1.3c6.3 2.5 6 12 1 15.7-5.1 4-12.5 4-18.4 1.7a10.5 10.5 0 0 1-6.2-12.3c.6-2.7 3-4.6 5.5-5.4zm-.2 120c6-1.7 12.6-1.8 18.4.3 5.8 2.3 5.8 10.6 1.9 14.7-4 4.2-10.4 4.5-15.8 3.7-4.6-.7-9.3-4-10-9-1-4 1.4-8.7 5.5-9.7zm3.1 115.9c5.4-.9 11.7-1.2 16.3 2.2 5.5 4.4 4 13.8-1.7 17.3-6.7 4.2-17.3 3.2-21.7-3.9-2-3.8-2.1-9.4 1.2-12.6a12.7 12.7 0 0 1 5.9-3zm-38.2 359.9c5.4-1.5 11.8-.9 16 3 5 5.1 3.5 14.7-2.8 18-7.1 4.3-19 2.2-21.5-6.6-2.1-6.1 2-13 8.3-14.4zm.3 121.2c5.2-1 11.4-1 15.6 2.9 4.8 4.6 3.8 13.6-2 17a18 18 0 0 1-17 .4c-4.8-2.5-7-8.7-5-13.7 1.4-3.5 4.8-5.8 8.4-6.6zm-1.1 121c5.2-1 11.2-1.3 15.8 1.8 5.9 4 5 14.3-1.3 17.5a19 19 0 0 1-17.2 0c-5.2-2.7-6.8-10-3.8-14.9 1.4-2.3 4-3.6 6.5-4.4zm-.2 117.9c6.9-2.6 17-.7 19.4 7.2 2.4 6.7-2.4 14.2-9.2 15.4-6.2 1.4-14-.4-16.9-6.7-3-6 .2-14 6.7-15.9zm.1 116c6.6-3.2 15.4-.4 18.5 6.3 3.3 6.4.3 14.9-6.1 17.9-7 3.7-16.6.4-19.4-7.1-2.7-6.4.6-14.5 7-17.1z"/><path fill="#bdbdbd" d="M16.8 45.7c8-3.4 18 2.6 18.7 11.3A13.9 13.9 0 0 1 22 72.5a14 14 0 0 1-14-16 14 14 0 0 1 8.7-10.8zm42-.9C68 43.5 76.5 53 74 61.8A13.9 13.9 0 0 1 56.7 72C49.6 70 45 62 47 55a14.2 14.2 0 0 1 11.7-10.2zm35.9.8c8-3.2 17.7 3 18.2 11.6a13.8 13.8 0 1 1-18.2-11.6zM16.6 165.8c8-3.6 18.2 2.5 18.9 11.2A13.9 13.9 0 0 1 22 192.5a14 14 0 0 1-14-16 14 14 0 0 1 8.6-10.7zm42.2-1a14 14 0 0 1 15 10.6c2.5 8-4.4 17-12.8 17A14 14 0 0 1 46.6 179c-.3-6.9 5.4-13.3 12.2-14zM16.7 285.7c8-3.5 18.1 2.7 18.8 11.3A13.9 13.9 0 0 1 22 312.5a14 14 0 0 1-14-16 14 14 0 0 1 8.7-10.8zm42.2-.9c6.9-.9 13.9 4.3 15.2 11.2a14 14 0 0 1-13 16.5A14 14 0 0 1 46.6 299c-.3-7 5.4-13.4 12.3-14.2zM16.7 405.7c8-3.5 18 2.6 18.8 11.3A13.9 13.9 0 0 1 22 432.5a14 14 0 0 1-14-15.8 14 14 0 0 1 8.7-11zm42.2-.9c7-.9 14 4.3 15.2 11.2a14 14 0 0 1-13 16.5A14 14 0 0 1 46.5 419a14 14 0 0 1 12.3-14.2zM16.8 525.7c8-3.4 18 2.6 18.7 11.2A13.9 13.9 0 0 1 22 552.6a14 14 0 0 1-14-16 13.9 13.9 0 0 1 8.8-10.8zm42.7-1c8.9-.8 16.9 8.5 14.4 17.2a13.9 13.9 0 0 1-17.2 10c-7.1-1.7-11.7-9.8-9.6-16.8a14.2 14.2 0 0 1 12.3-10.3zm-42.7 121a14 14 0 0 1 18 8.4 13.9 13.9 0 0 1-8.2 17.5 14 14 0 0 1-17.3-6.8c-3.4-7 0-16.5 7.5-19zm42-.9c7-1 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5A14 14 0 0 1 46.6 659c-.4-7 5.3-13.3 12.2-14.1zM19.9 764.9a13.9 13.9 0 1 1 2.1 27.6 14 14 0 0 1-14-15.9c.8-6 6-11 11.9-11.7zm39.6-.1c8.9-.9 16.9 8.4 14.4 17A13.9 13.9 0 1 1 47 775a14.2 14.2 0 0 1 12.5-10.2zm35.2.8c7.9-3.2 17.6 3 18.2 11.5a13.8 13.8 0 1 1-18.2-11.6zM58.8 884.8c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5A14 14 0 0 1 46.6 899c-.3-7 5.3-13.4 12.2-14.2zm35.8.8c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.3 14.6-13.9 14.3-7.2 0-13.7-6.3-13.7-13.5a13.7 13.7 0 0 1 9.3-13.4zm-77.3.5c8-3 17.7 3.3 18.2 11.8a14 14 0 0 1-12 15C15 914.5 6.9 906.5 7.9 898a14 14 0 0 1 9.4-11.9zm41.5 118.7c9.1-1.3 17.7 8.2 15.1 17a14 14 0 0 1-17.2 10.2c-7-1.8-11.7-9.9-9.6-17a14.2 14.2 0 0 1 11.7-10.2zm36 .7c8.2-3.2 18.3 3.7 18.1 12.7.7 7.6-6.4 14.6-14 14.3-7 0-13.6-6.2-13.6-13.4a13.7 13.7 0 0 1 9.4-13.6zm-36 119.3c7.7-1 15.2 5.3 15.5 13a14 14 0 0 1-13.2 14.7 14 14 0 0 1-14.5-13.5c-.3-7 5.3-13.4 12.2-14.2zm35.8.8c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.4 14.6-14 14.3-7.1 0-13.6-6.3-13.6-13.5a13.7 13.7 0 0 1 9.3-13.4zm-35.8 119.2c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.2-14.2zm35.8.8c8-3.2 17.8 3 18.3 11.6 1.2 7.9-6 15.6-14 15.3a13.8 13.8 0 0 1-4.3-27zm-35.8 119.2a14 14 0 0 1 15 10.5c2.5 8-4.3 17-12.7 17.2a14 14 0 0 1-14.5-13.4c-.4-7 5.3-13.5 12.2-14.3zm35.8.8c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.3 14.6-14 14.3-7.1 0-13.6-6.3-13.5-13.5a13.7 13.7 0 0 1 9.2-13.4zm-35.7 119.2c7-.9 13.9 4.3 15.2 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5 14 14 0 0 1 12.3-14.2zm35.6.8c7.6-3 17 2.4 18.2 10.5 1.9 7.9-4.8 16.1-12.7 16.4a13.9 13.9 0 0 1-5.5-26.9zm-35.7 119.2c7-1 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.4c-.4-7 5.3-13.5 12.2-14.2zm35.8.8c8-3.2 17.8 3 18.3 11.5a13.9 13.9 0 1 1-18.3-11.6zm0 120c8.2-3.3 18.4 3.4 18.3 12.3.8 7.7-6.3 14.9-13.9 14.6a13.8 13.8 0 0 1-4.4-27zm-77.8 120.1c8-3.4 18 2.6 18.7 11.2a13.9 13.9 0 0 1-13.5 15.6 13.9 13.9 0 0 1-5.2-26.8zm77.8-.1c7.5-3 17 2.4 18.1 10.5 1.6 6.7-3 14-9.6 15.8a14 14 0 0 1-17.7-11.8 13.8 13.8 0 0 1 9.2-14.5zm-77.8 120.1a14 14 0 0 1 18 8.5c2.7 7-1.7 15.7-9 17.7-8.2 3-18.2-4.1-17.7-13a13.5 13.5 0 0 1 8.7-13.2zm77.8-.1c8-3.2 17.8 3 18.3 11.5 1.2 8-6 15.7-13.9 15.4a13.9 13.9 0 0 1-4.4-27zm-77.8 120.1c8-3.4 18 2.6 18.7 11.3a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-16 14 14 0 0 1 8.8-10.8zm77.8-.1c7.6-3 17 2.4 18.1 10.5 1.9 7.8-4.7 16-12.7 16.4a13.9 13.9 0 0 1-5.4-27zm-77.8 120.1c8-3.4 17.9 2.6 18.7 11.2a14 14 0 0 1-13.5 15.6 14 14 0 0 1-14-15.8 14 14 0 0 1 8.8-11zm77.9-.1c8.2-3.3 18.3 3.5 18.2 12.3.8 7.7-6.3 14.9-13.9 14.6-7.2 0-13.7-6.3-13.7-13.5a13.7 13.7 0 0 1 9.4-13.4zm-78.1 120.2c8-3.7 18.3 2.5 19 11.3a14 14 0 0 1-12.6 15.4 13.9 13.9 0 0 1-6.5-26.7zm77.8-.2a13.9 13.9 0 1 1 5.6 26.9 13.9 13.9 0 0 1-5.6-27zm-38.5 4.1a36 36 0 0 1 9.3 0c4 1.1 8.3 3.2 9.6 7.5 2 5-1 10.9-5.7 13-6.2 3-14.2 2.7-19.7-1.6-4.3-3.3-5-10-1.7-14.2 2-2.6 5.2-3.7 8.2-4.7zm-39.1 116a14 14 0 0 1 18 8.5c2.7 7-1.7 15.7-9 17.7a13.9 13.9 0 0 1-9-26.2zm42-.9c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.2-14.2zm35.7.8c8.3-3.4 18.6 3.5 18.4 12.6.7 7.6-6.3 14.6-13.9 14.3a13.9 13.9 0 0 1-4.5-26.9zm-78.1 120.3a14 14 0 0 1 18.4 8.3c2.7 7-1.7 15.7-9 17.7-8.3 3-18.2-4.2-17.7-13a13.5 13.5 0 0 1 8.3-13zm42.4-1c7-1 14 4.2 15.3 11a14 14 0 0 1-13 16.6 14 14 0 0 1-14.5-13.4c-.4-7 5.3-13.5 12.2-14.3zm35.8.7c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.3 14.6-13.9 14.3-7.2 0-13.7-6.3-13.7-13.5a13.8 13.8 0 0 1 9.3-13.4zm-77.9 120.1c8-3.5 18 2.6 18.8 11.3a14 14 0 0 1-13.4 15.5 14 14 0 0 1-14.2-15.3c.6-5 4-9.6 8.8-11.5zm42.1-.9c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.2-14.2zm35.8.8c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.3 14.6-13.9 14.3a13.9 13.9 0 0 1-4.5-27zm-77.9 120.1c8-3.5 18.1 2.7 18.8 11.4a13.9 13.9 0 0 1-13.5 15.4 14 14 0 0 1-14-15.9 14 14 0 0 1 8.7-10.9zm42.2-.9c7-.9 14 4.3 15.2 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.3-14.2zm35.6.8c8.2-3.4 18.6 3.4 18.4 12.4.8 7.7-6.3 14.8-14 14.5a13.8 13.8 0 0 1-4.4-26.9zm-77.8 120.1a14 14 0 0 1 17.9 7.7 13.9 13.9 0 0 1-24.2 13.1c-5-6.9-1.9-18 6.3-20.8zm42.2-.9c7-.9 14 4.3 15.2 11.2a14 14 0 0 1-13.1 16.5 14 14 0 0 1-14.4-13.5c-.3-7 5.4-13.4 12.3-14.2zm34.7 6c5.6-1.2 12.3-1.2 16.6 3 5.2 5 3.5 14.3-2.4 18-7.4 5.2-20.1 2-22.3-7.3-1.7-6 2.1-12.3 8.1-13.7zm-76.8 114.9a13.9 13.9 0 1 1 5.2 26.8 14 14 0 0 1-14-16 14 14 0 0 1 8.8-10.8zm42-.8c9.1-1.5 17.7 8 15.1 17a14 14 0 0 1-17.2 10A13.9 13.9 0 0 1 47 3055a14.2 14.2 0 0 1 11.7-10.1zm-38.9 120a13.9 13.9 0 1 1 2.2 27.6 14 14 0 0 1-14-16 14 14 0 0 1 11.8-11.6zm39 0c9-1.4 17.6 8 15 17a14 14 0 0 1-17.2 10c-7.1-1.8-11.8-9.8-9.6-16.9a14.2 14.2 0 0 1 11.7-10.2zm-42.3 120.9c8-3.6 18.2 2.5 18.9 11.2 1.1 7.5-5 15-12.5 15.4a13.9 13.9 0 0 1-6.4-26.6zm42.3-1c6.9-.9 13.9 4.3 15.2 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.3-14.2zm-42.1 120.9a14 14 0 0 1 18 8.5 14 14 0 0 1-9 17.7 13.9 13.9 0 0 1-9-26.2zm42-.9c9.1-1.3 17.7 8.2 15.1 17a13.9 13.9 0 0 1-17.7 10c-6.8-2-11.2-9.9-9.1-16.8a14.2 14.2 0 0 1 11.7-10.2zm-42.1 121c7-3.1 15.9 1.1 18.2 8.4a13.9 13.9 0 0 1-8.3 17.4 13.9 13.9 0 0 1-17.3-6.8c-3.4-7-.1-16.4 7.4-19zm42.1-1c9.2-1.3 17.7 8.2 15.1 17a13.9 13.9 0 0 1-17.1 10.2 13.9 13.9 0 0 1-9.7-17 14.2 14.2 0 0 1 11.7-10.2zm-42 120.9c8-3.4 18 2.6 18.7 11.3a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-16 13.9 13.9 0 0 1 8.8-10.8zm42-.8c9.1-1.5 17.7 8 15.1 17a14 14 0 0 1-17.7 10c-6.8-2.1-11.2-10-9.1-16.9a14.2 14.2 0 0 1 11.7-10.2zm35.8.7c8.2-3.3 18.4 3.5 18.3 12.3.8 7.7-6.3 14.9-13.9 14.6-7.1.1-13.7-6.2-13.6-13.4a13.7 13.7 0 0 1 9.2-13.5zm-77.8 120.1a14 14 0 0 1 18 8.5c2.7 7-1.7 15.6-9 17.7a13.9 13.9 0 0 1-9-26.2zm42-.9c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.2-14.2zm35.8.8c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.4 14.6-14 14.3-7.1 0-13.6-6.3-13.6-13.5a13.7 13.7 0 0 1 9.3-13.4zm-77.8 120.1a14 14 0 0 1 18 8.5c2.7 7-1.7 15.6-9 17.7a13.9 13.9 0 0 1-9-26.1zm42-.9c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13.1 16.5 14 14 0 0 1-14.4-13.5c-.3-7 5.4-13.4 12.2-14.2zm35.8.8c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.4 14.6-14 14.3-7.1 0-13.6-6.3-13.6-13.5a13.8 13.8 0 0 1 9.3-13.4zm-77.8 120.1a13.9 13.9 0 1 1 5.3 26.8 14 14 0 0 1-14-16 13.9 13.9 0 0 1 8.7-10.8zm77.9-.1c8-3.2 17.7 3 18.2 11.6a13.8 13.8 0 1 1-18.2-11.6zm-78 120.1c8-3.5 18 2.6 18.8 11.3a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-15.9 14 14 0 0 1 8.7-10.9zm77.8 0c8.2-3.5 18.5 3.3 18.4 12.3.8 7.7-6.3 14.8-14 14.5a13.8 13.8 0 0 1-4.4-26.9zm-77.7 120c8-3.4 18 2.6 18.7 11.3a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-16 14 14 0 0 1 8.7-10.8zm77.8-.1c8.2-3.3 18.5 3.5 18.3 12.4.8 7.7-6.3 14.8-13.9 14.5-7.2.1-13.7-6.3-13.7-13.5a13.8 13.8 0 0 1 9.3-13.4zm-77.9 120.1c8-3.5 18 2.6 18.8 11.3a14 14 0 0 1-12.4 15.4 13.9 13.9 0 0 1-6.4-26.7zm77.9-.1c8-3.2 17.7 3 18.3 11.5a13.9 13.9 0 1 1-18.3-11.6zm-77.9 120.1a14 14 0 0 1 18.2 8.5 14 14 0 0 1-9 17.7 13.9 13.9 0 0 1-9.2-26.2zm77.9-.1c7.6-3 17 2.4 18.1 10.5 1.9 7.8-4.7 16-12.6 16.4a13.9 13.9 0 0 1-5.5-27zm-78 120.2c8-3.7 18.3 2.5 19 11.2a14 14 0 0 1-13.6 15.5 14 14 0 0 1-14-16c.7-4.7 4.1-9 8.6-10.7zm77.8-.2a13.9 13.9 0 1 1 5.5 26.9 13.9 13.9 0 0 1-5.5-26.9zm-38.5 4.1a33.9 33.9 0 0 1 9.3 0l3 1c6 2 9.2 9.7 5.7 15.2-4.8 7.2-15.6 7.9-22.7 4-4.4-2.4-6.9-8-5-12.7 1.3-4.3 5.7-6.3 9.7-7.5zm-39.1 116c8-3.4 18 2.7 18.7 11.3a14 14 0 0 1-12.4 15.4 13.9 13.9 0 0 1-6.4-26.7zm42-.9c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.4c-.4-7 5.3-13.5 12.2-14.3zm35.8.8c8-3.2 17.8 3 18.3 11.5 1.2 8-6 15.7-13.9 15.4a13.9 13.9 0 0 1-4.4-27zm-78.3 120.3c8-3.8 18.5 2.3 19.2 11a13.9 13.9 0 0 1-13.5 15.6 14 14 0 0 1-14-16 14 14 0 0 1 8.3-10.6zm42.5-1c7-1 14 4.2 15.3 11a14 14 0 0 1-13 16.6 14 14 0 0 1-14.5-13.4 14 14 0 0 1 12.2-14.3zm26.6 13c0-7.8 8-14.2 15.6-13 7 .8 12.1 7.2 12.1 14-.2 7.4-6.7 13.9-14 13.6-7.7.1-14.4-7-13.7-14.5zm-68.7 107.8c8-3.5 18.1 2.6 18.8 11.3a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-15.9 14 14 0 0 1 8.7-10.9zm42.2-.9A14 14 0 0 1 74 4976a14 14 0 0 1-13 16.6 14 14 0 0 1-14.4-13.6c-.3-7 5.4-13.3 12.3-14zm35.5.8c8.3-3.4 18.6 3.4 18.5 12.4.8 7.7-6.3 14.8-14 14.5a13.8 13.8 0 0 1-4.5-26.9zm-77.6 120.1a13.9 13.9 0 1 1 5.2 26.8 14 14 0 0 1-14-16 14 14 0 0 1 8.8-10.8zm42-.9c9.1-1.3 17.7 8.2 15.1 17a13.9 13.9 0 0 1-17.7 10c-6.9-2-11.2-10-9.1-16.7a14.2 14.2 0 0 1 11.7-10.3zm-42 120.9c8-3.4 18 2.6 18.7 11.2a13.9 13.9 0 0 1-13.5 15.6 14 14 0 0 1-14-16 14 14 0 0 1 8.8-10.8zm42-.9c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.3-13.4 12.2-14.2zm-42 120.9c8-3.4 18 2.6 18.7 11.2a14 14 0 0 1-12.4 15.5 13.9 13.9 0 0 1-6.3-26.7zm42-.9c9.1-1.3 17.7 8.2 15.1 17a13.9 13.9 0 1 1-26.8-6.8 14.2 14.2 0 0 1 11.7-10.2zm-42 120.9c8-3.4 18 2.6 18.7 11.3a14 14 0 0 1-13.5 15.5 14 14 0 0 1-14-16 13.9 13.9 0 0 1 8.7-10.8zm42-.9c9.2-1.3 17.7 8.2 15.1 17a14 14 0 0 1-17 10.2 14 14 0 0 1-10.3-14c.2-6.6 5.7-12.4 12.2-13.2zm-42 120.9c8-3.4 18 2.6 18.7 11.3a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-16 14 14 0 0 1 8.8-10.8zm42-.9c9.1-1.3 17.7 8.2 15.1 17a13.9 13.9 0 0 1-17.6 10c-7-2-11.3-9.9-9.2-16.8a14.2 14.2 0 0 1 11.7-10.2zm-39.2 120.1a13.9 13.9 0 1 1 1.4 27.6c-8-.1-14.8-8.7-12.8-16.6a14 14 0 0 1 11.4-11zm39.3 0a14 14 0 0 1 15.4 13.1 14 14 0 1 1-27.8 1 14 14 0 0 1 12.4-14.2zm36.5 4.8c4.9-.7 10.2-.3 14.3 2.6 5.6 3.5 5.6 12.7.3 16.5-5.5 4.1-13.3 4.4-19.4 1.5-3.8-2-6.7-6-6.2-10.4 0-5.8 5.8-9.5 11-10.2zm-36.6 115.1c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.2-14.2zm35.8.8c8.3-3.4 18.5 3.6 18.3 12.6.7 7.6-6.4 14.6-14 14.3-7.1 0-13.6-6.3-13.6-13.5a13.7 13.7 0 0 1 9.3-13.4zm-77.3.5c8-3 17.8 3.3 18.2 11.9a14 14 0 0 1-12 15c-8.5 1.3-16.6-6.6-15.6-15a14 14 0 0 1 9.4-11.9zm41.5 118.7c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.4-7 5.4-13.4 12.2-14.2zm35.8.8c8.2-3.4 18.5 3.5 18.3 12.4.8 7.7-6.3 14.8-13.9 14.5a13.8 13.8 0 0 1-4.4-27zm-35.8 119.2c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.2-14.2zm35.8.8c8-3.2 17.8 3 18.3 11.6 1.2 7.9-6 15.6-13.9 15.3a13.9 13.9 0 0 1-4.4-27zm-35.7 119.3c6.9-1 13.9 4.2 15.2 11.1a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5 14 14 0 0 1 12.3-14.1zm35.6.7c8.3-3.4 18.6 3.5 18.4 12.6.7 7.6-6.3 14.6-13.9 14.3-7.2.1-13.7-6.3-13.7-13.5a13.7 13.7 0 0 1 9.2-13.4zm-35.6 119.3a14 14 0 0 1 15 10.8 14 14 0 0 1-12 16.8 14 14 0 0 1-15.2-12.3 14 14 0 0 1 12.2-15.3zm35.6.7c8-3.2 17.9 3 18.3 11.5 1.3 8-5.9 15.7-13.9 15.4-7.1 0-13.6-6.3-13.6-13.5a13.8 13.8 0 0 1 9.2-13.4zm-36 119.4a14 14 0 0 1 15.5 11 14 14 0 0 1-13 16.5 14 14 0 0 1-14.4-13.5 14 14 0 0 1 11.9-14zm36 .6c8.3-3.4 18.6 3.5 18.4 12.4.8 7.7-6.3 14.8-13.9 14.5a13.8 13.8 0 0 1-4.4-27zM58.9 6525c9-1.4 17.6 8 15 17a13.9 13.9 0 1 1-26.8-6.9 14.1 14.1 0 0 1 11.8-10.2zm34.8 5.8c5.5-1.2 12.2-1.2 16.5 3 5 4.7 3.7 13.5-1.7 17.4-7.2 5.8-20 3.3-22.9-6a11.2 11.2 0 0 1 8.1-14.4zm-34.8 114.1c9-1.3 17.5 8 15 17a14 14 0 0 1-17.7 10c-6.9-2-11.2-10-9.1-16.8a14.1 14.1 0 0 1 11.8-10.2zm-39 120a13.9 13.9 0 1 1 2.2 27.6 14 14 0 0 1-14-16 14 14 0 0 1 11.8-11.6zm39 0a14 14 0 0 1 15 10.7c2.3 8-4.5 16.9-12.9 17a14 14 0 0 1-14.4-13.5c-.3-7 5.4-13.5 12.3-14.2zm0 120c9-1.4 17.6 8 15 17a13.9 13.9 0 1 1-26.8-6.8 14.2 14.2 0 0 1 11.8-10.2zm-42.2.8a14 14 0 0 1 18.2 8.5c2.6 7-1.8 15.6-9 17.7a13.9 13.9 0 0 1-9.2-26.2zm42.2 119.2c9-1.4 17.6 8 15 17a13.9 13.9 0 1 1-26.8-6.8 14.1 14.1 0 0 1 11.8-10.2zm-42.2.8a14 14 0 0 1 18.2 8.5 13.9 13.9 0 0 1-8.3 17.4 13.9 13.9 0 0 1-17.3-6.8c-3.4-7 0-16.4 7.4-19zm3.2 119.2a13.9 13.9 0 1 1 1 27.6c-8-.3-14.6-8.7-12.7-16.6a14 14 0 0 1 11.7-11zm39 0c9-1.4 17.6 8 15 17a13.9 13.9 0 1 1-26.8-6.9 14.1 14.1 0 0 1 11.7-10.1zm-42.2 120.8c8.3-3.7 18.8 3.2 18.9 12.3.6 7.5-6 14.5-13.6 14.5a14 14 0 0 1-14-15.8 14 14 0 0 1 8.7-11zm42.2-.8c6.9-1 13.9 4.2 15.1 11a14 14 0 0 1-13 16.6 14 14 0 0 1-14.4-13.5c-.3-7 5.4-13.4 12.3-14.1zm35.6.7c8.3-3.4 18.6 3.5 18.4 12.4.8 7.7-6.3 14.8-13.9 14.5a13.8 13.8 0 0 1-4.5-26.9zm-77.8 120.1a14 14 0 0 1 18.2 8.5c2.6 7-1.8 15.7-9 17.7a13.9 13.9 0 0 1-9.2-26.2zm42.3-.9c6.9-.8 13.8 4.3 15 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.4-13.5c-.3-7 5.4-13.4 12.4-14.2zm35.5.8c8.3-3.4 18.6 3.5 18.4 12.6a13.9 13.9 0 1 1-27.6.8 13.7 13.7 0 0 1 9.2-13.4zm-77.7 120.1a14 14 0 0 1 18 8.5 13.9 13.9 0 0 1-8.2 17.4c-7.3 3-16.3-1.7-18.2-9.2a13.9 13.9 0 0 1 8.4-16.7zm77.8-.1c8-3.2 17.8 3 18.3 11.5a13.9 13.9 0 1 1-27.5 1.9 13.7 13.7 0 0 1 9.2-13.4zm-77.8 120.1c8-3.4 18 2.6 18.7 11.2a13.9 13.9 0 0 1-13.5 15.6 14 14 0 0 1-14-16 14 14 0 0 1 8.8-10.8zm77.9-.1c8-3.2 17.6 3 18.2 11.5a13.8 13.8 0 1 1-18.2-11.6zm-77.9 120.1a13.9 13.9 0 1 1 5.2 26.8 14 14 0 0 1-14-16 14 14 0 0 1 8.8-10.8zm77.9-.1c8-3.2 17.7 3 18.2 11.5 1.2 8-6 15.7-14 15.4a13.8 13.8 0 0 1-4.2-27zm-78.1 120.2c8-3.6 18.2 2.5 18.9 11.2a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-15.9 14 14 0 0 1 8.6-10.8zm77.8-.2a13.8 13.8 0 1 1 9.4 26 13.8 13.8 0 0 1-9.4-26zm-77.7 120.1c7-3 15.9 1.2 18.2 8.5a14 14 0 0 1-9 17.7 13.9 13.9 0 0 1-9.2-26.2zm77.8-.1c7.6-3 17 2.4 18.2 10.5 1.9 7.8-4.7 16.1-12.7 16.4a13.9 13.9 0 0 1-5.5-27zm-77.8 120.1c8-3.4 18 2.6 18.8 11.3a13.9 13.9 0 0 1-13.5 15.5 14 14 0 0 1-14-15.8 14 14 0 0 1 8.7-11zm42.1-.9c7-.9 14 4.3 15.3 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5 14 14 0 0 1 12.2-14.2zm35.8.8c7.5-3 17 2.4 18.1 10.5 1.9 7.8-4.7 16-12.6 16.4a13.9 13.9 0 0 1-5.5-27zm-77.9 120.1c8-3.5 18 2.6 18.8 11.3a14 14 0 0 1-12.4 15.4 13.9 13.9 0 0 1-6.3-26.7zm42.2-.9c7-.9 13.9 4.3 15.2 11.2a14 14 0 0 1-13 16.5 14 14 0 0 1-14.5-13.5c-.3-7 5.4-13.4 12.3-14.2zm35.6.8c8.3-3.4 18.6 3.5 18.4 12.6.7 7.6-6.3 14.6-13.9 14.3-7.2 0-13.7-6.3-13.7-13.5a13.7 13.7 0 0 1 9.2-13.4z"/></svg>
\ No newline at end of file
diff --git a/samples/apps/copilot-chat-app/WebApp/tsconfig.json b/samples/apps/copilot-chat-app/WebApp/tsconfig.json
index a847db754eb9..c320a2400032 100644
--- a/samples/apps/copilot-chat-app/WebApp/tsconfig.json
+++ b/samples/apps/copilot-chat-app/WebApp/tsconfig.json
@@ -32,5 +32,5 @@
         "types": [],
         "composite": true
     },
-    "include": ["src"]
+    "include": ["src", "src/assets/custom.d.ts"]
 }

From f275dd5494dae3647637ff26cfa09eedf839c34f Mon Sep 17 00:00:00 2001
From: Vivien Hung <vivihung@microsoft.com>
Date: Tue, 11 Apr 2023 17:47:54 -0700
Subject: [PATCH 5/6] Update folder naming convention

---
 .../copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx   | 2 +-
 .../{TypingIndicator => typing-indicator}/TypingIndicator.tsx   | 0
 .../TypingIndicatorRenderer.tsx                                 | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename samples/apps/copilot-chat-app/WebApp/src/components/chat/{TypingIndicator => typing-indicator}/TypingIndicator.tsx (100%)
 rename samples/apps/copilot-chat-app/WebApp/src/components/chat/{TypingIndicator => typing-indicator}/TypingIndicatorRenderer.tsx (100%)

diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
index f660bd13ddfc..2bca73a09f35 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatInput.tsx
@@ -8,7 +8,7 @@ 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 './TypingIndicator/TypingIndicatorRenderer';
+import { TypingIndicatorRenderer } from './typing-indicator/TypingIndicatorRenderer';
 
 const log = debug(Constants.debug.root).extend('chat-input');
 
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicator.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicator.tsx
similarity index 100%
rename from samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicator.tsx
rename to samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicator.tsx
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicatorRenderer.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicatorRenderer.tsx
similarity index 100%
rename from samples/apps/copilot-chat-app/WebApp/src/components/chat/TypingIndicator/TypingIndicatorRenderer.tsx
rename to samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicatorRenderer.tsx

From 5727513414c32efbe795c515c781a09a89b6b026 Mon Sep 17 00:00:00 2001
From: Vivien Hung <vivihung@microsoft.com>
Date: Wed, 12 Apr 2023 12:55:42 -0700
Subject: [PATCH 6/6] Address PR feedback

---
 .../copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx  | 4 +---
 .../src/components/chat/typing-indicator/TypingIndicator.tsx  | 1 -
 .../chat/typing-indicator/TypingIndicatorRenderer.tsx         | 2 ++
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx
index f7e08678d9d1..6690a008490a 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/ChatRoom.tsx
@@ -89,11 +89,9 @@ export const ChatRoom: React.FC = () => {
         dispatch(updateConversation({ message: chatInput }));
         try {
             await chat.getResponse(value, selectedId);
-        } catch (error) {
+        } finally {
             setIsBotTyping(false);
-            throw error;
         }
-        setIsBotTyping(false);
         setShouldAutoScroll(true);
     };
 
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicator.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicator.tsx
index e6e179d4b638..ed0771dce37c 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicator.tsx
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicator.tsx
@@ -3,7 +3,6 @@
 import { Image, makeStyles } from '@fluentui/react-components';
 import React from 'react';
 import typingBalls from '../../../assets/typing-balls-light.svg';
-//const typingBalls = require('../../../assets/typing-balls-light.svg');
 
 const useStyles = makeStyles({
     root: {
diff --git a/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicatorRenderer.tsx b/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicatorRenderer.tsx
index 0bd75c092f5b..62a588d48c94 100644
--- a/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicatorRenderer.tsx
+++ b/samples/apps/copilot-chat-app/WebApp/src/components/chat/typing-indicator/TypingIndicatorRenderer.tsx
@@ -1,3 +1,5 @@
+// Copyright (c) Microsoft. All rights reserved.
+
 import { Persona, makeStyles } from '@fluentui/react-components';
 import { Animation } from '@fluentui/react-northstar';
 import * as React from 'react';