Enabling chatlog transcription and text input
When is chatlog and text input displayed by default?
Within the Rapport platform, a user can test their experience using the Preview feature, and share their experience with the Demo feature. These test features include a chatlog transcription (text transcription of the conversation) and text input field as options.
When you want to deploy your experience to your own site or app, chatlog transcription and text input box are not part of the included in the rapport-scene code that enables the Rapport character experience. You can enable these features on your site or app with some lines of code.
Example code for chatlog and text input
The following is an example html code that includes these two features: chatlog transcription and text input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rapport Chatlog example</title>
<script src="https://cdn.rapport.cloud/rapport-web-viewer/rapport.js"></script>
</head>
<body>
<div id="container">
<rapport-scene id="rapportScene"/>
</div>
<div>
<input id="input" type="text">
<button id="button">Send</button>
</div>
<div id="asr">
</div>
<div id="tts">
</div>
</body>
<style>
#container {
width: 300px;
height: 300px;
}
</style>
<script>
const rapportScene = document.getElementById('rapportScene');
const input = document.getElementById('input');
const button = document.getElementById('button');
const asr = document.getElementById('asr');
const tts = document.getElementById('tts');
button.addEventListener('click', () => {
if (!input.value) {
return;
}
rapportScene.modules.ai.sendText(input.value);
input.value = '';
});
rapportScene.sessionRequest({
projectId: 'XXXXX',
projectToken: 'XXXXX',
aiUserId: 'XXXXX',
lobbyZoneId: 'XXXXX',
asrMessage: (e) => {
console.log(e);
asr.innerHTML = `ASR: ${e.params?.text}`;
},
ttsMessage: (e) => {
console.log(e);
tts.innerHTML = `TTS: ${e.params?.text}`;
},
});
</script>
</html>Changing the names for speaker roles in the chatlog transcription
The chatlog transcription is compiled of the ASR input and the TTS output. You can change the names of these fields to suit your own application.
We collect the transcription of the user input using ASR. You can rename this field to be ‘You’ or ‘User’ to suit your application, eg:
asrMessage: (e) => {
console.log(e);
asr.innerHTML = `User: ${e.params?.text}`;
},
Similarly, we collect the output from the dialogue solution (eg chatbot, generative AI language model) and send this to the TTS to be generated into audio. You can rename this field to be ‘AI’ or <the name of your character> to suit your application, eg:
ttsMessage: (e) => {
console.log(e);
tts.innerHTML = `AI: ${e.params?.text}`;
},OR
ttsMessage: (e) => {
console.log(e);
tts.innerHTML = `Tony Verona: ${e.params?.text}`;
},