ChatBox
TsgcHTMLComponent_ChatBox — een chat-bubbelvenster in kaartstijl met berichten links/rechts, avatars, een invoerbalk en een geanimeerde typindicator, in Delphi, C++ Builder en .NET.
TsgcHTMLComponent_ChatBox — een chat-bubbelvenster in kaartstijl met berichten links/rechts, avatars, een invoerbalk en een geanimeerde typindicator, in Delphi, C++ Builder en .NET.
Een lichtgewicht chat-component die een Bootstrap 5 card met scrollbare berichtbubbels en een optionele invoerbalk genereert. Voeg berichten toe, stel een paar eigenschappen in en lees vervolgens de eigenschap HTML.
TsgcHTMLComponent_ChatBox
Bootstrap 5 card + scoped CSS
Delphi, C++ Builder, .NET
Stel de Title en Height in, voeg een paar berichten toe met AddMessage (kies caLeft of caRight) en lees vervolgens HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).
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 bubblesDe members die je het vaakst gebruikt.
Messages is een TsgcHTMLChatMessages-verzameling; elk TsgcHTMLChatMessage draagt Sender, Text, Timestamp, Align (caLeft/caRight), Color en AvatarInitials.
AddMessage(aSender, aText, aAlign, aColor, aTimestamp) voegt een bubbel toe; de avatarinitialen en de tijd worden voor je ingevuld wanneer ze worden weggelaten.
ShowInput schakelt het formulier in of uit; InputPlaceholder, SendButtonText en SendButtonStyle (een TsgcHTMLButtonStyle) sturen de composer aan.
Title stelt de kaartkop in; ShowTypingIndicator toont de geanimeerde stippen en TypingText stelt het bijbehorende label in.
ChatID benoemt de element-id's; Height begrenst het scrollgebied (scrollt automatisch naar het nieuwste bericht).
HTML geeft de volledige kaart terug; GetLastMessageHTML geeft alleen de meest recente bubbel terug — ideaal om één update over een WebSocket te pushen.