ChatBox
TsgcHTMLComponent_ChatBox — a card-style chat bubble box with left/right messages, avatars, an input bar and an animated typing indicator, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_ChatBox — a card-style chat bubble box with left/right messages, avatars, an input bar and an animated typing indicator, in Delphi, C++ Builder and .NET.
A lightweight chat component that emits a Bootstrap 5 card with scrollable message bubbles and an optional input bar. Add messages, set a few properties, then read the HTML property.
TsgcHTMLComponent_ChatBox
Bootstrap 5 card + scoped CSS
Delphi, C++ Builder, .NET
Set the Title and Height, push a few messages with AddMessage (choosing caLeft or caRight), then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).
uses
sgcHTML_Enums, sgcHTML_Component_ChatBox;
var
oChat: TsgcHTMLComponent_ChatBox;
begin
oChat := TsgcHTMLComponent_ChatBox.Create(nil);
try
oChat.Title := 'Support';
oChat.Height := '400px';
oChat.ShowInput := True;
oChat.InputPlaceholder := 'Type a message...';
oChat.ShowTypingIndicator := True;
oChat.AddMessage('Alice', 'Hi, how can I help?', caLeft, hcSecondary);
oChat.AddMessage('You', 'My order has not arrived.', caRight, hcPrimary);
WebModule.Response := oChat.HTML; // Bootstrap card + chat bubbles
finally
oChat.Free;
end;
end;
// Append a single new bubble (e.g. over a WebSocket push):
oChat.AddMessage('Alice', 'Let me check that for you.', caLeft);
WebSocket.WriteData(oChat.GetLastMessageHTML);// includes: sgcHTML_Enums.hpp, sgcHTML_Component_ChatBox.hpp
TsgcHTMLComponent_ChatBox *oChat = new TsgcHTMLComponent_ChatBox(NULL);
try
{
oChat->Title = "Support";
oChat->Height = "400px";
oChat->ShowInput = true;
oChat->InputPlaceholder = "Type a message...";
oChat->ShowTypingIndicator = true;
oChat->AddMessage("Alice", "Hi, how can I help?", caLeft, hcSecondary);
oChat->AddMessage("You", "My order has not arrived.", caRight, hcPrimary);
String html = oChat->HTML; // Bootstrap card + chat bubbles
}
__finally
{
delete oChat;
}using esegece.sgcWebSockets;
var chat = new TsgcHTMLComponent_ChatBox();
chat.Title = "Support";
chat.Height = "400px";
chat.ShowInput = true;
chat.InputPlaceholder = "Type a message...";
chat.ShowTypingIndicator = true;
chat.AddMessage("Alice", "Hi, how can I help?", TsgcHTMLChatAlign.caLeft, TsgcHTMLColor.hcSecondary);
chat.AddMessage("You", "My order has not arrived.", TsgcHTMLChatAlign.caRight, TsgcHTMLColor.hcPrimary);
string html = chat.HTML; // Bootstrap card + chat bubblesThe members you reach for most often.
Messages is a TsgcHTMLChatMessages collection; each TsgcHTMLChatMessage carries Sender, Text, Timestamp, Align (caLeft/caRight), Color and AvatarInitials.
AddMessage(aSender, aText, aAlign, aColor, aTimestamp) appends a bubble; the avatar initials and time are filled in for you when omitted.
ShowInput toggles the form; InputPlaceholder, SendButtonText and SendButtonStyle (a TsgcHTMLButtonStyle) control the composer.
Title sets the card header; ShowTypingIndicator reveals the animated dots and TypingText sets its label.
ChatID names the element ids; Height bounds the scroll area (auto-scrolls to the newest message).
HTML returns the whole card; GetLastMessageHTML returns only the most recent bubble — ideal for pushing a single update over a WebSocket.