[IMP] website_livechat : allow to send chat request to a website_visitor

This commit allows a livechat operator to send a chat request to a
connected and available website_visitor.

A visitor is considered as connected if his last tracked website.page request
was within the last 5 minutes.
A visitor is available if he doesn't have an active livechat conversation
(mail_channel with type = livechat).
  - If another operator sent him a chat request
  - Or if the visitor asked himself to speak with an operator
    (via the normal and existing flow)

A livechat conversation is active while the visitor haven't left the conversation.
An operator cannot leave a livechat conversation, only the visitor can.

The flow to send a chat request:
  - On the visitor view (tree or form), operator click on 'send chat request'
    (button or livechat icon)
  - A empty conversation with the visitor pops up at operator side.
  - While the operator didn't send a message, the visitor won't see the conversation.
  - The operator can type a message to the user
  - If the operator close the chat without sending any messages,
    the chat request AND the mail_channel are both deleted.
    In this case, the visitor is then available to send him a new chat request.
  - If the operator send a message, at the visitor's next action
    (page navigation on pages that allows livechat, based on livechat rules),
    the conversation will pop up at visitor side, using the livechat button widget.
    The visitor won't be able to request a livechat conversation with an operator until
    he leaves the chat requested by the operator.
  - Once the visitor leaves (with or without rating) the conversation :
        - the operator is notified that the visitor has left the conversation
        - the chat request is deleted to keep the chat request table clean and minimal
        - the livechat conversation if set to inactive.
  - The visitor is now available again to send him a chat request.

This feature uses the already existing livechat_session cookie mechanism,
so no further code modification was needed to make this work.
It's directly integrated is existing livechat flow.

The chat_request model is only useful to quickly check if a visitor has a chat request
and to send the livechat conversation info to the visitor via the livechat_session cookie.

This commit also add a website_visitor banner info on discuss view :

To be able to quickly see all the relevant information of a website visitor
while talking with in discuss view, a fixed banner have been added.
Only the discuss view will benefit from this because detached chatter window
is to small to display such banner.

Task ID: 34624
PR #2028059

1 files changed, 60 insertions, 0 deletions

diff --git a/addons/website_livechat/static/src/xml/thread.xml b/addons/website_livechat/static/src/xml/thread.xml
new file mode 100644
index 00000000000..a8872290b2a
--- /dev/null
+++ b/addons/website_livechat/static/src/xml/thread.xml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-extend="mail.widget.Thread.Content.ASC">
+        <t t-jquery=".o_mail_thread_content" t-operation="replace">
+            <t t-call="mail.widget.Thread.website.visitor.banner"/>
+            <div class="o_mail_thread_content o_sub_w_visitor_info">
+                <t t-if="options.displayLoadMore" t-call="mail.widget.Thread.LoadMore"/>
+                <t t-call="mail.widget.Thread.Messages"/>
+                <t t-if="options.displayBottomThreadFreeSpace">
+                    <div class="o_thread_bottom_free_space"/>
+                </t>
+            </div>
+        </t>
+    </t>
+
+    <t t-extend="mail.widget.Thread.Content.DESC">
+        <t t-jquery=".o_mail_thread_content" t-operation="replace">
+            <t t-call="mail.widget.Thread.website.visitor.banner"/>
+            <div class="o_mail_thread_content">
+                <t t-if="options.messagesSeparatorPosition == 'top'" t-call="mail.MessagesSeparator"/>
+                <t t-set="messages" t-value="messages.slice().reverse()"/>
+                <t t-call="mail.widget.Thread.Messages"/>
+                <t t-if="options.displayLoadMore" t-call="mail.widget.Thread.LoadMore"/>
+            </div>
+        </t>
+    </t>
+
+    <t t-name="mail.widget.Thread.website.visitor.banner">
+        <t t-set="visitor" t-value="thread._visitor"/>
+        <t t-if="visitor">
+            <div class="o_w_visitor_info o_thread_message o_mail_discussion d-flex">
+                <div class="o_thread_message_sidebar align-self-center">
+                    <div class="o_thread_message_sidebar_image">
+                        <img alt=""
+                             t-att-src="visitor.partner_id ? '/web/image/res.partner/' + visitor.partner_id + '/image_small' : '/mail/static/src/img/smiley/avatar.jpg'"
+                             class="o_thread_message_avatar rounded-circle"/>
+                        <span>
+                            <i t-if="visitor.is_connected" aria-label="Visitor is connected" class="o_w_visitor_status o_w_visitor_connected fa fa-circle" role="img" title="Online"></i>
+                            <i t-else="" aria-label="Visitor is offline" class="o_w_visitor_status o_w_visitor_disconnected fa fa-circle" role="img" title="Offline"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="o_thread_message_core pt-2 align-self-center">
+                    <div class="d-flex">
+                        <img t-if="visitor.country_code" t-attf-src='base/static/img/country_flags/#{visitor.country_code}.png' class="o_country_flag mr-2 mb-1"/>
+                        <strong class="o_thread_author" t-esc="visitor.name"/>
+                        <span><i class="fa fa-comment-o ml-4 mr-2" aria-label="Lang"/><t t-esc="visitor.lang"/></span>
+                        <span t-if="visitor.website"><i class="fa fa-globe ml-4 mr-2" aria-label="Website"/><span t-esc="visitor.website"/></span>
+                    </div>
+                    <div class="o_thread_message_content">
+                        <div class="d-flex">
+                            <span><i class="fa fa-history mr-2" aria-label="History"/></span>
+                            <p t-esc="visitor.history"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </t>
+    </t>
+</templates>