용 구성요소 개발 가상 에이전트

사용자 지정 가상 에이전트 구성요소를 생성하여 입력을 수집하거나 클라이언트 인터페이스에서 가상 에이전트 정보를 표시합니다.

구성요소 유형 가상 에이전트

용 구성요소를 가상 에이전트개발하려면 클라이언트 인터페이스와 상호작용하는 특정 속성 및 작업을 추가합니다.가상 에이전트 필요한 속성은 생성하는 구성요소 유형에 따라 다릅니다.

응답 구성요소

응답 구성요소는 사용자에게 정보만 제공하며 입력을 수집하거나 사용자 상호작용을 처리하지 않습니다. 예를 들어 사용자 입력이 필요하지 않고 대화에 한 번만 있는 카드 컨트롤이 있습니다.

서버에서 보낸 데이터를 처리하도록 응답 구성요소에 속성을 추가합니다.가상 에이전트

표 1. 출력 구성요소 속성

속성	설명
controlData	주제가 실행될 때 서버가 가상 에이전트 구성요소로 보내는 초기 데이터입니다. 데이터 유형: JSON 객체

입력 구성요소

입력 구성요소는 정보를 표시하거나 사용자 입력을 수집합니다. 서버에서 보낸 데이터를 처리하는 출력 구성요소와 동일한 속성을 포함하지만, 가능한 상태가 더 많고 사용자 상호 작용이 필요합니다.

표 2. 입력 구성요소 속성

속성	설명
controlData	주제가 실행될 때 서버가 가상 에이전트 구성요소로 보내는 초기 데이터입니다. 데이터 유형: JSON 객체
응답 값	클라이언트에서 직접 또는 새로 고침이 있는 경우 서버에서 사용자의 응답에서 구성요소로 전송된 데이터입니다. 사용자 입력이 필요한 구성요소에서만 사용하십시오. 데이터 유형: JSON 객체
forceCloseControl	구성요소가 입력을 수락할 수 있는지 여부를 나타내는 플래그입니다. 예일 경우 컨트롤이 닫히고 사용자가 컨트롤과 상호작용할 수 없습니다. 클라이언트의 변경 내용을 모니터링하여 이 값을 업데이트합니다. 사용자 입력이 필요한 구성요소에서만 사용하십시오. 데이터 유형: 부울

이 작업을 사용하여 사용자 상호작용에서 데이터를 내보냅니다.

표 3. 입력 구성요소 작업

동작	설명
VA_CONTROL#VALUE_SENT	서버로 전송할 클라이언트의 응답 데이터입니다. 사용자 입력이 필요한 구성요소에서만 사용하십시오. 데이터 유형: JSON 객체

입력 구성요소 상태

입력 구성요소는 데이터를 허용하기 때문에 여러 상태를 처리해야 합니다. 상태 흐름은 일반적으로 다음과 같습니다.

1. 가상 에이전트 입력 대기 상태의 사용자 지정 구성요소를 표시합니다.
2. 사용자는 구성요소와 상호작용하여 입력을 제공합니다.
3. 구성요소가 닫히고 responseValue 속성을 서버로 보냅니다.
4. 서버는 서버 측 로직을 실행하고 사용자의 입력이 포함된 구성요소를 클라이언트로 다시 보냅니다.

입력 대기 중

사용자 상호작용을 기다리는 구성요소의 초기 상태입니다. controlData 속성은 설정되어 있지만 forceControlClosed 속성은 false입니다. 이 예에서는 입력 대기 상태의 슬라이더 구성요소를 보여줍니다.

이 예에서 사용자가 responseValue 를 제공하지 않았고 컨트롤이 닫히지 않은 경우 슬라이더와 입력 단추가 표시됩니다.

const {controlClosed, sliderVal, sliderMin, sliderMax} = state;
return (<div class={{"slider-chat": true}}>
    {responseValue ? null :  <Fragment>
    <div class={{"slider-label": true}}>{label}</div>
    {controlClosed ? null : <Fragment>
        <div class={{"slider-container": true}}>
                    <input on-change={onSliderChange} type="range" min={sliderMin} max={sliderMax} value={sliderVal} class={{"slider": true}} />
            <div class={{"slider-value": true}}>
                    {unitIcon && 
                     <div class={{"unit-icon": true}}><img src={unitIcon} /></div>
                     } 
                     {sliderVal} {unitName}
                </div>
        <div class={{"button-container":true}}>
            <now-button variant="primary" label={buttonText || 'Confirm'} />
         </div></div></Fragment>}

처리 입력

이전 예에서 슬라이더는 now-button 구성요소를 사용하며, 사용자는 이 구성요소를 클릭하여 입력을 확인하고 서버로 보냅니다. 사용자가 버튼을 클릭하면 VA_CONTROL#VALUE_SENT 작업이 responseValue 페이로드와 함께 실행됩니다.

'NOW_BUTTON#CLICKED': (data) => {
    const {updateState, dispatch, state: {sliderVal}} = data;
    updateState({controlClosed: true});
    dispatch('VA_CONTROL#VALUE_SENT', {
        value: {
            sliderVal
        }
    }); 
}

종결함

닫힌 구성요소는 더 이상 사용자 입력을 수락할 수 없습니다. 구성요소는 일반적으로 다음과 같은 이유로 종결됩니다.

• 사용자가 구성요소에 응답했습니다. 구성요소가 닫히고 대화가 계속됩니다.
• 사용자가 채팅을 종료했습니다. 서버는 응답을 기다리지 않습니다.

예를 들어 슬라이더 구성요소는 닫힌 상태일 때만 원래 프롬프트를 렌더링합니다.

응답 전송 중

사용자가 응답하면 responseValue 속성 값을 사용하여 사용자 측에서 대화의 컨트롤이 다시 렌더링됩니다.

예를 들어 슬라이더 컨트롤은 이 코드 조각을 사용하여 응답을 렌더링합니다.

{responseValue && <div className="response-container slider-value">
   {unitIcon && 
   <div className="unit-icon"><img src={unitIcon} /></div>
   } 
   {returnVal} {unitName}
</div>}

에 구성요소 추가 가상 에이전트 디자이너

구성요소를 개발하고 인스턴스에 배포한 후 사용자 지정 컨트롤 및 정의를 사용하여 추가합니다 가상 에이전트 디자이너 . 자세한 내용은 가상 에이전트 사용자 지정 컨트롤을 참조하십시오.

• 통신할 속성 추가 가상 에이전트
  용 구성요소를 가상 에이전트개발하려면 클라이언트 인터페이스와 상호작용하는 특정 속성 및 작업을 추가합니다.가상 에이전트 필요한 속성은 생성하는 구성요소 유형에 따라 다릅니다.
• 에 대한 구성요소 테스트 가상 에이전트
  인스턴스에 가상 에이전트 배포하기 전에 사용자 지정 구성요소를 테스트합니다.