opik icon indicating copy to clipboard operation
opik copied to clipboard

[FR] Display all AI SDK LLM message in pretty mode

Open jverre opened this issue 3 months ago • 5 comments

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.

jverre avatar Sep 25 '25 21:09 jverre

We have to work on target_file only or something else also .

Raj-G07 avatar Sep 27 '25 14:09 Raj-G07

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!

smirk-dev avatar Oct 01 '25 20:10 smirk-dev

Hi @vincentkoc @jverre Can you assign this issue to me?

ayushraj09 avatar Oct 04 '25 20:10 ayushraj09

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!

nikki-infinte avatar Oct 07 '25 05:10 nikki-infinte

Hi @jverre @vincentkoc , please review this PR - https://github.com/comet-ml/opik/pull/3727

sonianuj287 avatar Oct 20 '25 09:10 sonianuj287