Conversation Viewer

Displays chat conversations, optionally allowing the message content to be edited.

Remarks

The Conversation Viewer control presents chat conversations or message streams in a structured, readable format within the Grooper web client. It is designed to display NDJSON-based chat logs, with each message shown as a distinct entry. The control supports both read-only and editable modes, allowing users to review, organize, and manage messages efficiently. Interactive controls enable message reordering, deletion, and expansion for system messages, making it ideal for reviewing AI chat logs, support transcripts, or collaborative message threads.

Purpose

• View chat conversations or message streams in a clear, organized layout.
• Edit, reorder, or delete individual messages when in editable mode.
• Expand or collapse system messages for focused review.
• Render message content with markdown formatting and HTML conversion.

Main Features

• Message List:
  Displays all messages in the conversation, with role-based styling (user, assistant, system).
• Editable Mode:
  Allows users to delete, move, or expand/collapse messages using interactive controls.
• Markdown Rendering:
  Converts message content from markdown to HTML for rich formatting, including code blocks and links.
• System Message Expansion:
  System messages can be expanded or collapsed to show or hide details.
• Token Usage Display:
  Optionally shows token counts for prompt/completion usage (when available).

Interactive Components

• Inputs:
  • None; message editing is performed via buttons and context menu commands.
• Buttons:
  • {delete}: Remove the selected message from the conversation.
  • {move_up}: Move the selected message up in the list.
  • {move_down}: Move the selected message down in the list.
  • {expand}: Expand or collapse the content for system messages.
• Child Controls:
  • {Message List}: Displays all chat messages with role-based formatting.
  • {Message Editor}: Editable fields for message content (when enabled).
  • {Token Usage}: Shows token counts for each message (if available).

Usage Guidance

1. Review the conversation in the message list, with each message clearly labeled by role.
2. In editable mode, use the {delete}, {move_up}, and {move_down} buttons to organize messages.
3. Click {expand} to show or hide details for system messages.
4. Message content is rendered with markdown formatting for readability.
5. Use context menu commands for additional actions (if provided).

Example

┌───────────── Conversation Viewer ──────────────┐
│ {Message List}                                 │
│   ├─ {User} Hello, how can I help you?         │
│   ├─ {Assistant} Please provide more details.  │
│   ├─ {System} {expand} System message...       │
│   └─ {User} Here is the information you need.  │
├───────────────────────────────────────────────┤
│ {delete} {move_up} {move_down} {expand}        │
│   └─ Buttons for message management            │
└───────────────────────────────────────────────┘

Notes

• Role-based styling helps distinguish user, assistant, and system messages.
• Markdown formatting is supported for message content, including code, links, and lists.
• Editable mode enables message management for collaborative review or correction.
• System messages can be expanded/collapsed for focused review.
• Token usage display is available for AI-generated messages (if token data is present).
• The control is suitable for reviewing, editing, and managing chat logs, support transcripts, or collaborative threads.

Command Buttons

Button	Shortcut Key		Summary
delete delete		►	Delete this chat message. The {delete} button removes the selected message from the conversation. Features Instantly deletes the message from the message list. Available only in editable mode. Confirmation may be required before deletion (depending on UI configuration). Usage Click {delete} to permanently remove the selected message. Use with caution, as deleted messages cannot be recovered.
north move_up		►	Move this chat message up. The {move_up} button shifts the selected message one position higher in the conversation. Features Reorders messages for improved organization or logical flow. Available only in editable mode. Usage Click {move_up} to move the selected message up. Useful for correcting message order or grouping related messages.
south move_down		►	Move this chat message down. The {move_down} button shifts the selected message one position lower in the conversation. Features Reorders messages for improved organization or logical flow. Available only in editable mode. Usage Click {move_down} to move the selected message down. Useful for correcting message order or grouping related messages.
unfold_more expand		►	Expand or collapse the content for this system message. The {expand} button toggles the visibility of detailed content for system messages. Features Expands system messages to show full details, such as configuration or metadata. Collapses system messages to reduce clutter and focus on user/assistant messages. Available for system messages only. Usage Click {expand} to show or hide the full content of a system message. Useful for reviewing system events or hiding verbose details.

Used By

NDJSON Editor