ChatBox 组件 — sgcHTML

概览

TsgcHTMLComponent_ChatBox

一个轻量级聊天组件，发出带有可滚动消息气泡和可选输入栏的 Bootstrap 5 card。添加消息，设置几个属性，然后读取 HTML 属性。

组件类

TsgcHTMLComponent_ChatBox

渲染为

Bootstrap 5 card + 作用域 CSS

家族

聊天与 AI

语言

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 推送单条更新。

资源

继续探索

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

ChatBox