How to use with React

[turutupa]

Hi everyone!

How can I use it as a React Component??

I have cloned the repo ( https://github.com/SAPConversationalAI/Webchat ) -> npm install -> npm run build , and then.. what next? I thought I could copy the generated webchat.js file in the ‘dist’ folder into my own React app and import it as CaiWebchat from ‘webchat’, like mentioned in github and that would be it.

But I get the following error: ‘Attempted import error: ‘./webchat’ does not contain a default export (imported as ‘CaiWebchat’).'

Even if I try to call a script in the main html page but in src I point it to this webchat.js I get Unexpected token <..

Something I am not doing right.

Has anyone managed to make it work?? Can you point me in some direction?

Thanks in advance!

[antoncazalet]

Hello, the "website.js" is not a react component.
You have to use the index.js file in the src/ folder of the repo.

[turutupa]

Hi Anton!

I don't fully understand. Does that mean that in order to use Recast AI as a react component I have to build my entire React app around this repo??

On the other hand I already tried running in the past the app to see if it does indeed work but when I run npm start it executes this script: "start": "npm run clean:dist && node bin/build-dev" (as defined in package.json), and it simply gets stuck in ' Waiting for changes... ', the app doesn't start on any port so I couldn't even test it.

Any ideas? I hope I was clear enough. Thanks for your support!!

[antoncazalet]

Hello,

"npm start" is only a script to build the webchat component. It means that everytime you make a change in the /src folder, it will re-build a "webchat.js" in the /dist folder. You can see the change by opening index.html on your web browser.
But you can export the src/ folder in your project and rename it "webchat" and then import it using the code in the README.

[TianyuanC]

Mystery solved, the trick is to open the src/index.html directly in the browser!

I was looking for the serving port everywhere in the repo lol, I would highly recommend to add this in the README installation instructions.

[turutupa]

Hi TianyuanC!

Could you elaborate? I can see that if I clone the repo, enter mi channelID and token in the html script of the cai, then I run npm start and open index.html then yes, I can see the chatbot.

To be able to continue developing the app as a normal react app is where I fail.

Have you managed to achieve that?

[TianyuanC]

Hi @turutupa

It would be ideal if we can export container/Chat as npm package, so we can use it in other react projects.

But for me, I will probably need to customize the styles a lot to integrate into existing projects, so I will focus on src/actions to understand the REST calls and then rebuild the UI...

Question for @antoncazalet , just curious, do we have plans to publish this awesome react control as public npm packages (also a control with the Fiori style would be perfect lol). Thanks!

[turutupa]

What I was thinking is, the chat component is being rendered in Cai div (you can see it in script.js), I will probably create a new div in the html and render the rest of my react app there.

I think it is difficult for them to extract it as an npm package due to the dependencies it relies on, but perhaps could be done, idk

[antoncazalet]

The webchat could be on npm but I don't think anyone will publish it. A lot of features in this webchat is missing and it's also outdated.

[turutupa]

Ok so I manged to get it working but it not a very nice way.

I still haven't tested how to do it without having to manually open the html, will check that later. On the meantime I added this in script.js:
ReactDOM.render( <Provider store={store}> <Content /> </Provider>, document.getElementById('root'), )
Content is basically a component containing everything that is going to be render on the page. The element with id root is a new div with id root where everything is going to be rendered.

It is basically a fast way to get it working.

Perhaps this belongs to a different post but: is there a method when using CAI as React component to access the Bot Memory??? I see you can get the last message with the getLastMessage prop. Is there something similar??

Thanks in advance!