Support for extensible elements

[nethi]

Is your feature request related to a problem? Please describe.
I have a custom chatbot frontend (based on Chainlit frontend). I would like to display content like mermaid.js, Panda dataframes etc.

Describe the solution you'd like
Ability to define an custom Element and register with Chainlit. It is up to custom frontends what to do with it.

Describe alternatives you've considered
Component element can potentially be used but it will be unweildy.

Additional context

[dokterbob]

@dosu What do you think about it?

[dosubot]

Hey @dokterbob! I'm here to help you with any bugs, questions, or contributions while you wait for a human maintainer. Let's tackle this together!

There are two similar open issues that might be relevant:

1. Custom Elements, last updated on September 18, 2024.
2. How to create a custom UI component like a dropdown under the message generated using custom js, last updated on July 14, 2024. This issue has no comments or solution ^[1][2].

Regarding the feature request, you can define a custom Element and register it with Chainlit to display content like mermaid.js and Panda dataframes. The Component class allows you to send custom components to the UI. Here is an example:

from chainlit.element import Element, Component
from pydantic.dataclasses import dataclass
from typing import ClassVar, Dict
import json

@dataclass
class Mermaid(Element):
    type: ClassVar[str] = "component"
    mime: str = "application/json"
    props: Dict = Field(default_factory=dict)

    def __post_init__(self) -> None:
        self.content = json.dumps(self.props)
        super().__post_init__()

@dataclass
class DataFrame(Element):
    type: ClassVar[str] = "component"
    mime: str = "application/json"
    props: Dict = Field(default_factory=dict)

    def __post_init__(self) -> None:
        self.content = json.dumps(self.props)
        super().__post_init__()

You can then use these custom elements to send mermaid.js diagrams and Panda dataframes to the UI:

import chainlit as cl

@cl.on_chat_start
async def start():
    mermaid_diagram = Mermaid(props={"code": "graph TD; A-->B;"})
    dataframe = DataFrame(props={"data": {"col1": [1, 2], "col2": [3, 4]}})

    await cl.Message(
        content="Here is a mermaid diagram and a dataframe!",
        elements=[mermaid_diagram, dataframe],
    ).send()

There are three display options for rendering an element: side, page, and inline. Choose the appropriate display option based on your requirements ^[3][4].

To continue talking to Dosu, mention @dosu.