构建自定义 UI（TypeScript）

本页展示如何使用原生 TypeScript 连接一个简单的基于 DOM 的聊天 UI。

示例 HTML

<div id="status">未连接</div>
<button id="connect">连接</button>

<div id="chat"></div>

<input id="input" type="text" placeholder="输入消息..." disabled />
<button id="send" disabled>发送</button>

---

TypeScript 实现

import {
  ConvaiClient,
  type ConvaiClientState,
  type ChatMessage
} from '@convai/web-sdk/vanilla';

const client = new ConvaiClient();

const statusEl = document.getElementById('status') as HTMLDivElement;
const connectBtn = document.getElementById('connect') as HTMLButtonElement;
const chatEl = document.getElementById('chat') as HTMLDivElement;
const inputEl = document.getElementById('input') as HTMLInputElement;
const sendBtn = document.getElementById('send') as HTMLButtonElement;

// 状态更新
client.on('stateChange', (state) => {
  updateStatus(state);
  updateControls(state);
});

// 新消息
client.on('message', (msg) => {
  if (msg.type === 'user-transcription' || msg.type === 'bot-llm-text') {
    addMessageToUI(msg);
  }
});

function updateStatus(state: ConvaiClientState) {
  if (!state.isConnected) return statusEl.textContent = '未连接';
  statusEl.textContent = state.agentState;
}

function updateControls(state: ConvaiClientState) {
  const connected = state.isConnected;
  connectBtn.disabled = connected;
  inputEl.disabled = !connected;
  sendBtn.disabled = !connected;
}

function addMessageToUI(msg: ChatMessage) {
  const div = document.createElement('div');
  div.className = msg.type === 'user-transcription' ? 'user' : 'bot';
  div.textContent = msg.content;
  chatEl.appendChild(div);
  chatEl.scrollTop = chatEl.scrollHeight;
}

// 连接逻辑
connectBtn.addEventListener('click', async () => {
  await client.connect({
    apiKey: 'your-api-key',
    characterId: 'your-character-id',
    // endUserId: 'user-uuid', // 记忆的可选项
  });
});

// 发送消息
function sendMessage() {
  const text = inputEl.value.trim();
  if (text) {
    client.sendUserTextMessage(text);
    inputEl.value = '';
  }
}

sendBtn.addEventListener('click', sendMessage);
inputEl.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') sendMessage();
});

---

添加音频/视频控件

await client.audioControls.toggleAudio();
await client.videoControls.toggleVideo();
await client.screenShareControls.toggleScreenShare();