Skip to main content

대화 텍스트 전송

입력된 텍스트를 디지털 휴먼에게 대화로 전송합니다. AI가 텍스트를 분석하여 적절한 응답을 생성합니다.

메서드​

sendText(message)​

AI에게 텍스트 메시지를 전송합니다.

public async sendText(message: string): Promise<void>

매개변수​

  • message (string): 전송할 텍스트 메시지

사용법​

JavaScript/TypeScript​

import { KleverOneClient } from "@klever-one/web-sdk/core";

const client = new KleverOneClient({
  apiKey: "your-api-key",
  container: document.getElementById("streaming-container"),
});

// 연결 후 텍스트 전송
await client.connect();
await client.sendText("안녕하세요, 오늘 날씨는 어떤가요?");

React Hook​

"use client";

import { useState, useRef, useEffect, useMemo } from "react";
import { useKleverOneClient } from "@klever-one/web-sdk/react";

function ChatInput() {
  const [message, setMessage] = useState("");
  const containerRef = useRef(null);
  const tempContainer = useMemo(() => {
    if (typeof document !== "undefined") {
      return document.createElement("div");
    }
    return {} as HTMLDivElement;
  }, []);

  const client = useKleverOneClient({
    apiKey: "your-api-key",
    container: containerRef.current || tempContainer,
  });

  useEffect(() => {
    return () => {
      if (client.client) {
        client.disconnect();
      }
    };
  }, [client.client]);

  const handleSendMessage = async () => {
    if (!message.trim()) return;

    try {
      await client.sendText(message);
      setMessage(""); // 입력창 초기화
      console.log("메시지 전송 완료!");
    } catch (error) {
      console.error("메시지 전송 실패:", error);
    }
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black"
      ></div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
        placeholder="메시지를 입력하세요..."
      />
      <button
        onClick={handleSendMessage}
        disabled={!client.isReady()}
      >
        전송
      </button>
    </div>
  );
}

관련 기능​

텍스트 전송과 함께 사용할 수 있는 기능들: