En bref

TsgcHTMLComponent_AIChat

Une surface d'assistant qui étend TsgcHTMLComponent_ChatBox avec un en-tête de fournisseur OpenAI / Anthropic / Gemini, des réponses en streaming et des sources RAG repliables. Choisissez un fournisseur, gérez OnChatSend, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_AIChat

Produit

card Bootstrap 5 + CSS dédié

Famille

Chat & IA

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, câblez OnChatSend, affichez-le

Choisissez AIProvider et ModelName, gérez OnChatSend pour produire la réponse, puis lisez HTML. L'événement est la façon dont un message du navigateur atteint votre code Delphi, C++ Builder ou .NET.

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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Fournisseur & modèle

AIProvider sélectionne apOpenAI, apAnthropic, apGemini ou apCustom ; ModelName étiquette l'en-tête ; ShowModelSelector l'active ou le désactive ; AIName nomme l'assistant.

Conversation

SystemPrompt et WelcomeMessage amorcent le chat ; UserColor et AIColor (tous deux TsgcHTMLColor) teintent les bulles ; GetConversationHistoryJSON renvoie le tableau rôle/contenu pour votre appel LLM.

Événement d'envoi

OnChatSend se déclenche avec le message utilisateur et l'historique JSON lorsque le visiteur soumet — le point d'accroche où vous appelez votre modèle. ProcessUserMessage(aMessage) pilote ce flux depuis le code.

Streaming

StreamingEnabled l'active ; BeginStreaming, PushStreamChunk(aChunk) et EndStreaming font croître la réponse jeton par jeton ; GetStreamFragmentHTML renvoie le fragment htmx à envoyer.

Sources RAG

RAGEnabled avec OnRAGContext injecte le contexte récupéré ; RAGDisplayMode (rdInline/rdCollapsible/rdFootnotes) et AddAIMessageWithSources(aText, aSourcesHTML) rendent les citations.

Héritage & sortie

De ChatBox : Messages, Title, Height, InputPlaceholder et ShowTypingIndicator. HTML renvoie la carte entière ; GetLastMessageHTML renvoie uniquement la bulle la plus récente.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

AIChat