Visão geral

TsgcHTMLComponent_AIChat

Uma superfície de assistente que estende TsgcHTMLComponent_ChatBox com um cabeçalho de provedor OpenAI / Anthropic / Gemini, respostas em streaming e fontes RAG recolhíveis. Escolha um provedor, trate OnChatSend e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_AIChat

Renderiza

card do Bootstrap 5 + CSS com escopo

Família

Chat & IA

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, conecte OnChatSend, renderize

Escolha AIProvider e ModelName, trate OnChatSend para produzir a resposta e então leia HTML. O evento é como uma mensagem do navegador chega ao seu código 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Provedor & modelo

AIProvider seleciona apOpenAI, apAnthropic, apGemini ou apCustom; ModelName rotula o cabeçalho; ShowModelSelector o alterna; AIName nomeia o assistente.

Conversa

SystemPrompt e WelcomeMessage inicializam o chat; UserColor e AIColor (ambos TsgcHTMLColor) tingem as bolhas; GetConversationHistoryJSON retorna o array de role/content para sua chamada de LLM.

Evento de envio

OnChatSend dispara com a mensagem do usuário e o histórico JSON quando o visitante envia — o hook onde você chama seu modelo. ProcessUserMessage(aMessage) aciona esse fluxo a partir do código.

Streaming

StreamingEnabled o ativa; BeginStreaming, PushStreamChunk(aChunk) e EndStreaming ampliam a resposta token por token; GetStreamFragmentHTML retorna o fragmento htmx a ser enviado.

Fontes RAG

RAGEnabled com OnRAGContext injeta o contexto recuperado; RAGDisplayMode (rdInline/rdCollapsible/rdFootnotes) e AddAIMessageWithSources(aText, aSourcesHTML) renderizam as citações.

Herdado & saída

De ChatBox: Messages, Title, Height, InputPlaceholder e ShowTypingIndicator. HTML retorna o card inteiro; GetLastMessageHTML retorna apenas a bolha mais recente.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

AIChat