# Chat Overlay
Let's add a chat window to enhance user interaction and immersion. Create a New entity called Convai Chat.
### Convai Chat script
\
The `ConvaiChat` script is responsible for managing the chat interface and displaying the conversation between the user and an AI-powered virtual character. It handles rendering user messages and AI responses, maintaining a chat history, and ensuring smooth scrolling behavior within the chat container.
```javascript
// Create a new script called 'convaiChat'
var ConvaiChat = pc.createScript('convaiChat');
// Add an attribute to store the CSS asset
ConvaiChat.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });
// Add an attribute to store the HTML asset
ConvaiChat.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });
// Initialize code called once per entity
ConvaiChat.prototype.initialize = function() {
// Create a new div element for the chat box container
this.htmlEl = document.createElement('div');
this.htmlEl.classList.add('chatbox__container');
this.htmlEl.setAttribute("id", "convai-chat");
document.body.appendChild(this.htmlEl);
// Set the HTML content of the chat box container
this.htmlEl.innerHTML = this.html.resource || '';
// Create a STYLE element for the CSS
this.cssEl = document.createElement('style');
document.head.appendChild(this.cssEl);
this.cssEl.innerHTML = this.css.resource || '';
// Initialize variables
this.asset = null;
this.assetId = 0;
this.currentNpcText = "";
this.currentUserText = "";
this.ChatHistory = [];
this.createNewUserChatEl = true;
this.createNewNpcChatEl = true;
this.userChatEl = null;
this.npcChatEl = null;
};
// Function to add a conversation to the chat history
ConvaiChat.prototype.addToChatHistory = function(userQuery, npcResponse) {
// Create an object representing the conversation
const conversation = {
userQuery: userQuery.trim(),
response: npcResponse.trim(),
};
// Push the conversation object to the chat history array
this.ChatHistory.push(conversation);
};
// Function to add a user message to the chat container
ConvaiChat.prototype.addUserMessage = function(message) {
const chatContainer = document.getElementById("chatbot__activeChat");
if (this.createNewUserChatEl) {
const userMessage = document.createElement("div");
userMessage.classList.add("user_message");
this.userChatEl = userMessage;
chatContainer.appendChild(this.userChatEl);
}
this.userChatEl.textContent = message;
};
// Function to add an AI response to the chat container
ConvaiChat.prototype.addNpcMessage = function(message) {
const chatContainer = document.getElementById("chatbot__activeChat");
if (this.createNewNpcChatEl) {
const convaiMessage = document.createElement("div");
convaiMessage.classList.add("convai_message");
this.npcChatEl = chatContainer.appendChild(convaiMessage);
}
this.npcChatEl.textContent = message;
};
// Function to handle the chat updates
ConvaiChat.prototype.handleChat = function() {
// Set userText when the conversation is active
if (window.conversationActive && (window.userTextStream !== this.currentUserText) && window.userTextStream !== "") {
this.currentUserText = window.userTextStream;
// UI for current user chat (also trim in the UI)
this.addUserMessage(this.currentUserText);
this.createNewUserChatEl = false;
}
// Set npcText when the conversation is active
if (window.conversationActive && (window.npcTextStream !== this.currentNpcText) && window.npcTextStream !== "") {
this.currentNpcText = window.npcTextStream;
// UI for current NPC chat (also trim in the UI)
this.addNpcMessage(this.currentNpcText);
this.createNewNpcChatEl = false;
}
// Add the conversation to the chat history when it's finished
if (!window.conversationActive && this.currentUserText !== "" && this.currentNpcText !== "") {
this.addToChatHistory(this.currentUserText, this.currentNpcText);
this.currentUserText = "";
this.currentNpcText = "";
this.createNewUserChatEl = true;
this.createNewNpcChatEl = true;
}
// Scroll to the bottom of the chat container
this.scrollTop();
};
// Function to scroll to the bottom of the chat container
ConvaiChat.prototype.scrollTop = function(dt) {
if (window.conversationActive) {
var chatBox = document.getElementById("chatbot__activeChat");
chatBox.scrollTop = chatBox.scrollHeight - chatBox.clientHeight;
}
};
// Update code called every frame
ConvaiChat.prototype.update = function(dt) {
this.handleChat();
};
```
Add the following files as an attachment to convaiChat script after parsing the script.
### HTML
```html
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.convai.com/api-docs/plugins-and-integrations/web-plugins/playcanvas-plugin/chat-overlay.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.