PVA(Power Virtual Agent)란?
개요 문서에서 캡쳐한 사진입니다.
아직 PVA가 나온지 오래되지 않아서 기존 bot framework에서 사용하던 기술들을 다 사용할 수 없습니다.
예를 들면 Adaptive Card를 사용할 수 없습니다.(Teams에서는 사용 가능합니다.)
샘플 만들어보기
만드는건 별로 어렵지 않기 때문에 넘어가겠습니다.
여기를 참고 하시면 됩니다.
주의 하실점은 개인 계정으로는 로그인이 안됩니다. 회사로 등록한 계정만 무료체험이 가능합니다.
웹 사이트에 연동
web site에 띄우는 방법은 2가지가 있습니다.
1.iframe
PVA 사이트에서 관리->채널->사용자 지정 웹 사이트를 클릭해줍니다.
클릭하면 아래 이미지가 나오는데 iframe 영역만 해당 소스 위치에 추가 해주면 됩니다.
2.코드로
!DOCTYPE html>
<html>
<head>
<title>Contoso Sample Web Chat</title>
<!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to separate file for organization in larger projects -->
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
h1 {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 20px;
}
#heading {
background-color: black;
height: 50px;
}
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"]{
background-color: black;
}
#webchat {
position: fixed;
height: calc(100% - 50px);
width: 100%;
top: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<div id="heading">
<!-- Change the h1 text to change the bot name -->
<h1>Contoso Bot Name</h1>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const styleOptions = {
// Add styleOptions to customize Web Chat canvas
hideUploadButton: true
};
// Add your BOT ID below
var BOT_ID = "자기의 BotId";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>style, <div id='webchat' role='main'></div>,script 코드로 원하는 페이지 코드에 추가 하시면 됩니다.
자세한 내용은 여기에서 참고하시면 됩니다.
참고로 BotId는 1번의 이미지에서 검은색로 안보이게 한 부분이 BotId 입니다.
1번과 2번의 차이점을 설명하면 디자인 수정 차이입니다.
1번은 MS에서 제공하는 디자인 그대로 사용할 수 밖에 없고 2번은 css를 추가해서 수정할 수 있습니다.
근데 여기서 문제가 있습니다. PVA는 IE를 지원하지 않는다고 나옵니다.
따라서 저 코드를 쓰게되면 IE에서는 사용할 수 없습니다.
IE를 사용하기 위해서는 코드를 수정해줘야합니다. IE 11버전만 지원이 가능힙니다.
<style>
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"]{
background-color: black;
}
div[role="log"]{
background: gainsboro;
}
div[role="status"]{
background: darkgray;
}
#webchat {
position: fixed;
height: calc(100% - 135px);
z-index: 9999;
width: 400px;
top: 132px;
overflow: hidden;
}
</style>
<div class="container" style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
<div>
<div role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<script>
document.querySelectorAll('[role="main"]')[0].setAttribute("id", "webchat");
const styleOptions = {
// Add styleOptions to customize web chat canvas
hideUploadButton: true,
};
var BOT_ID = "사용자 BotId";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
fetch(theURL)
.then(function(res) {
return res.json();
})
.then(function(json) {
const token = json.token;
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: token
})
},
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
});
</script>
</div>
위의 코드로 바꿔주면 됩니다.
위에 사진은 실제로 적용한 캡쳐본이고 시나리오는 기본 토픽입니다.
PVA에 대해 개인적인 생각은 현재로서는 단순 질문과 답변에는 적합하지만, 그 이상이 되면 PVA만 사용해서 이용은 힘들거 같단 생각이 듭니다.
BotFramework, Power Automate 등 여러가지를 써야지 실제로 사용 가능한 Chatbot이 되지 않을까 싶습니다.