From 6c7ee8f7780ea68d89b2b65cad296cefc3e0ed2b Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:13:39 +0300
Subject: [PATCH] Merge pull request #20715 from overleaf/ii-bs5-chat-pane

[web] BS5 chat pane

GitOrigin-RevId: 8587aca1372b4d2087863d492e702f04a31c23e2
---
 .../chat/components/chat-fallback-error.jsx   |   9 +-
 .../js/features/chat/components/chat-pane.tsx |  12 +-
 .../chat/components/message-input.tsx         |   6 +-
 .../js/shared/components/loading-spinner.tsx  |   2 +-
 .../frontend/stylesheets/app/editor/chat.less |  10 --
 .../bootstrap-5/abstracts/all.scss            |   1 +
 .../abstracts/themes-common-variables.scss    |   7 +
 .../stylesheets/bootstrap-5/pages/all.scss    |   1 +
 .../bootstrap-5/pages/editor/chat.scss        | 165 ++++++++++++++++++
 9 files changed, 195 insertions(+), 18 deletions(-)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss

diff --git a/services/web/frontend/js/features/chat/components/chat-fallback-error.jsx b/services/web/frontend/js/features/chat/components/chat-fallback-error.jsx
index 38273505b2..7cf990c787 100644
--- a/services/web/frontend/js/features/chat/components/chat-fallback-error.jsx
+++ b/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>
diff --git a/services/web/frontend/js/features/chat/components/chat-pane.tsx b/services/web/frontend/js/features/chat/components/chat-pane.tsx
index ff62f7e5ed..fd4376bd5e 100644
--- a/services/web/frontend/js/features/chat/components/chat-pane.tsx
+++ b/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>
     </>
   )
diff --git a/services/web/frontend/js/features/chat/components/message-input.tsx b/services/web/frontend/js/features/chat/components/message-input.tsx
index 7efb537a9b..30373886f9 100644
--- a/services/web/frontend/js/features/chat/components/message-input.tsx
+++ b/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
diff --git a/services/web/frontend/js/shared/components/loading-spinner.tsx b/services/web/frontend/js/shared/components/loading-spinner.tsx
index fab856d248..b74799744e 100644
--- a/services/web/frontend/js/shared/components/loading-spinner.tsx
+++ b/services/web/frontend/js/shared/components/loading-spinner.tsx
@@ -44,7 +44,7 @@ function LoadingSpinner({
             animation="border"
             aria-hidden="true"
             role="status"
-            className="align-bottom"
+            className="align-middle"
           />
           &nbsp;
           {loadingText || t('loading')}…
diff --git a/services/web/frontend/stylesheets/app/editor/chat.less b/services/web/frontend/stylesheets/app/editor/chat.less
index 5c23142778..178317d99a 100644
--- a/services/web/frontend/stylesheets/app/editor/chat.less
+++ b/services/web/frontend/stylesheets/app/editor/chat.less
@@ -1,11 +1,5 @@
 @new-message-height: 80px;
 
-#chat-wrapper {
-  > .ui-layout-resizer > .ui-layout-toggler {
-    display: none !important;
-  }
-}
-
 .chat {
   .loading {
     font-family: @font-family-serif;
@@ -140,7 +134,3 @@
     }
   }
 }
-
-.break-word {
-  word-break: break-all;
-}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
index f4cc66b99f..13fe1b4158 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
@@ -1,3 +1,4 @@
 @import 'mixins';
 @import 'variables';
 @import 'variable-overrides';
+@import 'themes-common-variables';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
new file mode 100644
index 0000000000..e113f63829
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
@@ -0,0 +1,7 @@
+:root {
+  --editor-border-color: var(--neutral-80);
+}
+
+@include theme('light') {
+  --editor-border-color: var(--neutral-20);
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
index f9ac9aba51..2adcea8f64 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@@ -11,6 +11,7 @@
 @import 'editor/outline';
 @import 'editor/file-tree';
 @import 'editor/figure-modal';
+@import 'editor/chat';
 @import 'subscription';
 @import 'editor/pdf';
 @import 'editor/compile-button';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss
new file mode 100644
index 0000000000..00993559e4
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss
@@ -0,0 +1,165 @@
+:root {
+  --chat-bg: var(--neutral-80);
+  --chat-color: var(--white);
+  --chat-instructions-color: var(--neutral-20);
+  --chat-new-message-bg: var(--neutral-70);
+  --chat-new-message-textarea-color: var(--neutral-90);
+  --chat-new-message-textarea-bg: var(--neutral-20);
+  --chat-message-date-color: var(--neutral-40);
+  --chat-message-name-color: var(--white);
+}
+
+@include theme('light') {
+  --chat-bg: var(--white);
+  --chat-color: var(--neutral-70);
+  --chat-instructions-color: var(--neutral-70);
+  --chat-new-message-bg: var(--neutral-10);
+  --chat-new-message-textarea-color: var(--neutral-90);
+  --chat-new-message-textarea-bg: var(--white);
+  --chat-message-date-color: var(--neutral-70);
+  --chat-message-name-color: var(--neutral-70);
+}
+
+.chat {
+  $new-message-height: 80px;
+
+  color: var(--chat-color);
+
+  .no-messages {
+    padding: calc(var(--line-height-03) / 2);
+    color: var(--chat-instructions-color);
+  }
+
+  .first-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: calc(var(--line-height-03) / 2);
+    color: var(--chat-instructions-color);
+  }
+
+  .chat-error {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: var(--chat-bg);
+    padding: calc(var(--line-height-03) / 2);
+    text-align: center;
+  }
+
+  .messages {
+    position: absolute;
+    inset: 0;
+    bottom: $new-message-height;
+    overflow-x: hidden;
+    background-color: var(--chat-bg);
+
+    li.message {
+      margin: calc(var(--line-height-03) / 2);
+
+      .date {
+        font-size: var(--font-size-01);
+        color: var(--chat-message-date-color);
+        margin-bottom: calc(var(--line-height-03) / 2);
+        text-align: right;
+      }
+
+      .message-wrapper {
+        .name {
+          font-size: var(--font-size-01);
+          color: var(--chat-message-name-color);
+          margin-bottom: var(--spacing-02);
+          min-height: 16px;
+        }
+
+        .message {
+          border-left: 3px solid transparent;
+          font-size: var(--font-size-02);
+          box-shadow: none;
+          border-radius: var(--border-radius-base);
+          position: relative;
+
+          .message-content {
+            padding: var(--spacing-03) var(--spacing-05);
+            overflow-x: auto;
+            color: var(--white);
+            font-weight: bold;
+
+            a {
+              color: var(--white);
+            }
+          }
+
+          .arrow {
+            transform: rotate(90deg);
+            right: 90%;
+            top: -15px;
+            border: solid;
+            content: ' ';
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            border-top-color: transparent !important;
+            border-bottom-color: transparent !important;
+            border-width: 10px;
+          }
+        }
+
+        p {
+          margin-bottom: calc(var(--line-height-03) / 4);
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      &:not(.self) {
+        .message {
+          .arrow {
+            border-left-color: transparent !important;
+          }
+        }
+      }
+
+      &.self {
+        margin-top: var(--line-height-03);
+
+        .message-wrapper .message {
+          border-left: none;
+          border-right: 3px solid transparent;
+
+          .arrow {
+            left: 100%;
+            right: auto;
+            border-right-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  .new-message {
+    @extend .full-size;
+
+    top: auto;
+    height: $new-message-height;
+    background-color: var(--chat-new-message-bg);
+    padding: calc(var(--line-height-03) / 4);
+    border-top: 1px solid var(--editor-border-color);
+
+    textarea {
+      overflow: auto;
+      resize: none;
+      border-radius: var(--border-radius-base);
+      border: 1px solid var(--editor-border-color);
+      height: 100%;
+      width: 100%;
+      color: var(--chat-new-message-textarea-color);
+      font-size: var(--font-size-02);
+      padding: calc(var(--line-height-03) / 4);
+      background-color: var(--chat-new-message-textarea-bg);
+    }
+  }
+}