Komponent AIChat — sgcHTML

W skrócie

TsgcHTMLComponent_AIChat

Powierzchnia asystenta, która rozszerza TsgcHTMLComponent_ChatBox o nagłówek dostawcy OpenAI / Anthropic / Gemini, strumieniowane odpowiedzi i zwijane źródła RAG. Wybierz dostawcę, obsłuż OnChatSend, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_AIChat

Renderuje

Bootstrap 5 card + dedykowany CSS

Rodzina

Czat i AI

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz go, podłącz OnChatSend, wyrenderuj

Wybierz AIProvider i ModelName, obsłuż OnChatSend, aby wygenerować odpowiedź, a następnie odczytaj HTML. To zdarzenie sprawia, że wiadomość z przeglądarki trafia do Twojego kodu w Delphi, C++ Builder lub .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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Dostawca i model

AIProvider wybiera apOpenAI, apAnthropic, apGemini lub apCustom; ModelName opisuje nagłówek; ShowModelSelector przełącza go; AIName nadaje nazwę asystentowi.

Konwersacja

SystemPrompt i WelcomeMessage inicjują czat; UserColor i AIColor (oba TsgcHTMLColor) kolorują dymki; GetConversationHistoryJSON zwraca tablicę rola/treść do wywołania Twojego LLM.

Zdarzenie wysłania

OnChatSend wyzwala się z wiadomością użytkownika i historią JSON, gdy odwiedzający wysyła — to punkt zaczepienia, w którym wywołujesz swój model. ProcessUserMessage(aMessage) steruje tym przepływem z poziomu kodu.

Strumieniowanie

StreamingEnabled je włącza; BeginStreaming, PushStreamChunk(aChunk) i EndStreaming rozbudowują odpowiedź token po tokenie; GetStreamFragmentHTML zwraca fragment htmx do wypchnięcia.

Źródła RAG

RAGEnabled z OnRAGContext wstrzykuje pobrany kontekst; RAGDisplayMode (rdInline/rdCollapsible/rdFootnotes) oraz AddAIMessageWithSources(aText, aSourcesHTML) renderują cytowania.

Dziedziczone i wynik

Z ChatBox: Messages, Title, Height, InputPlaceholder i ShowTypingIndicator. HTML zwraca całą kartę; GetLastMessageHTML zwraca tylko najnowszy dymek.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

AIChat