Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: extending sidepanel example to include rounded corners + new icon #270

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: extending sidepanel example to include rounded corners + new icon #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions integrations/webchat/examples/custom-element/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,20 @@ This code is for extending the IBM watsonx Assistant web chat. If you are new to

## Custom elements

This example demonstrates how to use a custom element to change the size and position of the main web chat window.
This example demonstrates how to use a custom element to change the size and position of the main web chat window. This can be used to move web chat into a sidepanel, have it run in a "fullscreen" mode and more.

It demonstrates:

- How to use a [**view:change**](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-events#viewchange) event handler to show or hide the main web chat window when it is opened or closed.
- How to use the [**element**](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configuration#configurationobject) configuration property to specify which custom element to use.
- How to apply custom animation to the entrance and exit of web chat.
- How to apply custom animation to the entrance and exit of web chat in a sidebar view.
- How to embed the web chat in fullscreen mode.

## Running the Code

### Running the JavaScript Examples

1. Open the [client/javascript/index.html](client/javascript/index.html) or [client/javascript-animation/index.html](client/javascript-animiation/index.html) file in a web browser. The animation one is a slightly more complex example that demonstrates how to animate that opening or closing of web chat.
1. Open the [client/javascript/index.html](client/javascript/index.html), [client/javascript-fullscreen/index.html](client/javascript-fullscreen/index.html) or [client/javascript-animation/index.html](client/javascript-animiation/index.html) file in a web browser. The animation one is a slightly more complex example that demonstrates how to animate that opening or closing of web chat as a sidebar.

### Running the React Examples

Expand Down
42 changes: 32 additions & 10 deletions integrations/webchat/examples/custom-element/client/javascript-animation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,20 @@

.WebChatContainer {
position: absolute;
width: 500px;
width: 360px;
right: 0;
top: 16px;
bottom: 16px;
top: 0;
bottom: 0;
height: 100vh;
}

.WebChatContainer--hidden {
display: none;
}

#WACContainer.WACContainer .WebChatStyles {
position: relative;
transition: right 500ms ease-in-out;
transition: right 300ms ease-in-out;
}

#WACContainer.WACContainer .HideWebChat {
Expand All @@ -35,21 +40,20 @@

#WACContainer.WACContainer .StartOpenAnimation {
transition: none;
right: -500px;
right: -360px;
}

#WACContainer.WACContainer .OpenAnimation {
right: 16px;
right: 0px;
}

#WACContainer.WACContainer .CloseAnimation {
right: -500px;
right: -360px;
}
</style>
</head>
<body>

<div class="WebChatContainer"></div>
<div class="WebChatContainer WebChatContainer--hidden"></div>

<script>
const customElement = document.querySelector('.WebChatContainer');
Expand Down Expand Up @@ -81,6 +85,8 @@
// Move the main window to the off-screen position and then un-hide it.
instance.elements.getMainWindow().addClassName('StartOpenAnimation');
instance.elements.getMainWindow().removeClassName('HideWebChat');
// Make the custom element visible.
customElement.classList.remove('WebChatContainer--hidden');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this should be here. One of the points of this tutorial is to demonstrate how to animate the opening and closing of web chat and still use our built-in launcher. If you hide the custom element, you can't do that. And in fact, because of this, this example doesn't actually work. If you open this html file as-is, the custom element is hidden and the launcher is invisible.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I remove the changes to the hide the custom element, the entrance animation doesn't work. Web chat just instantly appears. The exit animation does however work.

setTimeout(() => {
// Give the browser a chance to render the off-screen state and then trigger the open animation.
instance.elements.getMainWindow().addClassName('OpenAnimation');
Expand All @@ -94,7 +100,10 @@
// After the animation is complete, hide the main window.
instance.elements.getMainWindow().addClassName('HideWebChat');
instance.elements.getMainWindow().removeClassName('CloseAnimation');
}, 500);

// Make the custom element hidden.
customElement.classList.add('WebChatContainer--hidden');
}, 300);
}
}
}
Expand All @@ -108,6 +117,7 @@
// events.
instance.on({ type: 'view:change', handler: viewChangeHandler });

// Render the chat.
await instance.render();
}

Expand All @@ -120,7 +130,19 @@
serviceInstanceID: "9a3613d2-3ce6-4928-8eb6-4d659d87ae68",
// This is where we provide the custom element to web chat so it knows where it is supposed to be placed.
element: customElement,
headerConfig: {
// Have the "close" button be an icon to show that the chat will close to the right.
closeButtonIconType: 'side-panel-right'
},
carbonTheme: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be themeConfig, not carbonConfig.

// Add square corners instead of rounded.
corners: 'square'
},
onLoad: onLoad,

// You would likely use our own launcher in this scenario.
// See https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat/examples/custom-launcher.
// showLauncher: false
};
setTimeout(function(){const t=document.createElement('script');t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
</script>
Expand Down
60 changes: 60 additions & 0 deletions integrations/webchat/examples/custom-element/client/javascript-fullscreen/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom elements - IBM watsonx Assistant web chat toolkit</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.WebChatContainer {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>

<div class="WebChatContainer"></div>

<script>
const customElement = document.querySelector('.WebChatContainer');

/**
* This is the function that is called when the web chat code has been loaded and it is ready to be rendered.
*/
async function onLoad(instance) {
await instance.render();
}

// This is the standard web chat configuration object. You can modify these values with the embed code for your
// own assistant if you wish to try this example with your assistant. You can find the documentation for this at
// https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configuration#configurationobject.
window.watsonAssistantChatOptions = {
integrationID: "07b05ae0-7e2e-47d1-a309-d0f5b9915ac5",
region: "us-south",
serviceInstanceID: "9a3613d2-3ce6-4928-8eb6-4d659d87ae68",
// This is where we provide the custom element to web chat so it knows where it is supposed to be placed.
element: customElement,
// Move to fullscreen layout option.
layout: {
// Removes dropshadows and borders.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: dropshadows -> drop shadows

showFrame: false,
// Sets a max width on the readable content in the chat to make it easier to read.
hasContentMaxWidth: true,
},
// Hide the launcher, we always want this chat open.
showLauncher: false,
// Auto-open the chat.
openChatByDefault: true,
// Prevent closing of the chat.
hideCloseButton: true,
onLoad: onLoad,
};
setTimeout(function(){const t=document.createElement('script');t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
</script>

</body>
</html>
21 changes: 13 additions & 8 deletions integrations/webchat/examples/custom-element/client/react-animation/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,20 @@ body {

.WebChatContainer {
position: absolute;
width: 500px;
width: 360px;
right: 0;
top: 16px;
bottom: 16px;
top: 0;
bottom: 0;
height: 100vh;
}

.WebChatContainer--hidden {
display: none;
}

#WACContainer.WACContainer .WebChatStyles {
position: relative;
transition: right 500ms ease-in-out;
transition: right 300ms ease-in-out;
}

#WACContainer.WACContainer .HideWebChat {
Expand All @@ -28,13 +33,13 @@ body {

#WACContainer.WACContainer .StartOpenAnimation {
transition: none;
right: -500px;
right: -360px;
}

#WACContainer.WACContainer .OpenAnimation {
right: 16px;
right: 0px;
}

#WACContainer.WACContainer .CloseAnimation {
right: -500px;
}
right: -360px;
}
8 changes: 7 additions & 1 deletion integrations/webchat/examples/custom-element/client/react-animation/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ function App() {
* then make the main window hidden or visible after the animation as needed.
*/
function viewChangeHandler(event, instance, stylesInitializedRef) {
const customElement = document.querySelector('.WebChatContainer');
if (!stylesInitializedRef.current) {
// The first time we get this, set the styles to their initial, default state.
instance.elements.getMainWindow().addClassName('HideWebChat');
Expand All @@ -47,6 +48,8 @@ function viewChangeHandler(event, instance, stylesInitializedRef) {
// Move the main window to the off-screen position and then un-hide it.
instance.elements.getMainWindow().addClassName('StartOpenAnimation');
instance.elements.getMainWindow().removeClassName('HideWebChat');
// Make the custom element visible.
customElement.classList.remove('WebChatContainer--hidden');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case, the launcher is visible when you first launch the app and you can use it to open web chat but when you close the web chat, the launcher does not become visible again and you can't open web chat back up.

setTimeout(() => {
// Give the browser a chance to render the off-screen state and then trigger the open animation.
instance.elements.getMainWindow().addClassName('OpenAnimation');
Expand All @@ -60,7 +63,10 @@ function viewChangeHandler(event, instance, stylesInitializedRef) {
// After the animation is complete, hide the main window.
instance.elements.getMainWindow().addClassName('HideWebChat');
instance.elements.getMainWindow().removeClassName('CloseAnimation');
}, 500);

// Make the custom element hidden.
customElement.classList.add('WebChatContainer--hidden');
}, 300);
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions integrations/webchat/examples/custom-element/client/react-animation/src/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ const config = {
region: 'us-south',
serviceInstanceID: '9a3613d2-3ce6-4928-8eb6-4d659d87ae68',
subscriptionID: null,
// You would likely use our own launcher in this scenario.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want square corners like the JS example, you should add the corners option.

// See https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat/examples/custom-launcher.
// showLauncher: false
};

export { config };