AIChat

TsgcHTMLComponent_AIChat — Delphi, C++ Builder 및 .NET에서 제공자/모델 선택기, 실시간 토큰 스트리밍 및 RAG 출처 인용을 갖춘 AI 어시스턴트 채팅입니다.

TsgcHTMLComponent_AIChat

TsgcHTMLComponent_ChatBox를 OpenAI / Anthropic / Gemini 제공자 헤더, 스트리밍 응답 및 접을 수 있는 RAG 출처로 확장하는 어시스턴트 표면입니다. 제공자를 선택하고, OnChatSend를 처리한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_AIChat

렌더링

Bootstrap 5 card + 범위 지정 CSS

패밀리

채팅 및 AI

언어

Delphi, C++ Builder, .NET

생성하고, OnChatSend를 연결하고, 렌더링하기

AIProviderModelName을 선택하고, 응답을 생성하기 위해 OnChatSend를 처리한 다음, HTML을 읽습니다. 이 이벤트는 브라우저 메시지가 사용자의 Delphi, C++ Builder 또는 .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

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

제공자 및 모델

AIProviderapOpenAI, apAnthropic, apGemini 또는 apCustom을 선택합니다. ModelName은 헤더에 레이블을 지정하고, ShowModelSelector는 이를 토글하며, AIName은 어시스턴트의 이름을 지정합니다.

대화

SystemPromptWelcomeMessage는 채팅을 초기화합니다. UserColorAIColor(둘 다 TsgcHTMLColor)는 말풍선에 색을 입힙니다. GetConversationHistoryJSON은 LLM 호출을 위한 역할/콘텐츠 배열을 반환합니다.

전송 이벤트

OnChatSend는 방문자가 전송할 때 사용자 메시지와 JSON 기록과 함께 발생합니다 — 모델을 호출하는 후크입니다. ProcessUserMessage(aMessage)는 코드에서 그 흐름을 구동합니다.

스트리밍

StreamingEnabled는 이를 켭니다. BeginStreaming, PushStreamChunk(aChunk)EndStreaming은 응답을 토큰 단위로 확장합니다. GetStreamFragmentHTML은 푸시할 htmx 조각을 반환합니다.

RAG 출처

OnRAGContext가 있는 RAGEnabled는 검색된 컨텍스트를 주입합니다. RAGDisplayMode(rdInline/rdCollapsible/rdFootnotes)와 AddAIMessageWithSources(aText, aSourcesHTML)는 인용을 렌더링합니다.

상속 및 출력

ChatBox에서: Messages, Title, Height, InputPlaceholderShowTypingIndicator. HTML은 카드 전체를 반환하고, GetLastMessageHTML은 가장 최신 말풍선만 반환합니다.

계속 살펴보기

모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.
무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.
가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.

시작할 준비가 되셨습니까?

무료 체험판을 다운로드하고 Delphi, C++ Builder 및 .NET에서 웹 UI를 구축하기 시작하십시오.