ChatBox

TsgcHTMLComponent_ChatBox — une boîte à bulles de chat de style carte avec messages à gauche/à droite, avatars, une barre de saisie et un indicateur de frappe animé, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_ChatBox

Un composant de chat léger qui émet une card Bootstrap 5 avec des bulles de message défilables et une barre de saisie optionnelle. Ajoutez des messages, définissez quelques propriétés, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_ChatBox

Produit

card Bootstrap 5 + CSS dédié

Famille

Chat & IA

Langages

Delphi, C++ Builder, .NET

QuickStart

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

Définissez le Title et la Height, ajoutez quelques messages avec AddMessage (en choisissant caLeft ou caRight), puis lisez HTML (ou intégrez-le dans une page TsgcHTMLTemplate_Bootstrap).

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

Référence

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

Les membres que vous utilisez le plus souvent.

Messages

Messages est une collection TsgcHTMLChatMessages ; chaque TsgcHTMLChatMessage porte Sender, Text, Timestamp, Align (caLeft/caRight), Color et AvatarInitials.

Ajouter un message

AddMessage(aSender, aText, aAlign, aColor, aTimestamp) ajoute une bulle ; les initiales de l'avatar et l'heure sont renseignées pour vous lorsqu'elles sont omises.

Barre de saisie

ShowInput active ou désactive le formulaire ; InputPlaceholder, SendButtonText et SendButtonStyle (un TsgcHTMLButtonStyle) contrôlent le compositeur.

En-tête & frappe

Title définit l'en-tête de la carte ; ShowTypingIndicator révèle les points animés et TypingText en définit le libellé.

Identité & taille

ChatID nomme les identifiants d'éléments ; Height borne la zone de défilement (défile automatiquement vers le message le plus récent).

Sortie

HTML renvoie la carte entière ; GetLastMessageHTML renvoie uniquement la bulle la plus récente — idéal pour envoyer une seule mise à jour via un WebSocket.

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