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 経由で単一の更新をプッシュするのに最適です。