oca-ocb-mail/odoo-bringout-oca-ocb-im_livechat/im_livechat/data/mail_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data noupdate="1">
        <template id="livechat_email_template">
<table border="0" cellpadding="0" cellspacing="0" class="table-borderless" style="padding-top: 16px; background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #454748; width: 100%; border-collapse:separate;"><tr><td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="590" class="table-borderless" style="padding: 24px; background-color: white; color: #454748; border-collapse:separate; border-radius: 8px;">
<tbody>
    <!-- HEADER -->
     <!-- sudo: visitor can access header background color -->
    <t t-set="header_background_color" t-value="channel.livechat_channel_id.sudo().header_background_color or '#875A7B'" />
    <!-- sudo: visitor can access title color -->
    <t t-set="title_color" t-value="channel.livechat_channel_id.sudo().title_color or '#FFFFFF'" />
    <tr>
        <td align="center" style="min-width: 590px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="table-borderless" t-attf-style="background-color:{{header_background_color}}; padding:0; border-collapse:separate; border-radius: 8px 8px 0 0;">
                <tr>
                    <td valign="middle" style="padding: 10px 20px 10px 20px;">
                        <span t-attf-style="color:{{title_color}}; font-size:14px;">
                            Live Chat Conversation
                        </span><br/>
                        <span t-attf-style="font-size:24px; font-weight:bold; color:{{title_color}};">
                            <t t-out="company.name"/>
                        </span>
                    </td>
                    <td valign="middle" align="right" style="vertical-align: middle; padding-right: 20px;" t-if="not company.uses_default_logo">
                        <img t-att-src="'/logo.png?company=%s' % company.id" 
                             style="border-radius:0.5rem; max-height: 48px; max-width: 48px; width: auto; height: auto; display: block; object-fit: contain;" 
                             t-att-alt="'%s' % company.name"/>
                      </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- CONTENT -->
    <t t-set="top" t-value="'border-top: thin solid #dee2e6;'" />
    <t t-set="bottom" t-value="'border-bottom: thin solid #dee2e6;'" />
    <t t-set="right" t-value="'border-right: thin solid #dee2e6;'" />
    <t t-set="left" t-value="'border-left: thin solid #dee2e6;'" />
    <tr>
        <td t-att-style="'padding: 24px 32px 0px 32px; background-color: #ffffff; border-radius: 0 0 8px 8px;' + left + right + bottom">
            <div style="font-size: 13px; padding: 5px 0; white-space:nowrap;">
                Here's a copy of your conversation with
                <!-- sudo: res.users - visitor can access the name of the operator -->
                <span t-attf-style="color: {{header_background_color}};" t-out="channel.livechat_operator_id.sudo().user_livechat_username or channel.livechat_operator_id.sudo().name"/> on
                <span t-out="channel.create_date.astimezone(tz).strftime('%m/%d/%y')"/> at
                <span t-out="channel.create_date.astimezone(tz).strftime('%I:%M %p')"/>.
            </div>
            <table cellspacing="0" cellpadding="0" class="table-borderless" style="width:100%; margin: 16px 0;">
                <t t-foreach="channel.message_ids.sorted(lambda m: (m.date, m.id))" t-as="message">
                    <t t-if="message.message_type != 'notification'">
                        <t t-set="author_name"><t t-if="message.author_id" t-out="message.author_id.sudo().user_livechat_username or message.author_id.sudo().name"/><t t-else="">You</t></t>
                        <tr>
                            <td style="padding: 4px 0;">
                                <table cellspacing="0" cellpadding="0" class="table-borderless" style="width: 100%;">
                                    <tr>
                                        <td style="width: 50px; vertical-align: top; padding-right: 12px;">
                                            <t t-if="message.author_avatar">
                                                <img style="width:40px; height:40px; border-radius:0.5rem; display:block;" t-attf-src="data:image/png;base64,{{message.author_avatar}}" t-attf-alt="{{author_name}}"/>
                                            </t>
                                            <t t-else="">
                                                <img style="width:40px; height:40px; border-radius:0.5rem; display:block;" src="/mail/static/src/img/smiley/avatar.jpg" t-attf-alt="{{author_name}}"/>
                                            </t>
                                        </td>
                                        <td style="vertical-align: top;">
                                            <div style="margin-bottom:4px;">
                                                <strong t-attf-style="color:{{header_background_color}}; font-size: 13px; margin-right: 2px;" t-out="author_name"/>
                                                <span style="font-size:10px; color:#666666;" t-out="message.date.astimezone(tz).strftime('%I:%M %p')"/>
                                            </div>
                                            <div style="background-color: #E2F3F6; padding: 16px 12px 0; border-radius: 0 0.46875rem 0.46875rem 0.46875rem; display: inline-block; max-width: 100%;">
                                                <span style="font-size: 13px; word-break: break-word;" t-out="message.body"/>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </t>
                </t>
                <!-- FOOTER -->
                <tr>
                    <td align="center" style="min-width: 590px; padding: 0 8px 0 8px; font-size:11px;">
                        <hr width="100%" style="background-color:rgb(204,204,204); border:medium none; clear:both; display:block; font-size:0px; min-height:1px; line-height:0; margin: 16px 0px 8px 0px;"/>
                        <b t-attf-style="color: {{header_background_color}};" t-out="company.name"/><br/>
                        <div style="color: #999999;">
                            <t t-esc="company.phone"/>
                            <t t-if="company.email"> |
                                <a t-att-href="'mailto:%s' % company.email" style="text-decoration:none; color: #999999;"><t t-esc="company.email"/></a>
                            </t>
                            <t t-if="company.website"> |
                                <a t-att-href="'%s' % company.website" style="text-decoration:none; color: #999999;">
                                    <t t-esc="company.website"/>
                                </a>
                            </t>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</tbody>
</table>
</td></tr>
<!-- POWERED BY -->
<tr><td align="center" style="min-width: 590px;">
        Powered by <a target="_blank" href="https://www.odoo.com?utm_source=db&amp;utm_medium=email" t-attf-style="color: {{company.email_secondary_color or '#875A7B'}};">Odoo</a>
</td></tr>
</table>
        </template>
    </data>
</odoo>