ChatBox
TsgcHTMLComponent_ChatBox — Delphi, C++ Builder 및 .NET에서 좌/우 메시지, 아바타, 입력 바 및 애니메이션 입력 중 표시기를 갖춘 카드 스타일의 채팅 말풍선 박스입니다.
TsgcHTMLComponent_ChatBox — Delphi, C++ Builder 및 .NET에서 좌/우 메시지, 아바타, 입력 바 및 애니메이션 입력 중 표시기를 갖춘 카드 스타일의 채팅 말풍선 박스입니다.
스크롤 가능한 메시지 말풍선과 선택적 입력 바가 있는 Bootstrap 5 card를 내보내는 가벼운 채팅 컴포넌트입니다. 메시지를 추가하고, 몇 가지 속성을 설정한 다음, HTML 속성을 읽습니다.
TsgcHTMLComponent_ChatBox
Bootstrap 5 card + 범위 지정 CSS
Delphi, C++ Builder, .NET
Title과 Height를 설정하고, AddMessage로 메시지 몇 개를 추가하고(caLeft 또는 caRight를 선택), HTML을 읽습니다(또는 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가장 자주 사용하게 되는 멤버.
Messages는 TsgcHTMLChatMessages 컬렉션입니다. 각 TsgcHTMLChatMessage는 Sender, Text, Timestamp, Align(caLeft/caRight), Color 및 AvatarInitials를 담습니다.
AddMessage(aSender, aText, aAlign, aColor, aTimestamp)는 말풍선을 추가합니다. 생략하면 아바타 이니셜과 시간이 자동으로 채워집니다.
ShowInput은 폼을 토글합니다. InputPlaceholder, SendButtonText 및 SendButtonStyle(TsgcHTMLButtonStyle)이 작성기를 제어합니다.
Title은 카드 헤더를 설정합니다. ShowTypingIndicator는 애니메이션 점을 표시하고 TypingText는 그 레이블을 설정합니다.
ChatID는 요소 id의 이름을 지정합니다. Height는 스크롤 영역의 경계를 정합니다(가장 최신 메시지로 자동 스크롤).
HTML은 카드 전체를 반환합니다. GetLastMessageHTML은 가장 최근 말풍선만 반환합니다 — WebSocket으로 단일 업데이트를 푸시하는 데 이상적입니다.