From 8a6eda2ccd2e4e26de5749260ff76550da913e24 Mon Sep 17 00:00:00 2001
From: "Didier (did)" <did@odoo.com>
Date: Thu, 31 Aug 2023 13:37:02 +0200
Subject: [PATCH] [IMP] mail: add typing status above the composer in chat
 window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In DM chat, the im status turns into typing icon so it was not
a problem. In group chat and channel, however, there was no way
to see typing members in chat window.

This commit adds explicit small text above composer in chat window
to list typing members of conversation.

Task-3474778

closes odoo/odoo#133757

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/src/core/common/chat_window.js       | 3 +++
 addons/mail/static/src/core/common/chat_window.scss     | 4 ++++
 addons/mail/static/src/core/common/chat_window.xml      | 7 ++++++-
 addons/mail/static/src/discuss/typing/common/typing.js  | 4 ++--
 addons/mail/static/tests/discuss/typing/typing_tests.js | 2 +-
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/addons/mail/static/src/core/common/chat_window.js b/addons/mail/static/src/core/common/chat_window.js
index f6730a32bd2..3ddd6a84da5 100644
--- a/addons/mail/static/src/core/common/chat_window.js
+++ b/addons/mail/static/src/core/common/chat_window.js
@@ -20,6 +20,7 @@ import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { localization } from "@web/core/l10n/localization";
 import { _t } from "@web/core/l10n/translation";
 import { useService } from "@web/core/utils/hooks";
+import { Typing } from "@mail/discuss/typing/common/typing";
 
 /**
  * @typedef {Object} Props
@@ -36,6 +37,7 @@ export class ChatWindow extends Component {
         ThreadIcon,
         ImStatus,
         AutoresizeInput,
+        Typing,
     };
     static props = ["chatWindow", "right?"];
     static template = "mail.ChatWindow";
@@ -47,6 +49,7 @@ export class ChatWindow extends Component {
         this.messageEdition = useMessageEdition();
         this.messageHighlight = useMessageHighlight();
         this.messageToReplyTo = useMessageToReplyTo();
+        this.typingService = useState(useService("discuss.typing"));
         this.state = useState({
             actionsMenuOpened: false,
             jumpThreadPresent: 0,
diff --git a/addons/mail/static/src/core/common/chat_window.scss b/addons/mail/static/src/core/common/chat_window.scss
index 14da6df1532..e0eb91c800f 100644
--- a/addons/mail/static/src/core/common/chat_window.scss
+++ b/addons/mail/static/src/core/common/chat_window.scss
@@ -37,3 +37,7 @@
     }
 }
 
+.o-mail-ChatWindow-typing {
+    font-size: $small-font-size * 0.9;
+    z-index: $o-mail-NavigableList-zIndex - 2;
+}
diff --git a/addons/mail/static/src/core/common/chat_window.xml b/addons/mail/static/src/core/common/chat_window.xml
index e16e07f9b26..a263df533b8 100644
--- a/addons/mail/static/src/core/common/chat_window.xml
+++ b/addons/mail/static/src/core/common/chat_window.xml
@@ -61,7 +61,12 @@
                 </div>
                 <t t-else="">
                     <Thread isInChatWindow="true" thread="thread" t-key="thread.localId" jumpPresent="state.jumpThreadPresent" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo"/>
-                    <Composer composer="thread.composer" autofocus="props.chatWindow.autofocus" mode="'compact'" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onPostCallback.bind="() => this.state.jumpThreadPresent++" dropzoneRef="contentRef" type="composerType"/>
+                    <div t-if="thread and typingService.hasTypingMembers(thread)" class="d-flex bg-view position-relative">
+                        <div class="o-mail-ChatWindow-typing d-flex px-2 position-absolute bottom-0 start-0 w-100 bg-view align-items-center">
+                            <Typing channel="thread" size="'medium'"/>
+                        </div>
+                    </div>
+                    <Composer t-if="thread" composer="thread.composer" autofocus="props.chatWindow.autofocus" mode="'compact'" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onPostCallback.bind="() => this.state.jumpThreadPresent++" dropzoneRef="contentRef" type="composerType"/>
                 </t>
             </t>
         </div>
diff --git a/addons/mail/static/src/discuss/typing/common/typing.js b/addons/mail/static/src/discuss/typing/common/typing.js
index 73c2646d21d..bddbfea373a 100644
--- a/addons/mail/static/src/discuss/typing/common/typing.js
+++ b/addons/mail/static/src/discuss/typing/common/typing.js
@@ -8,8 +8,8 @@ import { useService } from "@web/core/utils/hooks";
 /**
  * @typedef {Object} Props
  * @property {import("@mail/core/common/thread_model").Thread} channel
- * @property {string} size
- * @property {boolean} displayText
+ * @property {string} [size]
+ * @property {boolean} [displayText]
  * @extends {Component<Props, Env>}
  */
 export class Typing extends Component {
diff --git a/addons/mail/static/tests/discuss/typing/typing_tests.js b/addons/mail/static/tests/discuss/typing/typing_tests.js
index 28b9fdcebe6..6298e5880a9 100644
--- a/addons/mail/static/tests/discuss/typing/typing_tests.js
+++ b/addons/mail/static/tests/discuss/typing/typing_tests.js
@@ -356,7 +356,7 @@ QUnit.test("chat: correspondent is typing in chat window", async () => {
             is_typing: true,
         })
     );
-    await contains("[title='Demo is typing...']");
+    await contains("[title='Demo is typing...']", { count: 2 }); // icon in header & text above composer
     // simulate receive typing notification from demo "no longer is typing"
     pyEnv.withUser(userId, () =>
         env.services.rpc("/discuss/channel/notify_typing", {