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

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

구성 요소의 종류 가상 에이전트

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

응답 구성요소

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

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

표 1. 출력 구성요소 속성

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

입력 구성요소

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

표 2. 입력 구성요소 속성

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

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

표 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>}

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

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

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