Auf einen Blick

TsgcHTMLComponent_AIChat

Eine Assistentenoberfläche, die TsgcHTMLComponent_ChatBox um eine OpenAI-/Anthropic-/Gemini-Provider-Kopfzeile, gestreamte Antworten und einklappbare RAG-Quellen erweitert. Wählen Sie einen Provider, behandeln Sie OnChatSend und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_AIChat

Rendert

Bootstrap-5-card + scoped CSS

Familie

Chat & KI

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, OnChatSend verbinden, rendern

Wählen Sie AIProvider und ModelName, behandeln Sie OnChatSend, um die Antwort zu erzeugen, und lesen Sie dann HTML. Über das Ereignis erreicht eine Browsernachricht Ihren Delphi-, C++-Builder- oder .NET-Code.

uses
  sgcHTML_Enums, sgcHTML_Component_AIChat;

var
  oAI: TsgcHTMLComponent_AIChat;
begin
  oAI := TsgcHTMLComponent_AIChat.Create(nil);
  try
    oAI.AIProvider := apOpenAI;
    oAI.ModelName := 'gpt-4o';
    oAI.AIName := 'Support Bot';
    oAI.SystemPrompt := 'You are a helpful assistant.';
    oAI.WelcomeMessage := 'Hi! Ask me anything.';
    oAI.StreamingEnabled := True;
    oAI.OnChatSend := DoChatSend;   // browser message -> your code

    WebModule.Response := oAI.HTML;   // Bootstrap card + AI header
  finally
    oAI.Free;
  end;
end;

// OnChatSend hands you the user message + the JSON history,
// you call your LLM and stream the answer back:
procedure TForm1.DoChatSend(Sender: TObject; const aUserMessage,
  aConversationHistory: string);
begin
  oAI.BeginStreaming;
  oAI.PushStreamChunk('Sure, ');
  oAI.PushStreamChunk('here is the answer...');
  oAI.EndStreaming;
  WebSocket.WriteData(oAI.GetStreamFragmentHTML);
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_AIChat.hpp

TsgcHTMLComponent_AIChat *oAI = new TsgcHTMLComponent_AIChat(NULL);
try
{
  oAI->AIProvider = apOpenAI;
  oAI->ModelName = "gpt-4o";
  oAI->AIName = "Support Bot";
  oAI->SystemPrompt = "You are a helpful assistant.";
  oAI->WelcomeMessage = "Hi! Ask me anything.";
  oAI->StreamingEnabled = true;
  oAI->OnChatSend = DoChatSend;   // browser message -> your code

  String html = oAI->HTML;   // Bootstrap card + AI header
}
__finally
{
  delete oAI;
}

// OnChatSend handler: call your LLM, then stream the reply:
void __fastcall TForm1::DoChatSend(TObject *Sender,
  const String aUserMessage, const String aConversationHistory)
{
  oAI->BeginStreaming();
  oAI->PushStreamChunk("Sure, ");
  oAI->PushStreamChunk("here is the answer...");
  oAI->EndStreaming();
}

using esegece.sgcWebSockets;

var ai = new TsgcHTMLComponent_AIChat();
ai.AIProvider = TsgcHTMLAIProvider.apOpenAI;
ai.ModelName = "gpt-4o";
ai.AIName = "Support Bot";
ai.SystemPrompt = "You are a helpful assistant.";
ai.WelcomeMessage = "Hi! Ask me anything.";
ai.StreamingEnabled = true;

// OnChatSend: browser message -> your code -> stream the reply
ai.OnChatSend += (sender, userMessage, conversationHistory) =>
{
    ai.BeginStreaming();
    ai.PushStreamChunk("Sure, ");
    ai.PushStreamChunk("here is the answer...");
    ai.EndStreaming();
};

string html = ai.HTML;   // Bootstrap card + AI header

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Provider & Modell

AIProvider wählt apOpenAI, apAnthropic, apGemini oder apCustom; ModelName beschriftet die Kopfzeile; ShowModelSelector blendet sie ein/aus; AIName benennt den Assistenten.

Konversation

SystemPrompt und WelcomeMessage initialisieren den Chat; UserColor und AIColor (beide TsgcHTMLColor) färben die Sprechblasen; GetConversationHistoryJSON gibt das Rollen-/Inhalt-Array für Ihren LLM-Aufruf zurück.

Send-Ereignis

OnChatSend wird mit der Benutzernachricht und dem JSON-Verlauf ausgelöst, wenn der Besucher absendet — der Hook, an dem Sie Ihr Modell aufrufen. ProcessUserMessage(aMessage) steuert diesen Ablauf aus Code.

Streaming

StreamingEnabled aktiviert es; BeginStreaming, PushStreamChunk(aChunk) und EndStreaming lassen die Antwort Token für Token wachsen; GetStreamFragmentHTML gibt das htmx-Fragment zum Pushen zurück.

RAG-Quellen

RAGEnabled mit OnRAGContext fügt abgerufenen Kontext ein; RAGDisplayMode (rdInline/rdCollapsible/rdFootnotes) und AddAIMessageWithSources(aText, aSourcesHTML) rendern die Quellenangaben.

Geerbt & Ausgabe

Von ChatBox: Messages, Title, Height, InputPlaceholder und ShowTypingIndicator. HTML gibt die gesamte Karte zurück; GetLastMessageHTML gibt nur die neueste Sprechblase zurück.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

AIChat