ChatBox
TsgcHTMLComponent_ChatBox — una caja de burbujas de chat estilo tarjeta con mensajes a izquierda/derecha, avatares, una barra de entrada y un indicador de escritura animado, en Delphi, C++ Builder y .NET.
TsgcHTMLComponent_ChatBox — una caja de burbujas de chat estilo tarjeta con mensajes a izquierda/derecha, avatares, una barra de entrada y un indicador de escritura animado, en Delphi, C++ Builder y .NET.
Un componente de chat ligero que emite una card de Bootstrap 5 con burbujas de mensajes desplazables y una barra de entrada opcional. Añade mensajes, define unas pocas propiedades y luego lee la propiedad HTML.
TsgcHTMLComponent_ChatBox
card de Bootstrap 5 + CSS con ámbito
Delphi, C++ Builder, .NET
Define Title y Height, envía unos cuantos mensajes con AddMessage (eligiendo caLeft o caRight) y luego lee HTML (o insértalo en una página TsgcHTMLTemplate_Bootstrap).
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 bubblesLos miembros que más vas a usar.
Messages es una colección TsgcHTMLChatMessages; cada TsgcHTMLChatMessage lleva Sender, Text, Timestamp, Align (caLeft/caRight), Color y AvatarInitials.
AddMessage(aSender, aText, aAlign, aColor, aTimestamp) añade una burbuja; las iniciales del avatar y la hora se rellenan por ti cuando se omiten.
ShowInput activa o desactiva el formulario; InputPlaceholder, SendButtonText y SendButtonStyle (un TsgcHTMLButtonStyle) controlan el redactor.
Title define la cabecera de la tarjeta; ShowTypingIndicator muestra los puntos animados y TypingText define su etiqueta.
ChatID nombra los ids de los elementos; Height acota el área de desplazamiento (se desplaza automáticamente al mensaje más reciente).
HTML devuelve la tarjeta completa; GetLastMessageHTML devuelve solo la burbuja más reciente — ideal para enviar una única actualización por un WebSocket.