feat(odoo): add OWL chat widget
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude AI
120
odoo_whatsapp_hub/static/src/js/chat_widget.js
Normal file
120
odoo_whatsapp_hub/static/src/js/chat_widget.js
Normal file
@@ -0,0 +1,120 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import { registry } from "@web/core/registry";
|
||||
import { useService } from "@web/core/utils/hooks";
|
||||
import { Component, useState, onWillStart, onMounted } from "@odoo/owl";
|
||||
|
||||
export class WhatsAppChatWidget extends Component {
|
||||
static template = "odoo_whatsapp_hub.ChatWidget";
|
||||
static props = {
|
||||
conversationId: { type: Number, optional: true },
|
||||
partnerId: { type: Number, optional: true },
|
||||
};
|
||||
|
||||
setup() {
|
||||
this.orm = useService("orm");
|
||||
this.state = useState({
|
||||
conversation: null,
|
||||
messages: [],
|
||||
newMessage: "",
|
||||
loading: true,
|
||||
});
|
||||
|
||||
onWillStart(async () => {
|
||||
await this.loadConversation();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
}
|
||||
|
||||
async loadConversation() {
|
||||
this.state.loading = true;
|
||||
|
||||
try {
|
||||
if (this.props.conversationId) {
|
||||
const conversations = await this.orm.searchRead(
|
||||
"whatsapp.conversation",
|
||||
[["id", "=", this.props.conversationId]],
|
||||
["id", "display_name", "phone_number", "status"]
|
||||
);
|
||||
if (conversations.length) {
|
||||
this.state.conversation = conversations[0];
|
||||
await this.loadMessages();
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
this.state.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async loadMessages() {
|
||||
if (!this.state.conversation) return;
|
||||
|
||||
const messages = await this.orm.searchRead(
|
||||
"whatsapp.message",
|
||||
[["conversation_id", "=", this.state.conversation.id]],
|
||||
["id", "direction", "content", "message_type", "status", "create_date"],
|
||||
{ order: "create_date asc" }
|
||||
);
|
||||
this.state.messages = messages;
|
||||
|
||||
const unreadIds = messages
|
||||
.filter(m => m.direction === "inbound" && !m.is_read)
|
||||
.map(m => m.id);
|
||||
if (unreadIds.length) {
|
||||
await this.orm.write("whatsapp.message", unreadIds, { is_read: true });
|
||||
}
|
||||
|
||||
this.scrollToBottom();
|
||||
}
|
||||
|
||||
async sendMessage() {
|
||||
if (!this.state.newMessage.trim() || !this.state.conversation) return;
|
||||
|
||||
const content = this.state.newMessage;
|
||||
this.state.newMessage = "";
|
||||
|
||||
await this.orm.call(
|
||||
"whatsapp.message",
|
||||
"send_message",
|
||||
[this.state.conversation.id, content]
|
||||
);
|
||||
|
||||
await this.loadMessages();
|
||||
}
|
||||
|
||||
scrollToBottom() {
|
||||
const container = document.querySelector(".o_whatsapp_messages");
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
formatTime(dateStr) {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
|
||||
getStatusIcon(status) {
|
||||
const icons = {
|
||||
pending: "fa-clock-o",
|
||||
sent: "fa-check",
|
||||
delivered: "fa-check-double text-muted",
|
||||
read: "fa-check-double text-primary",
|
||||
failed: "fa-exclamation-circle text-danger",
|
||||
};
|
||||
return icons[status] || "";
|
||||
}
|
||||
|
||||
onKeyPress(ev) {
|
||||
if (ev.key === "Enter" && !ev.shiftKey) {
|
||||
ev.preventDefault();
|
||||
this.sendMessage();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registry.category("public_components").add("WhatsAppChatWidget", WhatsAppChatWidget);
|
||||
57
odoo_whatsapp_hub/static/src/xml/chat_widget.xml
Normal file
57
odoo_whatsapp_hub/static/src/xml/chat_widget.xml
Normal file
@@ -0,0 +1,57 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="odoo_whatsapp_hub.ChatWidget">
|
||||
<div class="o_whatsapp_chat_container">
|
||||
<t t-if="state.loading">
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
<i class="fa fa-spinner fa-spin fa-2x"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-elif="state.conversation">
|
||||
<!-- Header -->
|
||||
<div class="o_whatsapp_chat_header">
|
||||
<div class="avatar">
|
||||
<t t-esc="state.conversation.display_name[0]"/>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name" t-esc="state.conversation.display_name"/>
|
||||
<div class="contact-status" t-esc="state.conversation.phone_number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<div class="o_whatsapp_messages">
|
||||
<t t-foreach="state.messages" t-as="message" t-key="message.id">
|
||||
<div t-attf-class="o_whatsapp_message #{message.direction}">
|
||||
<div class="message-content" t-esc="message.content"/>
|
||||
<div class="message-meta">
|
||||
<span t-esc="formatTime(message.create_date)"/>
|
||||
<t t-if="message.direction === 'outbound'">
|
||||
<i t-attf-class="fa #{getStatusIcon(message.status)} message-status"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="o_whatsapp_input_area">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Escribe un mensaje..."
|
||||
t-model="state.newMessage"
|
||||
t-on-keypress="onKeyPress"
|
||||
/>
|
||||
<button t-on-click="sendMessage">
|
||||
<i class="fa fa-paper-plane"/>
|
||||
</button>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="d-flex justify-content-center align-items-center h-100 text-muted">
|
||||
<span>Selecciona una conversación</span>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user