feat: Add element_name to CustomElement to allow for distinct CustomElements

[brunnelu]

Introduce the element_name attribute to the CustomElement class, allowing for distinct identification of custom elements. Update relevant methods and interfaces to ensure compatibility with this new attribute. For backwards compatibility the element_name equals the name of custom element if not defined.

This solves the issue: #1841

I'll add the following example to the docs if you like this feature.

hello.py

import chainlit as cl
from chainlit import Message, on_chat_start


@on_chat_start
async def main():

    await cl.Message(
        content="Lorem Ipsum, ... source: source_1",
        author="AI Search",
        elements=[
            cl.CustomElement(
                element_name="IFrame",
                name="source_1",
                display="side",
                props={
                    "url": "https://example.com",
                    "title": "Some Title",
                },
            )
        ],
    ).send()

public/elements/IFrame.jsx

export default function IFrame() {
    return (
        <iframe
            src={props.url}
            title={props.title}
            style={{ width: "100%", height: "100%", border: "none" }}
        />
    );
}

[brunnelu]

Just to clarify: this change is fully backwards compatible. If element_name is not defined, it simply defaults to the value of name, preserving existing behavior. This update only adds the option to set a different identifier (element_name) when needed, without breaking existing code.

[brunnelu]

@willydouhard, could you please take a look? I tink this will feature will be appreciated.

[hayescode]

You would need to update the data layers to do this.