Tesserae

Chat

Description

A component to display a chat

ChatArea and ChatMessage components allow building modern chat experiences with dynamic, animatable messages using DeltaComponent.

API reference

class

ChatArea

public class ChatArea : IComponent

A chat transcript surface that lays out a sequence of messages with sender attribution, avatars and timestamps.

Constructors

Constructor
ChatArea
public ChatArea()

Initializes a new instance of this class.

Methods

Method
ChatArea.OnScroll
public ChatArea OnScroll(ComponentEventHandler<ChatArea, Event> onScroll)

Registers a callback invoked when the scroll event fires.

Method
ChatArea.OnFocus
public ChatArea OnFocus(ComponentEventHandler<ChatArea, Event> onFocus)

Registers a callback invoked when the focus event fires.

Method
ChatArea.OnBlur
public ChatArea OnBlur(ComponentEventHandler<ChatArea, Event> onBlur)

Registers a callback invoked when the blur event fires.

Method
ChatArea.Background
public ChatArea Background(string color)

Gets or sets the CSS background of the component.

Method
ChatArea.Add
public ChatArea Add(ChatMessage message)

Adds the given item to the component.

Method
ChatArea.Clear
public ChatArea Clear()

Clears the component's current state.

Method
ChatArea.Render
public HTMLElement Render()

Renders the component's root HTML element.

Events

Event
ChatArea.Scrolled
public event ComponentEventHandler<ChatArea, Event> Scrolled

Raised when scrolled occurs.

Event
ChatArea.ReceivedFocus
public event ComponentEventHandler<ChatArea, Event> ReceivedFocus

Raised when received focus occurs.

Event
ChatArea.LostFocus
public event ComponentEventHandler<ChatArea, Event> LostFocus

Raised when lost focus occurs.

class

ChatMessage

public class ChatMessage : IComponentWithID, IComponent

Constructors

Constructor
ChatMessage
public ChatMessage(IComponent content, IComponent avatar = null, IComponent commands = null)

Initializes a new instance of this class.

Properties

Property
ChatMessage.Identifier
public string Identifier { get; private set; }

Gets or sets the identifier.

Property
ChatMessage.ContentHash
public string ContentHash { get; private set; }

Gets or sets the content hash.

Property
ChatMessage.BubbleBackground
public string BubbleBackground { get; private set; }

Gets or sets the bubble background.

Methods

Method
ChatMessage.LeftAligned
public ChatMessage LeftAligned()

Configures the left aligned on the component.

Method
ChatMessage.RightAligned
public ChatMessage RightAligned()

Configures the right aligned on the component.

Method
ChatMessage.FullWidth
public ChatMessage FullWidth()

Stretches the component to the full width of its parent.

Method
ChatMessage.MaxWidth
public ChatMessage MaxWidth()

Gets or sets the CSS max-width of the component.

Method
ChatMessage.Background
public ChatMessage Background(string color)

Gets or sets the CSS background of the component.

Method
ChatMessage.WithReferences
public ChatMessage WithReferences(IEnumerable<IComponent> references)

Returns the component configured with the given references.

Method
ChatMessage.WithReferences
public ChatMessage WithReferences(IComponent reference)

Returns the component configured with the given references.

Method
ChatMessage.ReplaceContent
public ChatMessage ReplaceContent(IComponent newContent)

Replaces the content in the component.

Method
ChatMessage.KeepVisible
public void KeepVisible()

Configures the keep visible on the component.

Method
ChatMessage.Render
public HTMLElement Render()

Renders the component's root HTML element.

Sample

See also

Referenced by

© 2026 Tesserae. All rights reserved.