[FR] Display all AI SDK LLM message in pretty mode
Similar to #3413
Context:
Reading traces and span inputs is complicated especially when you have a lot of LLM messages in either the input or output of a traces and span.
The current Pretty mode implementation checks the input / output fields for a messages array which follows a specific format and then we render the last message. We can improve this implementation as part of this work.
Implementation
Instead of displaying just the last message, we will display all LLM message in pretty mode. In order to achieve this, we should parse the messages array and display a collapsible section for each message. The title of each section will be the message type and the body will be the message content.
By default each section will be expanded apart from tool calls and tool call results.
We have to work on target_file only or something else also .
Hi @jverre @vincentkoc! I'd love to work on this Pretty Mode enhancement for Hacktoberfest. I have strong frontend experience with React/TypeScript and have built similar collapsible message viewers before. My approach would be to create MessageList and MessageSection components that parse all message types (user, assistant, tool_call, tool_result), with expandable/collapsible sections. Tool calls and results would be collapsed by default while user/assistant messages would be expanded. I can deliver this in 3-4 days with comprehensive testing and proper integration with the existing traces.ts implementation. Looking forward to improving Opik's trace viewing experience!
Hi @vincentkoc @jverre Can you assign this issue to me?
Hi @vincentkoc @jverre I’d like to work on this feature request as part of Hacktoberfest. I have experience with React and TypeScript, and I’m confident in implementing a clean, collapsible UI for rendering all LLM messages in Pretty mode. My plan is to:
Parse the messages array from the input/output fields,
Display each message type (user, assistant, tool_call, tool_result) in a collapsible section,
Keep tool-related sections collapsed by default while expanding user and assistant messages,
Ensure smooth integration with the current Pretty mode logic.
Please assign this issue to me so I can start working on it. Thanks!
Hi @jverre @vincentkoc , please review this PR - https://github.com/comet-ml/opik/pull/3727