Chat
TsgcHTMLComponent_Chat — テキスト、画像、ファイル、音声、動画メッセージ、既読確認、返信、日付区切りを備えた WhatsApp スタイルのメッセンジャーを Delphi、C++ Builder、.NET で実現します。
TsgcHTMLComponent_Chat — テキスト、画像、ファイル、音声、動画メッセージ、既読確認、返信、日付区切りを備えた WhatsApp スタイルのメッセンジャーを Delphi、C++ Builder、.NET で実現します。
スコープ付き CSS とメッセンジャーのマークアップを出力する完全なチャット画面です。アバター付きのヘッダー、グループ化された吹き出し、ステータスのチェックマーク、メディア添付、入力欄を備えます。メッセージを追加し、ヘッダーを設定したら、HTML プロパティを読み取ります。
TsgcHTMLComponent_Chat
スコープ付き CSS + メッセンジャーのマークアップ
Delphi, C++ Builder, .NET
ヘッダー（Title、Subtitle、HeaderAvatarInitials）を設定し、テキスト・画像・ファイルメッセージを追加し、OnSendMessage を処理したら、HTML を読み取ります。
uses
sgcHTML_Enums, sgcHTML_Component_Chat;
var
oChat: TsgcHTMLComponent_Chat;
begin
oChat := TsgcHTMLComponent_Chat.Create(nil);
try
oChat.Title := 'Alice Johnson';
oChat.Subtitle := 'online';
oChat.HeaderAvatarInitials := 'AJ';
oChat.Height := '500px';
oChat.ShowTypingIndicator := True;
oChat.OnSendMessage := DoSendMessage; // browser -> your code
oChat.AddSystemMessage('Today');
oChat.AddMessage('Alice', 'Hey! Did you get the file?', maLeft);
oChat.AddImageMessage('You', '/img/receipt.png', maRight,
hcPrimary, 'Here it is');
oChat.AddFileMessage('You', '/files/report.pdf',
'report.pdf', '248 KB', maRight);
WebModule.Response := oChat.HTML; // messenger markup + scoped CSS
finally
oChat.Free;
end;
end;
// OnSendMessage fires when the visitor submits the composer:
procedure TForm1.DoSendMessage(Sender: TObject; const aMessage: string);
begin
oChat.AddMessage('You', aMessage, maRight, hcPrimary);
WebSocket.WriteData(oChat.GetLastMessageHTML);
end;// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Chat.hpp
TsgcHTMLComponent_Chat *oChat = new TsgcHTMLComponent_Chat(NULL);
try
{
oChat->Title = "Alice Johnson";
oChat->Subtitle = "online";
oChat->HeaderAvatarInitials = "AJ";
oChat->Height = "500px";
oChat->ShowTypingIndicator = true;
oChat->OnSendMessage = DoSendMessage; // browser -> your code
oChat->AddSystemMessage("Today");
oChat->AddMessage("Alice", "Hey! Did you get the file?", maLeft);
oChat->AddImageMessage("You", "/img/receipt.png", maRight,
hcPrimary, "Here it is");
oChat->AddFileMessage("You", "/files/report.pdf",
"report.pdf", "248 KB", maRight);
String html = oChat->HTML; // messenger markup + scoped CSS
}
__finally
{
delete oChat;
}using esegece.sgcWebSockets;
var chat = new TsgcHTMLComponent_Chat();
chat.Title = "Alice Johnson";
chat.Subtitle = "online";
chat.HeaderAvatarInitials = "AJ";
chat.Height = "500px";
chat.ShowTypingIndicator = true;
chat.OnSendMessage += (sender, message) => // browser -> your code
{
chat.AddMessage("You", message, TsgcHTMLChatMessageAlign.maRight, TsgcHTMLColor.hcPrimary);
};
chat.AddSystemMessage("Today");
chat.AddMessage("Alice", "Hey! Did you get the file?", TsgcHTMLChatMessageAlign.maLeft);
chat.AddImageMessage("You", "/img/receipt.png", TsgcHTMLChatMessageAlign.maRight,
TsgcHTMLColor.hcPrimary, "Here it is");
chat.AddFileMessage("You", "/files/report.pdf",
"report.pdf", "248 KB", TsgcHTMLChatMessageAlign.maRight);
string html = chat.HTML; // messenger markup + scoped CSS最もよく使うメンバー。
Messages は TsgcHTMLChat_Messages コレクションです。各 TsgcHTMLChat_Message は、Text、MessageType（テキスト/画像/ファイル/音声/動画/システム）、Status、ReplyToSender/ReplyToText、IsForwarded を持ちます。
AddMessage、AddImageMessage、AddFileMessage、AddSystemMessage(...) が吹き出しを追加します。maLeft/maRight が表示する側を選びます。
Title、Subtitle、HeaderAvatarURL、HeaderAvatarInitials が会話のヘッダーを構築します（"online" のサブタイトルは緑色のドットを追加します）。
ShowInput、InputPlaceholder、ShowAttachButton、ShowEmojiButton、ShowTypingIndicator、TypingText が下部のバーを調整します。
Options（TsgcHTMLChat_Options）は、MaxBubbleWidth、吹き出し/背景の色、ShowTimestamp、ShowStatus、GroupConsecutive、ShowDateSeparators を設定します。
訪問者が入力欄を送信すると OnSendMessage が発火し、メディアをタップすると OnMediaClick が発火します。HTML はチャットを返し、GetLastMessageHTML はライブプッシュ用に最新の吹き出しだけを返します。