En bref

TsgcHTMLComponent_Chat

Une surface de chat complète qui émet du CSS dédié plus le balisage de la messagerie : un en-tête avec avatar, des bulles groupées, des coches d'état, des pièces jointes multimédias et un compositeur. Ajoutez des messages, définissez l'en-tête, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Chat

Produit

CSS dédié + balisage de messagerie

Famille

Chat & IA

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, ajoutez des messages, affichez-le

Définissez l'en-tête (Title, Subtitle, HeaderAvatarInitials), ajoutez des messages texte, image et fichier, gérez OnSendMessage, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Messages

Messages est une collection TsgcHTMLChat_Messages ; chaque TsgcHTMLChat_Message porte Text, MessageType (texte/image/fichier/audio/vidéo/système), Status, ReplyToSender/ReplyToText et IsForwarded.

Ajouter des messages

AddMessage, AddImageMessage, AddFileMessage et AddSystemMessage(...) ajoutent des bulles ; maLeft/maRight choisissent le côté.

En-tête

Title, Subtitle, HeaderAvatarURL et HeaderAvatarInitials construisent l'en-tête de conversation (un sous-titre « online » ajoute le point vert).

Compositeur

ShowInput, InputPlaceholder, ShowAttachButton, ShowEmojiButton, ShowTypingIndicator et TypingText ajustent la barre inférieure.

Options

Options (un TsgcHTMLChat_Options) définit MaxBubbleWidth, les couleurs des bulles et de l'arrière-plan, ShowTimestamp, ShowStatus, GroupConsecutive et ShowDateSeparators.

Événements & sortie

OnSendMessage se déclenche lorsque le visiteur soumet le compositeur ; OnMediaClick se déclenche au clic sur un média. HTML renvoie le chat ; GetLastMessageHTML renvoie uniquement la bulle la plus récente pour les envois en direct.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

Chat