.

Hello CTS, definitely better... but not quite working.

I'm getting this error message:

OwlError: Missing template: "adjuntohub.ChatContentTemplate" (for component "ChatComponent")

Which I find strange, because when I put <owl-component> on the main page it finds the template.  So I'm pretty sure the manifest is ok

here is the component:

/** @odoo-module **/
import { useService } from "@web/core/utils/hooks";
import { Component } from "@odoo/owl";  
import { registry } from "@web/core/registry";

export class ChatComponent extends Component {

    static template = 'adjuntohub.ChatContentTemplate';
    static props = {
        sessionId: { type: String, optional: true },  // chat session id as string
    };

    setup() {
        console.info("ChatComponent(), setup(), start...");
        this.mail_store_service = useService("adjuntohub.ChatService");
        this.chat_id = parseInt(this.props.sessionId);
        console.info("ChatComponent(), setup(), chat_id is %d.  End.", this.chat_id);
    }

    async onClickChat(ev) {
        ev.preventDefault();
        if (!this.props.sessionId) {
            console.warn("ChatComponent.onClickChat(): sessionId not provided as prop, hard coding to 20 (subject 1336-sv) for testing");
            this.props.sessionId = "20";
        }
        const chat_id = parseInt(this.props.sessionId); 
        console.info("ChatComponent.onClickChat(chat_id=%d) start...", chat_id);  // chat_id -> channel_id

        if (chat_id) {
            console.info("  chat_id present, try to open the chat");
            await this.mail_store_service.open_specific_chat(chat_id);
        } else {
            console.warn("chat_id not present");
        }
        console.info("ChatComponent.onClickChat(chat_id=%d) end", chat_id);

    }
}

registry.category("public_components").add("adjuntohub.ChatComponent", ChatComponent);

Here is the component template:

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve" >

    <t t-name="adjuntohub.ChatContentTemplate" >  <!-- owl="1" didn't change anything -->
        <p> OWL component adjunto_hub.ChatContent</p>
        <button t-on-click="onClickChat" 
            id="chat-button" 
            t-att-data-chat-id="chat_id" 
            class="btn btn-primary">
            Open Chat
        </button>
        <p>chat_session_id=<t t-esc="chat_session_id"/> </p>
    </t>
</templates>

Here is the crucial part I didn't have in my widget, mounting the component:

// Dynamically mount the OWL component
// Find the <owl-component> element inside the inserted HTML
const owlEl = $chatBlock[0].querySelector('owl-component');
if (owlEl) {
    const cc = registry.category("public_components").get("adjuntohub.ChatComponent");
    mount(cc, { target: owlEl });  
}

So the controller renders the html and the javascript correctly places it.  And then this code tries to mount it.

What I don't see is any sign of the component being initialized.  I did see that when I had the component on my main page (the page rendered with http).  But I removed the component from that page. 

Things I've tried:
adding owl="1" attribute to the template
using components instead of public_components
I tried a few variations of mountComponent but still got the same error.

And, I don't know if this makes a difference, but I couldn't find this._rpc(...) so I used just rpc(...)

Any ideas?  Maybe look at cc, see if is has a template?
Thank for your help, much obliged.

Hi,

You need to:

    Return the template HTML via JSON as you do.

    After inserting the HTML, manually mount the OWL component using @web/owl utilities.

Step 1: Import necessary OWL modules in your widget JS

/** chat_widget.js **/

import { registry } from "@web/core/registry";

import { Component } from "@odoo/owl";

import { mount } from "@odoo/owl";

import { publicWidget } from "web.public.widget";

Step 2: Update your widget _setupSubjectDetail method

_setupSubjectDetail: async function(in_userSubjectId) {

    // Fetch the template HTML via RPC

    const chatButtonResult = await this._rpc({

        route: "/dashboard/usersubject/chatbutton",

        params: { userSubject_id: in_userSubjectId },

    });

    // Insert HTML into the DOM

    const $chatBlock = $('#chat-block');

    $chatBlock.html(chatButtonResult.html);

    // Dynamically mount the OWL component

    // Find the <owl-component> element inside the inserted HTML

    const owlEl = $chatBlock[0].querySelector('owl-component');

    if (owlEl) {

        const ChatComponent = registry.category("components").get("myapp.ChatComponent");

        mount(ChatComponent, { target: owlEl });

    }

}

Step 3: Ensure your OWL component is registered

/** chat_component.js **/

import { Component } from "@odoo/owl";

import { registry } from "@web/core/registry";

export class ChatComponent extends Component {

    static template = "myapp.ChatComponentTemplate";

}

registry.category("components").add("myapp.ChatComponent", ChatComponent);

* ChatComponentTemplate is your OWL template ID in XML (chat_template.xml).

* Ensure the template is loaded via assets (web.assets_frontend).

Step 4: Controller remains type='json'

No need to change the Python controller. Your current setup works:

@http.route('/dashboard/usersubject/chatbutton', type='json', auth='user')

def getChatButton(self, userSubject_id=None, **_kw):

    # Prepare the template HTML

    html_content = request.env['ir.ui.view']._render_template(

        "myapp.chat-button-content",

        {'chat_session_id': livechat_channel_session.id}

    )

    return {'html': str(html_content)}

- OWL does not auto-initialize components inserted via AJAX/JSON.

- After inserting the HTML, you must mount the OWL component manually.

- Use registry to fetch the component and mount from @odoo/owl.

- Keep controller type='json' for AJAX loading — no need to convert to http.

Hope it helps