Skip to content
LOPS Docs

Chat Viewer

v2.0.0

The Chat Viewer LOP renders chat conversations inside TouchDesigner using an embedded web browser. It reads a standard conversation Table DAT from its input and displays messages in a styled, scrollable interface with role-based formatting for user, assistant, system, and tool call messages. All style parameters update the viewer in real time without reloading.

Key Features

Section titled “Key Features”
  • Intelligent message diffing that detects appends, updates, and rebuilds to minimize rendering work during streaming
  • Per-role color customization for user, assistant, system, and tool call messages
  • Built-in message input bar that can forward user messages to a connected Agent Session operator
  • Collapsible tool call display matching the LOP Studio Dashboard design
  • Five font family presets including the LOP Dashboard monospace default
  • Live style updates — every color, spacing, and animation parameter applies instantly

Input/Output

Section titled “Input/Output”

Inputs

Section titled “Inputs”
  • Conversation Table (Table DAT): A table with columns role, message, and optionally timestamp. Connect any Chat LOP output or compatible conversation table.

Outputs

Section titled “Outputs”
  • Chat Visualization (TOP): The internal Web Browser TOP renders the conversation as a texture that can be wired into your TouchDesigner network for display or compositing.

Usage Examples

Section titled “Usage Examples”

Displaying a Chat Conversation

Section titled “Displaying a Chat Conversation”
  1. Place a Chat Viewer LOP in your network.
  2. Wire the output of a Chat LOP (or any Table DAT with role and message columns) into the Chat Viewer’s input.
  3. The conversation renders automatically. As the upstream table updates (including during streaming), the viewer incrementally refreshes only the messages that changed.

Customizing the Appearance

Section titled “Customizing the Appearance”
  1. On the Style page, adjust Background Color to set the main canvas color.
  2. Set Assistant Message Color, User Message Color, System Message Color, and Tool Call Color to distinguish message roles.
  3. Change Text Color to control the font color across all messages.
  4. Select a Font Family preset — “LOP Dashboard” is the default monospace style; “Reading” uses Inter for longer-form content.
  5. Adjust Font Size and Line Height for readability at your target resolution.
  6. Tune Container Padding, Message Spacing, and Border Radius for layout density.
  7. Gradient Intensity controls how strongly role colors tint the message background. Set to 0 for flat solid backgrounds.
  8. Animation Duration controls the slide-in effect when new messages appear.

All style changes apply immediately — there is no need to pulse anything.

Sending Messages from the Viewer

Section titled “Sending Messages from the Viewer”

The Chat Viewer includes a built-in text input bar at the bottom of the viewer. To route typed messages to an agent:

  1. On the Settings page, set Agent Session OP to point at an Agent Session operator in your network.
  2. Type a message in the viewer’s input bar and press Enter or click the send button.
  3. The message is forwarded to the Agent Session, which processes it through your agent pipeline.

If no Agent Session OP is configured, typed messages are logged but not sent anywhere.

Manual Controls

Section titled “Manual Controls”

On the Settings page:

  • Pulse Update Viewer to force a full refresh of the displayed conversation.
  • Pulse Update Style to force a style recalculation (useful if external scripts changed parameters).
  • Pulse Clear Viewer to remove all messages from the display and reset internal state.

Setting the Resolution

Section titled “Setting the Resolution”

On the Settings page, adjust Resolution (width and height) to match your target display size. The default is 1160 x 980.

Best Practices

Section titled “Best Practices”
  • For streaming conversations, keep the Chat Viewer wired directly to the Chat LOP output. The diffing engine detects incremental appends and content updates efficiently, so you do not need to throttle updates.
  • When embedding the viewer in a larger UI, use the TOP output and composite it with other elements. The background color and padding parameters let you match surrounding visuals.
  • Set Assistant Name on the Settings page to give the assistant a custom display name in the viewer header.
  • Tool call messages render as collapsible bars. Users can click to expand and see tool call details. This display style matches the LOP Studio Dashboard design.

Troubleshooting

Section titled “Troubleshooting”
  • Viewer shows nothing: Confirm that the input table has at least a header row and one data row with role and message columns. Pulse Update Viewer to force a refresh.
  • Styles not applying: Pulse Update Style on the Settings page. If colors still appear wrong, check that your RGB values are in the 0-1 normalized range.
  • Messages not sending: Verify that Agent Session OP on the Settings page points to a valid Agent Session operator. Check the operator’s log for “No Agent Session OP configured” warnings.
  • Central web server errors: The Chat Viewer registers with the LOPs central web server on initialization. If the web server is not running or not found, the viewer logs an error. Ensure LOPs is fully loaded in your project.

Parameters

Section titled “Parameters”

Style

Section titled “Style”
Background Color (Backgroundcolorr) op('chat_viewer').par.Backgroundcolorr RGB

Main background color

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Background Color (Backgroundcolorg) op('chat_viewer').par.Backgroundcolorg RGB

Main background color

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Background Color (Backgroundcolorb) op('chat_viewer').par.Backgroundcolorb RGB

Main background color

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
User Message Color (Usercolorr) op('chat_viewer').par.Usercolorr RGB

Color for user messages - defaults to background color (hidden)

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
User Message Color (Usercolorg) op('chat_viewer').par.Usercolorg RGB

Color for user messages - defaults to background color (hidden)

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
User Message Color (Usercolorb) op('chat_viewer').par.Usercolorb RGB

Color for user messages - defaults to background color (hidden)

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Assistant Message Color (Assistantcolorr) op('chat_viewer').par.Assistantcolorr RGB

Color for assistant messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Assistant Message Color (Assistantcolorg) op('chat_viewer').par.Assistantcolorg RGB

Color for assistant messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Assistant Message Color (Assistantcolorb) op('chat_viewer').par.Assistantcolorb RGB

Color for assistant messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
System Message Color (Systemcolorr) op('chat_viewer').par.Systemcolorr RGB

Color for system messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
System Message Color (Systemcolorg) op('chat_viewer').par.Systemcolorg RGB

Color for system messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
System Message Color (Systemcolorb) op('chat_viewer').par.Systemcolorb RGB

Color for system messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Tool Call Color (Toolcallcolorr) op('chat_viewer').par.Toolcallcolorr RGB

Color for tool call messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Tool Call Color (Toolcallcolorg) op('chat_viewer').par.Toolcallcolorg RGB

Color for tool call messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Tool Call Color (Toolcallcolorb) op('chat_viewer').par.Toolcallcolorb RGB

Color for tool call messages

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Text Color (Bubblefontcolorr) op('chat_viewer').par.Bubblefontcolorr RGB

Color for message text

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Text Color (Bubblefontcolorg) op('chat_viewer').par.Bubblefontcolorg RGB

Color for message text

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Text Color (Bubblefontcolorb) op('chat_viewer').par.Bubblefontcolorb RGB

Color for message text

Default:
0.0
Range:
0 to 1
Slider Range:
0 to 1
Font Family (Fontfamily) op('chat_viewer').par.Fontfamily Menu

Font family for messages

Default:
lop_dashboard
Options:
lop_dashboard, system_default, monospace, reading, traditional
Font Size (Fontsize) op('chat_viewer').par.Fontsize Float

Font size in pixels

Default:
0.0
Range:
8 to 24
Slider Range:
8 to 24
Line Height (Lineheight) op('chat_viewer').par.Lineheight Float

Line height multiplier

Default:
0.0
Range:
1 to 2.5
Slider Range:
1 to 2.5
Container Padding (Containerpadding) op('chat_viewer').par.Containerpadding Int

Padding around chat container

Default:
0
Range:
0 to 50
Slider Range:
0 to 50
Message Spacing (Messagespacing) op('chat_viewer').par.Messagespacing Int

Space between messages

Default:
0
Range:
0 to 30
Slider Range:
0 to 30
Border Radius (Bubbleborderradius) op('chat_viewer').par.Bubbleborderradius Int

Border radius for message bubbles

Default:
0
Range:
0 to 20
Slider Range:
0 to 20
Animation Duration (Animationduration) op('chat_viewer').par.Animationduration Float

Duration of message animations in seconds

Default:
0.0
Range:
0.1 to 2
Slider Range:
0.1 to 2
Gradient Intensity (Gradientintensity) op('chat_viewer').par.Gradientintensity Int

Intensity of gradient effects

Default:
0
Range:
0 to 100
Slider Range:
0 to 100
Shadow Intensity (Shadowintensity) op('chat_viewer').par.Shadowintensity Int

Shadow intensity for depth

Default:
0
Range:
0 to 30
Slider Range:
0 to 30

Settings

Section titled “Settings”
Update Viewer (Updateviewer) op('chat_viewer').par.Updateviewer Pulse

Manually trigger viewer update

Default:
False
Update Style (Updatestyle) op('chat_viewer').par.Updatestyle Pulse

Manually trigger style update

Default:
False
Clear Viewer (Clearviewer) op('chat_viewer').par.Clearviewer Pulse

Clear all messages from viewer

Default:
False
Resolution (Resolutionw) op('chat_viewer').par.Resolutionw WH
Default:
1160.0
Range:
0 to 1
Slider Range:
0 to 1
Resolution (Resolutionh) op('chat_viewer').par.Resolutionh WH
Default:
980.0
Range:
0 to 1
Slider Range:
0 to 1
Assistant Name (Assistantname) op('chat_viewer').par.Assistantname Str

Name displayed for assistant messages

Default:
"" (Empty String)
Agent Session OP (Agentsessionop) op('chat_viewer').par.Agentsessionop OP

Agent Session operator to send messages to

Default:
"" (Empty String)
LOP Webserver Port (Port) op('chat_viewer').par.Port Int
Default:
9980
Range:
1 to 65535
Slider Range:
1 to 65535

Changelog

Section titled “Changelog”
v2.0.02025-08-19

Major Architecture Changes:

  • Replaced individual web servers with centralized LOP Helper Web Server
  • Implemented dynamic service path routing for multiple chat viewer instances
  • Added script DAT for dynamic HTML generation with unique service paths
  • Removed port conflicts when copying chat viewers (all use shared port 9982)

New HTTP Communication System:

  • Full HTTP-based communication replacing JavaScript parameter limits
  • Web browser connects directly to TouchDesigner via HTTP requests
  • Support for chunked data transfer and large conversations
  • Real-time message loading and style updates via HTTP API

Enhanced User Interface:

  • Added full-width message input box with auto-resize
  • Implemented user message submission directly from web interface
  • Added connection status indicators and debug information
  • Improved LOP Studio Dashboard design language integration

Styling System Overhaul:

  • Complete redesign to match LOP Studio Dashboard aesthetics
  • Replaced heavy gradients with subtle backgrounds and proper role styling
  • Added custom scrollbar styling for better visual integration
  • Implemented reactive role font sizing and improved typography
  • Added collapsible tool call display matching Dashboard design

New Parameters:

  • Assistant Name parameter for customizable assistant display name
  • Agent Session OP parameter for integration with agent workflows
  • Removed obsolete Server Port and Restart Server parameters

Agent Integration:

  • Direct integration with Agent Session operators
  • Extensible user message handling via _on_user_message method
  • Automatic message routing to configured agent sessions

Performance & Reliability:

  • Intelligent message diffing for incremental updates
  • Robust error handling and recovery mechanisms
  • Improved parameter management with conditional RGB parameter creation
  • Enhanced logging and debugging capabilities

Developer Experience:

  • Cleaner parameter organization (Style and Settings pages only)
  • Simplified extension architecture following LOP patterns
  • Better code organization and maintainability
v1.0.02025-02-01

Initial release

Section titled “Related Operators”