How to use with React about webchat HOT 9 OPEN

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.

from webchat.

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.

from webchat.

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

from webchat.

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!!

from webchat.

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.

from webchat.

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?

from webchat.

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!

from webchat.

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

from webchat.

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!

from webchat.