[FIX] mail: fix composer render when switching chatter record

To reproduce this bug:

- Open a record with a chatter
- Open a composer (send message or log note)
- Change record using the pager
- Now, you cannot mention anyone

This is because the chatter component is reused and the `useComponent` hook isn't
refreshed with the new data.
This PR fix the issue by forcing a re-render of the composer when the `threadId`
changes. This refresh the `useComponent` hook used inside the `useSuggestion`
hook.

task-3502720

closes odoo/odoo#135331

X-original-commit: 28dd108294606499799e1fd2a7b24de23730d098
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core/web/chatter.xml

@@ -79,7 +79,7 @@
                 </t>
                 <t t-set="type" t-value="state.composerType === 'message' ? 'message' : 'note'"/>
                 <SuggestedRecipientsList t-if="props.hasFollowers and state.composerType !== 'note'" className="'px-3'" styleString="'margin-left:48px;'" thread="state.thread"/>
-                <Composer composer="state.thread.composer" autofocus="true" className="state.composerType === 'message' ? '' : 'pt-4'" mode="'extended'" onPostCallback.bind="onPostCallback" dropzoneRef="rootRef" type="state.composerType"/>
+                <Composer composer="state.thread.composer" autofocus="true" className="state.composerType === 'message' ? '' : 'pt-4'" mode="'extended'" onPostCallback.bind="onPostCallback" dropzoneRef="rootRef" type="state.composerType" t-key="props.threadId"/>
             </t>
         </div>
         <div class="o-mail-Chatter-content">

addons/mail/static/tests/web/chatter_tests.js

@@ -810,3 +810,37 @@ QUnit.test("Follower count of draft record is set to 0", async (assert) => {
     await openView({ res_model: "res.partner", views: [[false, "form"]] });
     await contains(".o-mail-Followers", { text: "0" });
 });
+
+QUnit.test("Mentions in composer should still work when using pager", async () => {
+    const pyEnv = await startServer();
+    const [partnerId_1, partnerId_2] = pyEnv["res.partner"].create([
+        { display_name: "Partner 1" },
+        { display_name: "Partner 2" },
+    ]);
+    const views = {
+        "res.partner,false,form": `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>`,
+    };
+    patchUiSize({ size: SIZES.LG });
+    const { openView } = await start({ serverData: { views } });
+    await openView(
+        {
+            res_model: "res.partner",
+            res_id: partnerId_1,
+            views: [[false, "form"]],
+        },
+        { resIds: [partnerId_1, partnerId_2] }
+    );
+
+    await click("button:contains(Log note)");
+    await click(".o_pager_next");
+    await insertText(".o-mail-Composer-input", "@");
+    await contains(".o-mail-Composer-suggestion");
+});