A client-side web part for Microsoft SharePoint Online sites that integrates SAP Conversational AI chatbots on a SharePoint page.
Click to expand
This web part enables admins of a SharePoint site to embed a SAP CAI chatbot on a page. It's able to connect via any of a SAP CAI chatbot's primary connection channels — Webchat
or SAP CAI Web Client
. The web part works by generating an appropriate script tag for the integrated chatbot based on the chosen connection channel, and by appending said tag at the end of the page's body tag.
WARNING. The integrated chatbot DOES NOT show up while testing this web part locally. The chatbot shows up only when configured on a SharePoint site page itself.
The web part is also currently localized in two languages — English and Russian. We also tried to thoroughly document the source-code with JSDoc-like comments, so feel free to browse and explore it.
Click to expand
├── config
│ ├── config.json
│ ├── copy-assets.json
│ ├── deploy-azure-storage.json
│ ├── package-solution.json
│ ├── serve.json
│ └── write-manifests.json
├── src
│ ├── webparts
│ │ └── cai-chatbot
│ │ ├── components
│ │ │ ├── chatbot.module.scss
│ │ │ ├── chatbot.tsx
│ │ │ └── chatbotProps.ts
│ │ ├── loc
│ │ │ ├── en-us.ts
│ │ │ ├── mystrings.d.ts
│ │ │ └── ru-ru.ts
│ │ ├── chatbotPropertyPane.ts
│ │ ├── chatbotWebpart.manifest.json
│ │ ├── chatbotWebpart.ts
│ │ ├── chatbotWebpartProps.ts
│ │ └── const.ts
│ └── index.ts
├── .eslintignore
├── .eslintrc.js
├── .prettierignore
├── .prettierrc
├── .yo-rc.json
├── gulpfile.js
├── package.json
├── package-lock.json
├── tsconfig.json
└── tslint.json
- SharePoint Framework (SPFx) @1.12.1
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
This code is provided as is without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement. There is also no guarantee or warranty that raised issues will be answered or addressed in future releases.
Before proceeding, please ensure that all of the following conditions are met:
- Your SAP Conversational AI chatbot is configured, and either the Webchat or the SAP CAI Web Client channel is created for the chatbot
- An App Catalog has been added to your SharePoint site, and you've got the permission to upload a custom web part
- Node.js LTS v141 is installed on your system.
Note, that you can always download the latest precompiled package of this web part from this repository's Releases page.
In case you'd like to compile the .sppkg
file manually, please follow these instructions.
First, clone this repository:
git clone https://github.com/gevartrix/cai-chatbot-webpart.git
Change directory to this project's root folder and install the required modules (it may take several minutes):
cd cai-chatbot-webpart\
npm install
Finally, run the following package script
npm run release
to generate the cai-chatbot.sppkg
file inside the sharepoint\solution\
folder. That script executes several gulp
commands, please check the package.json file for more details.
Once the .sppkg
file has been compiled, you can upload it to your site's App Catalog, and the web part should appear in the "Edit" mode.
To run the web part locally, execute npm run serve
.
If you'd like to contribute to this little project, please follow these steps:
- Fork this repository.
- Create a branch:
git checkout -b feature/foo
. - Make your changes and commit them:
git commit -am 'Add foo feature'
. - Push your changes to the branch:
git push origin feature/foo
. - Create a new pull request.
Pull requests are warmly welcome!
This application is configured with ESLint and Prettier, so you may want to check the configuration in the .eslintrc.js, .prettier.rc, tsconfig.json and tslint.json files. We also try our best adhering to the best practices listed in the Google TypeScript Style Guide.
Therefore it is recommended to lint the code before committing changes by running the following package script from the root folder:
npm run lint
MIT.
Footnotes
-
Please refer to the SPFx requirements page to check the current latest supported version of Node.js. You may want to use a version management tool like nvm to install the required LTS version along with your current Node.js installation. ↩