Skip to content
LOPS Docs

Chat Viewer Operator

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”

Layout Page

Section titled “Layout Page”
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]
Font Family (Fontfamily) op('chat_viewer').par.Fontfamily Menu
Default:
system_default
Options:
system_default, monospace, reading, traditional, geometric
Font Size (Fontsize) op('chat_viewer').par.Fontsize Int
Default:
0
Range:
8 to 32
Line Height (Lineheight) op('chat_viewer').par.Lineheight Float
Default:
0
Range:
1 to 2
Container Padding (Containerpadding) op('chat_viewer').par.Containerpadding Int
Default:
0
Range:
0 to 40
Message Spacing (Messagespacing) op('chat_viewer').par.Messagespacing Int
Default:
0
Range:
4 to 40
Bubble Border Radius (Bubbleborderradius) op('chat_viewer').par.Bubbleborderradius Int
Default:
0
Range:
0 to 30
Animation Duration (s) (Animationduration) op('chat_viewer').par.Animationduration Float
Default:
0
Range:
0.1 to 2
Shadow Intensity (px) (Shadowintensity) op('chat_viewer').par.Shadowintensity Int
Default:
0
Range:
0 to 60
Gradient Intensity (Gradientintensity) op('chat_viewer').par.Gradientintensity Int
Default:
0
Range:
0 to 100
Bubble Font Color (Bubblefontcolor) op('chat_viewer').par.Bubblefontcolor RGB
Default:
[object Object]

About Page

Section titled “About Page”
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 “Layout” 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.
  • Chat Session: Manages conversation history, can feed into the viewer.