-
Notifications
You must be signed in to change notification settings - Fork 142
/
Copy pathindex.html
151 lines (134 loc) · 5.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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>
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.WebChatContainer {
position: absolute;
width: 360px;
right: 0;
top: 0;
bottom: 0;
height: 100vh;
}
.WebChatContainer--hidden {
display: none;
}
#WACContainer.WACContainer .WebChatStyles {
position: relative;
transition: right 300ms ease-in-out;
}
#WACContainer.WACContainer .HideWebChat {
display: none;
}
#WACContainer.WACContainer .StartOpenAnimation {
transition: none;
right: -360px;
}
#WACContainer.WACContainer .OpenAnimation {
right: 0px;
}
#WACContainer.WACContainer .CloseAnimation {
right: -360px;
}
</style>
</head>
<body>
<div class="WebChatContainer WebChatContainer--hidden"></div>
<script>
const customElement = document.querySelector('.WebChatContainer');
let stylesInitialized = false;
/**
* This function is called after a view change has occurred. It will trigger the animation for the main window and
* then make the main window hidden or visible after the animation as needed.
*/
function viewChangeHandler(event, instance) {
if (!stylesInitialized) {
// The first time we get this, set the styles to their initial, default state.
instance.elements.getMainWindow().addClassName('HideWebChat');
instance.elements.getMainWindow().addClassName('WebChatStyles');
stylesInitialized = true;
}
const mainWindowChanged = event.oldViewState.mainWindow !== event.newViewState.mainWindow;
if (mainWindowChanged) {
if (event.reason === 'sessionHistory') {
// If we're re-opening web chat from session history, skip the animation by leaving out "StartOpenAnimation".
if (event.newViewState.mainWindow) {
instance.elements.getMainWindow().addClassName('OpenAnimation');
instance.elements.getMainWindow().removeClassName('HideWebChat');
} else {
instance.elements.getMainWindow().addClassName('HideWebChat');
}
} else if (event.newViewState.mainWindow) {
// 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');
setTimeout(() => {
// Give the browser a chance to render the off-screen state and then trigger the open animation.
instance.elements.getMainWindow().addClassName('OpenAnimation');
instance.elements.getMainWindow().removeClassName('StartOpenAnimation');
});
} else {
// Trigger the animation to slide the main window to the hidden position.
instance.elements.getMainWindow().addClassName('CloseAnimation');
instance.elements.getMainWindow().removeClassName('OpenAnimation');
setTimeout(() => {
// After the animation is complete, hide the main window.
instance.elements.getMainWindow().addClassName('HideWebChat');
instance.elements.getMainWindow().removeClassName('CloseAnimation');
// Make the custom element hidden.
customElement.classList.add('WebChatContainer--hidden');
}, 300);
}
}
}
/**
* 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) {
// Add listeners so we know when web chat has been opened or closed.
// See https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-events#summary for more about our
// events.
instance.on({ type: 'view:change', handler: viewChangeHandler });
// Render the chat.
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,
headerConfig: {
// Have the "close" button be an icon to show that the chat will close to the right.
closeButtonIconType: 'side-panel-right'
},
carbonTheme: {
// 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>
</body>
</html>