Auf einen Blick

TsgcHTMLComponent_Chat

Eine vollständige Chat-Oberfläche, die scoped CSS sowie das Messenger-Markup ausgibt: eine Kopfzeile mit Avatar, gruppierte Sprechblasen, Status-Häkchen, Medienanhänge und ein Eingabefeld. Fügen Sie Nachrichten hinzu, setzen Sie die Kopfzeile und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Chat

Rendert

Scoped CSS + Messenger-Markup

Familie

Chat & KI

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Nachrichten hinzufügen, rendern

Setzen Sie die Kopfzeile (Title, Subtitle, HeaderAvatarInitials), fügen Sie Text-, Bild- und Dateinachrichten hinzu, behandeln Sie OnSendMessage und lesen Sie dann HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_Chat;

var
  oChat: TsgcHTMLComponent_Chat;
begin
  oChat := TsgcHTMLComponent_Chat.Create(nil);
  try
    oChat.Title := 'Alice Johnson';
    oChat.Subtitle := 'online';
    oChat.HeaderAvatarInitials := 'AJ';
    oChat.Height := '500px';
    oChat.ShowTypingIndicator := True;
    oChat.OnSendMessage := DoSendMessage;   // browser -> your code

    oChat.AddSystemMessage('Today');
    oChat.AddMessage('Alice', 'Hey! Did you get the file?', maLeft);
    oChat.AddImageMessage('You', '/img/receipt.png', maRight,
      hcPrimary, 'Here it is');
    oChat.AddFileMessage('You', '/files/report.pdf',
      'report.pdf', '248 KB', maRight);

    WebModule.Response := oChat.HTML;   // messenger markup + scoped CSS
  finally
    oChat.Free;
  end;
end;

// OnSendMessage fires when the visitor submits the composer:
procedure TForm1.DoSendMessage(Sender: TObject; const aMessage: string);
begin
  oChat.AddMessage('You', aMessage, maRight, hcPrimary);
  WebSocket.WriteData(oChat.GetLastMessageHTML);
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Chat.hpp

TsgcHTMLComponent_Chat *oChat = new TsgcHTMLComponent_Chat(NULL);
try
{
  oChat->Title = "Alice Johnson";
  oChat->Subtitle = "online";
  oChat->HeaderAvatarInitials = "AJ";
  oChat->Height = "500px";
  oChat->ShowTypingIndicator = true;
  oChat->OnSendMessage = DoSendMessage;   // browser -> your code

  oChat->AddSystemMessage("Today");
  oChat->AddMessage("Alice", "Hey! Did you get the file?", maLeft);
  oChat->AddImageMessage("You", "/img/receipt.png", maRight,
    hcPrimary, "Here it is");
  oChat->AddFileMessage("You", "/files/report.pdf",
    "report.pdf", "248 KB", maRight);

  String html = oChat->HTML;   // messenger markup + scoped CSS
}
__finally
{
  delete oChat;
}

using esegece.sgcWebSockets;

var chat = new TsgcHTMLComponent_Chat();
chat.Title = "Alice Johnson";
chat.Subtitle = "online";
chat.HeaderAvatarInitials = "AJ";
chat.Height = "500px";
chat.ShowTypingIndicator = true;
chat.OnSendMessage += (sender, message) =>   // browser -> your code
{
    chat.AddMessage("You", message, TsgcHTMLChatMessageAlign.maRight, TsgcHTMLColor.hcPrimary);
};

chat.AddSystemMessage("Today");
chat.AddMessage("Alice", "Hey! Did you get the file?", TsgcHTMLChatMessageAlign.maLeft);
chat.AddImageMessage("You", "/img/receipt.png", TsgcHTMLChatMessageAlign.maRight,
    TsgcHTMLColor.hcPrimary, "Here it is");
chat.AddFileMessage("You", "/files/report.pdf",
    "report.pdf", "248 KB", TsgcHTMLChatMessageAlign.maRight);

string html = chat.HTML;   // messenger markup + scoped CSS

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Messages

Messages ist eine TsgcHTMLChat_Messages-Sammlung; jede TsgcHTMLChat_Message trägt Text, MessageType (Text/Bild/Datei/Audio/Video/System), Status, ReplyToSender/ReplyToText und IsForwarded.

Nachrichten hinzufügen

AddMessage, AddImageMessage, AddFileMessage und AddSystemMessage(...) hängen Sprechblasen an; maLeft/maRight wählen die Seite.

Kopfzeile

Title, Subtitle, HeaderAvatarURL und HeaderAvatarInitials bauen die Konversationskopfzeile auf (ein "online"-Untertitel ergänzt den grünen Punkt).

Eingabefeld

ShowInput, InputPlaceholder, ShowAttachButton, ShowEmojiButton, ShowTypingIndicator und TypingText passen die untere Leiste an.

Optionen

Options (ein TsgcHTMLChat_Options) setzt MaxBubbleWidth, Sprechblasen-/Hintergrundfarben, ShowTimestamp, ShowStatus, GroupConsecutive und ShowDateSeparators.

Ereignisse & Ausgabe

OnSendMessage wird ausgelöst, wenn der Besucher das Eingabefeld absendet; OnMediaClick wird bei einem Medien-Tap ausgelöst. HTML gibt den Chat zurück; GetLastMessageHTML gibt nur die neueste Sprechblase für Live-Pushes zurück.

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

Chat