[IMP] mail: add typing status above the composer in chat window

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

@@ -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,

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;
+}

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>

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 {

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", {