Merge pull request #20715 from overleaf/ii-bs5-chat-pane

[web] BS5 chat pane

GitOrigin-RevId: 8587aca1372b4d2087863d492e702f04a31c23e2

services/web/frontend/js/features/chat/components/chat-fallback-error.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
-import { Button, Alert } from 'react-bootstrap'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 function ChatFallbackError({ reconnect }) {
   const { t } = useTranslation()
@@ -8,12 +9,12 @@ function ChatFallbackError({ reconnect }) {
   return (
     <aside className="chat">
       <div className="chat-error">
-        <Alert bsStyle="danger">{t('chat_error')}</Alert>
+        <OLNotification type="error" content={t('chat_error')} />
         {reconnect && (
           <p className="text-center">
-            <Button bsStyle="info" type="button" onClick={reconnect}>
+            <OLButton variant="secondary" onClick={reconnect}>
               {t('reconnect')}
-            </Button>
+            </OLButton>
           </p>
         )}
       </div>

services/web/frontend/js/features/chat/components/chat-pane.tsx

@@ -11,6 +11,9 @@ import withErrorBoundary from '../../../infrastructure/error-boundary'
 import { FetchError } from '../../../infrastructure/fetch-json'
 import { useChatContext } from '../context/chat-context'
 import LoadingSpinner from '../../../shared/components/loading-spinner'
+import { bsVersion } from '@/features/utils/bootstrap-5'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
 
 const MessageList = lazy(() => import('./message-list'))
 
@@ -79,7 +82,9 @@ const ChatPane = React.memo(function ChatPane() {
         itemCount={messageContentCount}
       >
         <div>
-          <h2 className="sr-only">{t('chat')}</h2>
+          <h2 className={bsVersion({ bs3: 'sr-only', bs5: 'visually-hidden' })}>
+            {t('chat')}
+          </h2>
           <Suspense fallback={<LoadingSpinner delay={500} />}>
             {status === 'pending' && <LoadingSpinner delay={500} />}
             {shouldDisplayPlaceholder && <Placeholder />}
@@ -107,7 +112,10 @@ function Placeholder() {
       <div className="first-message text-center">
         {t('send_first_message')}
         <br />
-        <Icon type="arrow-down" />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="arrow-down" />}
+          bs5={<MaterialIcon type="arrow_downward" />}
+        />
       </div>
     </>
   )

services/web/frontend/js/features/chat/components/message-input.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { bsVersion } from '@/features/utils/bootstrap-5'
 
 type MessageInputProps = {
   resetUnreadMessages: () => void
@@ -26,7 +27,10 @@ function MessageInput({ resetUnreadMessages, sendMessage }: MessageInputProps) {
 
   return (
     <form className="new-message">
-      <label htmlFor="chat-input" className="sr-only">
+      <label
+        htmlFor="chat-input"
+        className={bsVersion({ bs3: 'sr-only', bs5: 'visually-hidden' })}
+      >
         {t('your_message_to_collaborators')}
       </label>
       <textarea