+
+
+
+
+
+
+
diff --git a/whatsapp_chat_layout/static/src/css/color.css b/whatsapp_chat_layout/static/src/css/color.css
new file mode 100644
index 000000000..4697e487b
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/color.css
@@ -0,0 +1,23 @@
+:root{
+ --background-color: #ffffff;
+ --layout-color: #3a8180;
+}
+
+.o-mail-DiscussSidebarCategory{
+ height: 74px;
+ background-color: white !important;
+}
+.o-mail-DiscussSidebarCategory span{
+ color: black!important;
+}
+
+.o-mail-DiscussSidebarCategory-icon{
+ color: black!important;
+}
+.o-mail-DiscussSidebarCategory-add{
+ color: black!important;
+}
+
+i.o_DiscussSidebarCategory_command{
+ color: black!important;
+}
\ No newline at end of file
diff --git a/whatsapp_chat_layout/static/src/css/discuss.css b/whatsapp_chat_layout/static/src/css/discuss.css
new file mode 100644
index 000000000..0d5bba140
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/discuss.css
@@ -0,0 +1,54 @@
+.o_DiscussSidebar{
+ width: 400px;
+}
+.o_DiscussSidebar_startAMeetingButton {
+ font-size: 24px;
+ width: 55px;
+ height: 65px;
+ background-color: #eeedee!important;
+ color: #979797;
+ border-color: #eeedee;
+ margin-left: 10px;
+ padding-top: 18px;
+}
+
+.header {
+ margin-left: 200px;
+}
+
+.text-700 {
+ color: gray!important;
+}
+
+.o-mail-DiscussSidebarCategory{
+ height: 74px;
+ background-color: var(--layout-color) !important;
+}
+.o-mail-DiscussSidebarCategory span{
+ color: white!important;
+}
+
+.o-mail-DiscussSidebarCategory-icon{
+ color: white!important;
+}
+.o-mail-DiscussSidebarCategory-add{
+ color: white!important;
+}
+
+i.o_DiscussSidebarCategory_command{
+ color: white!important;
+}
+
+.o_DiscussSidebar{
+ background-color: #FFFFFF!important;
+}
+.o-mail-ThreadIcon {
+ border-radius: 50%;
+ font-size: 34px;
+ padding-right: 15px;
+ color: var(--layout-color) !important;
+}
+.o-mail-DiscussSidebar-item {
+ color: black;
+ font-size: 17px;
+}
diff --git a/whatsapp_chat_layout/static/src/css/thread.css b/whatsapp_chat_layout/static/src/css/thread.css
new file mode 100644
index 000000000..a23858ad4
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/thread.css
@@ -0,0 +1,49 @@
+.o_ThreadViewTopbar {
+ height: 66px;
+ background-color: #eeedee!important;
+}
+
+.o-mail-Thread.o_ThreadView_messageList {
+ background-color: var(--background-color) !important;
+ background-image: var(--background-image) !important;
+ background-repeat:no-repeat;
+ background-size:cover;
+}
+.o-mail-Thread.o_ThreadView_messageList{
+ background-color: var(--background-color) !important;
+ background-image: var(--background-image) !important;
+ background-repeat:no-repeat;
+ background-size:cover;
+}
+.o_Composer{
+ background-color: #eeedee!important;
+ height: 85px;
+ padding-top: 15px!important;
+}
+
+button.o_Composer_toolButton{
+ font-size: 25px;
+ background-color: #eeedee;
+}
+.o_Composer_toolButtons {
+ height: 50px;
+ background-color: #eeedee!important;
+}
+
+button.o-mail-Composer-send.o-mail-Composer-send {
+ background-color: var(--layout-color) !important;
+ color: white;
+}
+.o_Message.o_MessageList_item.o_MessageList_message {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: end;
+}
+.o_Message.o_MessageList_item.o_MessageList_message {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: end;
+}
+.text-break {
+ word-break: inherit!important;
+}
\ No newline at end of file
diff --git a/whatsapp_chat_layout/static/src/js/Thread.js b/whatsapp_chat_layout/static/src/js/Thread.js
new file mode 100644
index 000000000..027da294d
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/Thread.js
@@ -0,0 +1,13 @@
+import { Thread } from "@mail/core/common/thread_model";
+import { patch } from "@web/core/utils/patch";
+
+//Patching Thread Component
+patch(Thread.prototype, {
+ setup() {
+ super.setup(...arguments);
+ },
+ async leave() {
+ super.leave(...arguments);
+ await location.reload();
+ },
+});
diff --git a/whatsapp_chat_layout/static/src/js/discuss_container.js b/whatsapp_chat_layout/static/src/js/discuss_container.js
new file mode 100644
index 000000000..51fbc70b6
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_container.js
@@ -0,0 +1,30 @@
+import { Discuss } from "@mail/core/public_web/discuss";
+import { patch} from "@web/core/utils/patch";
+import { rpc } from "@web/core/network/rpc";
+const { useRef } = owl;
+import { onMounted } from "@odoo/owl";
+
+patch(Discuss.prototype, {
+ setup() {
+ super.setup(...arguments);
+ this.core = useRef("core");
+ onMounted(async () => {
+ var self = this;
+ await rpc('/select_color', {}).then(function(result) {
+ if (result.background_color !== false){
+ self.core.el.style.setProperty("background-color",result.background_color
+ );
+ }
+ if (result.layout_color !== false){
+ document.documentElement.style.setProperty("layout-color",result.layout_color);
+ }
+ if (result.background_image !== false){
+ self.core.el.style.setProperty("background-image",'url(data:image/png;base64,'+result.background_image+')',"important");
+ self.core.el.style.setProperty("background-size", "cover", "important");
+ self.core.el.style.setProperty("background-position", "center", "important");
+ self.core.el.style.setProperty("background-repeat", "no-repeat", "important");
+ }
+ });
+ });
+ },
+});
diff --git a/whatsapp_chat_layout/static/src/js/discuss_sidebar.js b/whatsapp_chat_layout/static/src/js/discuss_sidebar.js
new file mode 100644
index 000000000..b453c7c23
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_sidebar.js
@@ -0,0 +1,79 @@
+/** @odoo-module **/
+import { patch } from "@web/core/utils/patch";
+import { MessagingMenu } from "@mail/core/public_web/messaging_menu";
+import { DiscussSidebar } from "@mail/core/public_web/discuss_sidebar";
+import { DiscussSidebarMailboxes } from "@mail/core/web/discuss_sidebar_mailboxes";
+import { ChannelSelector } from "@mail/discuss/core/web/channel_selector";
+import { VoiceRecorder } from "@mail/discuss/voice_message/common/voice_recorder";
+import { onMounted, onWillStart, useRef } from "@odoo/owl";
+import { useState } from "@odoo/owl";
+import { rpc } from "@web/core/network/rpc";
+import { DiscussSidebarChannel } from "@mail/discuss/core/public_web/discuss_sidebar_categories";
+import { DiscussSidebarCategory } from "@mail/discuss/core/public_web/discuss_sidebar_categories";
+import { cleanTerm } from "@mail/utils/common/format";
+import { useService } from "@web/core/utils/hooks";
+
+patch(DiscussSidebar.prototype, {
+setup() {
+ super.setup();
+ this.root = useRef("root")
+ this.state = useState({
+ sidebar: 'channels',
+ chat: 'chats',
+ quickSearchVal: "",
+ floatingQuickSearchOpen: false
+ });
+ this.store = useState(useService("mail.store"));
+ // Use the same filteredThreads logic as DiscussSidebarCategories
+ this.filteredThreads = (threads) => {
+ return threads.filter(
+ (thread) =>
+ thread.displayInSidebar &&
+ (thread.parent_channel_id ||
+ !this.state.quickSearchVal ||
+ cleanTerm(thread.displayName).includes(cleanTerm(this.state.quickSearchVal)))
+ );
+ };
+
+ onWillStart(async () => {
+ await rpc('/select_color', {}).then(function(result) {
+ const root = document.documentElement;
+ if (result.background_color !== false){
+ root.style.setProperty("--background-color",result.background_color);
+ }
+ })
+ });
+ onMounted(this.sidebar)
+ },
+
+ sidebar(){
+ var self = this
+ rpc('/select_user_image', {}).then(function(result) {
+ let image = document.createElement('div')
+ image.innerHTML = '
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Detailed Whatsapp Chat Layout in Odoo Discuss View. +
+Whatsapp Chat Layout in Odoo Discuss +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Dynamically change background and Layout color. +
++
+
+
+
+
+
+
+
+
+ + Dynamically change background image. +
++
+
+
+
+
+
+
+
+
+ + Current user chat view in left side. +
++
+
+
+
+
+
+
+
+
+ + Easy to Use and Manage. +
++
+
+
+
+
+
+
+
+
+ Whatsapp Chat Layout in Odoo Discuss.
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Rearranged the sidebar and the Chatter. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Click Mail icon to view the inbox,starred and history messages. + + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Click Chat icon to view the Direct messages. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Click Channel icon to view the Channels. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Click Start a meeting icon to start a group video call. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Current user chat view in left side. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Change background color and layout color in configuration settings. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + After Changing. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Change background image in configuration settings. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + After Setting the Background Image. + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Dynamically change background and Layout color. +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + Dynamically change background image.
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + Current user chat view in left side.
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + Easy to Use and Manage.
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + It changes Odoo’s chat interface to a WhatsApp-style layout. +
+
+
+
+
+
+ + Yes, you can change both from the configuration settings. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 22nd October, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + +
+
+
+
+
+
+
+
+ Related Modules
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+ 
'
+ self.root.el.querySelector('#img').appendChild(image);
+ });
+ },
+ _onClickMail(ev) {// Click function of mail button
+ this.root.el.querySelector('.mail').classList.remove("d-none");
+ this.root.el.querySelector('.channel').classList.add("d-none");
+ this.root.el.querySelector('.chat').classList.add("d-none");
+ },
+ _onClickChat(ev) {// Click function of chat button
+ this.root.el.querySelector('.chat').classList.remove("d-none");
+ this.root.el.querySelector('.mail').classList.add("d-none");
+ this.root.el.querySelector('.channel').classList.add("d-none");
+ this.state.sidebarChannel = 'chat'
+ },
+ _onClickChannel(ev) {// Click function of channel button
+ this.root.el.querySelector('.channel').classList.remove("d-none");
+ this.root.el.querySelector('.mail').classList.add("d-none");
+ this.root.el.querySelector('.chat').classList.add("d-none");
+ this.state.sidebarChat = 'channel'
+ },
+});
+
+DiscussSidebar.components = {
+ ...DiscussSidebar.components,
+ DiscussSidebarMailboxes, ChannelSelector, MessagingMenu, DiscussSidebarCategory, VoiceRecorder, DiscussSidebarChannel
+};
diff --git a/whatsapp_chat_layout/static/src/xml/composer.xml b/whatsapp_chat_layout/static/src/xml/composer.xml
new file mode 100644
index 000000000..09cc8a09c
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/xml/composer.xml
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select the Background color for discuss.
+
+
+
+
+
+ Select the Layout color for discuss.
+
+
+
+
+
+ Select the Background image for discuss.
+
+