webchat-rn

modalchat.js

const url = "https://privateboturl"
const token = "uniqueUserId"
const onClose = () => {
  //Callback de fechamento do Chat
}

//Habilita input de áudio e configura o UserId
const runFirst = `
  window.supportsAudioRecording = true;
  setPid("${token}");
`

//Interface Javascript para comunicação entre chat e app, 100% personalizável
const handleOnMessage = (event: WebViewMessageEvent): void => {
  const messageData = JSON.parse(event.nativeEvent.data)
  //Tipos de eventos personalizáveis
  switch (messageData.type) {
    case 'startRecording':
      onStartMicRecording()
      return
    case 'stopRecording':
      onStopMicRecording()
        .then((r) => {
          webView.current!.injectJavaScript(`
            window.sendAudio("${r}");
            true;
          `)
        })
        .catch((r) =>
          webView.current!.injectJavaScript(`
            window.supportsAudioRecording = false;
            true;
          `),
        )
      return
    default:
      console.log('Unsupported')
  }
}

return (
  <ModalRN
    visible={visible}
    animationType="fade"
    transparent
    onRequestClose={onClose}>
    <WebView
      ref={webView}
      source={{ uri: url }}
      injectedJavaScriptBeforeContentLoaded={`localStorage.setItem("pid", "${token}");`}
      injectedJavaScript={runFirst}
      onMessage={(event): void => handleOnMessage(event)}
      startInLoadingState
      javaScriptEnabled
      domStorageEnabled
      renderLoading={(): React.ReactElement => <Loading />}
      onShouldStartLoadWithRequest={(event): boolean => {
        //Configura abertura de links externos/PWA
        if (!event.url.includes(url)) {
          Linking.openURL(event.url)
          return false
        }
        return true
      }}
      onError={chat.open}
      mediaPlaybackRequiresUserAction={false}
    />
  </ModalRN>
)