본문으로 건너뛰기

대화 초기화

현재 진행 중인 대화를 초기화하고 메시지 내역을 삭제합니다. 진행 중인 녹음, TTS, 스트리밍이 있다면 자동으로 중지됩니다.

메서드​

resetConversation()​

대화 내역과 상태를 초기화합니다.

public resetConversation(): void

동작​

  • 진행 중인 녹음 중지
  • 진행 중인 TTS/스트리밍 중지
  • 모든 메시지 내역 삭제
  • 대화 상태 초기화

사용법​

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("안녕하세요");

// 대화 초기화
client.resetConversation();

React Hook​

"use client";

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

function ConversationControls() {
  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,
    callbacks: {
      onReady: () => console.log("디지털 휴먼 준비 완료!"),
    },
  });

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

  const handleReset = () => {
    if (client.client) {
      client.resetConversation();
    }
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black rounded-lg"
      ></div>

      {/* 메시지 목록 */}
      <div className="messages">
        {client.messages.map((msg, idx) => (
          <div key={idx}>{msg.content}</div>
        ))}
      </div>

      <button
        onClick={handleReset}
        disabled={client.state.connection !== "connected"}
      >
        🔄 대화 초기화
      </button>
    </div>
  );
}

관련 기능​