Building a Custom Chatbot to Display Chat History as Widgets

Murali M. · 2025-04-01T15:29:54.510Z

Hello! Sorry for diving right in I am building a custom chatbot. I want to display my chat history like the image --> each turn is a separate widget under Inputs. Right now, I use span.set_attribute("user", {"content": "some content"}) but all I get is a json in info tab. Any suggestions please? (image from smolagents usage)

Building a Custom Chatbot to Display Chat History as Widgets | Arize AI Community

10 comments

· Sorted by Oldest

RunLLM
APP
·
To display chat history with each turn as a separate widget under Inputs, you need to ensure that each message in the chat is properly structured and stored as individual spans with attributes for each message. According to the Phoenix documentation, you should use semantic conventions to set attributes for each message, such as llm.input_messages and llm.output_messages. This allows you to track each message separately and display them in the UI.Ensure that each message is stored with attributes like role and content for both input and output messages. You can use the setAttribute method to set these attributes for each span. For example, you can structure your code to set attributes for each message as follows: LBKSspan.set_attribute("llm.input_messages.0.message.role", "user") span.set_attribute("llm.input_messages.0.message.content", "Hello!") span.set_attribute("llm.output_messages.0.message.role", "assistant") span.set_attribute("llm.output_messages.0.message.content", "Hi there!")LBKSWould you like more details on how to implement this in your chatbot? Sources: - Phoenix Tracing Documentation
💡 Hint: Mention RunLLM in the thread for followups.
Murali M.
·
Thanks 🔒[private user] for responding quickly! Yes, I want this to look like an input dropdown. Do I use "llm.input_messages" key in
span.set_attribute( "llm.input_messages", [{"message.role": msg.role, "message.content": msg.content} for msg in chat_history], )
I get a type error on the attribute value part.

Murali M.

Thanks! In current setup, I get this for

        span.set_attribute(
            SpanAttributes.LLM_INPUT_MESSAGES,
            [
                {
                    "message.role": msg.role,
                    "message.content": msg.content,
                }
            ],
        )

Argument of type "list[dict[str, str]]" cannot be assigned to parameter "value" of type "AttributeValue" in function "set_attribute"
Argument 2 to "set_attribute" of "Span" has incompatible type "list[dict[str, str]]"; expected "str | bool | int | float | Sequence[str] | Sequence[bool] | Sequence[int] | Sequence[float]"

Murali M.
·
It works but, in the UI, it is just rendered as a JSON
Murali M.
·
Is it expected behavior?
Murali M.
·
Thank you!
Murali M.
·
Thank you!! Yes, I wasn't using openinference_span_kind="llm" . Thanks again!
🙌1
Murali M.
·
Amazing product btw. Love it!
❤️1
Murali M.
·
RunLLM, what roles are available, apart from user, assistant, system and tool?
RunLLM
APP
·
In Phoenix, the available roles for chat messages include "user", "assistant", "system", and "tool". Additionally, there is a "developer" role, which can be used for messages that originate from a developer or a development tool. These roles help categorize the source or purpose of each message in a chat interaction. If you need more details on how to implement or use these roles, feel free to ask!Sources: - ChatCompletionMessageRole Enum - Phoenix Client Helpers
💡 Hint: Mention RunLLM in the thread for followups.

RunLLM
APP
·
To display chat history with each turn as a separate widget under Inputs, you need to ensure that each message in the chat is properly structured and stored as individual spans with attributes for each message. According to the Phoenix documentation, you should use semantic conventions to set attributes for each message, such as llm.input_messages and llm.output_messages. This allows you to track each message separately and display them in the UI.Ensure that each message is stored with attributes like role and content for both input and output messages. You can use the setAttribute method to set these attributes for each span. For example, you can structure your code to set attributes for each message as follows: LBKSspan.set_attribute("llm.input_messages.0.message.role", "user") span.set_attribute("llm.input_messages.0.message.content", "Hello!") span.set_attribute("llm.output_messages.0.message.role", "assistant") span.set_attribute("llm.output_messages.0.message.content", "Hi there!")LBKSWould you like more details on how to implement this in your chatbot? Sources: - Phoenix Tracing Documentation
💡 Hint: Mention RunLLM in the thread for followups.
Murali M.
·
Thanks 🔒[private user] for responding quickly! Yes, I want this to look like an input dropdown. Do I use "llm.input_messages" key in
span.set_attribute( "llm.input_messages", [{"message.role": msg.role, "message.content": msg.content} for msg in chat_history], )
I get a type error on the attribute value part.

Murali M.

Thanks! In current setup, I get this for

        span.set_attribute(
            SpanAttributes.LLM_INPUT_MESSAGES,
            [
                {
                    "message.role": msg.role,
                    "message.content": msg.content,
                }
            ],
        )

Argument of type "list[dict[str, str]]" cannot be assigned to parameter "value" of type "AttributeValue" in function "set_attribute"
Argument 2 to "set_attribute" of "Span" has incompatible type "list[dict[str, str]]"; expected "str | bool | int | float | Sequence[str] | Sequence[bool] | Sequence[int] | Sequence[float]"

Murali M.
·
It works but, in the UI, it is just rendered as a JSON
Murali M.
·
Is it expected behavior?
Murali M.
·
Thank you!
Murali M.
·
Thank you!! Yes, I wasn't using openinference_span_kind="llm" . Thanks again!
🙌1
Murali M.
·
Amazing product btw. Love it!
❤️1
Murali M.
·
RunLLM, what roles are available, apart from user, assistant, system and tool?
RunLLM
APP
·
In Phoenix, the available roles for chat messages include "user", "assistant", "system", and "tool". Additionally, there is a "developer" role, which can be used for messages that originate from a developer or a development tool. These roles help categorize the source or purpose of each message in a chat interaction. If you need more details on how to implement or use these roles, feel free to ask!Sources: - ChatCompletionMessageRole Enum - Phoenix Client Helpers
💡 Hint: Mention RunLLM in the thread for followups.