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]);