ChatBox
TsgcHTMLComponent_ChatBox — Delphi, C++ Builder ve .NET'te sol/sağ iletiler, avatarlar, bir girdi çubuğu ve animasyonlu bir yazma göstergesi içeren kart tarzı bir sohbet balonu kutusu.
TsgcHTMLComponent_ChatBox — Delphi, C++ Builder ve .NET'te sol/sağ iletiler, avatarlar, bir girdi çubuğu ve animasyonlu bir yazma göstergesi içeren kart tarzı bir sohbet balonu kutusu.
Kaydırılabilir ileti balonları ve isteğe bağlı bir girdi çubuğu içeren bir Bootstrap 5 card üreten hafif bir sohbet bileşeni. İletiler ekleyin, birkaç özellik ayarlayın, ardından HTML özelliğini okuyun.
TsgcHTMLComponent_ChatBox
Bootstrap 5 card + kapsamlı CSS
Delphi, C++ Builder, .NET
Title ve Height'ı ayarlayın, AddMessage ile birkaç ileti ekleyin (caLeft ya da caRight'ı seçerek), ardından HTML'i okuyun (ya da bir TsgcHTMLTemplate_Bootstrap sayfasına bırakın).
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 bubblesEn sık başvurduğunuz üyeler.
Messages bir TsgcHTMLChatMessages koleksiyonudur; her TsgcHTMLChatMessage, Sender, Text, Timestamp, Align (caLeft/caRight), Color ve AvatarInitials taşır.
AddMessage(aSender, aText, aAlign, aColor, aTimestamp) bir balon ekler; atlandığında avatar baş harfleri ve saat sizin için doldurulur.
ShowInput formu açıp kapatır; InputPlaceholder, SendButtonText ve SendButtonStyle (bir TsgcHTMLButtonStyle) oluşturma çubuğunu denetler.
Title kart üstbilgisini ayarlar; ShowTypingIndicator animasyonlu noktaları açığa çıkarır ve TypingText etiketini ayarlar.
ChatID öğe kimliklerini adlandırır; Height kaydırma alanını sınırlar (en yeni iletiye otomatik kaydırır).
HTML tüm kartı döndürür; GetLastMessageHTML yalnızca en son balonu döndürür — bir WebSocket üzerinden tek bir güncelleme göndermek için idealdir.