Fix list of file import types (microsoft#402)

### Motivation and Context

<!-- Thank you for your contribution to the chat-copilot 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.
-->

Semantic memory supports additional file types for import: *.docx,
*.bmp, *.gif

Web-application not updated to allow import of these types.


### Description

<!-- Describe your changes, the overall approach, the underlying design.
These notes will help understanding how your code works. Thanks! -->

Add additional types to import on chat and documents tabs:


![image](https://github.com/microsoft/chat-copilot/assets/66376200/364fe575-b71f-4c71-8a3d-c206a6cdc8c9)


### Contribution Checklist

<!-- Before submitting this PR, please make sure: -->

- [x] The code builds clean without any errors or warnings
- [x] The PR follows the [Contribution
Guidelines](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md)
and the [pre-submission formatting
script](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md#development-scripts)
raises no violations
- [x] All unit tests pass, and I have added new tests where possible
- [x] I didn't break anyone 😄

Author: crickman

webapp/README.md

@@ -118,7 +118,7 @@ Option 2: Using [mkcert](https://github.com/FiloSottile/mkcert#installation)
 ## Authentication
 
 This sample uses the Microsoft Authentication Library (MSAL) for React to authenticate users.
-Learn more about it here: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react.
+Learn more about it here: https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-single-page-app-react-sign-in.
 
 ## Debug the web app
 

webapp/src/Constants.ts

@@ -5,6 +5,7 @@ export const Constants = {
         name: 'Copilot',
         updateCheckIntervalSeconds: 60 * 5,
         CONNECTION_ALERT_ID: 'connection-alert',
+        importTypes: '.txt,.pdf,.docx,.md,.jpg,.jpeg,.png,.tif,.tiff,.bmp,.gif',
     },
     msal: {
         method: 'redirect', // 'redirect' | 'popup'

webapp/src/components/chat/ChatInput.tsx

@@ -224,7 +224,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ isDraggingOver, onDragLeav
                         type="file"
                         ref={documentFileRef}
                         style={{ display: 'none' }}
-                        accept=".txt,.pdf,.md,.jpg,.jpeg,.png,.tif,.tiff"
+                        accept={Constants.app.importTypes}
                         multiple={true}
                         onChange={() => {
                             void fileHandler.handleImport(selectedId, documentFileRef);

webapp/src/components/chat/tabs/DocumentsTab.tsx

@@ -35,6 +35,7 @@ import * as React from 'react';
 import { useRef } from 'react';
 import { useChat, useFile } from '../../../libs/hooks';
 import { ChatMemorySource } from '../../../libs/models/ChatMemorySource';
+import { Constants } from '../../../Constants';
 import { useAppSelector } from '../../../redux/app/hooks';
 import { RootState } from '../../../redux/app/store';
 import { timestampToDateString } from '../../utils/TextUtils';
@@ -131,7 +132,7 @@ export const DocumentsTab: React.FC = () => {
                     type="file"
                     ref={documentFileRef}
                     style={{ display: 'none' }}
-                    accept=".txt,.pdf,.md,.jpg,.jpeg,.png,.tif,.tiff"
+                    accept={Constants.app.importTypes}
                     multiple={true}
                     onChange={() => {
                         void fileHandler.handleImport(selectedId, documentFileRef);