webclient.ts

import { createPromiseClient } from '@connectrpc/connect'
import { createConnectTransport } from '@connectrpc/connect-web'
import { ElizaService } from './gen/connectrpc/eliza/v1/eliza_connect.js'
import { IntroduceRequest } from './gen/connectrpc/eliza/v1/eliza_pb.js'

let introFinished = false

// Make the Eliza Service client
const client = createPromiseClient(
    ElizaService,
    createConnectTransport({
        baseUrl: 'http://localhost:3000',
    })
)

// Query for the common elements and cache them.
const containerEl = document.getElementById(
    'conversation-container'
) as HTMLDivElement
const inputEl = document.getElementById('user-input') as HTMLInputElement

// Add an event listener to the input so that the user can hit enter and click the Send button
document.getElementById('user-input')?.addEventListener('keyup', (event) => {
    event.preventDefault()
    if (event.key === 'Enter') {
        document.getElementById('send-button')?.click()
    }
})

// Adds a node to the DOM representing the conversation with Eliza
function addNode(text: string, sender: string): void {
    const divEl = document.createElement('div')
    const pEl = document.createElement('p')

    const respContainerEl = containerEl.appendChild(divEl)
    respContainerEl.className = `${sender}-resp-container`

    const respTextEl = respContainerEl.appendChild(pEl)
    respTextEl.className = 'resp-text'
    respTextEl.innerText = text
}

async function send() {
    const sentence = inputEl?.value ?? ''

    addNode(sentence, 'user')

    inputEl.value = ''

    if (introFinished) {
        const response = await client.say({
            sentence,
        })

        addNode(response.sentence, 'eliza')
    } else {
        const request = new IntroduceRequest({
            name: sentence,
        })

        for await (const response of client.introduce(request)) {
            addNode(response.sentence, 'eliza')
        }

        introFinished = true
    }
}

export function handleSend() {
    send()
}