Ctrlk
PlaygroundExperienceVideosPricingForumStatus
youtube
For the complete documentation index, see llms.txt. This page is also available as Markdown.

聊天覆盖层

聊天覆盖层 - Convai 集成的 PlayCanvas 插件指南。

让我们添加一个聊天窗口，以增强用户交互和沉浸感。创建一个名为 Convai Chat 的新实体。

Convai Chat 脚本

该 ConvaiChat 脚本负责管理聊天界面，并显示用户与由 AI 驱动的虚拟角色之间的对话。它处理用户消息和 AI 回复的渲染、维护聊天历史，并确保聊天容器内平滑的滚动行为。

// 创建一个名为 'convaiChat' 的新脚本
var ConvaiChat = pc.createScript('convaiChat');

// 添加一个属性用于存储 CSS 资源
ConvaiChat.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });

// 添加一个属性用于存储 HTML 资源
ConvaiChat.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });

// 每个实体只调用一次的初始化代码
ConvaiChat.prototype.initialize = function() {
    // 为聊天框容器创建一个新的 div 元素
    this.htmlEl = document.createElement('div');
    this.htmlEl.classList.add('chatbox__container');
    this.htmlEl.setAttribute("id", "convai-chat");
    document.body.appendChild(this.htmlEl);

    // 设置聊天框容器的 HTML 内容
    this.htmlEl.innerHTML = this.html.resource || '';

    // 为 CSS 创建一个 STYLE 元素
    this.cssEl = document.createElement('style');
    document.head.appendChild(this.cssEl);
    this.cssEl.innerHTML = this.css.resource || '';

    // 初始化变量
    this.asset = null;
    this.assetId = 0;
    this.currentNpcText = "";
    this.currentUserText = "";
    this.ChatHistory = [];
    this.createNewUserChatEl = true;
    this.createNewNpcChatEl = true;
    this.userChatEl = null;
    this.npcChatEl = null;
};

// 向聊天历史中添加一段对话的函数
ConvaiChat.prototype.addToChatHistory = function(userQuery, npcResponse) {
    // 创建一个表示该对话的对象
    const conversation = {
        userQuery: userQuery.trim(),
        response: npcResponse.trim(),
    };

    // 将对话对象推送到聊天历史数组中
    this.ChatHistory.push(conversation);
};

// 向聊天容器中添加用户消息的函数
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;
};

// 向聊天容器中添加 AI 回复的函数
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;
};

// 处理聊天更新的函数
ConvaiChat.prototype.handleChat = function() {
    // 当对话处于活动状态时设置 userText
    if (window.conversationActive && (window.userTextStream !== this.currentUserText) && window.userTextStream !== "") {
        this.currentUserText = window.userTextStream;
        // 当前用户聊天的 UI（在 UI 中也进行截断）
        this.addUserMessage(this.currentUserText);
        this.createNewUserChatEl = false;
    }

    // 当对话处于活动状态时设置 npcText
    if (window.conversationActive && (window.npcTextStream !== this.currentNpcText) && window.npcTextStream !== "") {
        this.currentNpcText = window.npcTextStream;
        // 当前 NPC 聊天的 UI（在 UI 中也进行截断）
        this.addNpcMessage(this.currentNpcText);
        this.createNewNpcChatEl = false;
    }

    // 当对话结束时，将其添加到聊天历史中
    if (!window.conversationActive && this.currentUserText !== "" && this.currentNpcText !== "") {
        this.addToChatHistory(this.currentUserText, this.currentNpcText);
        this.currentUserText = "";
        this.currentNpcText = "";
        this.createNewUserChatEl = true;
        this.createNewNpcChatEl = true;
    }

    // 滚动到聊天容器底部
    this.scrollTop();
};

// 滚动到聊天容器底部的函数
ConvaiChat.prototype.scrollTop = function(dt) {
    if (window.conversationActive) {
        var chatBox = document.getElementById("chatbot__activeChat");
        chatBox.scrollTop = chatBox.scrollHeight - chatBox.clientHeight;
    }
};

// 每帧调用的更新代码
ConvaiChat.prototype.update = function(dt) {
    this.handleChat();
};

在解析脚本后，将以下文件作为附件添加到 convaiChat 脚本中。

HTML

CSS

聊天集成
上一页Convai 集成下一页叙事设计指南

最后更新于

这有帮助吗？