ChatBox

TsgcHTMLComponent_ChatBox — uma caixa de bolhas de chat estilo card com mensagens à esquerda/direita, avatares, uma barra de entrada e um indicador de digitação animado, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_ChatBox

Um componente de chat leve que emite um card do Bootstrap 5 com bolhas de mensagem roláveis e uma barra de entrada opcional. Adicione mensagens, defina algumas propriedades e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_ChatBox

Renderiza

card do Bootstrap 5 + CSS com escopo

Família

Chat & IA

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione mensagens, renderize

Defina o Title e a Height, adicione algumas mensagens com AddMessage (escolhendo caLeft ou caRight) e então leia HTML (ou insira-o em uma página 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Mensagens

Messages é uma coleção TsgcHTMLChatMessages; cada TsgcHTMLChatMessage carrega Sender, Text, Timestamp, Align (caLeft/caRight), Color e AvatarInitials.

Adicionar uma mensagem

AddMessage(aSender, aText, aAlign, aColor, aTimestamp) adiciona uma bolha; as iniciais do avatar e a hora são preenchidas para você quando omitidas.

Barra de entrada

ShowInput alterna o formulário; InputPlaceholder, SendButtonText e SendButtonStyle (um TsgcHTMLButtonStyle) controlam o compositor.

Cabeçalho & digitação

Title define o cabeçalho do card; ShowTypingIndicator revela os pontos animados e TypingText define seu rótulo.

Identidade & tamanho

ChatID nomeia os ids dos elementos; Height delimita a área de rolagem (rola automaticamente até a mensagem mais recente).

Saída

HTML retorna o card inteiro; GetLastMessageHTML retorna apenas a bolha mais recente — ideal para enviar uma única atualização por um WebSocket.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir