CODEWITHSUNDEEP
reactjswebbotframeworkweb-chat
Gokul Sajan
Gokul Sajan

Reputation: 383

Add microsoft/BotFramework-WebChat in React website, incorporate a custom build of the Web Chat component

I want to integrate https://github.com/Microsoft/BotFramework-WebChat/tree/v3 into my react app.

I have followed the below method and run npm install but it aint working.i have set my file to botchat.js in package.json:

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "botframework-webchat": "file:../../BotFramework-WebChat-3/botchat.js.map"
  }

In Botframework document it is given as below

In your React website, incorporate a custom build of the Web Chat component The simplest approach is to clone (or fork) this repo, alter it, build it, then reference your local build in your project's package.json as follows:

dependencies: {
    ...
    'botframework-webchat': 'file:/path/to/your/repo'
    ...
}

Running npm install will copy your local repo to node_modules, and import/require references to 'botframework-webchat' will resolve correctly.

You may also wish to go so far as to publish your repo as its own full-fledged, versioned npm package using npm version and npm publish, either privately or publicly.

Different projects have different build strategies, yours may vary considerably from the above. If you come up with a different integration approach that you feel would have broad application, please consider filing a pull request for this README.

FOR BUILDING I FOLLOWED BELOW PROCESS

This builds the following:

/built/*.js compiled from the TypeScript sources in /src/*.js - /built/BotChat.js is the root
/built/*.d.ts declarations for TypeScript users - /built/BotChat.d.ts is the root
/built/*.js.map sourcemaps for easier debugging
/botchat.js webpacked UMD file containing all dependencies (React, Redux, RxJS, etc.)
/botchat.css base stylesheet
/botchat-es5.js is the Webpack bundle (a.k.a. botchat.js) plus polyfills for ES5 browsers
/botchat-fullwindow.css media query stylesheet for a full-window experience.

I want to customize my Botframework and execute it

Upvotes: 0

Views: 3164

Answers (1)

Steven Kanberg
Steven Kanberg

Reputation: 6418

I'm not sure what your question is as it looks like your able to compile the build. If you are looking to make custom changes, then you would do those pre-compile.

However, I would recommend you use the v4 BotFramework-WebChat, instead, as the v3 version (BotChat) is deprecated and unsupported (read here).

The v4 Web Chat is built in React, is more robust and full-featured, is fully compatible with the v3 and v4 Bot Framework SDKs, and is fully supported (learn more about it here).

That being said, if you are intent on using v3, then you should use this provided sample that is React based and ready to integrate.

Hope of help!

Upvotes: 1

Related Questions