Skip to content
LOPS Docs

Chat Viewer Operator

Overview

Section titled “Overview”

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 R (Backgroundcolorr) op('chat_viewer').par.Backgroundcolorr Float
Default:
0.092
Range:
0 to 1
Background Color G (Backgroundcolorg) op('chat_viewer').par.Backgroundcolorg Float
Default:
0.1
Range:
0 to 1
Background Color B (Backgroundcolorb) op('chat_viewer').par.Backgroundcolorb Float
Default:
0.12
Range:
0 to 1
User Message Color R (Usercolorr) op('chat_viewer').par.Usercolorr Float
Default:
0.371517
Range:
0 to 1
User Message Color G (Usercolorg) op('chat_viewer').par.Usercolorg Float
Default:
0.2035
Range:
0 to 1
User Message Color B (Usercolorb) op('chat_viewer').par.Usercolorb Float
Default:
0.5
Range:
0 to 1
Assistant Message Color R (Assistantcolorr) op('chat_viewer').par.Assistantcolorr Float
Default:
0.98
Range:
0 to 1
Assistant Message Color G (Assistantcolorg) op('chat_viewer').par.Assistantcolorg Float
Default:
0.52
Range:
0 to 1
Assistant Message Color B (Assistantcolorb) op('chat_viewer').par.Assistantcolorb Float
Default:
0.02
Range:
0 to 1
System Message Color R (Systemcolorr) op('chat_viewer').par.Systemcolorr Float
Default:
0.4
Range:
0 to 1
System Message Color G (Systemcolorg) op('chat_viewer').par.Systemcolorg Float
Default:
0.4
Range:
0 to 1
System Message Color B (Systemcolorb) op('chat_viewer').par.Systemcolorb Float
Default:
0.4
Range:
0 to 1
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:
15
Range:
8 to 48
Line Height (Lineheight) op('chat_viewer').par.Lineheight Float
Default:
1.2
Range:
1 to 3
Container Padding (Containerpadding) op('chat_viewer').par.Containerpadding Int
Default:
5
Range:
0 to 50
Message Spacing (Messagespacing) op('chat_viewer').par.Messagespacing Int
Default:
15
Range:
0 to 50
Bubble Border Radius (Bubbleborderradius) op('chat_viewer').par.Bubbleborderradius Int
Default:
10
Range:
0 to 50
Animation Duration (s) (Animationduration) op('chat_viewer').par.Animationduration Float
Default:
0.3
Range:
0 to 2
Shadow Intensity (px) (Shadowintensity) op('chat_viewer').par.Shadowintensity Int
Default:
50
Range:
0 to 100
Gradient Intensity (Gradientintensity) op('chat_viewer').par.Gradientintensity Int
Default:
50
Range:
0 to 100
Bubble Font Color R (Bubblefontcolorr) op('chat_viewer').par.Bubblefontcolorr Float
Default:
1
Range:
0 to 1
Bubble Font Color G (Bubblefontcolorg) op('chat_viewer').par.Bubblefontcolorg Float
Default:
1
Range:
0 to 1
Bubble Font Color B (Bubblefontcolorb) op('chat_viewer').par.Bubblefontcolorb Float
Default:
1
Range:
0 to 1

About Page

Section titled “About Page”
Bypass (Bypass) op('chat_viewer').par.Bypass Toggle
Default:
Off
Options:
Off, On
Show Built-in Parameters (Showbuiltin) op('chat_viewer').par.Showbuiltin Toggle
Default:
Off
Options:
Off, On
Version (Version) op('chat_viewer').par.Version String
Default:
1.0.0
Last Updated (Lastupdated) op('chat_viewer').par.Lastupdated String
Default:
2025-02-01
Creator (Creator) op('chat_viewer').par.Creator String
Default:
dotsimulate
Website (Website) op('chat_viewer').par.Website String
Default:
https://dotsimulate.com
ChatTD Operator (Chattd) op('chat_viewer').par.Chattd OP
Default:
/dot_lops/ChatTD

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”
# Assuming 'chat_op' is a Chat LOP or similar generating a conversation table
# named 'conversation_dat'


chat_viewer_op = op('chat_viewer1')
conversation_table = op('chat_op/conversation_dat')


# Connect the conversation table to the viewer's input
chat_viewer_op.inputConnectors[0].connect(conversation_table)


# Customize appearance using parameters on the 'Layout' page
chat_viewer_op.par.Usercolorr = 0.1
chat_viewer_op.par.Usercolorg = 0.5
chat_viewer_op.par.Usercolorb = 0.8
chat_viewer_op.par.Fontsize = 16

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.