computernewb/MSAgent-Chat
6
0
Fork 0
Code Issues 14 Pull requests 1 Projects Releases Packages Wiki Activity Actions

add wordballoons to agents on the webapp

Browse source 
(i know they will be broken, this is just to give an environment for them to actually be used in)
This commit is contained in:
Lily Tsuru 2024-07-10 07:23:29 -04:00
parent 22f0d4a008
commit 396ef67c78
1 changed files with 184 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
webapp/src/ts/client.ts
View file

@ -1,5 +1,14 @@
import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';
import { MSAgentAddUserMessage, MSAgentChatMessage, MSAgentInitMessage, MSAgentJoinMessage, MSAgentProtocolMessage, MSAgentProtocolMessageType, MSAgentRemoveUserMessage, MSAgentTalkMessage } from '@msagent-chat/protocol';
import {
MSAgentAddUserMessage,
MSAgentChatMessage,
MSAgentInitMessage,
MSAgentJoinMessage,
MSAgentProtocolMessage,
MSAgentProtocolMessageType,
MSAgentRemoveUserMessage,
MSAgentTalkMessage
} from '@msagent-chat/protocol';
import { User } from './user';
import { agentCreateCharacterFromUrl } from '@msagent-chat/msagent.js';
@ -41,27 +50,27 @@ export class MSAgentClient {
}
async getAgents() {
let res = await fetch(this.url + "/api/agents");
return await res.json() as APIAgentInfo[];
let res = await fetch(this.url + '/api/agents');
return (await res.json()) as APIAgentInfo[];
}
connect(): Promise<void> {
return new Promise(res => {
return new Promise((res) => {
let url = new URL(this.url);
switch (url.protocol) {
case "http:":
url.protocol = "ws:";
case 'http:':
url.protocol = 'ws:';
break;
case "https:":
url.protocol = "wss:";
case 'https:':
url.protocol = 'wss:';
break;
default:
throw new Error(`Unknown protocol ${url.protocol}`);
}
url.pathname = "/api/socket"
url.pathname = '/api/socket';
this.socket = new WebSocket(url);
this.socket.addEventListener('open', () => res());
this.socket.addEventListener('message', e => {
this.socket.addEventListener('message', (e) => {
if (e.data instanceof ArrayBuffer) {
// server should not send binary
return;
@ -70,13 +79,13 @@ export class MSAgentClient {
});
this.socket.addEventListener('close', () => {
this.events.emit('close');
})
});
});
}
send(msg: MSAgentProtocolMessage) {
if (this.socket === null || this.socket.readyState !== this.socket.OPEN) {
console.error("Tried to send data on a closed or uninitialized socket");
console.error('Tried to send data on a closed or uninitialized socket');
return;
}
let data = JSON.stringify(msg);
@ -85,9 +94,9 @@ export class MSAgentClient {
join(username: string, agent: string) {
if (this.socket === null || this.socket.readyState !== this.socket.OPEN) {
throw new Error("Tried to join() on a closed or uninitialized socket");
throw new Error('Tried to join() on a closed or uninitialized socket');
}
return new Promise<void>(res => {
return new Promise<void>((res) => {
let msg: MSAgentJoinMessage = {
op: MSAgentProtocolMessageType.Join,
data: {
@ -132,7 +141,7 @@ export class MSAgentClient {
this.agent = initMsg.data.agent;
this.charlimit = initMsg.data.charlimit;
for (let _user of initMsg.data.users) {
let agent = await agentCreateCharacterFromUrl(this.url + "/api/agents/" + _user.agent);
let agent = await agentCreateCharacterFromUrl(this.url + '/api/agents/' + _user.agent);
agent.addToDom(this.agentContainer);
agent.show();
let user = new User(_user.username, agent);
@ -143,7 +152,7 @@ export class MSAgentClient {
}
case MSAgentProtocolMessageType.AddUser: {
let addUserMsg = msg as MSAgentAddUserMessage;
let agent = await agentCreateCharacterFromUrl(this.url + "/api/agents/" + addUserMsg.data.agent);
let agent = await agentCreateCharacterFromUrl(this.url + '/api/agents/' + addUserMsg.data.agent);
agent.addToDom(this.agentContainer);
agent.show();
let user = new User(addUserMsg.data.username, agent);
@ -153,7 +162,7 @@ export class MSAgentClient {
}
case MSAgentProtocolMessageType.RemoveUser: {
let remUserMsg = msg as MSAgentRemoveUserMessage;
let user = this.users.find(u => u.username === remUserMsg.data.username);
let user = this.users.find((u) => u.username === remUserMsg.data.username);
if (!user) return;
user.agent.hide(true);
if (this.playingAudio.has(user!.username)) {
@ -165,7 +174,7 @@ export class MSAgentClient {
}
case MSAgentProtocolMessageType.Chat: {
let chatMsg = msg as MSAgentChatMessage;
let user = this.users.find(u => u.username === chatMsg.data.username);
let user = this.users.find((u) => u.username === chatMsg.data.username);
this.events.emit('chat', user, chatMsg.data.message);
if (chatMsg.data.audio !== undefined) {
let audio = new Audio(this.url + chatMsg.data.audio);
@ -173,10 +182,19 @@ export class MSAgentClient {
this.playingAudio.get(user!.username)?.pause();
this.playingAudio.delete(user!.username);
}
this.playingAudio.set(user!.username, audio);
audio.addEventListener('ended', () => {
this.playingAudio.delete(user!.username);
// give a bit of time before the wordballoon disappears
setTimeout(() => {
user!.agent.stopSpeaking();
}, 1000);
});
user?.agent.speak(chatMsg.data.message);
audio.play();
}
break;