Skip to content

How to reliably check Copilot widget readiness and send "silent" frontend messages? #2199

@fracerma

Description

@fracerma

Hi Chainlit Team,

We're working on integrating the Chainlit Copilot widget into our frontend application and have encountered a couple of challenges where we'd appreciate some guidance or clarification.

1. Reliably Checking Copilot Widget Readiness:

We need to send an initial system message (e.g., with user context) from our frontend to the Chainlit backend as soon as the Copilot widget is fully mounted and ready to process messages via window.sendChainlitMessage.

We've observed that window.sendChainlitMessage might exist as a placeholder function even before the widget is fully operational, logging a message like "Copilot is not active. Please check if the widget is mounted." This makes simply checking for typeof window.sendChainlitMessage === 'function' unreliable for determining true readiness.

We've attempted a few strategies:

  • Polling for window.sendChainlitMessage to change from its placeholder (difficult to distinguish).
  • Listening for a specific event like chainlit-ready (couldn't find documentation or observe this event firing reliably).
  • Polling for the existence of a specific DOM element that the widget creates (e.g., document.getElementById("chainlit-copilot")). This seems like the most promising approach so far, but we're unsure if there's a specific, guaranteed DOM element ID or class, or a more official "ready" event/callback we should be using.

Question: What is the recommended, most reliable method to programmatically determine from the frontend JavaScript that the Chainlit Copilot widget has finished its initialization and is ready to successfully process messages sent via window.sendChainlitMessage? Is there a specific event, callback, or state we can check?

2. Sending "Silent" Messages from Frontend to Backend:

We have use cases where we'd like to send contextual information from the frontend to the Chainlit backend (e.g., user's current page, specific UI state) that should be processed by the agent but not displayed as a message in the chat interface visible to the end-user. This is similar to how a "system message" might work, but initiated from the client-side after initial load.

Currently, messages sent via window.sendChainlitMessage({ type: "system_message", output: "..." }) seem to be handled by the @cl.on_message decorator, but we're unsure if the system_message type (or another type) inherently prevents rendering in the chat UI, or if there's a different mechanism for this.

Question: Is there a way to use window.sendChainlitMessage (or another frontend utility) to send data/messages to the Chainlit backend that are processed by the agent logic but are not rendered in the chat UI? If so, how should these messages be structured (e.g., specific type, output vs. content, metadata)?

Any insights or examples on these two points would be greatly appreciated!

Thank you for the great work on Chainlit!

Metadata

Metadata

Assignees

No one assigned

    Labels

    frontendPertains to the frontend.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions