Skip to main content

Chat

1. Build InworldClient instance.

import {
Capabilities,
HistoryItem,
InworldClient,
InworldConnectionService,
} from '@inworld/web-sdk';

interface InworldServiceProps {
capabilities: Capabilities;
sceneName: string;
playerName: string;
onReady: () => void;
onDisconnect: () => void;
onHistoryChange: (history: HistoryItem[]) => void;
}

export class InworldService {
connection: InworldConnectionService;

constructor(props: InworldServiceProps) {
const client = new InworldClient()
.setConfiguration({
capabilities: props.capabilities,
})
.setUser({ fullName: props.playerName })
.setScene(props.sceneName)
.setGenerateSessionToken(this.generateSessionToken)
.setOnError((err) => console.log(err))
.setOnHistoryChange(props.onHistoryChange)
.setOnReady(props.onReady)
.setOnDisconnect(props.onDisconnect);

this.connection = client.build();
}

private async generateSessionToken() {
const response = await fetch(GENERATE_TOKEN_URL);

return response.json();
}
}

2. Open connection on Start button click.

const formMethods = useForm<Configuration>();

const [connection, setConnection] = useState<InworldConnectionService>();
const [character, setCharacter] = useState<Character>();
const [characters, setCharacters] = useState<Character[]>([]);
const [chatHistory, setChatHistory] = useState<HistoryItem[]>([]);

const onHistoryChange = useCallback((history: HistoryItem[]) => {
setChatHistory(history);
}, []);

const openConnection = useCallback(async () => {
const form = formMethods.getValues();

const service = new InworldService({
capabilities: {
...(form.chatView === CHAT_VIEW.AVATAR && { phonemes: true }),
emotions: true,
narratedActions: true,
},
onHistoryChange,
sceneName: form.scene?.name!,
playerName: form.player?.name!,
onReady: async () => {
console.log('Ready!');
},
onPhoneme: (phonemes: AdditionalPhonemeInfo[]) => {
// Pass phonemes to lip sync.
},
onDisconnect: () => {
console.log('Disconnect!');
},
});
const characters = await service.connection.getCharacters();
const character = characters.find((c: Character) =>
c.getResourceName() === form.character?.name);

if (character) {
service.connection.setCurrentCharacter(character);
}

setConnection(service.connection);

setCharacter(character);
setCharacters(characters);
}, [formMethods, onHistoryChange]);

3. Start recording on corresponing button click.

const [isRecording, setIsRecording] = useState(false);

const startRecording = useCallback(async () => {
try {
connection.sendAudioSessionStart();
await connection.recorder.start();
setIsRecording(true);
} catch (e) {
console.error(e);
}
}, [connection]);

4. Stop recording on corresponing button click.

  const stopRecording = useCallback(() => {
connection.recorder.stop();
setIsRecording(false);
connection.sendAudioSessionEnd();
}, [connection]);