https://github.com/shunkosa/einstein-bots-ui-recipe
🤖 Provides rich user interface by LWC lightningsnapin-base-chat-message base component in Salesforce Einstein Bots and Embedded Service for Web.
https://github.com/shunkosa/einstein-bots-ui-recipe
lightning-web-components salesforce service-cloud
Last synced: 5 months ago
JSON representation
🤖 Provides rich user interface by LWC lightningsnapin-base-chat-message base component in Salesforce Einstein Bots and Embedded Service for Web.
- Host: GitHub
- URL: https://github.com/shunkosa/einstein-bots-ui-recipe
- Owner: shunkosa
- Created: 2019-07-26T09:19:33.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-07T07:25:23.000Z (over 4 years ago)
- Last Synced: 2024-05-01T16:45:37.357Z (about 2 years ago)
- Topics: lightning-web-components, salesforce, service-cloud
- Language: JavaScript
- Homepage:
- Size: 775 KB
- Stars: 53
- Watchers: 4
- Forks: 31
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Einstein Bots UI Recipe
Provides rich user interface by LWC `lightningsnapin-base-chat-message` base component in Salesforce Einstein Bot and Embedded Service for Web.
## How to use
Deploy `chatMessage` lightning web component to the org and select it as custom component in embedded service setting.
If a message in Einstein Bot starts with
* `RICH_TEXT:`, shows the message in rich text format.
* `YOUTUBE:`, shows the youtube video in chat window.
* `IMAGE:`, shows the image.
* `NAVIGATE:` opens the url with a new browser window (tab).
* `URL:` shows the OGP info.
* `PLAIN_TEXT:` or no prefix, shows the message in plain text format.
## Example
## Notice
* Custom attributes cannot be passed from Einstein Bots to lightning web component. So in this repository, using prefix rule to decide the type of content.
### URL Content
* [OpenGraph.io](https://www.opengraph.io/) is used to fetch OGP data. Make sure to create your api key and to add the CSP setting.
* Notice that text truncation used in this component is [not supported in Internet Explorer](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).
### Rich Text Content
* To avoid unnecessary spacing, HTML tags should be expressed without line break in a dialog message.
* URL in bot message is automatically converted to string contains `` tag. For example, if a bot message is `https://www.google.com`, in custom component, `messageContent.value` will be `https://www.google.com`. This is Salesforce embedded behavior. So `extractOriginalUrl` method returns the original url without `` tag.
### Component style
* Standard CSS selector is not applied to custom message component. Be careful for the layout skew.