Render images on side bar

[XavierAlmendros]

trafficstars

Describe the bug An image that can be shown in inline mode in the princiapl chat window, does not appear when using it in the side element when returning chunks from a RAG applciation. If I inspect the network, I see that the image is being returned with a status code 200.

I've tried to place the image1 under public folder, under the same directory as the main file and under public/media but nothing works. But an error does not arise, it simple do not render the image:

My code to reporduce this is as follows:

@cl.on_message
async def on_message(message: cl.Message):
    session_id = cl.user_session.get("session_id")

    # Prepare empty message to stream
    msg = cl.Message(content="")
    await msg.send()

    full_response = ""
    async for chunk in chatbot.astream(
        {"question": message.content},
        config={"configurable": {"session_id": session_id}}
    ):
        if hasattr(chunk, "content"):
            full_response += chunk.content
            await msg.stream_token(chunk.content)

    # Retrieve sources, with proper image rendering
    retrieved_docs = retriever.invoke(message.content)
    source_links = []
    elements = []

    for i, doc in enumerate(retrieved_docs):
        metadata = doc.metadata or {}
        file_name = metadata.get("file_name", "document")
        chunk_id = metadata.get("chunk_id", i)
        name = f"{chunk_id}-{file_name}".replace(" ", "_")

        content = doc.page_content[:2000]  # truncate for display

        # Check if there's a markdown image link
        image_match = re.search(r'!\[\]\((/media/.*?)\)', content)
        if image_match:
            image_path = image_match.group(1)
            clean_text = content.replace(image_match.group(0), "").strip()

            if clean_text:
                elements.append(cl.Text(name=name, content=clean_text, display="side"))
            print(image_path)
            image_path = 'image1.png'
            print(image_path)
            # For a file in the same directory as your script
            absolute_image_path = os.path.join(os.getcwd(), 'image1.png')
            print(absolute_image_path)
            elements.append(cl.Image(name=f"img_{chunk_id}", display="side", path=absolute_image_path))
        else:
            elements.append(cl.Text(name=name, content=content, display="side"))

        # source_links.append(f"[{name}](#{name})")
        source_links.append(name)

    if source_links:
        full_response += "\n\n📚 **Sources**: " + ", ".join(source_links)

    msg.content = full_response
    msg.elements = elements
    await msg.update()

• OS: Windows
• Browser Firefox