Merge pull request #31509 from overleaf/mj-chat-error-handling

[web] Add error boundary to chat

GitOrigin-RevId: e3a204ab1469f99dc1fc3e2cd96b8fd0cbc87e99

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

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import OLNotification from '@/shared/components/ol/ol-notification'
 import OLButton from '@/shared/components/ol/ol-button'
+import RailPanelHeader from '@/features/ide-react/components/rail/rail-panel-header'
 
 interface ChatFallbackErrorProps {
   reconnect?: () => void
@@ -10,18 +11,23 @@ function ChatFallbackError({ reconnect }: ChatFallbackErrorProps) {
   const { t } = useTranslation()
 
   return (
-    <aside className="chat">
-      <div className="chat-error">
-        <OLNotification type="error" content={t('chat_error')} />
-        {reconnect && (
-          <p className="text-center">
-            <OLButton variant="secondary" onClick={reconnect}>
-              {t('reconnect')}
-            </OLButton>
-          </p>
-        )}
+    <div className="chat-panel">
+      <RailPanelHeader title={t('collaborator_chat')} />
+      <div className="chat-wrapper">
+        <aside className="chat" aria-label={t('chat')}>
+          <div className="chat-error">
+            <OLNotification type="error" content={t('chat_error')} />
+            {reconnect && (
+              <p className="text-center">
+                <OLButton variant="secondary" onClick={reconnect}>
+                  {t('reconnect')}
+                </OLButton>
+              </p>
+            )}
+          </div>
+        </aside>
       </div>
-    </aside>
+    </div>
   )
 }
 

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

@@ -10,6 +10,7 @@ import { lazy, Suspense, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import RailPanelHeader from '@/features/ide-react/components/rail/rail-panel-header'
+import withErrorBoundary from '@/infrastructure/error-boundary'
 
 const MessageList = lazy(() => import('./message-list'))
 
@@ -104,4 +105,4 @@ function Placeholder() {
   )
 }
 
-export default ChatPane
+export default withErrorBoundary(ChatPane, () => <ChatFallbackError />)