diff --git a/integrations/webchat/examples/custom-element/README.md b/integrations/webchat/examples/custom-element/README.md index aa632d99..06c3ae6b 100644 --- a/integrations/webchat/examples/custom-element/README.md +++ b/integrations/webchat/examples/custom-element/README.md @@ -4,6 +4,7 @@ This code is for extending the IBM watsonx Assistant web chat. If you are new to developing with web chat, please start with the [web chat development overview](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop). The code in this folder is commented with links and references to the web chat APIs used. + ## Custom elements This example demonstrates how to use a custom element to change the size and position of the main web chat window. @@ -12,6 +13,7 @@ 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 use [**closePanelButtonConfig**](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configuration#closePanelButtonConfig) configuration property for implementing a custom element as a side panel. - How to apply custom animation to the entrance and exit of web chat. ## Running the Code @@ -22,7 +24,7 @@ It demonstrates: ### Running the React Examples -1. `cd client/react` or `cd client/react-animation` +1. `cd client/react` or `cd client/react-animation` 2. `npm install` 3. `npm run start` 4. Open a web browser to `localhost:3000` diff --git a/integrations/webchat/examples/custom-element/client/javascript-animation/index.html b/integrations/webchat/examples/custom-element/client/javascript-animation/index.html index 7fd0f09f..0f550ec2 100644 --- a/integrations/webchat/examples/custom-element/client/javascript-animation/index.html +++ b/integrations/webchat/examples/custom-element/client/javascript-animation/index.html @@ -18,10 +18,10 @@ .WebChatContainer { position: absolute; - width: 500px; + width: 380px; right: 0; - top: 16px; - bottom: 16px; + top: 0; + bottom: 0; } #WACContainer.WACContainer .WebChatStyles { @@ -35,95 +35,128 @@ #WACContainer.WACContainer .StartOpenAnimation { transition: none; - right: -500px; + right: -380px; } #WACContainer.WACContainer .OpenAnimation { - right: 16px; + right: 0; } #WACContainer.WACContainer .CloseAnimation { - right: -500px; + right: -380px; + } + + /* The selectors below are for handling the opening/closing animations in the left direction. */ + + .WebChatContainer--left { + left: 0; + right: unset; + } + + .WebChatContainer--left #WACContainer.WACContainer .WebChatStyles { + position: relative; + transition: left 500ms ease-in-out; + } + + .WebChatContainer--left #WACContainer.WACContainer .StartOpenAnimation { + transition: none; + left: -380px; + right: unset; + } + + .WebChatContainer--left #WACContainer.WACContainer .OpenAnimation { + left: 0; + right: unset; + } + + .WebChatContainer--left #WACContainer.WACContainer .CloseAnimation { + left: -380px; + right: unset; } + +
-
- - + 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);}); + \ No newline at end of file diff --git a/integrations/webchat/examples/custom-element/client/react-animation/src/App.css b/integrations/webchat/examples/custom-element/client/react-animation/src/App.css index 760a4dc1..c0f6bbb7 100644 --- a/integrations/webchat/examples/custom-element/client/react-animation/src/App.css +++ b/integrations/webchat/examples/custom-element/client/react-animation/src/App.css @@ -11,10 +11,10 @@ body { .WebChatContainer { position: absolute; - width: 500px; + width: 380px; right: 0; - top: 16px; - bottom: 16px; + top: 0; + bottom: 0; } #WACContainer.WACContainer .WebChatStyles { @@ -28,13 +28,41 @@ body { #WACContainer.WACContainer .StartOpenAnimation { transition: none; - right: -500px; + right: -380px; } #WACContainer.WACContainer .OpenAnimation { - right: 16px; + right: 0; } #WACContainer.WACContainer .CloseAnimation { - right: -500px; + right: -380px; +} + +/* The selectors below are for handling the opening/closing animations in the left direction. */ + +.WebChatContainer--left { + left: 0; + right: unset; +} + +.WebChatContainer--left #WACContainer.WACContainer .WebChatStyles { + position: relative; + transition: left 500ms ease-in-out; } + +.WebChatContainer--left #WACContainer.WACContainer .StartOpenAnimation { + transition: none; + left: -380px; + right: unset; +} + +.WebChatContainer--left #WACContainer.WACContainer .OpenAnimation { + left: 0; + right: unset; +} + +.WebChatContainer--left #WACContainer.WACContainer .CloseAnimation { + left: -380px; + right: unset; +} \ No newline at end of file diff --git a/integrations/webchat/examples/custom-element/client/react-animation/src/App.js b/integrations/webchat/examples/custom-element/client/react-animation/src/App.js index 2a8178e2..d3cbc99d 100644 --- a/integrations/webchat/examples/custom-element/client/react-animation/src/App.js +++ b/integrations/webchat/examples/custom-element/client/react-animation/src/App.js @@ -9,12 +9,14 @@ import { config } from './config'; * See https://www.npmjs.com/package/@ibm-watson/assistant-web-chat-react. */ +const IS_CLOSE_ICON_DIRECTION_LEFT = config.headerConfig.closeButtonIconType === 'side-panel-left'; + function App() { const stylesInitializedRef = useRef(false); return ( viewChangeHandler(event, instance, stylesInitializedRef)} /> diff --git a/integrations/webchat/examples/custom-element/client/react-animation/src/config.js b/integrations/webchat/examples/custom-element/client/react-animation/src/config.js index 875b0e5a..3f7f147f 100644 --- a/integrations/webchat/examples/custom-element/client/react-animation/src/config.js +++ b/integrations/webchat/examples/custom-element/client/react-animation/src/config.js @@ -6,6 +6,10 @@ const config = { region: 'us-south', serviceInstanceID: '9a3613d2-3ce6-4928-8eb6-4d659d87ae68', subscriptionID: null, + headerConfig: { + // The application will animate the side panel to the left or right based on this value. + closeButtonIconType: 'side-panel-right', // side-panel-left or side-panel-right + }, }; export { config };