Sep 07 : [ADD] Initial Commit 'whatsapp_chat_layout'

whatsapp_chat_layout/README.rst

@@ -0,0 +1,50 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Whatsapp Chat Layout In Odoo Discuss
+====================================
+Redesigned the discuss module into whatsapp chat layout
+
+Configuration
+=============
+* No additional configurations needed
+
+Installation
+============
+    - www.odoo.com/documentation/14.0/setup/install.html
+    - Install our custom addon
+
+License
+-------
+Affero General Public License, Version 3 (AGPL v3).
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developers: V(14) Yadhu Krishnan, Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

whatsapp_chat_layout/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Yadhu krishnan (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import models

whatsapp_chat_layout/__manifest__.py

@@ -0,0 +1,47 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Yadhu krishnan (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+{
+    'name': 'Whatsapp Chat Layout In Odoo Discuss',
+    'version': '14.0.1.0.0',
+    'category': 'Discuss',
+    'summary': "Redesigned the discuss module into whatsapp chat layout",
+    'description': """User customize the layout of odoo discuss module into 
+     whatsapp or their own style""",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['mail', 'base_setup'],
+    'data': [
+        'views/res_config_settings_views.xml',
+        'views/assets.xml'
+    ],
+    'qweb': [
+        'static/src/xml/discuss_sidebar_advanced_templates.xml',
+        'static/src/xml/composer_advanced_templates.xml',
+    ],
+    'images': ['static/description/banner.png'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

whatsapp_chat_layout/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <whatsapp_chat_layout>
+
+#### 27.07.2023
+#### Version 14.0.1.0.0
+#### ADD
+- Initial commit for Whatsapp Chat Layout In Odoo Discuss

whatsapp_chat_layout/models/__init__.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Yadhu krishnan (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import res_company
+from . import res_config_settings
+from . import res_users

whatsapp_chat_layout/models/res_company.py

@@ -0,0 +1,31 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Yadhu krishnan (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import fields, models
+
+
+class ResCompany(models.Model):
+    """Inherit the model res_company to store the image of the whatsapp
+    background"""
+    _inherit = 'res.company'
+
+    background_image = fields.Binary(string="Background Image", attachment=True,
+                                     help='Provide background image')

whatsapp_chat_layout/models/res_config_settings.py

@@ -0,0 +1,51 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Yadhu krishnan (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import fields, models
+
+
+class ResConfigSettings(models.TransientModel):
+    """Inherit the model res_config_settings to add fields for layout,
+    background color and background image"""
+    _inherit = 'res.config.settings'
+
+    background_color = fields.Char(string='Background Color',
+                                   config_parameter=
+                                   'base_setup.background_color',
+                                   default='#FFFFFF',
+                                   help='Select discuss background color')
+    layout_color = fields.Char(string='Layout Color',
+                               config_parameter='base_setup.layout_color',
+                               default='#3a8180',
+                               help='Select discuss layout color')
+    chat_background = fields.Binary(string="Background Image",
+                                    related='company_id.background_image',
+                                    readonly=False,
+                                    help='Add background image for discuss')
+
+    def get_color(self):
+        """Function to return values into js"""
+        return {'background_color': self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'base_setup.background_color'), 'layout_color': self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'base_setup.layout_color'),
+            'background_image': self.env.user.company_id.background_image}

whatsapp_chat_layout/models/res_users.py

@@ -0,0 +1,33 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Yadhu krishnan (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import api, models
+
+
+class ResUsers(models.Model):
+    """Inherit the model res_users to add a function for getting user profile
+    image"""
+    _inherit = 'res.users'
+
+    @api.model
+    def get_user_image(self):
+        """Function to get current user image and return in js"""
+        return self.env.user.partner_id.image_1920

whatsapp_chat_layout/static/description/index.html

@@ -0,0 +1,644 @@
+<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div class="d-flex align-items-center justify-content-between"
+         style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="assets/misc/cybrosys-logo.png" width="42" height="42"
+             style="width: 42px; height: 42px;"/>
+        <div>
+            <div
+                    style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div
+                    style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div
+                    style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                    Whatsapp Chat Layout In Odoo Discuss</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">Redesigned The Discuss Module Into Whatsapp Chat Layout</p>
+                <!-- END OF APP HERO -->
+                <img src="assets/screenshots/hero.gif" class="img-responsive"
+                     style="width: 100%; margin-left: auto; margin-right: auto;"/>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/compass.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn more about this module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View features of this module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View screenshots for this module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Overview
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">
+        Whatsapp Chat Layout in Odoo Discuss module Redesigned the discuss
+        module into whatsapp chat layout.User can change the
+        background color and layout color of the discuss module. And also set
+        background image.
+    </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Features
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Dynamically change background and Layout color.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Dynamically change background image.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Current user chat view in left side.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Easy to Use and Manage.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Available in Odoo 15.0 Community, Enterprise and Odoo.sh.</span>
+        </div>
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pictures.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Screenshots
+    </h2>
+</div>
+
+<div class="row">
+    <div class="col-sm-12">
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Rearranged the sidebar and the Chatter.
+            </h3>
+            <img src="assets/screenshots/1.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Click Mail icon to view the Inbox, Starred and History messages.
+            </h3>
+
+            <img src="assets/screenshots/2.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Click Chat icon to view the DIRECT MESSAGES.
+            </h3>
+
+            <img src="assets/screenshots/3.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Click Channel icon to view the CHANNELS.
+            </h3>
+
+            <img src="assets/screenshots/4.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Change Background Color and Layout Color in General
+                Settings.
+            </h3>
+
+            <img src="assets/screenshots/7.png" class="img-thumbnail">
+            <img src="assets/screenshots/8.png" class="img-thumbnail">
+            <img src="assets/screenshots/9.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Change Background Image in General settings.
+            </h3>
+            <img src="assets/screenshots/10.png" class="img-thumbnail">
+            <img src="assets/screenshots/11.png" class="img-thumbnail">
+        </div>
+
+    </div>
+</div>
+
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center"
+         style="text-align: center; padding: 2.5rem 1rem !important;">
+        <h2 style="color: #212529 !important;">Suggested Products</h2>
+        <hr
+                style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/>
+
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner">
+                <div class="carousel-item active" style="min-height:0px">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/14.0/product_approval_management/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/l1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/14.0/dynamic_accounts_report/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/l2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/14.0/shopify_odoo_connector/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/l3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item" style="min-height:0px">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/14.0/dashboard_pos/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/l4.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/14.0/multiple_reference_per_product/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/l5.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="left:-25px;width: 35px;color: #000;"> <span
+                    class="carousel-control-prev-icon"><i
+                    class="fa fa-chevron-left"
+                    style="font-size:24px"></i></span> </a> <a
+                class="carousel-control-next" href="#demo1" data-slide="next"
+                style="right:-25px;width: 35px;color: #000;">
+                    <span class="carousel-control-next-icon"><i
+                            class="fa fa-chevron-right"
+                            style="font-size:24px"></i></span>
+        </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/star.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our Services
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/cogs.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Customization</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/wrench.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/lifebuoy.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Support</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/user.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire
+                Odoo
+                Developer</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/puzzle.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Integration</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/update.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Migration</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/consultation.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Consultancy</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/training.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/license.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Licensing Consultancy</h6>
+        </div>
+    </div>
+
+</div>
+
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/corporate.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our
+        Industries
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/trading-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure
+                    and
+                    sell your products</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/pos-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy
+                    configuration
+                    and convivial experience</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/education-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for
+                    educational management</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/manufacturing-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and
+                    schedule your operations</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/ecom-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile
+                    friendly,
+                    awe-inspiring product pages</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/service-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of
+                    services and invoice</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/restaurant-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or
+                    restaurant methodically</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/hotel-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/customer-support.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Support
+    </h2>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/support.png" height="48" width="48"
+                         style="width: 42px; height: 42px;"/>
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help?
+                        Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52"
+                         style="width: 52px; height: 52px;"/>
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            +91 86068
+                            27707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="assets/misc/logo.png" width="144" height="31"
+                 style="width:144px; height: 31px; margin-top: 40px;"/>
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

whatsapp_chat_layout/static/src/css/whatsapp_chat_layout.css

@@ -0,0 +1,61 @@
+:root{
+    --background-color: #ffffff;
+    --layout-color: #3a8180;
+}
+.o_ComposerTextInput_textarea{
+    height: 40px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.o_MessageList{
+    background-color: var(--background-color) !important;
+    background-image: var(--background-image) !important;
+    background-repeat:no-repeat;
+    background-size:cover;
+}
+.o_DiscussSidebar_startAMeetingButton {
+    font-size: 24px;
+    width: 55px;
+    height: 65px;
+    color: #fff;
+    margin-left: 15px;
+    padding-top: 18px;
+}
+.header {
+    margin-left: 140px;
+}
+
+.text-700 {
+    color: gray!important;
+}
+.o_DiscussSidebar_groupHeader {
+    height: 40px;
+    background-color: var(--layout-color) !important;
+    font-size:15px;
+}
+div.o_DiscussSidebar_groupTitle{
+    color: white!important;
+}
+.o_ThreadIcon_mailboxInbox {
+    font-size: 25px;
+    color: var(--layout-color) !important;
+}
+.o_ThreadIcon_mailboxStarred{
+    font-size: 25px;
+    color: var(--layout-color) !important;
+}
+.o_ThreadIcon_mailboxHistory {
+    font-size: 25px;
+    color: var(--layout-color) !important;
+}
+.o_DiscussSidebarMailbox_name{
+    margin-left: 22px;
+    font-size: 18px;
+}
+.o_DiscussSidebarMailbox_item.o_DiscussSidebarMailbox_name.me-2.text-truncate {
+    color: #fff;
+    font-size: 17px;
+}
+.o_DiscussSidebar_groupHeaderItemAdd {
+    color: #fff !important;
+}

whatsapp_chat_layout/static/src/js/discuss_container.js

@@ -0,0 +1,33 @@
+odoo.define('whatsapp_chat_layout.discuss_container', function(require) {
+    'use strict';
+    var rpc = require('web.rpc');
+    const components = {
+        Discuss: require('mail/static/src/components/discuss/discuss.js'),
+    };
+    const {
+        patch
+    } = require('web.utils');
+    /**
+    Patching the components.Discuss for changing the default view
+    */
+    patch(components.Discuss, 'discuss// model: "mail",ord-patch', {
+        setup() {
+             //Call rpc to get color value.
+            rpc.query({
+                model: "res.config.settings",
+                method: "get_color",
+                args: [0],
+            }).then(function(result) {
+                if (result.background_color !== false) {
+                    document.documentElement.style.setProperty("--background-color", result.background_color);
+                } //Set discuss background color
+                if (result.layout_color !== false) {
+                    document.documentElement.style.setProperty("--layout-color", result.layout_color);
+                } // Set discuss layout color
+                if (result.background_image !== false) {
+                    document.documentElement.style.setProperty("--background-image", 'url(data:image/png;base64,' + result.background_image + ')');
+                } // Set discuss background image
+            });
+        }
+    });
+})

whatsapp_chat_layout/static/src/js/discuss_sidebar.js

@@ -0,0 +1,50 @@
+odoo.define('whatsapp_chat_layout.discuss_sidebar', function(require) {
+    'use strict';
+    const { onMounted } = owl.hooks;
+    var rpc = require('web.rpc');
+    const components = { DiscussSidebar: require('mail/static/src/components/discuss_sidebar/discuss_sidebar.js')};
+    const { patch } = require('web.utils');
+    /**
+    Patching the components. DiscussSidebar for changing the default view
+    */
+    patch(components.DiscussSidebar, 'im_livechat/static/src/components/discuss_sidebar/discuss_sidebar.js', {
+        setup() {
+            this._super.apply();
+            onMounted(() => {
+                this.sidebar()
+            })
+        },
+        // Function for getting the current user image
+        async sidebar() {
+            var self = this
+            //Call rpc to get current user image.
+            await rpc.query({
+                model: "res.users",
+                method: "get_user_image",
+            }).then(function(result) {
+                let image = document.createElement('div')
+                image.innerHTML = '<img class="o_Composer_currentPartner rounded-circle o_object_fit_cover"style="margin-top: 21px;margin-left: 10px;width: 45px;height: 45px;"src="data:image/png;base64,' + result + '">'
+                self.el.querySelector('#img').appendChild(image);
+            });
+        },
+        // Click function of mail button
+        _onClickMail(ev) {
+            console.log(this)
+            this.el.querySelector('.mail').classList.remove("d-none");
+            this.el.querySelector('.channel').classList.add("d-none");
+            this.el.querySelector('.chat').classList.add("d-none");
+        },
+         // Click function of chat button
+        _onClickChat(ev) {
+            this.el.querySelector('.chat').classList.remove("d-none");
+            this.el.querySelector('.mail').classList.add("d-none");
+            this.el.querySelector('.channel').classList.add("d-none");
+        },
+         // Click function of channel button
+        _onClickChannel(ev) {
+            this.el.querySelector('.channel').classList.remove("d-none");
+            this.el.querySelector('.mail').classList.add("d-none");
+            this.el.querySelector('.chat').classList.add("d-none");
+        }
+    });
+});

whatsapp_chat_layout/static/src/xml/composer_advanced_templates.xml

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--Rearranged the Composer and Composer.actionButtons templates-->
+<templates id="template" xml:space="preserve">
+    <t name="mail.ComposerAdvanced" t-inherit="mail.Composer" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('o_Composer')]" position="replace">
+            <div class="o_Composer" t-att-class="{
+                'o-focused': composer and composer.hasFocus,
+                'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                'o-has-footer': hasFooter,
+                'o-has-header': hasHeader,
+                'o-is-compact': props.isCompact,
+            }" t-on-keydown="_onKeydown">
+                <t t-if="composer">
+                    <t t-if="isDropZoneVisible.value and composer.hasDropZone">
+                        <DropZone class="o_Composer_dropZone" t-on-o-dropzone-files-dropped="_onDropZoneFilesDropped" t-ref="dropzone" />
+                    </t>
+                    <FileUploader attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)" newAttachmentExtraData="newAttachmentExtraData" t-ref="fileUploader" />
+                    <t t-if="hasHeader">
+                        <div class="o_Composer_coreHeader">
+                            <t t-if="props.hasThreadName and composer.thread">
+                                <span class="o_Composer_threadName">
+                                    on: <b>
+                                        <t t-esc="composer.thread.displayName" />
+                                    </b>
+                                </span>
+                            </t>
+                            <t t-if="props.hasFollowers and !composer.isLog">
+                                <!-- Text for followers -->
+                                <small class="o_Composer_followers">
+                                    <b class="text-muted">To: </b>
+                                    <em class="text-muted">Followers of </em>
+                                    <b>
+                                        <t t-if="composer.thread and composer.thread.name">
+                                            &#32;&quot;
+                                            <t t-esc="composer.thread.name" />&quot;
+                                        </t>
+                                        <t t-else="">
+                                            this document
+                                        </t>
+                                    </b>
+                                </small>
+                                <ComposerSuggestedRecipientList threadLocalId="composer.thread.localId" />
+                            </t>
+                        </div>
+                    </t>
+                    <t t-if="composer.thread and composer.thread.model === 'mail.channel' and composer.thread.mass_mailing">
+                        <div class="o_Composer_subject">
+                            <input class="o_Composer_subjectInput" type="text" placeholder="Subject" t-on-input="_onInputSubject" t-ref="subject" />
+                        </div>
+                    </t>
+                    <t t-if="props.hasCurrentPartnerAvatar">
+                        <div class="o_Composer_sidebarMain">
+                            <img class="o_Composer_currentPartnerAvatar rounded-circle" t-att-src="currentPartnerAvatar" alt="" />
+                        </div>
+                    </t>
+                    <div class="o_Composer_coreMain" t-att-class="{
+                        'o-composer-is-compact': props.isCompact,
+                        'o-composer-is-extended': composer.thread and composer.thread.mass_mailing,
+                    }">
+                        <div class="o_Composer_primaryToolButtons" style="height: 40px;background: var(--layout-color);border-bottom-left-radius: 7px;border-top-left-radius: 7px;color: #018e84;" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                            <Popover position="'top'" t-on-o-emoji-selection="_onEmojiSelection">
+                                <!-- TODO FIXME o-open and aria-expanded not possible to code due to https://github.com/odoo/owl/issues/693 -->
+                                <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light" t-att-class="{
+                                            'o-open': false and state.displayed,
+                                            'o-mobile': env.messaging.device.isMobile,
+                                        }" t-on-keydown="_onKeydownEmojiButton" aria-label="Emojis" t-att-aria-expanded="false and (state.displayed ? 'true' : 'false')" style="background:var(--layout-color);color: #fff;">
+                                    <i class="fa fa-smile-o" />
+                                </button>
+                                <t t-set="opened">
+                                    <EmojisPopover t-ref="emojisPopover" />
+                                </t>
+                            </Popover>
+                            <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" aria-label="Add attachment" type="button" t-on-click="_onClickAddAttachment" style="background: var(--layout-color);color: #fff;" />
+                        </div>
+                        <TextInput class="o_Composer_textInput" t-att-class="{
+                            'o-composer-is-compact': props.isCompact,
+                            'o_Composer_textInput-mobile': env.messaging.device.isMobile,
+                            'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                        }" composerLocalId="composer.localId" hasMentionSuggestionsBelowPosition="props.hasMentionSuggestionsBelowPosition" isCompact="props.isCompact" sendShortcuts="props.textInputSendShortcuts" t-on-o-composer-suggestion-clicked="_onComposerSuggestionClicked" t-on-o-composer-text-input-send-shortcut="_onComposerTextInputSendShortcut" t-on-paste="_onPasteTextInput" t-key="composer.localId" t-ref="textInput" />
+                        <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-mobile': env.messaging.device.isMobile }">
+                            <div class="o_Composer_toolButtons" t-att-class="{
+                                'o-composer-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                                'o-composer-is-compact': props.isCompact,
+                            }">
+                                <t t-if="props.isCompact">
+                                    <div class="o_Composer_toolButtonSeparator" />
+                                </t>
+                                <t t-if="props.isExpandable">
+                                    <div class="o_Composer_secondaryToolButtons">
+                                        <button class="btn btn-light fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" aria-label="Full composer" type="button" t-on-click="_onClickFullComposer" />
+                                    </div>
+                                </t>
+                            </div>
+                            <t t-if="props.isCompact">
+                                <t t-call="mail.Composer.actionButtons" />
+                            </t>
+                        </div>
+                    </div>
+                    <t t-if="hasFooter">
+                        <div class="o_Composer_coreFooter" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                            <t t-if="props.hasThreadTyping">
+                                <ThreadTextualTypingStatus class="o_Composer_threadTextualTypingStatus" threadLocalId="composer.thread.localId" />
+                            </t>
+                            <t t-if="composer.attachments.length > 0">
+                                <AttachmentList class="o_Composer_attachmentList" t-att-class="{ 'o-composer-is-compact': props.isCompact }" areAttachmentsEditable="true" attachmentsDetailsMode="props.attachmentsDetailsMode" attachmentsImageSize="'small'" attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)" showAttachmentsExtensions="props.showAttachmentsExtensions" showAttachmentsFilenames="props.showAttachmentsFilenames" />
+                            </t>
+                            <t t-if="!props.isCompact">
+                                <t t-call="mail.Composer.actionButtons" />
+                            </t>
+                        </div>
+                    </t>
+                </t>
+            </div>
+        </xpath>
+    </t>
+    <t name="mail.Composer.actionButtonsAdvanced" t-inherit="mail.Composer.actionButtons" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('o_Composer_actionButtons')]" position="replace">
+            <div class="o_Composer_actionButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                <t t-if="props.hasSendButton">
+                    <button class="o_Composer_actionButton o_Composer_button o_Composer_buttonSend btn btn-primary" t-att-class="{
+                        'fa': env.messaging.device.isMobile,
+                        'fa-paper-plane-o': env.messaging.device.isMobile,
+                        'o-last': env.messaging.device.isMobile or !props.hasDiscardButton,
+                        'o-composer-is-compact': props.isCompact,
+                        'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                    }" t-att-disabled="!composer.canPostMessage ? 'disabled' : ''" type="button" t-on-click="_onClickSend" style="background:var(--layout-color);opacity: 1;">
+                        <t t-if="!env.messaging.device.isMobile">
+                            <t t-if="composer.isLog"><i class="fa fa-paper-plane" />
+                                Send</t>
+                            <t t-else=""><i class="fa fa-paper-plane" />
+                                Send</t>
+                        </t>
+                    </button>
+                </t>
+                <t t-if="!env.messaging.device.isMobile and props.hasDiscardButton">
+                    <button class="o_Composer_actionButton o-last o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar }" type="button" t-on-click="_onClickDiscard">
+                        Discard
+                    </button>
+                </t>
+            </div>
+        </xpath>
+    </t>
+</templates>

whatsapp_chat_layout/static/src/xml/discuss_sidebar_advanced_templates.xml

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--Rearranged the DiscussSidebar template-->
+<templates id="template" xml:space="preserve">
+    <t name="mail.DiscussSidebarAdvanced" t-inherit="mail.DiscussSidebar" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('o_DiscussSidebar')]" position="replace">
+            <div name="root" class="o_DiscussSidebar">
+                <div style="background-color:var(--layout-color); margin-top: -10px;">
+                    <div id="img" style="margin-bottom: -53px;" />
+                    <div class="header d-flex justify-content-center">
+                        <div class="o_DiscussSidebar_startAMeetingButton opacity-75 fa fa-inbox" title="Mail" id="mail" t-on-click="_onClickMail" />
+                        <div class="o_DiscussSidebar_startAMeetingButton fa fa-comments-o" title="Chat" id="chat" t-on-click="_onClickChat" />
+                        <div class="o_DiscussSidebar_startAMeetingButton fa fa-users" title="Channel" id="channel" t-on-click="_onClickChannel" />
+                    </div>
+                </div>
+                <div class="o_DiscussSidebar_group o_DiscussSidebar_groupMailbox mail d-none">
+                    <t t-foreach="orderedMailboxes" t-as="mailbox" t-key="mailbox.localId">
+                        <DiscussSidebarItem class="o_DiscussSidebar_item" threadLocalId="mailbox.localId" />
+                    </t>
+                </div>
+                <hr class="o_DiscussSidebar_separator" />
+                <t t-if="env.models['mail.thread'].all(thread => thread.isPinned and thread.model === 'mail.channel').length > 19">
+                    <input class="o_DiscussSidebar_quickSearch" t-on-input="_onInputQuickSearch" placeholder="Quick search..." t-ref="quickSearchInput" t-esc="discuss.sidebarQuickSearchValue" />
+                </t>
+                <div class="o_DiscussSidebar_group o_DiscussSidebar_groupChannel channel d-none">
+                    <div class="o_DiscussSidebar_groupHeader">
+                        <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupTitle o-clickable" t-on-click="_onClickChannelTitle">
+                            Channels
+                        </div>
+                        <div class="o-autogrow" />
+                        <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupHeaderItemAdd fa fa-plus" t-on-click="_onClickChannelAdd" title="Add or join a channel" />
+                    </div>
+                    <div class="o_DiscussSidebar_list">
+                        <t t-if="discuss.isAddingChannel">
+                            <div class="o_DiscussSidebar_item o_DiscussSidebar_itemNew">
+                                <AutocompleteInput class="o_DiscussSidebar_itemNewInput" customClass="'o_DiscussSidebar_newChannelAutocompleteSuggestions'" isFocusOnMount="true" isHtml="true" placeholder="FIND_OR_CREATE_CHANNEL" select="_onAddChannelAutocompleteSelect" source="_onAddChannelAutocompleteSource" t-on-o-hide="_onHideAddingItem" />
+                            </div>
+                        </t>
+                        <t t-foreach="quickSearchOrderedAndPinnedMultiUserChannels" t-as="channel" t-key="channel.localId">
+                            <DiscussSidebarItem class="o_DiscussSidebar_item" threadLocalId="channel.localId" />
+                        </t>
+                    </div>
+                </div>
+                <div class="o_DiscussSidebar_group o_DiscussSidebar_groupChat chat">
+                    <div class="o_DiscussSidebar_groupHeader">
+                        <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupTitle">
+                            Direct Messages
+                        </div>
+                        <div class="o-autogrow" />
+                        <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupHeaderItemAdd fa fa-plus" t-on-click="_onClickChatAdd" title="Start a conversation" />
+                    </div>
+                    <div class="o_DiscussSidebar_list">
+                        <t t-if="discuss.isAddingChat">
+                            <div class="o_DiscussSidebar_item o_DiscussSidebar_itemNew">
+                                <AutocompleteInput class="o_DiscussSidebar_itemNewInput" isFocusOnMount="true" placeholder="'Find or start a conversation...'" select="_onAddChatAutocompleteSelect" source="_onAddChatAutocompleteSource" t-on-o-hide="_onHideAddingItem" />
+                            </div>
+                        </t>
+                        <t t-foreach="quickSearchPinnedAndOrderedChats" t-as="chat" t-key="chat.localId">
+                            <DiscussSidebarItem class="o_DiscussSidebar_item" threadLocalId="chat.localId" />
+                        </t>
+                    </div>
+                </div>
+            </div>
+        </xpath>
+    </t>
+</templates>

whatsapp_chat_layout/views/assets.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--    Adding assets -->
+    <template id="assets_backend" name="im assets"
+              inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <script type="text/javascript"
+                    src="/whatsapp_chat_layout/static/src/js/discuss_sidebar.js"/>
+            <script type="text/javascript"
+                    src="/whatsapp_chat_layout/static/src/js/discuss_container.js"/>
+            <link rel="stylesheet" type="text/css"
+                  href="/whatsapp_chat_layout/static/src/css/whatsapp_chat_layout.css"/>
+        </xpath>
+    </template>
+</odoo>

whatsapp_chat_layout/views/res_config_settings_views.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--Adding color and image field in settings-->
+<odoo>
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">res.config.settings.view.form.inherit.whatsapp.chat.layout</field>
+        <field name="model">res.config.settings</field>
+        <field name="priority" eval="0"/>
+        <field name="inherit_id" ref="base.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@id='activities_setting']" position="after">
+                <div class="col-12 col-lg-6 o_setting_box">
+                    <div class="o_setting_right_pane">
+                        <label for="background_color"/>
+                        <div class="text-muted">
+                            Select the Background color for discuss.
+                        </div>
+                        <field name="background_color" widget="color"/>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <label for="layout_color"/>
+                        <div class="text-muted">
+                            Select the Layout color for discuss.
+                        </div>
+                        <field name="layout_color" widget="color"/>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <label for="chat_background" class="ml-4" required="1"/>
+                        <div class="text-muted">
+                            Select the Background image for discuss.
+                        </div>
+                        <field name="chat_background" widget="image"/>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>