타입스크립트 지원

KlleonSDK.d.ts

type LogLevelType = "debug" | "info" | "warn" | "error" | "silent";
type VoiceCodeType = "ko_kr" | "en_us" | "ja_jp" | "id_id";
type SubtitleCodeType = "ko_kr" | "en_us" | "ja_jp" | "id_id";
type Status =
  | "IDLE"
  | "CONNECTING"
  | "CONNECTING_FAILED"
  | "SOCKET_CONNECTED"
  | "SOCKET_FAILED"
  | "STREAMING_CONNECTED"
  | "STREAMING_FAILED"
  | "CONNECTED_FINISH"
  | "VIDEO_LOAD"
  | "VIDEO_CAN_PLAY";

interface InitOption {
  sdk_key: string;
  avatar_id: string;
  voice_code?: VoiceCodeType; // 발화 음성 언어 설정
  subtitle_code?: SubtitleCodeType; // 발화 텍스트 언어 설정
  voice_tts_speech_speed?: number; // 발화 음성 속도 조절
  enable_microphone?: boolean; // 브라우저 마이크 permission없이 연결
  log_level?: LogLevelType; // 로그레벨 설정
}

export declare enum ResponseChatType {
  TEXT = "TEXT", // 캐릭터 메시지
  STT_RESULT = "STT_RESULT", // 사용자 음성 메시지
  RATE_LIMIT = "RATE_LIMIT", // 캐릭터 메시지 수신 비활성화
  WAIT = "WAIT", // 채팅 시작 대기
  WARN_SUSPENDED = "WARN_SUSPENDED", // 채팅 없을 시 10초 뒤 채팅 중지 예정 경고
  DISABLED_TIME_OUT = "DISABLED_TIME_OUT", // 일정 시간 후 채팅 없을 시 중지
  TEXT_ERROR = "TEXT_ERROR", // 사용자 메시지 전송 실패
  TEXT_MODERATION = "TEXT_MODERATION", // 사용자가 부적절한 언어를 입력
  ERROR = "ERROR", // 서버 에러 발생
  RESPONSE_IS_ENDED = "RESPONSE_IS_ENDED", // 캐릭터가 보내는 메시지 끝
  WORKER_DISCONNECTED = "WORKER_DISCONNECTED", // 스티리밍 종료
  ACTIVATE_VOICE = "ACTIVATE_VOICE", // 음성 인식 시작
  PREPARING_RESPONSE = "PREPARING_RESPONSE", // 캐릭터 답변 준비 중
  EXCEED_CONCURRENT_QUOTA = "EXCEED_CONCURRENT_QUOTA", // 최대 동시 접속자 수 초과
}

interface ChatData {
  message: string;
  chat_type: ResponseChatType;
  time: string;
  id: string;
}

interface ChangeAvatar {
  avatar_id: string;
  subtitle_code?: SubtitleCodeType;
  voice_code?: VoiceCodeType;
  voice_tts_speech_speed?: number;
}

interface KlleonChat {
  init: (option: InitOption) => Promise<void>;
  onChatEvent: (callback: (data: ChatData) => void) => void;
  onStatusEvent: (callback: (status: Status) => void) => void;
  destroy: () => void;
  sendTextMessage: (msg: string) => void;
  startStt: () => void;
  endStt: () => void;
  echo: (message: string) => void;
  startAudioEcho: (audio: string) => void;
  endAudioEcho: () => void;
  changeAvatar: (options: ChangeAvatar) => Promise<void>;
  clearMessageList: () => void;
  stopSpeech: () => void;
}

declare global {
  interface Window {
    KlleonChat: KlleonChat;
  }
  
  // JSX 환경에서 WebComponent 정의 
  namespace JSX {
    interface IntrinsicElements {
      "avatar-container": React.DetailedHTMLProps<
        Omit<React.HTMLAttributes<HTMLElement>, "className"> & {
          class?: string;
        },
        HTMLElement
      >;
      "chat-container": React.DetailedHTMLProps<
        Omit<React.HTMLAttributes<HTMLElement>, "className"> & {
          class?: string;
        },
        HTMLElement
      >;
    }
  }
}

tsconfig.json

// tsconfig.json
{
    "compilerOptions": {...},
    "include": [KlleonSDK.d.ts]
}