Skip to content
LOPS Docs

Chat Viewer Operator

v2.0.0 What's new
See LOPs 0.1.1 Full changelog →

Chat Viewer v2.0.0 [ September 2, 2025 ]

  • Complete architecture rewrite with centralized web server
  • HTTP-based communication replacing JavaScript parameter limits
  • Dynamic service path routing eliminating port conflicts
  • Full-width message input with auto-resize
  • Direct user message submission from web interface
  • Enhanced styling matching LOP Studio Dashboard
  • Collapsible tool call display and reactive font sizing
  • Agent Session integration with extensible message handling
  • Intelligent message diffing and robust error handling

The Chat Viewer LOP provides a customizable visual representation of chat conversations. It takes a standard conversation Table DAT as input and renders the messages (user, assistant, system) in a web browser-based view within TouchDesigner using HTML, CSS, and JavaScript. It offers extensive styling options for colors, fonts, spacing, and animations to match different UI requirements.

Requirements

Section titled “Requirements”
  • No specific Python package requirements beyond standard TouchDesigner.

Input/Output

Section titled “Input/Output”

Inputs

Section titled “Inputs”
  • Input Table (Table DAT): A table DAT containing conversation data. Required columns: role, message. Expected columns: id (or inferred by row), timestamp.

Outputs

Section titled “Outputs”
  • Chat Visualization (Web Browser TOP): Internally uses a Web Browser TOP (chat_viewer) to display the formatted conversation.

Parameters

Section titled “Parameters”

Page: Style

Section titled “Page: Style”
Background Color (Backgroundcolor) op('chat_viewer').par.Backgroundcolor RGB
Default:
[object Object]
User Message Color (Usercolor) op('chat_viewer').par.Usercolor RGB
Default:
[object Object]
Assistant Message Color (Assistantcolor) op('chat_viewer').par.Assistantcolor RGB
Default:
[object Object]
System Message Color (Systemcolor) op('chat_viewer').par.Systemcolor RGB
Default:
[object Object]
Tool Call Color (Toolcallcolor) op('chat_viewer').par.Toolcallcolor RGB
Default:
[object Object]
Text Color (Bubblefontcolor) op('chat_viewer').par.Bubblefontcolor RGB
Default:
[object Object]
Font Family (Fontfamily) op('chat_viewer').par.Fontfamily Menu
Default:
lop_dashboard
Font Size (Fontsize) op('chat_viewer').par.Fontsize Float
Default:
13
Range:
8 to 24
Line Height (Lineheight) op('chat_viewer').par.Lineheight Float
Default:
1.5
Range:
1 to 2.5
Container Padding (Containerpadding) op('chat_viewer').par.Containerpadding Int
Default:
16
Range:
0 to 50
Message Spacing (Messagespacing) op('chat_viewer').par.Messagespacing Int
Default:
12
Range:
0 to 30
Border Radius (Bubbleborderradius) op('chat_viewer').par.Bubbleborderradius Int
Default:
2
Range:
0 to 20
Animation Duration (Animationduration) op('chat_viewer').par.Animationduration Float
Default:
0.4
Range:
0.1 to 2
Gradient Intensity (Gradientintensity) op('chat_viewer').par.Gradientintensity Int
Default:
40
Range:
0 to 100
Shadow Intensity (Shadowintensity) op('chat_viewer').par.Shadowintensity Int
Default:
12
Range:
0 to 30

Page: Settings

Section titled “Page: Settings”
Update Viewer (Updateviewer) op('chat_viewer').par.Updateviewer Pulse
Default:
Off
Update Style (Updatestyle) op('chat_viewer').par.Updatestyle Pulse
Default:
Off
Clear Viewer (Clearviewer) op('chat_viewer').par.Clearviewer Pulse
Default:
Off
Resolution (Resolution) op('chat_viewer').par.Resolution WH
Default:
[object Object]
Assistant Name (Assistantname) op('chat_viewer').par.Assistantname Str
Default:
"" (Empty String)
Agent Session OP (Agentsessionop) op('chat_viewer').par.Agentsessionop OP
Default:
"" (Empty String)

Page: About

Section titled “Page: About”
Bypass (Bypass) op('chat_viewer').par.Bypass Toggle
Default:
Off
Show Built-in Parameters (Showbuiltin) op('chat_viewer').par.Showbuiltin Toggle
Default:
Off
Version (Version) op('chat_viewer').par.Version String
Default:
None
Last Updated (Lastupdated) op('chat_viewer').par.Lastupdated String
Default:
None
Creator (Creator) op('chat_viewer').par.Creator String
Default:
None
Website (Website) op('chat_viewer').par.Website String
Default:
None
ChatTD Operator (Chattd) op('chat_viewer').par.Chattd OP
Default:
None

Performance Considerations

Section titled “Performance Considerations”
  • The viewer uses a Web Browser TOP, which consumes GPU and CPU resources.
  • Very long conversations or rapid updates to the input table can impact performance due to JavaScript processing and DOM manipulation.
  • The UpdateViewer method performs diffing to minimize unnecessary updates, but frequent changes can still be demanding.

Usage Examples

Section titled “Usage Examples”

Basic Setup

Section titled “Basic Setup”
  1. Create a chat_viewer LOP.
  2. Create a Table DAT with a conversation and connect it to the input of the chat_viewer LOP.
  3. The chat viewer will automatically display the conversation.
  4. Use the parameters on the “Style” page to customize the appearance of the chat.

Technical Notes

Section titled “Technical Notes”
  • The operator dynamically generates HTML, CSS, and JavaScript code based on parameters and injects it into an internal viewer_code DAT, which is then loaded by the Web Browser TOP.
  • JavaScript functions handle adding, updating, and removing messages dynamically based on commands sent from the Python extension.
  • Style updates can be applied dynamically without reloading the entire viewer content via the UpdateStyle method in the extension.
Section titled “Related Operators”
  • Chat: Often provides the input conversation table.
  • Agent Session: Manages conversation history, can feed into the viewer.