CAI Chatbot web part

A client-side web part for Microsoft SharePoint Online sites that integrates SAP Conversational AI chatbots on a SharePoint page.

Table of Contents

Click to expand

• Summary
  • Demo
  • Project Structure
  • Modules Used
• Installation
  • Disclaimer
  • Prerequisites
  • Creating the .sppkg file
• Contributing
  • Style Guide
• License

Summary

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.

Demo

Project Structure

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

Modules Used

• SharePoint Framework (SPFx) @1.12.1
• gulp@4.0.2
• react@16.9.0
• react-dom@16.9.0
• eslint@5.16.0
• prettier@2.3.2

Installation

Disclaimer

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.

Prerequisites

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 v14¹ is installed on your system.

Creating the .sppkg file

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.

Contributing

If you'd like to contribute to this little project, please follow these steps:

1. Fork this repository.
2. Create a branch: git checkout -b feature/foo.
3. Make your changes and commit them: git commit -am 'Add foo feature'.
4. Push your changes to the branch: git push origin feature/foo.
5. Create a new pull request.

Pull requests are warmly welcome!

Style Guide

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

License

MIT.

Footnotes

1. 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. ↩