At a glance

TsgcHTMLComponent_Chat

A full chat surface that emits scoped CSS plus the messenger markup: a header with avatar, grouped bubbles, status ticks, media attachments and a composer. Add messages, set the header, then read the HTML property.

Component class

TsgcHTMLComponent_Chat

Renders

Scoped CSS + messenger markup

Family

Chat & AI

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, add messages, render it

Set the header (Title, Subtitle, HeaderAvatarInitials), add text, image and file messages, handle OnSendMessage, then read HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_Chat;

var
  oChat: TsgcHTMLComponent_Chat;
begin
  oChat := TsgcHTMLComponent_Chat.Create(nil);
  try
    oChat.Title := 'Alice Johnson';
    oChat.Subtitle := 'online';
    oChat.HeaderAvatarInitials := 'AJ';
    oChat.Height := '500px';
    oChat.ShowTypingIndicator := True;
    oChat.OnSendMessage := DoSendMessage;   // browser -> your code

    oChat.AddSystemMessage('Today');
    oChat.AddMessage('Alice', 'Hey! Did you get the file?', maLeft);
    oChat.AddImageMessage('You', '/img/receipt.png', maRight,
      hcPrimary, 'Here it is');
    oChat.AddFileMessage('You', '/files/report.pdf',
      'report.pdf', '248 KB', maRight);

    WebModule.Response := oChat.HTML;   // messenger markup + scoped CSS
  finally
    oChat.Free;
  end;
end;

// OnSendMessage fires when the visitor submits the composer:
procedure TForm1.DoSendMessage(Sender: TObject; const aMessage: string);
begin
  oChat.AddMessage('You', aMessage, maRight, hcPrimary);
  WebSocket.WriteData(oChat.GetLastMessageHTML);
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Chat.hpp

TsgcHTMLComponent_Chat *oChat = new TsgcHTMLComponent_Chat(NULL);
try
{
  oChat->Title = "Alice Johnson";
  oChat->Subtitle = "online";
  oChat->HeaderAvatarInitials = "AJ";
  oChat->Height = "500px";
  oChat->ShowTypingIndicator = true;
  oChat->OnSendMessage = DoSendMessage;   // browser -> your code

  oChat->AddSystemMessage("Today");
  oChat->AddMessage("Alice", "Hey! Did you get the file?", maLeft);
  oChat->AddImageMessage("You", "/img/receipt.png", maRight,
    hcPrimary, "Here it is");
  oChat->AddFileMessage("You", "/files/report.pdf",
    "report.pdf", "248 KB", maRight);

  String html = oChat->HTML;   // messenger markup + scoped CSS
}
__finally
{
  delete oChat;
}

using esegece.sgcWebSockets;

var chat = new TsgcHTMLComponent_Chat();
chat.Title = "Alice Johnson";
chat.Subtitle = "online";
chat.HeaderAvatarInitials = "AJ";
chat.Height = "500px";
chat.ShowTypingIndicator = true;
chat.OnSendMessage += (sender, message) =>   // browser -> your code
{
    chat.AddMessage("You", message, TsgcHTMLChatMessageAlign.maRight, TsgcHTMLColor.hcPrimary);
};

chat.AddSystemMessage("Today");
chat.AddMessage("Alice", "Hey! Did you get the file?", TsgcHTMLChatMessageAlign.maLeft);
chat.AddImageMessage("You", "/img/receipt.png", TsgcHTMLChatMessageAlign.maRight,
    TsgcHTMLColor.hcPrimary, "Here it is");
chat.AddFileMessage("You", "/files/report.pdf",
    "report.pdf", "248 KB", TsgcHTMLChatMessageAlign.maRight);

string html = chat.HTML;   // messenger markup + scoped CSS

Reference

Key properties & methods

The members you reach for most often.

Messages

Messages is a TsgcHTMLChat_Messages collection; each TsgcHTMLChat_Message carries Text, MessageType (text/image/file/audio/video/system), Status, ReplyToSender/ReplyToText and IsForwarded.

Add messages

AddMessage, AddImageMessage, AddFileMessage and AddSystemMessage(...) append bubbles; maLeft/maRight pick the side.

Title, Subtitle, HeaderAvatarURL and HeaderAvatarInitials build the conversation header (an "online" subtitle adds the green dot).

Composer

ShowInput, InputPlaceholder, ShowAttachButton, ShowEmojiButton, ShowTypingIndicator and TypingText tune the bottom bar.

Options

Options (a TsgcHTMLChat_Options) sets MaxBubbleWidth, bubble/background colors, ShowTimestamp, ShowStatus, GroupConsecutive and ShowDateSeparators.

Events & output

OnSendMessage fires when the visitor submits the composer; OnMediaClick fires on a media tap. HTML returns the chat; GetLastMessageHTML returns just the newest bubble for live pushes.

Resources

Keep exploring

	All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.	Open
	Download Free TrialThe 30-day trial ships the 60.HTML demo projects.	Open
	PricingSingle, Team and Site licenses with full source code.	Open

Chat