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.

Namespace
Tesserae
Implements
IComponent

Constructors

NameDescription
ChatAreaInitializes a new instance of this class.
Constructor
ChatArea
public ChatArea()

Initializes a new instance of this class.

Methods

NameDescription
OnScrollRegisters a callback invoked when the scroll event fires.
OnFocusRegisters a callback invoked when the focus event fires.
OnBlurRegisters a callback invoked when the blur event fires.
BackgroundGets or sets the CSS background of the component.
AddAdds the given item to the component.
ClearClears the component's current state.
RenderRenders the component's root HTML element.
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

NameDescription
ScrolledRaised when scrolled occurs.
ReceivedFocusRaised when received focus occurs.
LostFocusRaised when lost focus occurs.
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
Namespace
Tesserae
Implements
IComponentWithID, IComponent

Constructors

NameDescription
ChatMessageInitializes a new instance of this class.
Constructor
ChatMessage
public ChatMessage(IComponent content, IComponent avatar = null, IComponent commands = null)

Initializes a new instance of this class.

Properties

NameDescription
IdentifierGets or sets the identifier.
ContentHashGets or sets the content hash.
BubbleBackgroundGets or sets the bubble background.
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

NameDescription
LeftAlignedConfigures the left aligned on the component.
RightAlignedConfigures the right aligned on the component.
FullWidthStretches the component to the full width of its parent.
MaxWidthGets or sets the CSS max-width of the component.
BackgroundGets or sets the CSS background of the component.
WithReferencesReturns the component configured with the given references.
ReplaceContentReplaces the content in the component.
KeepVisibleConfigures the keep visible on the component.
RenderRenders the component's root HTML element.
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
Overload
WithReferences(IEnumerable<IComponent>)Returns the component configured with the given references.
WithReferences(IComponent)Returns the component configured with the given references.
WithReferences(IEnumerable<IComponent>)
public ChatMessage WithReferences(IEnumerable<IComponent> references)

Returns the component configured with the given references.

Parameters

references IEnumerable<IComponent>
WithReferences(IComponent)
public ChatMessage WithReferences(IComponent reference)

Returns the component configured with the given references.

Parameters

reference IComponent
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

© 2026 Curiosity. All rights reserved.