Komponent ChatBox — sgcHTML

W skrócie

TsgcHTMLComponent_ChatBox

Lekki komponent czatu, który generuje element card Bootstrap 5 z przewijalnymi dymkami wiadomości i opcjonalnym paskiem wprowadzania. Dodaj wiadomości, ustaw kilka właściwości, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_ChatBox

Renderuje

Bootstrap 5 card + dedykowany CSS

Rodzina

Czat i AI

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz go, dodaj wiadomości, wyrenderuj

Ustaw Title i Height, dodaj kilka wiadomości za pomocą AddMessage (wybierając caLeft lub caRight), a następnie odczytaj HTML (albo umieść go na stronie 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Wiadomości

Messages to kolekcja TsgcHTMLChatMessages; każda TsgcHTMLChatMessage niesie Sender, Text, Timestamp, Align (caLeft/caRight), Color i AvatarInitials.

Dodawanie wiadomości

AddMessage(aSender, aText, aAlign, aColor, aTimestamp) dołącza dymek; inicjały awatara i godzina są uzupełniane automatycznie, gdy je pominiesz.

Pasek wprowadzania

ShowInput przełącza formularz; InputPlaceholder, SendButtonText i SendButtonStyle (TsgcHTMLButtonStyle) sterują polem tworzenia wiadomości.

Nagłówek i pisanie

Title ustawia nagłówek karty; ShowTypingIndicator pokazuje animowane kropki, a TypingText ustawia jego etykietę.

Tożsamość i rozmiar

ChatID nadaje nazwy identyfikatorom elementów; Height ogranicza obszar przewijania (automatycznie przewija do najnowszej wiadomości).

Wynik

HTML zwraca całą kartę; GetLastMessageHTML zwraca tylko najnowszy dymek — idealne do wypchnięcia pojedynczej aktualizacji przez WebSocket.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

ChatBox