@snf/access-qa-bot 0.3.1 → 1.1.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +255 -112
- package/build/static/css/main.css +1 -1
- package/build/static/css/main.css.map +1 -1
- package/build/static/js/main.js +1 -1
- package/build/static/js/main.js.map +1 -1
- package/dist/access-qa-bot.js +1 -1
- package/dist/access-qa-bot.js.map +1 -1
- package/dist/access-qa-bot.standalone.js +26 -26
- package/dist/access-qa-bot.standalone.js.map +1 -1
- package/dist/access-qa-bot.umd.cjs +1 -1
- package/dist/access-qa-bot.umd.cjs.map +1 -1
- package/index.d.ts +34 -13
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ACCESS Q&A Bot
|
|
2
2
|
|
|
3
|
-
A React component and Web Component for integrating the ACCESS Q&A Bot into your application.
|
|
3
|
+
A React component and Web Component for integrating the ACCESS Q&A Bot into your application. The bot can operate in two modes: **floating** (chat button that opens/closes a window) or **embedded** (always visible inline).
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,175 +8,318 @@ A React component and Web Component for integrating the ACCESS Q&A Bot into your
|
|
|
8
8
|
npm install @snf/access-qa-bot
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Developing React App
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
```bash
|
|
14
|
+
npm install
|
|
15
|
+
npm run start
|
|
16
|
+
```
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
import React, { useState } from 'react';
|
|
17
|
-
import { QABot } from 'access-qa-bot';
|
|
18
|
+
## Running the Demo
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<h1>My React Application</h1>
|
|
26
|
-
|
|
27
|
-
<button onClick={() => setIsOpen(!isOpen)}>
|
|
28
|
-
{isOpen ? 'Close' : 'Open'} Q&A Bot
|
|
29
|
-
</button>
|
|
30
|
-
|
|
31
|
-
<QABot
|
|
32
|
-
isLoggedIn={isLoggedIn}
|
|
33
|
-
isOpen={isOpen}
|
|
34
|
-
onClose={() => setIsOpen(false)}
|
|
35
|
-
welcome="Welcome to the ACCESS Q&A Bot!"
|
|
36
|
-
prompt="How can I help you today?"
|
|
37
|
-
apiKey={process.env.REACT_APP_API_KEY}
|
|
38
|
-
/>
|
|
39
|
-
</div>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
20
|
+
This will serve the index.html file in the root directory, which demonsrates two different ways to integrate the bot.
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm run build:lib
|
|
24
|
+
npm run build
|
|
25
|
+
npx serve
|
|
42
26
|
```
|
|
43
27
|
|
|
44
|
-
### As a Web Component
|
|
45
28
|
|
|
46
|
-
|
|
29
|
+
### Floating vs Embedded Modes
|
|
30
|
+
|
|
31
|
+
The ACCESS Q&A Bot supports two display modes:
|
|
32
|
+
|
|
33
|
+
- **Floating Mode** (default): Shows a chat button that opens/closes a floating chat window
|
|
34
|
+
- **Embedded Mode**: Always visible, embedded directly in the page content
|
|
35
|
+
|
|
36
|
+
**All integration methods support both modes**, but have different defaults:
|
|
37
|
+
|
|
38
|
+
| Method | Default Mode | Override |
|
|
39
|
+
|--------|--------------|----------|
|
|
40
|
+
| Element ID (`#qa-bot`) | Floating | Set `embedded: true` |
|
|
41
|
+
| CSS Class (`.embedded-qa-bot`) | Embedded | n/a |
|
|
42
|
+
| JavaScript API | Floating | Set `embedded: true` |
|
|
43
|
+
| Custom Element (`<access-qa-bot>`) | Floating | Add `embedded` attribute |
|
|
44
|
+
|
|
45
|
+
## Integration Methods
|
|
46
|
+
|
|
47
|
+
### Method 1: Auto-Detection by Element ID (Floating by Default)
|
|
48
|
+
|
|
49
|
+
Simply add a div with id `qa-bot` to your HTML:
|
|
47
50
|
|
|
48
51
|
```html
|
|
49
52
|
<script src="https://unpkg.com/@snf/access-qa-bot@0.2.0/dist/access-qa-bot.standalone.js"></script>
|
|
50
53
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
prompt="Ask me anything about ACCESS..."
|
|
54
|
-
is-logged-in
|
|
55
|
-
is-open>
|
|
56
|
-
</access-qa-bot>
|
|
54
|
+
<!-- Automatically creates a floating chat button -->
|
|
55
|
+
<div id="qa-bot"></div>
|
|
57
56
|
```
|
|
58
57
|
|
|
59
|
-
|
|
58
|
+
### Method 2: Auto-Detection by CSS Class (Embedded by Default)
|
|
59
|
+
|
|
60
|
+
Use the `embedded-qa-bot` class with optional data attributes:
|
|
60
61
|
|
|
61
62
|
```html
|
|
62
63
|
<script src="https://unpkg.com/@snf/access-qa-bot@0.2.0/dist/access-qa-bot.standalone.js"></script>
|
|
63
64
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
const qaBot = document.createElement('access-qa-bot');
|
|
69
|
-
qaBot.setAttribute('welcome', 'Hello!');
|
|
70
|
-
qaBot.setAttribute('prompt', 'Ask something...');
|
|
71
|
-
qaBot.setAttribute('is-logged-in', '');
|
|
72
|
-
container.appendChild(qaBot);
|
|
73
|
-
</script>
|
|
65
|
+
<!-- Automatically creates an embedded chat widget -->
|
|
66
|
+
<div class="embedded-qa-bot"
|
|
67
|
+
data-welcome="Hello!"
|
|
68
|
+
data-prompt="Ask me anything..."></div>
|
|
74
69
|
```
|
|
75
70
|
|
|
76
|
-
|
|
71
|
+
### Method 3: Programmatic JavaScript API (Floating by Default)
|
|
72
|
+
|
|
73
|
+
Call the `accessQABot()` function with full control:
|
|
77
74
|
|
|
78
75
|
```html
|
|
79
76
|
<script src="https://unpkg.com/@snf/access-qa-bot@0.2.0/dist/access-qa-bot.standalone.js"></script>
|
|
80
77
|
|
|
81
|
-
<div id="
|
|
78
|
+
<div id="my-bot-container"></div>
|
|
82
79
|
|
|
83
80
|
<script>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
welcome: "
|
|
89
|
-
prompt: "Ask
|
|
81
|
+
window.addEventListener('load', function() {
|
|
82
|
+
const controller = accessQABot({
|
|
83
|
+
target: document.getElementById('my-bot-container'),
|
|
84
|
+
embedded: false, // false = floating (default), true = embedded
|
|
85
|
+
welcome: "Custom welcome message!",
|
|
86
|
+
prompt: "Ask me about ACCESS...",
|
|
90
87
|
isLoggedIn: true,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
88
|
+
defaultOpen: false,
|
|
89
|
+
ringEffect: true // Enable phone ring animation on tooltip
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// Use the controller to interact with the bot
|
|
93
|
+
controller.addMessage("Hello from JavaScript!");
|
|
94
|
+
controller.openChat(); // Only works in floating mode
|
|
95
|
+
});
|
|
96
96
|
</script>
|
|
97
97
|
```
|
|
98
98
|
|
|
99
|
-
###
|
|
99
|
+
### Method 4: Custom Web Component Element (Floating by Default)
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
Use the `<access-qa-bot>` custom element directly in your HTML:
|
|
102
102
|
|
|
103
103
|
```html
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
104
|
+
<script src="https://unpkg.com/@snf/access-qa-bot@0.2.0/dist/access-qa-bot.standalone.js"></script>
|
|
105
|
+
|
|
106
|
+
<!-- Floating mode (default) -->
|
|
107
|
+
<access-qa-bot
|
|
108
|
+
welcome="Welcome to the Q&A Bot!"
|
|
109
|
+
prompt="Ask me anything about ACCESS..."
|
|
110
|
+
is-logged-in
|
|
111
|
+
default-open
|
|
112
|
+
ring-effect>
|
|
113
|
+
</access-qa-bot>
|
|
114
|
+
|
|
115
|
+
<!-- Embedded mode -->
|
|
116
|
+
<access-qa-bot
|
|
117
|
+
embedded
|
|
118
|
+
welcome="This is an embedded bot!"
|
|
119
|
+
prompt="Ask your questions here...">
|
|
120
|
+
</access-qa-bot>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
**Custom Element Attributes:**
|
|
124
|
+
- `api-key` - API key for authentication
|
|
125
|
+
- `default-open` - Initially open floating chat (boolean attribute)
|
|
126
|
+
- `disabled` - Disable chat input (boolean attribute)
|
|
127
|
+
- `embedded` - Use embedded mode (boolean attribute)
|
|
128
|
+
- `is-logged-in` - User is logged in (boolean attribute)
|
|
129
|
+
- `login-url` - URL for login redirect
|
|
130
|
+
- `prompt` - Input placeholder text
|
|
131
|
+
- `ring-effect` - Enable phone ring animation on tooltip (boolean attribute)
|
|
132
|
+
- `welcome` - Welcome message
|
|
133
|
+
|
|
134
|
+
**Accessing the Custom Element Programmatically:**
|
|
135
|
+
```javascript
|
|
136
|
+
// Get reference to the custom element
|
|
137
|
+
const botElement = document.querySelector('access-qa-bot');
|
|
138
|
+
|
|
139
|
+
// Call methods directly on the element
|
|
140
|
+
botElement.addMessage("Hello World!");
|
|
141
|
+
botElement.setBotIsLoggedIn(true);
|
|
142
|
+
botElement.openChat(); // Floating mode only
|
|
143
|
+
botElement.closeChat(); // Floating mode only
|
|
144
|
+
botElement.toggleChat(); // Floating mode only
|
|
110
145
|
```
|
|
111
146
|
|
|
112
|
-
|
|
147
|
+
## Programmatic Control
|
|
148
|
+
|
|
149
|
+
When using the JavaScript API, you get a controller object with these methods:
|
|
150
|
+
|
|
151
|
+
```javascript
|
|
152
|
+
const controller = accessQABot({...});
|
|
153
|
+
|
|
154
|
+
// Add a message to the chat
|
|
155
|
+
controller.addMessage("Hello World!");
|
|
156
|
+
|
|
157
|
+
// Set user login status
|
|
158
|
+
controller.setBotIsLoggedIn(true);
|
|
159
|
+
|
|
160
|
+
// Control chat window (floating mode only)
|
|
161
|
+
controller.openChat();
|
|
162
|
+
controller.closeChat();
|
|
163
|
+
controller.toggleChat();
|
|
164
|
+
|
|
165
|
+
// Cleanup
|
|
166
|
+
controller.destroy();
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
## As a React Component
|
|
170
|
+
|
|
171
|
+
For React applications, import and use the component directly:
|
|
172
|
+
|
|
173
|
+
```jsx
|
|
174
|
+
import React, { useRef, useState } from 'react';
|
|
175
|
+
import { QABot, accessQABot } from '@snf/access-qa-bot';
|
|
176
|
+
|
|
177
|
+
function MyApp() {
|
|
178
|
+
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
179
|
+
const botRef = useRef();
|
|
180
|
+
|
|
181
|
+
const handleAddMessage = () => {
|
|
182
|
+
botRef.current?.addMessage("Hello from React!");
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
// You can also use the programmatic API in React if needed
|
|
186
|
+
const handleCreateProgrammaticBot = () => {
|
|
187
|
+
const container = document.getElementById('programmatic-bot');
|
|
188
|
+
if (container) {
|
|
189
|
+
accessQABot({
|
|
190
|
+
target: container,
|
|
191
|
+
embedded: true,
|
|
192
|
+
welcome: "Programmatically created bot!",
|
|
193
|
+
isLoggedIn: isLoggedIn,
|
|
194
|
+
ringEffect: true
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
return (
|
|
200
|
+
<div className="app">
|
|
201
|
+
<h1>My React Application</h1>
|
|
202
|
+
|
|
203
|
+
<button onClick={handleAddMessage}>
|
|
204
|
+
Send Message to Bot
|
|
205
|
+
</button>
|
|
206
|
+
|
|
207
|
+
<button onClick={handleCreateProgrammaticBot}>
|
|
208
|
+
Create Programmatic Bot
|
|
209
|
+
</button>
|
|
210
|
+
|
|
211
|
+
<QABot
|
|
212
|
+
ref={botRef}
|
|
213
|
+
embedded={false} // true for embedded, false for floating
|
|
214
|
+
isLoggedIn={isLoggedIn}
|
|
215
|
+
defaultOpen={false}
|
|
216
|
+
welcome="Welcome to the ACCESS Q&A Bot!"
|
|
217
|
+
prompt="How can I help you today?"
|
|
218
|
+
ringEffect={true}
|
|
219
|
+
apiKey={process.env.REACT_APP_API_KEY}
|
|
220
|
+
/>
|
|
221
|
+
|
|
222
|
+
<div id="programmatic-bot"></div>
|
|
223
|
+
</div>
|
|
224
|
+
);
|
|
225
|
+
}
|
|
226
|
+
```
|
|
113
227
|
|
|
114
|
-
## Properties
|
|
228
|
+
## Configuration Properties
|
|
115
229
|
|
|
116
230
|
| Property | Type | Description |
|
|
117
231
|
|----------|------|-------------|
|
|
118
|
-
|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
232
|
+
| `apiKey` / `api-key` | string | API key for authentication (defaults to demo key) |
|
|
233
|
+
| `defaultOpen` / `default-open` | boolean | Whether floating chat opens initially (ignored in embedded mode) |
|
|
234
|
+
| `disabled` | boolean | Disable the chat input |
|
|
235
|
+
| `embedded` | boolean | **false** = floating mode, **true** = embedded mode |
|
|
236
|
+
| `isLoggedIn` / `is-logged-in` | boolean | Whether the user is logged in |
|
|
237
|
+
| `loginUrl` / `login-url` | string | URL to redirect for login (default: '/login') |
|
|
238
|
+
| `prompt` | string | Placeholder text shown in the input field |
|
|
239
|
+
| `ringEffect` / `ring-effect` | boolean | Enable phone ring animation on tooltip (floating mode only) |
|
|
240
|
+
| `welcome` | string | Welcome message shown to the user |
|
|
127
241
|
|
|
128
|
-
|
|
242
|
+
### CSS Custom Properties (Theming)
|
|
129
243
|
|
|
130
|
-
|
|
244
|
+
Customize the appearance by setting CSS custom properties on the container:
|
|
131
245
|
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
246
|
+
```html
|
|
247
|
+
<div id="qa-bot" style="
|
|
248
|
+
--primary-color: #007bff;
|
|
249
|
+
--secondary-color: #6c757d;
|
|
250
|
+
--font-family: 'Arial', sans-serif;
|
|
251
|
+
"></div>
|
|
136
252
|
```
|
|
137
253
|
|
|
138
|
-
##
|
|
254
|
+
## Direct CDN Deployment
|
|
139
255
|
|
|
140
|
-
|
|
256
|
+
For websites that don't use npm, include directly via CDN:
|
|
141
257
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
258
|
+
```html
|
|
259
|
+
<!-- CSS (optional, for embedded styling) -->
|
|
260
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.2.0/build/static/css/main.css">
|
|
145
261
|
|
|
146
|
-
|
|
262
|
+
<!-- JavaScript -->
|
|
263
|
+
<script src="https://cdn.jsdelivr.net/gh/necyberteam/qa-bot@v0.2.0/dist/access-qa-bot.standalone.js"></script>
|
|
147
264
|
|
|
148
|
-
|
|
265
|
+
<!-- Your content -->
|
|
266
|
+
<div id="qa-bot"></div>
|
|
267
|
+
```
|
|
149
268
|
|
|
150
269
|
## Development and Testing
|
|
151
270
|
|
|
152
|
-
### Development Server
|
|
153
|
-
When running the default development script (`npm start` or `yarn start`), the application serves the content from the `public` directory using React's development server. This shows the default React implementation with hot reloading enabled. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
|
154
|
-
|
|
271
|
+
### Development Server (React Implementation)
|
|
155
272
|
```bash
|
|
156
|
-
# Start the development server (React implementation)
|
|
157
273
|
npm start
|
|
274
|
+
# Opens http://localhost:3000 with React dev server
|
|
158
275
|
```
|
|
159
276
|
|
|
160
|
-
### Testing Standalone
|
|
161
|
-
To test the standalone demo files (`index.html` and `web-component-demo.html`) at the root level, you need to:
|
|
162
|
-
|
|
163
|
-
1. Stop the development server (if running)
|
|
164
|
-
2. Build the project (`npm run build`)
|
|
165
|
-
3. Serve the root directory using a static file server:
|
|
166
|
-
|
|
277
|
+
### Testing Standalone Integration
|
|
167
278
|
```bash
|
|
168
|
-
#
|
|
279
|
+
# Build the library and project
|
|
280
|
+
npm run build:lib
|
|
281
|
+
npm run build
|
|
282
|
+
|
|
283
|
+
# Serve the standalone demo files
|
|
169
284
|
npx serve
|
|
285
|
+
|
|
286
|
+
# Then visit:
|
|
287
|
+
# http://localhost:3000/index.html (integration demos)
|
|
288
|
+
# http://localhost:3000/web-component-demo.html (web component demos)
|
|
170
289
|
```
|
|
171
290
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
-
|
|
291
|
+
## File Structure Guide
|
|
292
|
+
|
|
293
|
+
- **`index.html`** - Main demo showing all integration methods
|
|
294
|
+
- **`web-component-demo.html`** - Web Component specific demos
|
|
295
|
+
- **`public/index.html`** - React app template (Create React App)
|
|
296
|
+
- **`build/index.html`** - Built React app
|
|
297
|
+
- **`src/`** - Source code
|
|
298
|
+
- **`components/QABot.js`** - Main React component
|
|
299
|
+
- **`web-component.js`** - Web Component implementation
|
|
300
|
+
- **`lib.js`** - JavaScript API
|
|
301
|
+
|
|
302
|
+
## Important Notes
|
|
303
|
+
|
|
304
|
+
1. **Embedded vs Floating**:
|
|
305
|
+
- Embedded mode is always visible and ignores `defaultOpen`
|
|
306
|
+
- Floating mode shows a chat button; `defaultOpen` controls initial state
|
|
307
|
+
- Chat window controls (`openChat`, `closeChat`, `toggleChat`) only work in floating mode
|
|
308
|
+
|
|
309
|
+
2. **Ring Effect**:
|
|
310
|
+
- Only works in floating mode when the tooltip is visible
|
|
311
|
+
- Triggers a phone-like ring animation to draw attention
|
|
312
|
+
- Activates once when the bot is first loaded (500ms delay)
|
|
313
|
+
- Won't repeat if user has already interacted with the chat
|
|
314
|
+
|
|
315
|
+
3. **Auto-Detection**: The standalone script automatically detects and initializes:
|
|
316
|
+
- `#qa-bot` → Floating mode
|
|
317
|
+
- `.embedded-qa-bot` → Embedded mode
|
|
175
318
|
|
|
176
|
-
|
|
319
|
+
4. **API Key**: Defaults to demo key if not provided
|
|
177
320
|
|
|
178
|
-
|
|
321
|
+
5. **Browser Support**: Uses modern browser features; consider polyfills for older browsers
|
|
179
322
|
|
|
180
|
-
##
|
|
323
|
+
## Examples Repository
|
|
181
324
|
|
|
182
|
-
|
|
325
|
+
See the demo files in this repository for complete working examples of all integration methods.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.rcb-toggle-button.rcb-button-show{background-color:#1a5b6e;background-position:50%;background-repeat:no-repeat;background-size:72%}.rcb-chat-window{max-width:100%;width:550px!important;.rcb-bot-avatar{background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:0}.rcb-chat-header{align-items:center;display:flex;flex-direction:row;font-weight:700}a{color:#000;font-weight:700;text-decoration:underline}a:hover{color:#107180}.rcb-bot-message a{color:#fff;text-decoration:none}.rcb-bot-message a:hover{text-decoration:underline}.rcb-chat-input-textarea{overflow-y:auto}.rcb-chat-footer-container{font-size:10px}}.embedded-qa-bot{.rcb-chat-window{max-width:100%;width:100%!important}}.rcb-chat-header-container{border-bottom:1px solid #ccc;color:#fff;display:flex;justify-content:space-between;max-height:55px;padding:12px}.rcb-chat-header{display:flex;flex-direction:row}.rcb-bot-avatar{background-size:cover;border-radius:50%;height:30px;margin-right:12px;width:30px}.rcb-message-prompt-container.visible{align-items:center;animation:rcb-animation-pop-in .3s ease-in-out;bottom:0;display:flex;justify-content:center;margin:auto;opacity:1;pointer-events:auto;position:-webkit-sticky;position:sticky}.rcb-message-prompt-container.hidden{height:0;opacity:0;pointer-events:none;visibility:hidden}.rcb-message-prompt-text{background-color:#fff;border:.5px solid #adadad;border-radius:20px;color:#adadad;cursor:pointer;font-size:12px;padding:6px 12px;transition:color .3s ease,border-color .3s ease;z-index:9999}.rcb-message-prompt-container.hidden .rcb-message-prompt-text{padding:0}.rcb-user-message-container{display:flex;flex-direction:row;justify-content:right}.rcb-user-message{border-radius:22px;font-size:15px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-right:16px;margin-top:8px;min-height:20px;overflow:hidden;overflow-wrap:anywhere;padding:12px 16px;text-align:right;white-space:pre-wrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.rcb-user-message-offset{margin-right:50px}.rcb-user-message-entry{animation:rcb-animation-user-message-entry .3s ease-in backwards}.rcb-message-user-avatar{background-size:cover;border-radius:50%;height:40px;margin-left:-10px;margin-right:6px;margin-top:9px;width:40px}.rcb-bot-message-container{display:flex;flex-direction:row}.rcb-bot-message{border-radius:22px;font-size:15px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-left:16px;margin-top:8px;min-height:20px;overflow:hidden;overflow-wrap:anywhere;padding:12px 16px;text-align:left;white-space:pre-wrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.rcb-bot-message-offset{margin-left:50px}.rcb-bot-message-entry{animation:rcb-animation-bot-message-entry .3s ease-in backwards}.rcb-message-bot-avatar{background-size:cover;border-radius:50%;height:40px;margin-left:6px;margin-right:-10px;margin-top:9px;width:40px}.rcb-typing-indicator{align-items:center;display:flex}.rcb-dot{animation:rcb-animation-bot-typing 1s infinite;background-color:#ccc;border-radius:50%;height:8px;margin-right:4px;width:8px}.rcb-dot:nth-child(2){animation-delay:.2s}.rcb-dot:nth-child(3){animation-delay:.4s}.rcb-chat-body-container{height:100%;overflow-x:hidden;overflow-y:scroll;padding-bottom:16px;position:relative;touch-action:pan-y;width:100%}.rcb-chat-body-container::-webkit-scrollbar-track{background-color:#f1f1f1}.rcb-chat-body-container::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rcb-chat-body-container::-webkit-scrollbar-thumb:hover{background-color:#cfcfcf}.rcb-chat-body-container::-webkit-scrollbar-corner{background-color:#f1f1f1}.rcb-checkbox-container{display:flex;flex-wrap:wrap;gap:10px;margin-left:16px;padding-top:12px}.rcb-checkbox-offset{margin-left:50px!important}.rcb-checkbox-row-container{align-items:center;animation:rcb-animations-checkboxes-entry .5s ease-out;background-color:#fff;border-radius:10px;border-style:solid;border-width:.5px;cursor:pointer;display:flex;gap:5px;max-height:32px;min-height:30px;overflow:hidden;width:80%}.rcb-checkbox-row-container:hover{box-shadow:0 0 5px #0003}.rcb-checkbox-row{align-items:center;cursor:pointer;display:inline-flex;margin-left:10px}.rcb-checkbox-mark{align-items:center;background-color:#f2f2f2;border:none;border-radius:50%;cursor:pointer;display:flex;height:20px;justify-content:center;margin-right:10px;transition:all .3s ease;width:20px}.rcb-checkbox-mark:hover{background-color:#c2c2c2}.rcb-checkbox-mark:before{content:"✓";transition:all .3s ease}.rcb-checkbox-label{font-size:14px}.rcb-checkbox-next-button{align-items:center;animation:rcb-animations-checkboxes-entry .5s ease-out;background-color:#fff;border-radius:10px;border-style:solid;border-width:.5px;cursor:pointer;display:inline-block;font-size:24px;max-height:32px;min-height:30px;text-align:center;width:80%}.rcb-checkbox-next-button:before{content:"→"}.rcb-checkbox-next-button:hover{box-shadow:0 0 5px #0003}.rcb-options-container{display:flex;flex-wrap:wrap;gap:10px;margin-left:16px;max-width:70%;padding-top:12px}.rcb-options-offset{margin-left:50px!important}.rcb-options{align-items:center;animation:rcb-animation-options-entry .5s ease-out;border-radius:20px;border-style:solid;border-width:.5px;cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;overflow:hidden;padding:10px 20px;transition:background-color .3s ease}.rcb-options:hover{box-shadow:0 0 5px #0003}.rcb-line-break-container{align-items:center;display:flex;justify-content:center;max-height:45px;padding-bottom:5px;padding-top:10px}.rcb-line-break-text{color:#adadad;font-size:12px;padding:6px 12px}.rcb-spinner-container{align-items:center;display:flex;justify-content:center;max-height:45px;min-height:35px;padding-bottom:5px;padding-top:10px}.rcb-spinner{animation:rcb-animation-spin 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;height:22px;width:22px}.rcb-chat-input{align-items:center;background-color:#fff;border-top:1px solid #ccc;display:flex;padding:8px 16px}.rcb-chat-input::placeholder{color:#999}.rcb-chat-input-textarea{background-color:#fff;border:none;border-radius:4px;color:#000;flex:1 1;font-family:inherit;font-size:16px;height:auto;min-height:38px;outline:none;overflow-y:scroll;padding:8px;resize:none;touch-action:none}.rcb-chat-input-textarea::-webkit-scrollbar,.rcb-chat-input-textarea::-webkit-scrollbar-thumb{background-color:initial}.rcb-chat-input-textarea::-webkit-scrollbar-thumb:hover{background-color:initial}.rcb-chat-input-char-counter{font-size:14px;margin-left:8px;margin-top:3px}.rcb-chat-footer-container{align-items:flex-end;background-color:#f2f2f2;border-top:1px solid #ccc;color:#000;display:flex;font-size:12px;justify-content:space-between;max-height:55px;padding:12px 16px 8px 10px}.rcb-chat-footer,.rcb-toggle-button{display:flex;flex-direction:row}.rcb-toggle-button{border:none;border-radius:50%;bottom:20px;box-shadow:0 2px 4px #0003;cursor:pointer;height:75px;position:fixed;right:20px;width:75px;z-index:9999}.rcb-toggle-button.rcb-button-hide{animation:rcb-animation-collapse .3s ease-in-out forwards;opacity:0;visibility:hidden}.rcb-toggle-button.rcb-button-show{animation:rcb-animation-expand .3s ease-in-out forwards;opacity:1;visibility:visible}.rcb-toggle-icon{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:inherit;height:100%;margin:auto;width:100%}.rcb-badge,.rcb-toggle-icon{align-items:center;display:flex;justify-content:center}.rcb-badge{background-color:red;border-radius:50%;color:#fff;height:25px;position:absolute;right:-6px;top:-6px;width:25px}.rcb-chat-tooltip{border-radius:20px;box-shadow:0 2px 6px #0003;cursor:pointer;font-size:20px;padding:16px;position:fixed;transition:transform .3s ease;white-space:nowrap;z-index:9999}.rcb-chat-tooltip-tail{border-style:solid;border-width:10px 0 10px 10px;content:"";margin-top:-10px;position:absolute;right:-10px;top:50%}.rcb-chat-tooltip.rcb-tooltip-hide{animation:rcb-animation-tooltip-out .5s ease-in-out;opacity:0;visibility:hidden}.rcb-chat-tooltip.rcb-tooltip-show{animation:rcb-animation-tooltip-in .5s ease-in-out;opacity:1;visibility:visible}.rcb-toast-prompt{animation:rcb-animation-pop-in .3s ease-in-out;background-color:#fff;border:.5px solid #7a7a7a;border-radius:5px;color:#7a7a7a;cursor:pointer;font-size:12px;margin-top:6px;padding:6px 12px;text-align:center;transition:color .3s ease,border-color .3s ease;width:100%;z-index:9999}.rcb-toast-prompt-container{align-items:center;animation:popIn .3s ease-in-out;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:50%;margin:200 auto auto;opacity:1;pointer-events:auto;position:absolute;transform:translate(-50%)}.rcb-media-display-image-container,.rcb-media-display-video-container{border-radius:22px;margin-right:16px;margin-top:8px;padding:16px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.rcb-media-display-offset{margin-right:50px!important}.rcb-media-display-image{border-radius:22px;height:auto;object-fit:cover;width:100%}.rcb-media-display-video{background-color:#000;border-radius:22px;height:auto;width:100%}.rcb-media-display-audio{border-radius:22px;height:auto;margin-right:16px;margin-top:8px;width:100%}.rcb-media-entry{animation:rcb-animation-user-message-entry .3s ease-in backwards}.rcb-attach-button-disabled,.rcb-attach-button-enabled{background-size:cover;border-radius:6px;display:inline-block;height:30px;position:relative;text-align:center;width:30px}.rcb-attach-button-disabled input[type=file],.rcb-attach-button-enabled input[type=file]{display:none;height:100%;position:absolute;width:100%}.rcb-attach-button-enabled{cursor:pointer}.rcb-attach-button-disabled{opacity:.5}.rcb-attach-button-enabled:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-attach-button-enabled:hover:after{height:130%;opacity:1;width:130%}.rcb-attach-icon-disabled,.rcb-attach-icon-enabled{background-repeat:no-repeat;background-size:cover;display:inline-block;height:24px;margin-top:2px;transition:background-image .3s ease;width:24px}.rcb-attach-icon-enabled{cursor:pointer}.rcb-emoji-button-disabled,.rcb-emoji-button-enabled{background-size:cover;border-radius:6px;cursor:pointer;display:inline-block;height:30px;position:relative;text-align:center;width:30px}.rcb-emoji-icon-disabled,.rcb-emoji-icon-enabled{background-repeat:no-repeat;background-size:cover;display:inline-block;font-size:20px;height:24px;margin-top:2px;position:relative;width:24px}.rcb-emoji-icon-enabled{cursor:pointer}.rcb-emoji-icon-disabled{opacity:.5}.rcb-emoji-button-enabled:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-emoji-button-enabled:hover:after{height:130%;opacity:1;width:130%}.rcb-emoji-button-popup{background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0003;max-height:200px;overflow-y:auto;padding:8px;position:absolute;transform:translateY(calc(-100% - 30px));width:158px}.rcb-emoji{cursor:pointer;font-size:24px;padding:3px;transition:transform .2s ease-in-out}.rcb-emoji:hover{transform:scale(1.2)}.rcb-audio-icon{background-size:cover;border:none;cursor:pointer;display:inline-block;height:30px;margin-left:5px;position:relative;width:30px}.rcb-audio-icon:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-audio-icon:hover:after{height:130%;opacity:1;width:130%}.rcb-close-chat-icon{background-size:cover;border:none;cursor:pointer;display:inline-block;height:30px;margin-left:5px;position:relative;width:30px}.rcb-close-chat-icon:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-close-chat-icon:hover:after{height:130%;opacity:1;width:130%}.rcb-notification-icon{background-size:cover;border:none;cursor:pointer;display:inline-block;height:30px;margin-left:5px;position:relative;width:30px}.rcb-notification-icon:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-notification-icon:hover:after{height:130%;opacity:1;width:130%}.rcb-voice-button-disabled,.rcb-voice-button-enabled{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 0 3px #0000004d;cursor:pointer;display:inline-flex;height:32px;justify-content:center;margin-left:8px;text-transform:uppercase;transition:all .3s ease;width:32px}.rcb-voice-button-enabled{border:1px solid red;box-shadow:0 0 3px #ff000080}.rcb-voice-button-enabled:hover{border:1px solid #3d0000}.rcb-voice-button-disabled{border:1px;border-color:#0003;border-style:solid}.rcb-voice-button-disabled:hover{box-shadow:0 0 3px #8a0000}.rcb-voice-icon{background-position:50%;background-repeat:no-repeat;background-size:cover;background-size:contain;height:60%;object-fit:cover;width:60%}.rcb-voice-icon.on{animation:rcb-animation-ping 1s infinite}.rcb-send-button{border:none;border-radius:4px;box-shadow:0 0 3px #0000004d;cursor:pointer;display:inline-flex;height:32px;justify-content:center;margin-left:8px;text-transform:uppercase;transition:background-color .3s ease;width:51px}.rcb-send-icon{background-position:50%;background-repeat:no-repeat;background-size:cover;background-size:contain;height:50%;object-fit:cover;transform:translateY(20%);width:50%}.rcb-view-history-container{align-items:center;display:flex;justify-content:center;max-height:45px;min-height:35px;padding-bottom:5px;padding-top:10px}.rcb-view-history-button{align-items:center;background-color:#fff;border:.5px solid #adadad;border-radius:20px;color:#adadad;cursor:pointer;display:inline-flex;font-size:12px;justify-content:center;max-width:60%;padding:6px 12px;transition:color .3s ease,border-color .3s ease}.rcb-view-history-button>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rcb-chatbot-global{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;z-index:9999}.rcb-chat-window{background-color:#fff;border-radius:10px;bottom:20px;box-shadow:0 2px 4px #0003;display:flex;flex-direction:column;height:550px;overflow:hidden;position:fixed;right:20px;transition:all .3s ease;width:375px}.rcb-window-embedded .rcb-chat-window{bottom:auto;opacity:1;position:relative;right:auto;visibility:visible}.rcb-window-open .rcb-chat-window{animation:rcb-animation-expand .3s ease-in-out forwards;opacity:1;visibility:visible}.rcb-window-close .rcb-chat-window{animation:rcb-animation-collapse .3s ease-in-out forwards;opacity:0;visibility:hidden}@keyframes rcb-animation-expand{0%{opacity:0;transform:translate(100%,100%) scale(0)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes rcb-animation-collapse{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100%,100%) scale(0)}}@keyframes rcb-animation-ping{0%{filter:brightness(100%);opacity:1}50%{filter:brightness(50%);opacity:.8}}@keyframes rcb-animation-bot-message-entry{0%{opacity:0;transform:translate(-100%,50%) scale(0)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes rcb-animation-user-message-entry{0%{opacity:0;transform:translate(100%,50%) scale(0)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes rcb-animation-bot-typing{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}@keyframes rcb-animation-pop-in{0%{opacity:0;transform:scale(.8)}70%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}@keyframes rcb-animations-checkboxes-entry{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes rcb-animation-options-entry{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes rcb-animation-tooltip-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes rcb-animation-tooltip-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes rcb-animation-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}
|
|
1
|
+
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.rcb-chat-header-container{border-bottom:1px solid #ccc;color:#fff;display:flex;justify-content:space-between;max-height:55px;padding:12px}.rcb-chat-header{display:flex;flex-direction:row}.rcb-bot-avatar{background-size:cover;border-radius:50%;height:30px;margin-right:12px;width:30px}.rcb-message-prompt-container.visible{align-items:center;animation:rcb-animation-pop-in .3s ease-in-out;bottom:0;display:flex;justify-content:center;margin:auto;opacity:1;pointer-events:auto;position:-webkit-sticky;position:sticky}.rcb-message-prompt-container.hidden{height:0;opacity:0;pointer-events:none;visibility:hidden}.rcb-message-prompt-text{background-color:#fff;border:.5px solid #adadad;border-radius:20px;color:#adadad;cursor:pointer;font-size:12px;padding:6px 12px;transition:color .3s ease,border-color .3s ease;z-index:9999}.rcb-message-prompt-container.hidden .rcb-message-prompt-text{padding:0}.rcb-user-message-container{display:flex;flex-direction:row;justify-content:right}.rcb-user-message{border-radius:22px;font-size:15px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-right:16px;margin-top:8px;min-height:20px;overflow:auto;overflow-wrap:anywhere;padding:12px 16px;text-align:right;white-space:pre-wrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.rcb-user-message-offset{margin-right:50px}.rcb-user-message-entry{animation:rcb-animation-user-message-entry .3s ease-in backwards}.rcb-message-user-avatar{background-size:cover;border-radius:50%;height:40px;margin-left:-10px;margin-right:6px;margin-top:9px;width:40px}.rcb-bot-message-container{display:flex;flex-direction:row}.rcb-bot-message{border-radius:22px;font-size:15px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-left:16px;margin-top:8px;min-height:20px;overflow:auto;overflow-wrap:anywhere;padding:12px 16px;text-align:left;white-space:pre-wrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.rcb-bot-message-offset{margin-left:50px}.rcb-bot-message-entry{animation:rcb-animation-bot-message-entry .3s ease-in backwards}.rcb-message-bot-avatar{background-size:cover;border-radius:50%;height:40px;margin-left:6px;margin-right:-10px;margin-top:9px;width:40px}.rcb-typing-indicator{align-items:center;display:flex}.rcb-dot{animation:rcb-animation-bot-typing 1s infinite;background-color:#ccc;border-radius:50%;height:8px;margin-right:4px;width:8px}.rcb-dot:nth-child(2){animation-delay:.2s}.rcb-dot:nth-child(3){animation-delay:.4s}.rcb-chat-body-container{height:100%;overflow-x:hidden;overflow-y:scroll;padding-bottom:16px;position:relative;touch-action:pan-y;width:100%}.rcb-chat-body-container::-webkit-scrollbar-track{background-color:#f1f1f1}.rcb-chat-body-container::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rcb-chat-body-container::-webkit-scrollbar-thumb:hover{background-color:#cfcfcf}.rcb-chat-body-container::-webkit-scrollbar-corner{background-color:#f1f1f1}.rcb-checkbox-container{display:flex;flex-wrap:wrap;gap:10px;margin-left:16px;padding-top:12px}.rcb-checkbox-offset{margin-left:50px!important}.rcb-checkbox-row-container{align-items:center;animation:rcb-animations-checkboxes-entry .5s ease-out;background-color:#fff;border-radius:10px;border-style:solid;border-width:.5px;cursor:pointer;display:flex;gap:5px;max-height:32px;min-height:30px;overflow:hidden;width:80%}.rcb-checkbox-row-container:hover{box-shadow:0 0 5px #0003}.rcb-checkbox-row{align-items:center;cursor:pointer;display:inline-flex;margin-left:10px}.rcb-checkbox-mark{align-items:center;background-color:#f2f2f2;border:none;border-radius:50%;cursor:pointer;display:flex;height:20px;justify-content:center;margin-right:10px;transition:all .3s ease;width:20px}.rcb-checkbox-mark:hover{background-color:#c2c2c2}.rcb-checkbox-mark:before{content:"✓";transition:all .3s ease}.rcb-checkbox-label{font-size:14px}.rcb-checkbox-next-button{align-items:center;animation:rcb-animations-checkboxes-entry .5s ease-out;background-color:#fff;border-radius:10px;border-style:solid;border-width:.5px;cursor:pointer;display:inline-block;font-size:24px;max-height:32px;min-height:30px;text-align:center;width:80%}.rcb-checkbox-next-button:before{content:"→"}.rcb-checkbox-next-button:hover{box-shadow:0 0 5px #0003}.rcb-options-container{display:flex;flex-wrap:wrap;gap:10px;margin-left:16px;max-width:70%;padding-top:12px}.rcb-options-offset{margin-left:50px!important}.rcb-options{align-items:center;animation:rcb-animation-options-entry .5s ease-out;border-radius:20px;border-style:solid;border-width:.5px;cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;overflow:hidden;padding:10px 20px;transition:background-color .3s ease}.rcb-options:hover{box-shadow:0 0 5px #0003}.rcb-line-break-container{align-items:center;display:flex;justify-content:center;max-height:45px;padding-bottom:5px;padding-top:10px}.rcb-line-break-text{color:#adadad;font-size:12px;padding:6px 12px}.rcb-spinner-container{align-items:center;display:flex;justify-content:center;max-height:45px;min-height:35px;padding-bottom:5px;padding-top:10px}.rcb-spinner{animation:rcb-animation-spin 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;height:22px;width:22px}.rcb-chat-input{align-items:center;background-color:#fff;border-top:1px solid #ccc;display:flex;padding:8px 16px}.rcb-chat-input::placeholder{color:#999}.rcb-chat-input-textarea{background-color:#fff;border:none;border-radius:4px;color:#000;flex:1 1;font-family:inherit;font-size:16px;height:auto;min-height:38px;outline:none;overflow-y:scroll;padding:8px;resize:none;touch-action:none}.rcb-chat-input-textarea::-webkit-scrollbar,.rcb-chat-input-textarea::-webkit-scrollbar-thumb{background-color:initial}.rcb-chat-input-textarea::-webkit-scrollbar-thumb:hover{background-color:initial}.rcb-chat-input-char-counter{font-size:14px;margin-left:8px;margin-top:3px}.rcb-chat-footer-container{align-items:flex-end;background-color:#f2f2f2;border-top:1px solid #ccc;color:#000;display:flex;font-size:12px;justify-content:space-between;max-height:55px;padding:12px 16px 8px 10px}.rcb-chat-footer,.rcb-toggle-button{display:flex;flex-direction:row}.rcb-toggle-button{border:none;border-radius:50%;bottom:20px;box-shadow:0 2px 4px #0003;cursor:pointer;height:75px;position:fixed;right:20px;width:75px;z-index:9999}.rcb-toggle-button.rcb-button-hide{animation:rcb-animation-collapse .3s ease-in-out forwards;opacity:0;visibility:hidden}.rcb-toggle-button.rcb-button-show{animation:rcb-animation-expand .3s ease-in-out forwards;opacity:1;visibility:visible}.rcb-toggle-icon{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:inherit;height:100%;margin:auto;width:100%}.rcb-badge,.rcb-toggle-icon{align-items:center;display:flex;justify-content:center}.rcb-badge{background-color:red;border-radius:50%;color:#fff;height:25px;position:absolute;right:-6px;top:-6px;width:25px}.rcb-chat-tooltip{border-radius:20px;box-shadow:0 2px 6px #0003;cursor:pointer;font-size:20px;padding:16px;position:fixed;transition:transform .3s ease;white-space:nowrap;z-index:9999}.rcb-chat-tooltip-tail{border-style:solid;border-width:10px 0 10px 10px;content:"";margin-top:-10px;position:absolute;right:-10px;top:50%}.rcb-chat-tooltip.rcb-tooltip-hide{animation:rcb-animation-tooltip-out .5s ease-in-out;opacity:0;visibility:hidden}.rcb-chat-tooltip.rcb-tooltip-show{animation:rcb-animation-tooltip-in .5s ease-in-out;opacity:1;visibility:visible}.rcb-toast-prompt{animation:rcb-animation-pop-in .3s ease-in-out;background-color:#fff;border:.5px solid #7a7a7a;border-radius:5px;color:#7a7a7a;cursor:pointer;font-size:12px;margin-top:6px;padding:6px 12px;text-align:center;transition:color .3s ease,border-color .3s ease;width:100%;z-index:9999}.rcb-toast-prompt-container{align-items:center;animation:popIn .3s ease-in-out;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:50%;margin:200 auto auto;opacity:1;pointer-events:auto;position:absolute;transform:translate(-50%)}.rcb-media-display-image-container,.rcb-media-display-video-container{border-radius:22px;margin-right:16px;margin-top:8px;padding:16px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.rcb-media-display-offset{margin-right:50px!important}.rcb-media-display-image{border-radius:22px;height:auto;object-fit:cover;width:100%}.rcb-media-display-video{background-color:#000;border-radius:22px;height:auto;width:100%}.rcb-media-display-audio{border-radius:22px;height:auto;margin-right:16px;margin-top:8px;width:100%}.rcb-media-entry{animation:rcb-animation-user-message-entry .3s ease-in backwards}.rcb-attach-button-disabled,.rcb-attach-button-enabled{background-size:cover;border-radius:6px;display:inline-block;height:30px;position:relative;text-align:center;width:30px}.rcb-attach-button-disabled input[type=file],.rcb-attach-button-enabled input[type=file]{display:none;height:100%;position:absolute;width:100%}.rcb-attach-button-enabled{cursor:pointer}.rcb-attach-button-disabled{opacity:.5}.rcb-attach-button-enabled:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-attach-button-enabled:hover:after{height:130%;opacity:1;width:130%}.rcb-attach-icon-disabled,.rcb-attach-icon-enabled{background-repeat:no-repeat;background-size:cover;display:inline-block;height:24px;margin-top:2px;transition:background-image .3s ease;width:24px}.rcb-attach-icon-enabled{cursor:pointer}.rcb-emoji-button-disabled,.rcb-emoji-button-enabled{background-size:cover;border-radius:6px;cursor:pointer;display:inline-block;height:30px;position:relative;text-align:center;width:30px}.rcb-emoji-icon-disabled,.rcb-emoji-icon-enabled{background-repeat:no-repeat;background-size:cover;display:inline-block;font-size:20px;height:24px;margin-top:2px;position:relative;width:24px}.rcb-emoji-icon-enabled{cursor:pointer}.rcb-emoji-icon-disabled{opacity:.5}.rcb-emoji-button-enabled:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-emoji-button-enabled:hover:after{height:130%;opacity:1;width:130%}.rcb-emoji-button-popup{background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0003;max-height:200px;overflow-y:auto;padding:8px;position:absolute;transform:translateY(calc(-100% - 30px));width:158px}.rcb-emoji{cursor:pointer;font-size:24px;padding:3px;transition:transform .2s ease-in-out}.rcb-emoji:hover{transform:scale(1.2)}.rcb-audio-icon{background-size:cover;border:none;cursor:pointer;display:inline-block;height:30px;margin-left:5px;position:relative;width:30px}.rcb-audio-icon:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-audio-icon:hover:after{height:130%;opacity:1;width:130%}.rcb-close-chat-icon{background-size:cover;border:none;cursor:pointer;display:inline-block;height:30px;margin-left:5px;position:relative;width:30px}.rcb-close-chat-icon:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-close-chat-icon:hover:after{height:130%;opacity:1;width:130%}.rcb-notification-icon{background-size:cover;border:none;cursor:pointer;display:inline-block;height:30px;margin-left:5px;position:relative;width:30px}.rcb-notification-icon:after{background-color:#0000001a;border-radius:50%;content:"";height:0;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out;width:0}.rcb-notification-icon:hover:after{height:130%;opacity:1;width:130%}.rcb-voice-button-disabled,.rcb-voice-button-enabled{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 0 3px #0000004d;cursor:pointer;display:inline-flex;height:32px;justify-content:center;margin-left:8px;text-transform:uppercase;transition:all .3s ease;width:32px}.rcb-voice-button-enabled{border:1px solid red;box-shadow:0 0 3px #ff000080}.rcb-voice-button-enabled:hover{border:1px solid #3d0000}.rcb-voice-button-disabled{border:1px;border-color:#0003;border-style:solid}.rcb-voice-button-disabled:hover{box-shadow:0 0 3px #8a0000}.rcb-voice-icon{background-position:50%;background-repeat:no-repeat;background-size:cover;background-size:contain;height:60%;object-fit:cover;width:60%}.rcb-voice-icon.on{animation:rcb-animation-ping 1s infinite}.rcb-send-button{border:none;border-radius:4px;box-shadow:0 0 3px #0000004d;cursor:pointer;display:inline-flex;height:32px;justify-content:center;margin-left:8px;text-transform:uppercase;transition:background-color .3s ease;width:51px}.rcb-send-icon{background-position:50%;background-repeat:no-repeat;background-size:cover;background-size:contain;height:50%;object-fit:cover;transform:translateY(20%);width:50%}.rcb-view-history-container{align-items:center;display:flex;justify-content:center;max-height:45px;min-height:35px;padding-bottom:5px;padding-top:10px}.rcb-view-history-button{align-items:center;background-color:#fff;border:.5px solid #adadad;border-radius:20px;color:#adadad;cursor:pointer;display:inline-flex;font-size:12px;justify-content:center;max-width:60%;padding:6px 12px;transition:color .3s ease,border-color .3s ease}.rcb-view-history-button>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rcb-chatbot-global{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;z-index:9999}.rcb-chat-window{background-color:#fff;border-radius:10px;bottom:20px;box-shadow:0 2px 4px #0003;display:flex;flex-direction:column;height:550px;overflow:hidden;position:fixed;right:20px;transition:all .3s ease;width:375px}.rcb-window-embedded .rcb-chat-window{bottom:auto;opacity:1;position:relative;right:auto;visibility:visible}.rcb-window-open .rcb-chat-window{animation:rcb-animation-expand .3s ease-in-out forwards;opacity:1;visibility:visible}.rcb-window-close .rcb-chat-window{animation:rcb-animation-collapse .3s ease-in-out forwards;opacity:0;visibility:hidden}@keyframes rcb-animation-expand{0%{opacity:0;transform:translate(100%,100%) scale(0)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes rcb-animation-collapse{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100%,100%) scale(0)}}@keyframes rcb-animation-ping{0%{filter:brightness(100%);opacity:1}50%{filter:brightness(50%);opacity:.8}}@keyframes rcb-animation-bot-message-entry{0%{opacity:0;transform:translate(-100%,50%) scale(0)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes rcb-animation-user-message-entry{0%{opacity:0;transform:translate(100%,50%) scale(0)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes rcb-animation-bot-typing{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}@keyframes rcb-animation-pop-in{0%{opacity:0;transform:scale(.8)}70%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}@keyframes rcb-animations-checkboxes-entry{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes rcb-animation-options-entry{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes rcb-animation-tooltip-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes rcb-animation-tooltip-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes rcb-animation-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.rcb-toggle-button.rcb-button-show{background-color:#1a5b6e;background-position:50%;background-repeat:no-repeat;background-size:72%}.rcb-chat-window{max-height:600px;max-width:100%;width:550px!important}.rcb-chat-window .rcb-bot-avatar{background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:0}.rcb-chat-window .rcb-chat-header{align-items:center;display:flex;flex-direction:row;font-weight:700}.rcb-chat-window a{color:#000;font-weight:700;text-decoration:underline}.rcb-chat-window a:hover{color:#107180}.rcb-chat-window .rcb-bot-message a{color:#fff;text-decoration:none}.rcb-chat-window .rcb-bot-message a:hover{text-decoration:underline}.rcb-chat-window .rcb-chat-input-textarea{overflow-y:auto}.rcb-chat-window .rcb-chat-footer-container{font-size:10px}.embedded-qa-bot .rcb-chat-window{max-width:100%;width:100%!important}.access-qa-bot.hidden{display:none}.embedded-qa-bot .rcb-bot-message,.embedded-qa-bot .rcb-user-message{max-width:90%!important;word-break:break-word}.embedded-qa-bot .rcb-chat-input-textarea{width:100%!important}.qa-bot-container{max-width:100%;width:100%}.access-qa-bot .user-login-icon{display:none!important}.access-qa-bot.bot-logged-in .user-login-icon{display:flex!important}.access-qa-bot.bot-logged-in .user-login-icon svg{transform:scale(1.3) translateY(-2px)}.rcb-tooltip-show.phone-ring{animation:phone-ring 3s ease-out!important;z-index:10000!important}@keyframes phone-ring{0%{transform:translateX(0) translateY(0) rotate(0deg)}2%{transform:translateX(0) translateY(-8px) rotate(-2deg)}4%{transform:translateX(0) translateY(-6px) rotate(2deg)}6%{transform:translateX(0) translateY(-8px) rotate(-1deg)}8%{transform:translateX(0) translateY(-6px) rotate(1deg)}10%{transform:translateX(0) translateY(-8px) rotate(-2deg)}12%{transform:translateX(0) translateY(-6px) rotate(2deg)}20%{transform:translateX(0) translateY(0) rotate(0deg)}30%{transform:translateX(0) translateY(0) rotate(0deg)}40%{transform:translateX(0) translateY(0) rotate(0deg)}49%{transform:translateX(0) translateY(0) rotate(0deg)}50%{transform:translateX(0) translateY(-8px) rotate(-2deg)}52%{transform:translateX(0) translateY(-6px) rotate(2deg)}54%{transform:translateX(0) translateY(-8px) rotate(-1deg)}56%{transform:translateX(0) translateY(-6px) rotate(1deg)}58%{transform:translateX(0) translateY(-8px) rotate(-2deg)}60%{transform:translateX(0) translateY(-6px) rotate(2deg)}70%{transform:translateX(0) translateY(0) rotate(0deg)}to{transform:translateX(0) translateY(0) rotate(0deg)}}@media (max-width:768px){.embedded-chat-container.open{height:400px}.embedded-chat-closed{font-size:14px;height:40px}.embedded-chat-open-btn{font-size:12px;padding:3px 10px}}@media (max-width:480px){.embedded-chat-container.open{height:350px}}
|
|
2
2
|
/*# sourceMappingURL=main.css.map*/
|