InWorld AI Module - Triggered Events

[Matthew_van_Niekerk]

Hi there,

I’m working on an InWorld Character experience and seem to be hitting a wall when it comes to the custom InWorld Triggers.

I’m using the “console.log(‘Trigger Received’, evt.trigger)” snippet from the module doc but it doesn’t ever seem to register my custom triggers from the InWorld Character. Using the Chat feature on the InWorld Platform, I can see these triggers are being called, but just not read on the 8th wall side.

Apologies if I’m just being dense, but any help would be great. Thank you

[Evan]

Hello!

Looking at the module documentation, it looks like you’re referring to this code snippet:

onMessage(evt) {
    // Enable if you want to see what each packet being sent looks like
    // console.log(evt)
    if (evt.isText()) {
        console.log('Text Received', evt.text)
    } else if (evt.isEmotion()) {
        console.log('Emotion Received', evt.emotions)
    } else if (evt.isTrigger()) {
        console.log('Trigger Received', evt.trigger)
    } else if (evt.isInteractionEnd()) {
        console.log('End of Character chat response')
    }
}

Have you tried uncommenting console.log(evt) to see whether the event is coming through at all?

[Matthew_van_Niekerk]

Thank for getting back to me

Yes, I have. And even using a console.log(‘test’) within the onMessage(evt) doesnt seem to come through.

I placed the script where the window.inworld was called, so the app.js script.

[Evan]

I see - what framework are you using (A-Frame, three.js)?

Can you provide the full code snippet from your app.js?

[Matthew_van_Niekerk]

Sure thing.
I’m using a-frame

And here is the app.js file:

import './main.css'
import './instructions.css'
import './fonts.css'
import {Inworld} from 'inworld'

window.Inworld = Inworld
try {
  window.Inworld = Inworld({
    playerName: 'Me',
    async onHistoryChange(history) {
      console.log('History', history)
    },
    onLoaded() {
      console.log('Client Built')
    },
    onReady() {
      console.log('Client Open')
    },
    onDisconnect() {
      console.log('Client Closed or Paused')
    },
    onMessage(evt) {
      // Enable if you want to see what each packet being sent looks like
      console.log(evt)
      console.log('testing')
      if (evt.isText()) {
        console.log('Text Received', evt.text)
      } else if (evt.isEmotion()) {
        console.log('Emotion Received', evt.emotions)
      } else if (evt.isTrigger()) {
        console.log('Trigger Received', evt.trigger)
      } else if (evt.isInteractionEnd()) {
        console.log('End of Character chat response')
      }
    },
    onError(err) {
      // Inworld Client Connection Errors
      switch (err.code) {
        case 1:
        case 10:
          // Errors that can be supressed
          break
        default:
          throw err
      }
    },
    onPhoneme(evt) {
      console.log(evt)
    },
    capabilities: {
      phonemes: true,
      emotions: true,
      turnBasedStt: true,
      interruptions: true,
    },
  })
} catch (err) {
  // Inworld 8thWall module errors
  // Insert your error response code here
  // Recommended to display an error dialog
  // and reset the experience
  console.error(err)
}

import {imageAnchorComponent} from './components/persistent-image-anchor'
AFRAME.registerComponent('persistent-image-anchor', imageAnchorComponent())

import {appFlowComponent} from './components/app-flow'
AFRAME.registerComponent('app-flow', appFlowComponent())

import {inworldComponent} from './components/inworld'
AFRAME.registerComponent('inworld', inworldComponent())

import {talkComponent} from './components/talk'
AFRAME.registerComponent('talk', talkComponent())

import {revealParticleComponent} from './components/reveal-particle'
AFRAME.registerComponent('reveal-particle', revealParticleComponent())

import {mouthMovementComponent} from './components/mouth-movements'
AFRAME.registerComponent('mouth-movement', mouthMovementComponent())

import {emotionsComponent} from './components/emotions'
AFRAME.registerComponent('emotions', emotionsComponent())

import {animationMixerComponent} from './components/animation-mixer.js'
AFRAME.registerComponent('animation-mixer-base', animationMixerComponent)

import {tapPlaceCursorComponent} from './components/tap-place-cursor'
AFRAME.registerComponent('tap-place-cursor', tapPlaceCursorComponent)

// Force 8thwall to request mic permissions on load as well
const onxrloaded = () => {
  XR8.addCameraPipelineModule({
    name: 'microphone',
    requiredPermissions: () => ([XR8.XrPermissions.permissions().MICROPHONE]),
  })
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

[Evan]

The best practice is to put custom Javascript inside of an A-Frame component, similar to the sample project. Also, comparing the sample project code with your code, I don’t see you calling window.inworldClient.connect() anywhere. I suggest taking another look at inworld.js from the sample project and doing something more similar to that in your project.

[Matthew_van_Niekerk]

Ay great, thank you
Obviously didn’t take a proper look at what was already in place. Seemed to have gotten everything sorted and the trigger came though

Thanks again