Enable Dark Mode!
how-to-create-a-chat-window-from-the-systray-in-odoo-15.jpg
By: Swapna

How to Create a Chat Window From the Systray in Odoo 15

Technical Odoo 15

Here, in this blog, we are going to discuss how to create/open a chat window from the systray. What is systray? Systray is the top navbar of the Odoo interface. 

We already have a blog regarding how to add an icon in Systray in Odoo 15. Please refer for more information, https://www.cybrosys.com/blog/how-to-add-an-icon-in-systray-in-odoo-15.

Let us come back to the chat window. First, I am going to add a chat icon on the systray.

/** @odoo-module **/import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import {ChatView} from './chat_notification';
class SystrayChatIcon extends owl.Component {
setup() {
super.setup(...arguments);
this.action = useService("action");
this.chat = new ChatView();
}
_onClick() {
this.chat.toggle();
}
}
SystrayChatIcon.template = "clientsupportSystray";

export const systrayItem = {
Component: SystrayChatIcon,
};
registry.category("systray").add("SystrayChatIcon", systrayItem, { sequence: 1 });
Create a js file for getting icons on systray. And we need to add a view for that. “clientsupportSystray” is the corresponding template for the systray icon. ( refer below)
<t t-name="clientsupportSystray" owl="1">
    <div class="dropdown">
        <a href="#" t-on-click="_onClick">
            <img id='create_chat' style="width: 15px; opacity: 0.9"
                src="cybrosys_support_client/static/src/img/systray_icon.svg" aria-label="client support" />
        </a>
    </div>
</t>

“ChatView” is the template for the chat window. This “ChatView” store to a variable ‘this.chat’

this.chat = new ChatView();

<t t-name="ChatView" owl="1">
    <!-- Chatbot -->
    <div class="botIcon">
        <div class="Layout Layout-open Layout-expand Layout-right">
            <div class="Messenger_messenger">
                <div class="Messenger_header">
                    <h4 class="Messenger_prompt">Cybrosys</h4> <span class="chat_close_icon"><i
                            class="fa fa-window-close" aria-hidden="false" t-on-click="close"></i></span>
                </div>
                <div class="Messenger_content">
                    <div class="Messages">
                        <div class="Messages_list" />
                    </div>
                    <form id="messenger">
                        <div class="Input Input-blank">
                            <!--                     <textarea name="msg" class="Input_field" placeholder="Send a message..."></textarea> -->
                            <input name="msg" class="Input_field" placeholder="Send a message..." />
                            <button type="button" class="Input_button Input_button-send" t-on-click="_sendMessage">
                                <div class="Icon">
                                    <img src="cybrosys_support_client/static/src/img/send-message.svg" />
                                </div>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Chatbot -->
</t>

Next, we want to create a js file for getting chat notifications(See below codes). Here we are extending ‘ChatView’. And we are rendering old messages ‘willstart’  function. After that, add a key-down function for the purpose of sending. As per the below code, if we click enter, the message will send. Also, we have separate functions for sending messages and rendering messages.

/** @odoo-module **/import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { useListener } from 'web.custom_hooks';
import ajax from 'web.ajax';
export class ChatView extends owl.Component {
setup(){
super.setup(...arguments);
this.state = owl.useState({
'open': false
});
useListener('keydown', this._onKeydown);
}
async willStart() {
await this._renderOldMessages();
}
_onKeydown(ev){
if(ev.key == "Enter"){
ev.preventDefault();
this._sendMessage(ev);
}
}
open(){
this.mount(document.body)
this.state.open = true;
}
close(){
this.unmount()
this.state.open = false;
}
toggle(){
if(this.state.open){
this.close();
} else {
this.open();
}
}
_sendMessage(ev){
let form = $(ev.target).closest('form');
let message = form.find('input').val();
if(message){
ajax.jsonRpc('/chat/send', 'call', {
message: message
}).then( (data) => {
form.find('input').val('');
this._renderOldMessages();
});
}
}
_renderOldMessages(){
$('.Messages_list').empty();
ajax.jsonRpc('/chat/load', 'call', {}).then(function (data) {
if(data){
for (var chat of data){
if(chat.send){
$('.Messages_list').append('<div class="msg user"><span class="responsText">' + chat.message + '</span></div>');
} else {
$('.Messages_list').append('<div class="msg"><span class="responsText">' + chat.message + '</span></div>');
}
}
}
});
}
}
ChatView.template = 'ChatView';

We need to add a controller for loading old chats and sending messages.

@route('/chat/load', type='json', auth='user')
def load_chat(self):
user_id = request.env.uid
chats = request.env['chat.support.chat'].search([
('user_id', '=', user_id)
])
if chats:
chats_list = []
for chat in chats:
chats_list.append({
'message': chat.message,
'send': chat.send,
'create_date': chat.create_date,
})
return chats_list
return False
@route('/chat/send', type='json', auth='user')
def send_message(self):
user_id = request.env.uid
request.env['chat.support.chat'].create({
'user_id': user_id,
'message': request.jsonrequest.get('params')['message'],
'send': True
})

These all are the development part. Next, let me share the view.

how-to-create-a-chat-window-from-the-systray-in-odoo-15-cybrosys

These are all about how to create/Open a chat window from the systray icon.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp_icon
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message