Chat

TsgcHTMLComponent_Chat — 一个 WhatsApp 风格的即时通讯工具,支持文本、图片、文件、音频和视频消息、已读回执、回复和日期分隔符,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Chat

一个完整的聊天界面,发出作用域 CSS 以及即时通讯标记:带有头像的页眉、分组气泡、状态对勾、媒体附件和编辑器。添加消息,设置页眉,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Chat

渲染为

作用域 CSS + 即时通讯标记

家族

聊天与 AI

语言

Delphi, C++ Builder, .NET

创建它、添加消息、渲染它

设置页眉(TitleSubtitleHeaderAvatarInitials),添加文本、图片和文件消息,处理 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 携带 TextMessageType(文本/图片/文件/音频/视频/系统)、StatusReplyToSender/ReplyToTextIsForwarded

添加消息

AddMessageAddImageMessageAddFileMessageAddSystemMessage(...) 追加气泡;maLeft/maRight 选择一侧。

页眉

TitleSubtitleHeaderAvatarURLHeaderAvatarInitials 构建会话页眉("online" 副标题会添加绿色圆点)。

编辑器

ShowInputInputPlaceholderShowAttachButtonShowEmojiButtonShowTypingIndicatorTypingText 调整底部栏。

选项

Options(一个 TsgcHTMLChat_Options)设置 MaxBubbleWidth、气泡/背景颜色、ShowTimestampShowStatusGroupConsecutiveShowDateSeparators

事件与输出

当访客提交编辑器时,OnSendMessage 触发;点击媒体时 OnMediaClick 触发。HTML 返回聊天;GetLastMessageHTML 仅返回最新气泡,用于实时推送。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。