ChatBox

TsgcHTMLComponent_ChatBox — eine kartenförmige Chat-Sprechblasen-Box mit Links-/Rechts-Nachrichten, Avataren, einer Eingabeleiste und einem animierten Tipp-Indikator, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_ChatBox

Eine leichtgewichtige Chat-Komponente, die eine Bootstrap-5-card mit scrollbaren Nachrichtensprechblasen und einer optionalen Eingabeleiste ausgibt. Fügen Sie Nachrichten hinzu, setzen Sie einige Eigenschaften und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_ChatBox

Rendert

Bootstrap-5-card + scoped CSS

Familie

Chat & KI

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Nachrichten hinzufügen, rendern

Setzen Sie Title und Height, fügen Sie einige Nachrichten mit AddMessage hinzu (mit caLeft oder caRight) und lesen Sie dann HTML (oder fügen Sie es in eine TsgcHTMLTemplate_Bootstrap-Seite ein).

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 bubbles

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Messages

Messages ist eine TsgcHTMLChatMessages-Sammlung; jede TsgcHTMLChatMessage trägt Sender, Text, Timestamp, Align (caLeft/caRight), Color und AvatarInitials.

Nachricht hinzufügen

AddMessage(aSender, aText, aAlign, aColor, aTimestamp) hängt eine Sprechblase an; die Avatar-Initialen und die Uhrzeit werden für Sie ausgefüllt, wenn sie weggelassen werden.

Eingabeleiste

ShowInput schaltet das Formular um; InputPlaceholder, SendButtonText und SendButtonStyle (ein TsgcHTMLButtonStyle) steuern das Eingabefeld.

Kopfzeile & Tippen

Title setzt die Kartenkopfzeile; ShowTypingIndicator blendet die animierten Punkte ein und TypingText setzt deren Beschriftung.

Identität & Größe

ChatID benennt die Element-ids; Height begrenzt den Scrollbereich (scrollt automatisch zur neuesten Nachricht).

Ausgabe

HTML gibt die gesamte Karte zurück; GetLastMessageHTML gibt nur die neueste Sprechblase zurück — ideal, um ein einzelnes Update über einen WebSocket zu pushen.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen