Fallback to username (email) if name is not available on msal account…

… info (microsoft#1162)

### Motivation and Context
<!-- Thank you for your contribution to the semantic-kernel repo!
Please help reviewers and future users, providing the following
information:
  1. Why is this change required?
  2. What problem does it solve?
  3. What scenario does it contribute to?
  4. If it fixes an open issue, please link to the issue here.
-->
This PR contains changes to default to MSAL username (default value:
email) if name is undefined on the account. This was causing the
experience to break for personal accounts as most don't have "Name"
attribute defined.

Fix for issue here:
microsoft#912

### Contribution Checklist
<!-- Before submitting this PR, please make sure: -->
- [ ] The code builds clean without any errors or warnings
- [ ] The PR follows SK Contribution Guidelines
(https://github.com/microsoft/semantic-kernel/blob/main/CONTRIBUTING.md)
- [ ] The code follows the .NET coding conventions
(https://learn.microsoft.com/dotnet/csharp/fundamentals/coding-style/coding-conventions)
verified with `dotnet format`
- [ ] All unit tests pass, and I have added new tests where possible
- [ ] I didn't break anyone 😄

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

@@ -107,7 +107,7 @@ export const ChatRoom: React.FC = () => {
         const chatInput = {
             timestamp: new Date().getTime(),
             userId: account?.homeAccountId,
-            userName: account?.name as string,
+            userName: (account?.name ?? account?.username) as string,
             content: value,
             authorRole: AuthorRoles.User,
         };

samples/apps/copilot-chat-app/webapp/src/components/header/UserSettings.tsx

@@ -51,8 +51,8 @@ export const UserSettings: FC<IUserSettingsProps> = ({ setLoadingState }) => {
                 {
                     <Avatar
                         className={classes.root}
-                        key={account?.name}
-                        name={account?.name}
+                        key={account?.name ?? account?.username}
+                        name={account?.name ?? account?.username}
                         size={28}
                         badge={{ status: 'available' }}
                     />
@@ -62,7 +62,7 @@ export const UserSettings: FC<IUserSettingsProps> = ({ setLoadingState }) => {
                 <MenuList>
                     <MenuItem className={classes.persona}>
                         <Persona
-                            name={account?.name}
+                            name={account?.name ?? account?.username}
                             secondaryText={account?.username}
                             presence={{ status: 'available' }}
                             avatar={{ color: 'colorful' }}

samples/apps/copilot-chat-app/webapp/src/libs/useChat.ts

@@ -44,7 +44,7 @@ export const useChat = () => {
 
     const loggedInUser: IChatUser = {
         id: account?.homeAccountId || '',
-        fullName: account?.name || '',
+        fullName: (account?.name ?? account?.username) || '',
         emailAddress: account?.username || '',
         photo: undefined, // TODO: Make call to Graph /me endpoint to load photo
         online: true,
@@ -62,7 +62,7 @@ export const useChat = () => {
             await chatService
                 .createChatAsync(
                     account?.homeAccountId!,
-                    account?.name!,
+                    account?.name ?? account?.username!,
                     chatTitle,
                     await AuthHelper.getSKaaSAccessToken(instance, inProgress),
                 )
@@ -107,7 +107,7 @@ export const useChat = () => {
                 },
                 {
                     key: 'userName',
-                    value: account?.name!,
+                    value: account?.name ?? account?.username!,
                 },
                 {
                     key: 'chatId',