Rasa-webchat usage, on compile complains about Syntax Error on the Widget Component

Rasa Open Source
1

I’m trying to use the Widget component as given by https://github.com/mrbot-ai/rasa-webchat.

I wrote a simple wrapper to use in my React Project as such:

import * as React from 'react';
import {FunctionComponent} from "react";
import { Widget } from 'rasa-webchat';

interface Props{
}

const WebChat: FunctionComponent<Props> = (props) => {
return (
          <Widget
              interval={2000}
              initPayload={"/get_started"}
              socketUrl={"http://localhost:5005"}
              socketPath={"/socket.io/"}
              customData={{"userId": "123"}}
              title={"BMS Bot"}
              inputTextFieldHint={"Type a message..."}
              connectingText={"Waiting for server..."}
              hideWhenNotConnected
              embedded={true}
              showFullScreenButton={false}
              openLauncherImage={'./src/assets/images/webchat-icon-open.png'}
              closeLauncherImage={'./src/assets/images/webchat-icon-closed.png'}
              params={{
                  images: {
                      dims: {
                          width: 300,
                          height: 200
                      }
                  },
                  storage: "local"
              }}
              customComponent={ (messageData) => (<div>Custom React component</div>) }
          />
    );
};
export {WebChat};

My issue is, this thing won’t even compile. I am using TypeScript primarily in this project, and I get this error:

rasa-widget-compile-issue
rasa-widget-compile-issue993×314 10.8 KB

I’ve seen the same issue on their Git Issues page:

https://github.com/mrbot-ai/rasa-webchat/issues/71

I’ve been unsuccessful in solving this so far, does anyone else have any experience with this component? It’s the first one in the official RASA docs so…

2

Hi @matthewshim! We don’t support that repo officially. It may be helpful to ask the question directly on their repo. Thanks