ChatBox
TsgcHTMLComponent_ChatBox — un riquadro chat a bolle in stile card con messaggi a sinistra/destra, avatar, una barra di input e un indicatore di digitazione animato, in Delphi, C++ Builder e .NET.
TsgcHTMLComponent_ChatBox — un riquadro chat a bolle in stile card con messaggi a sinistra/destra, avatar, una barra di input e un indicatore di digitazione animato, in Delphi, C++ Builder e .NET.
Un componente chat leggero che emette una card Bootstrap 5 con bolle di messaggio scorrevoli e una barra di input opzionale. Aggiungi i messaggi, imposta alcune proprietà, quindi leggi la proprietà HTML.
TsgcHTMLComponent_ChatBox
Bootstrap 5 card + scoped CSS
Delphi, C++ Builder, .NET
Imposta Title e Height, inserisci alcuni messaggi con AddMessage (scegliendo caLeft o caRight), quindi leggi HTML (oppure inseriscilo in una pagina 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 bubblesI membri che utilizzerai più spesso.
Messages è una collezione TsgcHTMLChatMessages; ogni TsgcHTMLChatMessage porta Sender, Text, Timestamp, Align (caLeft/caRight), Color e AvatarInitials.
AddMessage(aSender, aText, aAlign, aColor, aTimestamp) aggiunge una bolla; le iniziali dell’avatar e l’ora vengono compilate automaticamente quando omesse.
ShowInput attiva/disattiva il modulo; InputPlaceholder, SendButtonText e SendButtonStyle (un TsgcHTMLButtonStyle) controllano il campo di composizione.
Title imposta l’intestazione della card; ShowTypingIndicator mostra i puntini animati e TypingText ne imposta l’etichetta.
ChatID assegna gli id degli elementi; Height delimita l’area di scorrimento (scorre automaticamente fino al messaggio più recente).
HTML restituisce l’intera card; GetLastMessageHTML restituisce solo la bolla più recente — ideale per inviare un singolo aggiornamento tramite WebSocket.