@ibti-tech/chatbot 0.6.0 → 0.6.5
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 +103 -4
- package/dist/index.d.ts +35 -14
- package/dist/index.mjs +278 -60
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@ A modern and customizable React chatbot component developed by IBTI Soluções e
|
|
|
10
10
|
- ⚡ **Optimized performance**: Built with ESBuild for maximum performance
|
|
11
11
|
- 🔌 **Easy integration**: Simple React component to use
|
|
12
12
|
- 📱 **Responsive**: Works perfectly on desktop and mobile
|
|
13
|
+
- 📍 **Flexible positioning**: Precise horizontal positioning with predefined values or custom CSS units (px, %, rem, calc, etc.)
|
|
13
14
|
|
|
14
15
|
## 📦 Installation
|
|
15
16
|
|
|
@@ -78,7 +79,8 @@ Main component that displays the chatbot bar with toggle button and conversation
|
|
|
78
79
|
| Prop | Type | Required | Description |
|
|
79
80
|
|------|------|----------|-------------|
|
|
80
81
|
| `verticalPosition` | `'top' \| 'bottom'` | ❌ | Vertical position of the chatbot. Default: `'bottom'` |
|
|
81
|
-
| `horizontalPosition` | `'left' \| 'right'` | ❌ | Horizontal position of the chatbot. Default: `'right'` |
|
|
82
|
+
| `horizontalPosition` | `'left' \| 'right'` | ❌ | Horizontal position of the chatbot bar container. Default: `'right'` |
|
|
83
|
+
| `deviceHorizontalPosition` | `'left' \| 'right' \| 'center' \| string` | ❌ | Horizontal position of the ChatbotDevice on desktop. Can be a predefined value ('left', 'right', 'center') or a custom value with any CSS unit (e.g., '20px', '10%', '2rem', 'calc(100% - 200px)'). When using a custom value, it will be applied as the 'left' property. If not provided, the device will use the parent container's positioning. Only affects desktop view. |
|
|
82
84
|
| `zIndex` | `number` | ❌ | Custom z-index value. If not provided, uses theme.zIndex.modals. Useful when you need the chatbot to appear above specific elements like headers |
|
|
83
85
|
| `topOffset` | `string \| number` | ❌ | Offset from the top when verticalPosition is 'top'. Can be a number (in pixels) or a string (e.g., '100px', '10rem'). Useful to position the chatbot below a fixed header |
|
|
84
86
|
| `aboveHeader` | `boolean` | ❌ | Convenient prop to position the chatbot above header elements. When true, sets z-index to 9999 and allows topOffset configuration. Default: `false` |
|
|
@@ -111,13 +113,81 @@ Main component that displays the chatbot bar with toggle button and conversation
|
|
|
111
113
|
/>
|
|
112
114
|
|
|
113
115
|
// Option 4: Push content down instead of overlaying (only works with verticalPosition="top")
|
|
116
|
+
// When pushContentDown is true, the chatbot occupies full width and pushes header content down
|
|
114
117
|
<ChatbotBar
|
|
115
118
|
verticalPosition="top"
|
|
116
119
|
pushContentDown={true}
|
|
117
120
|
/>
|
|
121
|
+
|
|
122
|
+
// ✅ CORRECT - Component at the beginning
|
|
123
|
+
function App() {
|
|
124
|
+
return (
|
|
125
|
+
<ChatbotProvider ...>
|
|
126
|
+
<ChatbotBar verticalPosition="top" pushContentDown={true} />
|
|
127
|
+
<header>...</header>
|
|
128
|
+
<main>...</main>
|
|
129
|
+
</ChatbotProvider>
|
|
130
|
+
)
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// ❌ WRONG - Component at the end (will appear at bottom even with pushContentDown)
|
|
134
|
+
function App() {
|
|
135
|
+
return (
|
|
136
|
+
<ChatbotProvider ...>
|
|
137
|
+
<header>...</header>
|
|
138
|
+
<main>...</main>
|
|
139
|
+
<ChatbotBar verticalPosition="top" pushContentDown={true} />
|
|
140
|
+
</ChatbotProvider>
|
|
141
|
+
)
|
|
142
|
+
}
|
|
118
143
|
```
|
|
119
144
|
|
|
120
|
-
**Note:** The component maintains full responsiveness even with custom positioning. The `topOffset` prop accepts both numbers (pixels) and strings (any valid CSS unit). The `pushContentDown` prop only works when `verticalPosition` is `'top'` and makes the chatbot reserve space in the document flow instead of overlaying content.
|
|
145
|
+
**Note:** The component maintains full responsiveness even with custom positioning. The `topOffset` prop accepts both numbers (pixels) and strings (any valid CSS unit). The `pushContentDown` prop only works when `verticalPosition` is `'top'` and makes the chatbot reserve space in the document flow instead of overlaying content. When `pushContentDown` is enabled, the chatbot will occupy the full width of the page (aligned with the host site's container) and push all content below it down, making it perfect for top-of-page integration.
|
|
146
|
+
|
|
147
|
+
**⚠️ CRITICAL:** When using `pushContentDown={true}`, you **MUST** render the `ChatbotBar` component at the **beginning** of your DOM structure (before your header and other content) for it to appear at the top of the page. This is because `pushContentDown` uses `position: relative`, which means the component appears where it is in the DOM flow. If you render it at the end of the DOM, it will appear at the bottom of the page even with `pushContentDown={true}`.
|
|
148
|
+
|
|
149
|
+
**Precise horizontal positioning on desktop:**
|
|
150
|
+
|
|
151
|
+
```jsx
|
|
152
|
+
// Using predefined values
|
|
153
|
+
<ChatbotBar
|
|
154
|
+
deviceHorizontalPosition="left" // Aligns to left
|
|
155
|
+
/>
|
|
156
|
+
<ChatbotBar
|
|
157
|
+
deviceHorizontalPosition="right" // Aligns to right (default behavior)
|
|
158
|
+
/>
|
|
159
|
+
<ChatbotBar
|
|
160
|
+
deviceHorizontalPosition="center" // Centers the device
|
|
161
|
+
/>
|
|
162
|
+
|
|
163
|
+
// Using custom values with any CSS unit
|
|
164
|
+
<ChatbotBar
|
|
165
|
+
deviceHorizontalPosition="20px" // 20 pixels from left
|
|
166
|
+
/>
|
|
167
|
+
<ChatbotBar
|
|
168
|
+
deviceHorizontalPosition="10%" // 10% from left edge
|
|
169
|
+
/>
|
|
170
|
+
<ChatbotBar
|
|
171
|
+
deviceHorizontalPosition="2rem" // 2rem from left edge
|
|
172
|
+
/>
|
|
173
|
+
<ChatbotBar
|
|
174
|
+
deviceHorizontalPosition="calc(100% - 200px)" // 200px from right edge
|
|
175
|
+
/>
|
|
176
|
+
|
|
177
|
+
// Combining with other positioning props
|
|
178
|
+
<ChatbotBar
|
|
179
|
+
verticalPosition="bottom"
|
|
180
|
+
horizontalPosition="right" // Bar container alignment
|
|
181
|
+
deviceHorizontalPosition="50px" // Device positioned 50px from left
|
|
182
|
+
/>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
**Important notes about `deviceHorizontalPosition`:**
|
|
186
|
+
- Only affects desktop/tablet view (mobile always uses full width)
|
|
187
|
+
- Custom values are applied as the `left` CSS property
|
|
188
|
+
- Predefined values (`'left'`, `'right'`, `'center'`) use margin-based alignment
|
|
189
|
+
- When using custom values, the device maintains its fixed width to prevent button shrinking
|
|
190
|
+
- This prop provides precise control over the ChatbotDevice position, independent of the bar container alignment
|
|
121
191
|
|
|
122
192
|
### `ChatbotDevice`
|
|
123
193
|
|
|
@@ -128,6 +198,8 @@ Alternative component that can be used to display the chatbot on different devic
|
|
|
128
198
|
| Prop | Type | Required | Description |
|
|
129
199
|
|------|------|----------|-------------|
|
|
130
200
|
| `verticalPosition` | `'top' \| 'bottom'` | ❌ | Vertical position of the chatbot. Default: `'bottom'` |
|
|
201
|
+
| `pushContentDown` | `boolean` | ❌ | When true and verticalPosition is 'top', the chatbot will push content down instead of overlaying it. Default: `false` |
|
|
202
|
+
| `horizontalPosition` | `'left' \| 'right' \| 'center' \| string` | ❌ | Horizontal position on desktop. Can be a predefined value ('left', 'right', 'center') or a custom value with any CSS unit (e.g., '20px', '10%', '2rem', 'calc(100% - 200px)'). When using a custom value, it will be applied as the 'left' property. Default: `undefined` (uses parent container positioning). Only affects desktop view. |
|
|
131
203
|
|
|
132
204
|
## 🎨 Themes
|
|
133
205
|
|
|
@@ -247,6 +319,7 @@ function MyApp() {
|
|
|
247
319
|
<ChatbotBar
|
|
248
320
|
verticalPosition="bottom"
|
|
249
321
|
horizontalPosition="right"
|
|
322
|
+
deviceHorizontalPosition="right"
|
|
250
323
|
/>
|
|
251
324
|
</ChatbotProvider>
|
|
252
325
|
</div>
|
|
@@ -269,16 +342,42 @@ You can control the position of the chatbot using the `ChatbotBar` component pro
|
|
|
269
342
|
// Top right
|
|
270
343
|
<ChatbotBar verticalPosition="top" />
|
|
271
344
|
|
|
272
|
-
// Bottom left
|
|
345
|
+
// Bottom left (bar container aligned left)
|
|
273
346
|
<ChatbotBar horizontalPosition="left" />
|
|
274
347
|
|
|
275
|
-
// Top left
|
|
348
|
+
// Top left (bar container aligned left)
|
|
276
349
|
<ChatbotBar
|
|
277
350
|
verticalPosition="top"
|
|
278
351
|
horizontalPosition="left"
|
|
279
352
|
/>
|
|
353
|
+
|
|
354
|
+
// Precise horizontal positioning on desktop
|
|
355
|
+
<ChatbotBar
|
|
356
|
+
deviceHorizontalPosition="center" // Centers the device
|
|
357
|
+
/>
|
|
358
|
+
|
|
359
|
+
<ChatbotBar
|
|
360
|
+
deviceHorizontalPosition="50px" // 50px from left edge
|
|
361
|
+
/>
|
|
362
|
+
|
|
363
|
+
<ChatbotBar
|
|
364
|
+
deviceHorizontalPosition="calc(100% - 250px)" // 250px from right edge
|
|
365
|
+
/>
|
|
366
|
+
|
|
367
|
+
// Combining bar container and device positioning
|
|
368
|
+
<ChatbotBar
|
|
369
|
+
horizontalPosition="right" // Bar container on right
|
|
370
|
+
deviceHorizontalPosition="20px" // Device 20px from left (within container)
|
|
371
|
+
/>
|
|
280
372
|
```
|
|
281
373
|
|
|
374
|
+
**Understanding the positioning props:**
|
|
375
|
+
- `horizontalPosition`: Controls the alignment of the bar container (`'left'` or `'right'`)
|
|
376
|
+
- `deviceHorizontalPosition`: Provides precise control over the ChatbotDevice position on desktop:
|
|
377
|
+
- Predefined values: `'left'`, `'right'`, `'center'` (use margin-based alignment)
|
|
378
|
+
- Custom values: Any CSS unit string (e.g., `'20px'`, `'10%'`, `'calc(100% - 200px)'`) applied as the `left` property
|
|
379
|
+
- Only affects desktop/tablet view; mobile always uses full width
|
|
380
|
+
|
|
282
381
|
### Controlling Initial State
|
|
283
382
|
|
|
284
383
|
Use the `isOpen` prop to control whether the chatbot starts open or closed:
|
package/dist/index.d.ts
CHANGED
|
@@ -73,12 +73,24 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/index' {
|
|
|
73
73
|
* When false, the chatbot will be fixed and overlay the content.
|
|
74
74
|
*/
|
|
75
75
|
pushContentDown?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Background color of the push-content-down row (full-width bar) for light theme.
|
|
78
|
+
* Does not affect the chatbot button. Accepts rgb(), hex (e.g. #e6e6e6), etc.
|
|
79
|
+
* Default: rgb(230, 230, 230)
|
|
80
|
+
*/
|
|
81
|
+
pushContentDownRowBackgroundLight?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Background color of the push-content-down row (full-width bar) for dark theme.
|
|
84
|
+
* Does not affect the chatbot button. Accepts rgb(), hex (e.g. #000000), etc.
|
|
85
|
+
* Default: rgb(0, 0, 0)
|
|
86
|
+
*/
|
|
87
|
+
pushContentDownRowBackgroundDark?: string;
|
|
76
88
|
};
|
|
77
|
-
export const ChatbotBar: ({ verticalPosition, horizontalPosition, deviceHorizontalPosition, zIndex, topOffset, aboveHeader, pushContentDown, }: ChatbotBarProps) => React.JSX.Element;
|
|
89
|
+
export const ChatbotBar: ({ verticalPosition, horizontalPosition, deviceHorizontalPosition, zIndex, topOffset, aboveHeader, pushContentDown, pushContentDownRowBackgroundLight, pushContentDownRowBackgroundDark, }: ChatbotBarProps) => React.JSX.Element;
|
|
78
90
|
//# sourceMappingURL=index.d.ts.map
|
|
79
91
|
}
|
|
80
92
|
declare module '@ibti-tech/chatbot/components/ChatbotBar/index.d.ts' {
|
|
81
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
93
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,MAAM,MAAM,eAAe,GAAG;IAC5B,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACrC;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC/D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,iCAAiC,CAAC,EAAE,MAAM,CAAA;IAC1C;;;;OAIG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAA;CAC1C,CAAA;AAKD,eAAO,MAAM,UAAU,GAAI,2LAUxB,eAAe,sBAuFjB,CAAA"}
|
|
82
94
|
}
|
|
83
95
|
declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
|
|
84
96
|
import { breakpoints } from '@ibti-tech/ui';
|
|
@@ -87,10 +99,15 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
|
|
|
87
99
|
variant?: keyof typeof breakpoints;
|
|
88
100
|
} & import("@ibti-tech/ui").HTMLStyleAttributes, {
|
|
89
101
|
$horizontalPosition: "left" | "right";
|
|
102
|
+
$deviceHorizontalPosition?: "left" | "right" | "center" | string;
|
|
90
103
|
$opened: boolean;
|
|
91
104
|
$verticalPosition: "top" | "bottom";
|
|
92
105
|
$pushContentDown?: boolean;
|
|
93
106
|
}>> & string & Omit<({ children, className, style, variant, }: import("@ibti-tech/ui").ContainerProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
107
|
+
/** Full-width row strip (pushContentDown + top). Background only; device sits on top with theme styles. */
|
|
108
|
+
export const PushDownRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
109
|
+
$background: string;
|
|
110
|
+
}>> & string;
|
|
94
111
|
export const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
95
112
|
$verticalPosition: "top" | "bottom";
|
|
96
113
|
$horizontalPosition: "left" | "right";
|
|
@@ -103,7 +120,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
|
|
|
103
120
|
//# sourceMappingURL=styles.d.ts.map
|
|
104
121
|
}
|
|
105
122
|
declare module '@ibti-tech/chatbot/components/ChatbotBar/styles.d.ts' {
|
|
106
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAW,MAAM,eAAe,CAAA;AAIpD,eAAO,MAAM,YAAY;;
|
|
123
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAW,MAAM,eAAe,CAAA;AAIpD,eAAO,MAAM,YAAY;;oBAEgB,kBAAmB;;yBADrC,MAAM,GAAG,OAAO;gCACT,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;aACvD,OAAO;uBACG,KAAK,GAAG,QAAQ;uBAChB,OAAO;iMA4E3B,CAAA;AAED,2GAA2G;AAC3G,eAAO,MAAM,WAAW;iBAA6B,MAAM;YAS1D,CAAA;AAED,eAAO,MAAM,OAAO;uBACC,KAAK,GAAG,QAAQ;yBACd,MAAM,GAAG,OAAO;aAC5B,OAAO;cACN,MAAM;iBACH,MAAM,GAAG,MAAM;mBACb,OAAO;uBACH,OAAO;YA2H3B,CAAA"}
|
|
107
124
|
}
|
|
108
125
|
declare module '@ibti-tech/chatbot/components/ChatbotBody/index' {
|
|
109
126
|
import React from 'react';
|
|
@@ -122,7 +139,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotBody/styles' {
|
|
|
122
139
|
//# sourceMappingURL=styles.d.ts.map
|
|
123
140
|
}
|
|
124
141
|
declare module '@ibti-tech/chatbot/components/ChatbotBody/styles.d.ts' {
|
|
125
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBody/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,6NAAe,CAAA;AAExC,eAAO,MAAM,YAAY,
|
|
142
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBody/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,6NAAe,CAAA;AAExC,eAAO,MAAM,YAAY,iOAYxB,CAAA;AAED,eAAO,MAAM,OAAO,6NAuCnB,CAAA"}
|
|
126
143
|
}
|
|
127
144
|
declare module '@ibti-tech/chatbot/components/ChatbotDevice/index' {
|
|
128
145
|
import React from 'react';
|
|
@@ -142,7 +159,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotDevice/index' {
|
|
|
142
159
|
//# sourceMappingURL=index.d.ts.map
|
|
143
160
|
}
|
|
144
161
|
declare module '@ibti-tech/chatbot/components/ChatbotDevice/index.d.ts' {
|
|
145
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotDevice/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CAC1D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,4DAI3B,kBAAkB,
|
|
162
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotDevice/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CAC1D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,4DAI3B,kBAAkB,sBAsBpB,CAAA;AAED,eAAe,aAAa,CAAA"}
|
|
146
163
|
}
|
|
147
164
|
declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles' {
|
|
148
165
|
export const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
@@ -154,7 +171,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles' {
|
|
|
154
171
|
//# sourceMappingURL=styles.d.ts.map
|
|
155
172
|
}
|
|
156
173
|
declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles.d.ts' {
|
|
157
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotDevice/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;aACT,OAAO;uBACG,KAAK,GAAG,QAAQ;uBAChB,OAAO;0BACJ,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;
|
|
174
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotDevice/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;aACT,OAAO;uBACG,KAAK,GAAG,QAAQ;uBAChB,OAAO;0BACJ,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;YAqO3D,CAAA"}
|
|
158
175
|
}
|
|
159
176
|
declare module '@ibti-tech/chatbot/components/ChatbotFooter/index' {
|
|
160
177
|
import React from 'react';
|
|
@@ -173,7 +190,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotFooter/styles' {
|
|
|
173
190
|
//# sourceMappingURL=styles.d.ts.map
|
|
174
191
|
}
|
|
175
192
|
declare module '@ibti-tech/chatbot/components/ChatbotFooter/styles.d.ts' {
|
|
176
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotFooter/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,+NAQrC,CAAA;AAED,eAAO,MAAM,IAAI,
|
|
193
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotFooter/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,+NAQrC,CAAA;AAED,eAAO,MAAM,IAAI,mOAqFhB,CAAA;AAED,eAAO,MAAM,OAAO,6NAenB,CAAA"}
|
|
177
194
|
}
|
|
178
195
|
declare module '@ibti-tech/chatbot/components/ChatbotHeader/index' {
|
|
179
196
|
import React from 'react';
|
|
@@ -222,23 +239,26 @@ declare module '@ibti-tech/chatbot/components/ChatbotToggle/index' {
|
|
|
222
239
|
export type ChatbotToggleProps = {
|
|
223
240
|
verticalPosition?: 'top' | 'bottom';
|
|
224
241
|
opened?: boolean;
|
|
242
|
+
pushContentDown?: boolean;
|
|
225
243
|
};
|
|
226
|
-
export const ChatbotToggle: ({ verticalPosition, opened: openedProp, }: ChatbotToggleProps) => React.JSX.Element;
|
|
244
|
+
export const ChatbotToggle: ({ verticalPosition, opened: openedProp, pushContentDown, }: ChatbotToggleProps) => React.JSX.Element;
|
|
227
245
|
export default ChatbotToggle;
|
|
228
246
|
//# sourceMappingURL=index.d.ts.map
|
|
229
247
|
}
|
|
230
248
|
declare module '@ibti-tech/chatbot/components/ChatbotToggle/index.d.ts' {
|
|
231
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotToggle/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;
|
|
249
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotToggle/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,4DAI3B,kBAAkB,sBAkCpB,CAAA;AAED,eAAe,aAAa,CAAA"}
|
|
232
250
|
}
|
|
233
251
|
declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles' {
|
|
234
252
|
export const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
235
253
|
$opened: boolean;
|
|
236
254
|
$verticalPosition: "top" | "bottom";
|
|
255
|
+
$pushContentDown?: boolean;
|
|
256
|
+
$themeMode?: "light" | "dark";
|
|
237
257
|
}>> & string;
|
|
238
258
|
//# sourceMappingURL=styles.d.ts.map
|
|
239
259
|
}
|
|
240
260
|
declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles.d.ts' {
|
|
241
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotToggle/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;aACf,OAAO;uBACG,KAAK,GAAG,QAAQ;
|
|
261
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotToggle/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;aACf,OAAO;uBACG,KAAK,GAAG,QAAQ;uBAChB,OAAO;iBACb,OAAO,GAAG,MAAM;YAwE9B,CAAA"}
|
|
242
262
|
}
|
|
243
263
|
declare module '@ibti-tech/chatbot/components/MessageBalloon/index' {
|
|
244
264
|
import React from 'react';
|
|
@@ -288,7 +308,7 @@ declare module '@ibti-tech/chatbot/components/MessageBalloon/styles' {
|
|
|
288
308
|
//# sourceMappingURL=styles.d.ts.map
|
|
289
309
|
}
|
|
290
310
|
declare module '@ibti-tech/chatbot/components/MessageBalloon/styles.d.ts' {
|
|
291
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/MessageBalloon/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;WAAwB,UAAU,GAAG,MAAM;YAoB3D,CAAA;AAED,eAAO,MAAM,OAAO;WACX,UAAU,GAAG,MAAM;aACjB,OAAO;YAqKjB,CAAA;AAED,eAAO,MAAM,KAAK,+NAKjB,CAAA;AAED,eAAO,MAAM,wBAAwB;WAAuB,UAAU,GAAG,MAAM;
|
|
311
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/MessageBalloon/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;WAAwB,UAAU,GAAG,MAAM;YAoB3D,CAAA;AAED,eAAO,MAAM,OAAO;WACX,UAAU,GAAG,MAAM;aACjB,OAAO;YAqKjB,CAAA;AAED,eAAO,MAAM,KAAK,+NAKjB,CAAA;AAED,eAAO,MAAM,wBAAwB;WAAuB,UAAU,GAAG,MAAM;YAmB9E,CAAA;AAED,eAAO,MAAM,gBAAgB;WAAuB,UAAU,GAAG,MAAM;YAoBtE,CAAA;AAED,eAAO,MAAM,sBAAsB;WAAuB,UAAU,GAAG,MAAM;YAqB5E,CAAA;AAED,eAAO,MAAM,gBAAgB;WAAuB,UAAU,GAAG,MAAM;gBAAc,OAAO;YAoC3F,CAAA;AAED,eAAO,MAAM,YAAY;kBAAiC,UAAU,GAAG,MAAM;YA2B5E,CAAA;AAED,eAAO,MAAM,OAAO;kBAA+B,UAAU,GAAG,MAAM;YAgBrE,CAAA;AAED,eAAO,MAAM,OAAO;WAAuB,UAAU,GAAG,MAAM;YAqB7D,CAAA"}
|
|
292
312
|
}
|
|
293
313
|
declare module '@ibti-tech/chatbot/components/SuggestedQuestions/index' {
|
|
294
314
|
import React from 'react';
|
|
@@ -309,7 +329,7 @@ declare module '@ibti-tech/chatbot/components/SuggestedQuestions/styles' {
|
|
|
309
329
|
//# sourceMappingURL=styles.d.ts.map
|
|
310
330
|
}
|
|
311
331
|
declare module '@ibti-tech/chatbot/components/SuggestedQuestions/styles.d.ts' {
|
|
312
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/SuggestedQuestions/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,mcAY1B,CAAA;AAED,eAAO,MAAM,gBAAgB,6NAAc,CAAA;AAE3C,eAAO,MAAM,YAAY,iOAIxB,CAAA;AAED,eAAO,MAAM,KAAK,+NAMjB,CAAA;AAED,eAAO,MAAM,OAAO,
|
|
332
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/SuggestedQuestions/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,mcAY1B,CAAA;AAED,eAAO,MAAM,gBAAgB,6NAAc,CAAA;AAE3C,eAAO,MAAM,YAAY,iOAIxB,CAAA;AAED,eAAO,MAAM,KAAK,+NAMjB,CAAA;AAED,eAAO,MAAM,OAAO,6NAenB,CAAA"}
|
|
313
333
|
}
|
|
314
334
|
declare module '@ibti-tech/chatbot/components/WritingIndicator/index' {
|
|
315
335
|
import React from 'react';
|
|
@@ -352,12 +372,13 @@ declare module '@ibti-tech/chatbot/contexts/Chatbot/context' {
|
|
|
352
372
|
suggestedQuestions: ReturnType<typeof useChatbotSuggestedQuestions>;
|
|
353
373
|
apiURL: string;
|
|
354
374
|
texts?: ChatbotTypes.Texts;
|
|
375
|
+
theme: ChatbotTypes.Theme;
|
|
355
376
|
};
|
|
356
377
|
export const ChatbotContext: React.Context<ChatbotContextProps>;
|
|
357
378
|
//# sourceMappingURL=context.d.ts.map
|
|
358
379
|
}
|
|
359
380
|
declare module '@ibti-tech/chatbot/contexts/Chatbot/context.d.ts' {
|
|
360
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/contexts/Chatbot/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAA;IAC3B,YAAY,EAAE,YAAY,CAAC,WAAW,EAAE,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACtD,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,MAAM,EAAE,YAAY,CAAC,MAAM,CAAA;IAC3B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,kBAAkB,EAAE,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAA;IACnE,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;
|
|
381
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/contexts/Chatbot/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAA;IAC3B,YAAY,EAAE,YAAY,CAAC,WAAW,EAAE,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACtD,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,MAAM,EAAE,YAAY,CAAC,MAAM,CAAA;IAC3B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,kBAAkB,EAAE,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAA;IACnE,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;IAC1B,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,cAAc,oCAAiD,CAAA"}
|
|
361
382
|
}
|
|
362
383
|
declare module '@ibti-tech/chatbot/contexts/Chatbot/provider' {
|
|
363
384
|
import React, { ReactNode } from 'react';
|
|
@@ -374,7 +395,7 @@ declare module '@ibti-tech/chatbot/contexts/Chatbot/provider' {
|
|
|
374
395
|
//# sourceMappingURL=provider.d.ts.map
|
|
375
396
|
}
|
|
376
397
|
declare module '@ibti-tech/chatbot/contexts/Chatbot/provider.d.ts' {
|
|
377
|
-
{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/contexts/Chatbot/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAMpC,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAA;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,qDAO7B,oBAAoB,
|
|
398
|
+
{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/contexts/Chatbot/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAMpC,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAA;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,qDAO7B,oBAAoB,sBAwDtB,CAAA"}
|
|
378
399
|
}
|
|
379
400
|
declare module '@ibti-tech/chatbot/contexts/Chatbot/useChatFeedbackBox' {
|
|
380
401
|
type SendUserRatingProps = {
|
package/dist/index.mjs
CHANGED
|
@@ -712,7 +712,8 @@ var ChatbotProvider = /* @__PURE__ */ __name(({
|
|
|
712
712
|
apiConnectionError,
|
|
713
713
|
suggestedQuestions,
|
|
714
714
|
apiURL,
|
|
715
|
-
texts
|
|
715
|
+
texts,
|
|
716
|
+
theme
|
|
716
717
|
}
|
|
717
718
|
},
|
|
718
719
|
/* @__PURE__ */ React3.createElement(ThemeProvider, { theme: themes[theme] }, children)
|
|
@@ -735,11 +736,27 @@ var Wrapper = styled.div`
|
|
|
735
736
|
transition: ${(props) => props.theme.transitionDurations.fast};
|
|
736
737
|
overflow: hidden;
|
|
737
738
|
pointer-events: all;
|
|
738
|
-
height: 100vh;
|
|
739
|
-
max-height: calc(100vh - 45px);
|
|
740
739
|
box-sizing: border-box;
|
|
741
740
|
position: relative;
|
|
742
741
|
|
|
742
|
+
/* Default height - will be overridden by specific states */
|
|
743
|
+
${(props) => {
|
|
744
|
+
if (props.$pushContentDown && props.$verticalPosition === "top") {
|
|
745
|
+
if (!props.$opened) {
|
|
746
|
+
return css`
|
|
747
|
+
height: 32px;
|
|
748
|
+
`;
|
|
749
|
+
}
|
|
750
|
+
return css`
|
|
751
|
+
height: auto;
|
|
752
|
+
`;
|
|
753
|
+
}
|
|
754
|
+
return css`
|
|
755
|
+
height: 100vh;
|
|
756
|
+
max-height: calc(100vh - 45px);
|
|
757
|
+
`;
|
|
758
|
+
}}
|
|
759
|
+
|
|
743
760
|
/* Typography */
|
|
744
761
|
font-family: 'Montserrat', sans-serif !important;
|
|
745
762
|
font-weight: 600 !important;
|
|
@@ -784,16 +801,29 @@ var Wrapper = styled.div`
|
|
|
784
801
|
/* Desktop styles */
|
|
785
802
|
${screens.tablet} {
|
|
786
803
|
/* Height when closed with pushContentDown vs opened */
|
|
787
|
-
${(props) =>
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
804
|
+
${(props) => {
|
|
805
|
+
if (props.$pushContentDown && props.$verticalPosition === "top") {
|
|
806
|
+
if (!props.$opened) {
|
|
807
|
+
return css`
|
|
808
|
+
height: 32px !important;
|
|
809
|
+
max-height: 32px !important;
|
|
810
|
+
min-height: 32px !important;
|
|
811
|
+
`;
|
|
812
|
+
} else {
|
|
813
|
+
return css`
|
|
814
|
+
height: 500px !important;
|
|
815
|
+
max-height: 500px !important;
|
|
816
|
+
`;
|
|
817
|
+
}
|
|
818
|
+
}
|
|
819
|
+
return css`
|
|
820
|
+
height: 500px;
|
|
821
|
+
`;
|
|
822
|
+
}}
|
|
793
823
|
|
|
794
824
|
max-width: ${breakpoints.mobileL}px;
|
|
795
825
|
|
|
796
|
-
/* Horizontal positioning on desktop */
|
|
826
|
+
/* Horizontal positioning on desktop - same for overlay and pushContentDown */
|
|
797
827
|
${(props) => {
|
|
798
828
|
if (!props.$horizontalPosition) return "";
|
|
799
829
|
if (props.$horizontalPosition === "left") {
|
|
@@ -825,24 +855,34 @@ var Wrapper = styled.div`
|
|
|
825
855
|
/* Closed state styles */
|
|
826
856
|
${(props) => !props.$opened && (props.$verticalPosition === "top" ? css`
|
|
827
857
|
${props.$pushContentDown ? css`
|
|
828
|
-
/* Push content down mode: show only toggle button */
|
|
858
|
+
/* Push content down mode: show only toggle button - based on commit 8379cc8 */
|
|
829
859
|
height: 32px !important;
|
|
830
860
|
max-height: 32px !important;
|
|
861
|
+
min-height: 32px !important;
|
|
862
|
+
transform: none !important;
|
|
863
|
+
overflow: visible !important;
|
|
831
864
|
${screens.tablet} {
|
|
832
865
|
height: 32px !important;
|
|
833
866
|
max-height: 32px !important;
|
|
867
|
+
min-height: 32px !important;
|
|
868
|
+
transform: none !important;
|
|
834
869
|
}
|
|
835
870
|
> *:not(:last-child) {
|
|
836
|
-
display: none;
|
|
871
|
+
display: none !important;
|
|
837
872
|
}
|
|
838
873
|
> *:last-child {
|
|
839
|
-
flex-shrink: 0;
|
|
840
|
-
min-height: 32px;
|
|
841
|
-
height: 32px;
|
|
842
|
-
|
|
874
|
+
flex-shrink: 0 !important;
|
|
875
|
+
min-height: 32px !important;
|
|
876
|
+
height: 32px !important;
|
|
877
|
+
max-height: 32px !important;
|
|
878
|
+
width: 100% !important;
|
|
879
|
+
min-width: 100% !important;
|
|
880
|
+
max-width: 100% !important;
|
|
881
|
+
pointer-events: all !important;
|
|
882
|
+
cursor: pointer !important;
|
|
843
883
|
}
|
|
844
884
|
` : css`
|
|
845
|
-
/* Overlay mode: translate up to show only toggle button */
|
|
885
|
+
/* Overlay mode: translate up to show only toggle button - based on commit 8379cc8 */
|
|
846
886
|
transform: translateY(calc(-100% + 32px));
|
|
847
887
|
`}
|
|
848
888
|
` : css`
|
|
@@ -867,6 +907,27 @@ var Wrapper = styled.div`
|
|
|
867
907
|
width: 100%;
|
|
868
908
|
}
|
|
869
909
|
`)}
|
|
910
|
+
|
|
911
|
+
/* Opened state styles when pushContentDown is true - must come after closed state */
|
|
912
|
+
/* Chat overlays (Bar is fixed); same internal layout as overlay — no display overrides */
|
|
913
|
+
${(props) => props.$opened && props.$pushContentDown && props.$verticalPosition === "top" && css`
|
|
914
|
+
overflow: hidden !important;
|
|
915
|
+
transform: none !important;
|
|
916
|
+
|
|
917
|
+
${screens.tablet} {
|
|
918
|
+
height: 500px !important;
|
|
919
|
+
max-height: 500px !important;
|
|
920
|
+
min-height: 500px !important;
|
|
921
|
+
overflow: hidden !important;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
@media screen and (max-width: ${breakpoints.tablet}px) {
|
|
925
|
+
height: 100vh !important;
|
|
926
|
+
max-height: 100vh !important;
|
|
927
|
+
min-height: 100vh !important;
|
|
928
|
+
overflow: hidden !important;
|
|
929
|
+
}
|
|
930
|
+
`}
|
|
870
931
|
`;
|
|
871
932
|
|
|
872
933
|
// src/components/ChatbotHeader/index.tsx
|
|
@@ -1121,11 +1182,16 @@ var MessagesList = styled4.ul`
|
|
|
1121
1182
|
display: flex;
|
|
1122
1183
|
flex-direction: column;
|
|
1123
1184
|
gap: 0;
|
|
1185
|
+
width: 100%;
|
|
1186
|
+
box-sizing: border-box;
|
|
1187
|
+
list-style: none;
|
|
1188
|
+
margin: 0;
|
|
1124
1189
|
`;
|
|
1125
1190
|
var Wrapper4 = styled4.div`
|
|
1126
|
-
overflow: hidden;
|
|
1191
|
+
overflow-x: hidden;
|
|
1127
1192
|
overflow-y: auto;
|
|
1128
1193
|
flex: 1;
|
|
1194
|
+
min-width: 0;
|
|
1129
1195
|
height: 100%;
|
|
1130
1196
|
padding-right: ${(props) => props.theme.spacing.components.small};
|
|
1131
1197
|
font-family: 'Montserrat', sans-serif !important;
|
|
@@ -1356,6 +1422,8 @@ var BalloonAndActionsWrapper = styled5.div`
|
|
|
1356
1422
|
flex-direction: column;
|
|
1357
1423
|
gap: 2px;
|
|
1358
1424
|
margin-bottom: ${(props) => props.theme.spacing.components.medium};
|
|
1425
|
+
min-width: 0;
|
|
1426
|
+
width: 100%;
|
|
1359
1427
|
|
|
1360
1428
|
${({ $type }) => {
|
|
1361
1429
|
switch ($type) {
|
|
@@ -1373,6 +1441,7 @@ var BalloonContainer = styled5.div`
|
|
|
1373
1441
|
position: relative;
|
|
1374
1442
|
width: max-content;
|
|
1375
1443
|
max-width: 100%;
|
|
1444
|
+
min-width: 0;
|
|
1376
1445
|
|
|
1377
1446
|
${({ $type }) => {
|
|
1378
1447
|
switch ($type) {
|
|
@@ -1499,6 +1568,9 @@ var Wrapper5 = styled5.div`
|
|
|
1499
1568
|
display: flex;
|
|
1500
1569
|
flex-direction: column;
|
|
1501
1570
|
gap: 2px;
|
|
1571
|
+
width: 100%;
|
|
1572
|
+
min-width: 0;
|
|
1573
|
+
box-sizing: border-box;
|
|
1502
1574
|
|
|
1503
1575
|
${(props) => {
|
|
1504
1576
|
switch (props.$type) {
|
|
@@ -1844,6 +1916,9 @@ var Title = styled7.span`
|
|
|
1844
1916
|
`;
|
|
1845
1917
|
var Wrapper7 = styled7.div`
|
|
1846
1918
|
padding: ${(props) => props.theme.spacing.components.medium};
|
|
1919
|
+
width: 100%;
|
|
1920
|
+
min-width: 0;
|
|
1921
|
+
box-sizing: border-box;
|
|
1847
1922
|
font-family: 'Montserrat', sans-serif !important;
|
|
1848
1923
|
font-weight: 600 !important;
|
|
1849
1924
|
|
|
@@ -1929,18 +2004,24 @@ var LoadingSuggestedQuestions = styled8.span`
|
|
|
1929
2004
|
`;
|
|
1930
2005
|
var Form = styled8.form`
|
|
1931
2006
|
display: flex;
|
|
2007
|
+
align-items: flex-end;
|
|
1932
2008
|
gap: ${(props) => props.theme.spacing.components.small};
|
|
2009
|
+
width: 100%;
|
|
2010
|
+
min-width: 0;
|
|
1933
2011
|
|
|
1934
2012
|
/* Remove border from submit button */
|
|
1935
2013
|
button[type='submit'] {
|
|
1936
2014
|
border: none !important;
|
|
1937
2015
|
outline: none !important;
|
|
1938
2016
|
box-shadow: none !important;
|
|
2017
|
+
flex-shrink: 0 !important;
|
|
1939
2018
|
}
|
|
1940
2019
|
|
|
1941
2020
|
/* Chatbot textarea styles */
|
|
1942
2021
|
.textareaField {
|
|
1943
2022
|
font-family: 'Montserrat', sans-serif !important;
|
|
2023
|
+
flex: 1 !important;
|
|
2024
|
+
min-width: 0 !important;
|
|
1944
2025
|
|
|
1945
2026
|
&,
|
|
1946
2027
|
*,
|
|
@@ -2009,6 +2090,9 @@ var Form = styled8.form`
|
|
|
2009
2090
|
`;
|
|
2010
2091
|
var Wrapper8 = styled8.div`
|
|
2011
2092
|
padding: ${(props) => props.theme.spacing.components.small};
|
|
2093
|
+
width: 100%;
|
|
2094
|
+
min-width: 0;
|
|
2095
|
+
box-sizing: border-box;
|
|
2012
2096
|
font-family: 'Montserrat', sans-serif !important;
|
|
2013
2097
|
font-weight: 600 !important;
|
|
2014
2098
|
|
|
@@ -2094,10 +2178,12 @@ var ChatbotFooter_default = ChatbotFooter;
|
|
|
2094
2178
|
import { screens as screens2 } from "@ibti-tech/ui";
|
|
2095
2179
|
import { css as css4, styled as styled9 } from "styled-components";
|
|
2096
2180
|
var ButtonWrapper = styled9.button`
|
|
2097
|
-
height: 32px;
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2181
|
+
height: 32px !important;
|
|
2182
|
+
min-height: 32px !important;
|
|
2183
|
+
max-height: 32px !important;
|
|
2184
|
+
width: 100% !important;
|
|
2185
|
+
min-width: 100% !important;
|
|
2186
|
+
max-width: 100% !important;
|
|
2101
2187
|
background: transparent;
|
|
2102
2188
|
color: ${(props) => props.theme.colors.palette.primary.normal};
|
|
2103
2189
|
padding: ${(props) => props.theme.spacing.components.small};
|
|
@@ -2117,7 +2203,7 @@ var ButtonWrapper = styled9.button`
|
|
|
2117
2203
|
border: none !important;
|
|
2118
2204
|
outline: none !important;
|
|
2119
2205
|
box-shadow: none !important;
|
|
2120
|
-
flex-shrink: 0;
|
|
2206
|
+
flex-shrink: 0 !important;
|
|
2121
2207
|
box-sizing: border-box;
|
|
2122
2208
|
|
|
2123
2209
|
${(props) => !props.$opened && props.$verticalPosition === "bottom" && css4`
|
|
@@ -2131,6 +2217,19 @@ var ButtonWrapper = styled9.button`
|
|
|
2131
2217
|
border-radius: ${(props2) => props2.theme.borderRadius.medium} ${(props2) => props2.theme.borderRadius.medium} 0 0;
|
|
2132
2218
|
`}
|
|
2133
2219
|
|
|
2220
|
+
${(props) => !props.$opened && props.$verticalPosition === "top" && props.$pushContentDown && css4`
|
|
2221
|
+
background-color: ${props.theme.colors.layers[1].background};
|
|
2222
|
+
cursor: pointer;
|
|
2223
|
+
border-radius: ${(props2) => props2.theme.borderRadius.medium};
|
|
2224
|
+
box-shadow: ${props.$themeMode === "dark" ? "0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08)" : "0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06)"};
|
|
2225
|
+
pointer-events: auto;
|
|
2226
|
+
color: ${(props2) => props2.theme.colors.palette.primary.normal};
|
|
2227
|
+
&:hover {
|
|
2228
|
+
background-color: ${(props2) => props2.theme.colors.layers[1].hoveredBackground};
|
|
2229
|
+
color: ${(props2) => props2.theme.colors.palette.primary.normal};
|
|
2230
|
+
}
|
|
2231
|
+
`}
|
|
2232
|
+
|
|
2134
2233
|
${screens2.tablet} {
|
|
2135
2234
|
transition: ${(props) => props.theme.transitionDurations.default};
|
|
2136
2235
|
|
|
@@ -2146,9 +2245,10 @@ import React12 from "react";
|
|
|
2146
2245
|
import { ChevronDownIcon, ChevronUpIcon } from "@ibti-tech/ui/dist/icons";
|
|
2147
2246
|
var ChatbotToggle = /* @__PURE__ */ __name(({
|
|
2148
2247
|
verticalPosition = "bottom",
|
|
2149
|
-
opened: openedProp
|
|
2248
|
+
opened: openedProp,
|
|
2249
|
+
pushContentDown = false
|
|
2150
2250
|
}) => {
|
|
2151
|
-
const { opened: openedContext, openedToggle } = useChatbot_default();
|
|
2251
|
+
const { opened: openedContext, openedToggle, theme: themeMode } = useChatbot_default();
|
|
2152
2252
|
const opened = openedProp ?? openedContext;
|
|
2153
2253
|
const texts = useChatbotTexts();
|
|
2154
2254
|
const toggleText = (opened ? texts.CHATBOT_BAR.CLOSE : texts.CHATBOT_BAR.OPEN).replace("{{CHATBOT_NAME}}", texts.CHATBOT_NAME);
|
|
@@ -2158,7 +2258,9 @@ var ChatbotToggle = /* @__PURE__ */ __name(({
|
|
|
2158
2258
|
{
|
|
2159
2259
|
onClick: openedToggle,
|
|
2160
2260
|
$opened: opened,
|
|
2161
|
-
$verticalPosition: verticalPosition
|
|
2261
|
+
$verticalPosition: verticalPosition,
|
|
2262
|
+
$pushContentDown: pushContentDown,
|
|
2263
|
+
$themeMode: themeMode
|
|
2162
2264
|
},
|
|
2163
2265
|
/* @__PURE__ */ React12.createElement(BotIcon, null),
|
|
2164
2266
|
/* @__PURE__ */ React12.createElement("span", null, toggleText),
|
|
@@ -2408,7 +2510,14 @@ var ChatbotDevice = /* @__PURE__ */ __name(({
|
|
|
2408
2510
|
/* @__PURE__ */ React14.createElement(ChatbotHeader_default, { chatFeedbackBox }),
|
|
2409
2511
|
/* @__PURE__ */ React14.createElement(ChatbotBody_default, null),
|
|
2410
2512
|
/* @__PURE__ */ React14.createElement(ChatbotFooter_default, null),
|
|
2411
|
-
/* @__PURE__ */ React14.createElement(
|
|
2513
|
+
/* @__PURE__ */ React14.createElement(
|
|
2514
|
+
ChatbotToggle_default,
|
|
2515
|
+
{
|
|
2516
|
+
verticalPosition,
|
|
2517
|
+
opened,
|
|
2518
|
+
pushContentDown
|
|
2519
|
+
}
|
|
2520
|
+
)
|
|
2412
2521
|
);
|
|
2413
2522
|
}, "ChatbotDevice");
|
|
2414
2523
|
var ChatbotDevice_default = ChatbotDevice;
|
|
@@ -2435,51 +2544,116 @@ var BarContainer = styled11(Container)`
|
|
|
2435
2544
|
width: 100% !important;
|
|
2436
2545
|
max-width: 100% !important;
|
|
2437
2546
|
`}
|
|
2547
|
+
/* pushContentDown + top closed, mobile: Wrapper full width → keep margin for lateral position */
|
|
2548
|
+
${(props) => props.$pushContentDown && props.$verticalPosition === "top" && !props.$opened ? css6`
|
|
2549
|
+
width: ${breakpoints3.mobileL}px !important;
|
|
2550
|
+
max-width: ${breakpoints3.mobileL}px !important;
|
|
2551
|
+
min-width: ${breakpoints3.mobileL}px !important;
|
|
2552
|
+
position: relative;
|
|
2553
|
+
z-index: 1;
|
|
2554
|
+
padding-left: 0;
|
|
2555
|
+
padding-right: 0;
|
|
2556
|
+
${props.$horizontalPosition === "right" ? css6`margin-left: auto !important; margin-right: 2.5rem !important;` : css6`margin-left: 2.5rem !important; margin-right: auto !important;`}
|
|
2557
|
+
` : ""}
|
|
2438
2558
|
}
|
|
2439
2559
|
|
|
2440
2560
|
${screens3.tablet} {
|
|
2441
2561
|
display: flex;
|
|
2442
|
-
justify-content: ${(props) =>
|
|
2562
|
+
justify-content: ${(props) => {
|
|
2563
|
+
const pos = props.$deviceHorizontalPosition ?? props.$horizontalPosition;
|
|
2564
|
+
if (pos === "center") return "center";
|
|
2565
|
+
if (pos === "right") return "flex-end";
|
|
2566
|
+
if (pos === "left") return "flex-start";
|
|
2567
|
+
if (typeof pos === "string") return "flex-start";
|
|
2568
|
+
return props.$horizontalPosition === "right" ? "flex-end" : "flex-start";
|
|
2569
|
+
}};
|
|
2443
2570
|
|
|
2444
2571
|
${(props) => !props.$opened && props.$verticalPosition === "bottom" && !props.$pushContentDown ? css6`
|
|
2445
2572
|
width: ${breakpoints3.mobileL}px;
|
|
2446
2573
|
max-width: ${breakpoints3.mobileL}px;
|
|
2447
2574
|
min-width: ${breakpoints3.mobileL}px;
|
|
2448
2575
|
padding-left: 0;
|
|
2576
|
+
padding-right: 0;
|
|
2577
|
+
` : ""}
|
|
2578
|
+
|
|
2579
|
+
/* pushContentDown + top closed: mobileL bar + 2.5rem lateral margin */
|
|
2580
|
+
${(props) => props.$pushContentDown && props.$verticalPosition === "top" && !props.$opened ? css6`
|
|
2581
|
+
width: ${breakpoints3.mobileL}px;
|
|
2582
|
+
max-width: ${breakpoints3.mobileL}px;
|
|
2583
|
+
min-width: ${breakpoints3.mobileL}px;
|
|
2584
|
+
padding-left: 0;
|
|
2585
|
+
padding-right: 0;
|
|
2586
|
+
position: relative;
|
|
2587
|
+
z-index: 1;
|
|
2588
|
+
${props.$horizontalPosition === "right" ? css6`margin-left: auto; margin-right: 2.5rem;` : css6`margin-left: 2.5rem; margin-right: auto;`}
|
|
2449
2589
|
` : ""}
|
|
2450
2590
|
}
|
|
2451
2591
|
`;
|
|
2592
|
+
var PushDownRow = styled11.div`
|
|
2593
|
+
position: absolute;
|
|
2594
|
+
inset: 0;
|
|
2595
|
+
width: 100%;
|
|
2596
|
+
height: 32px;
|
|
2597
|
+
min-height: 32px;
|
|
2598
|
+
background-color: ${(p) => p.$background};
|
|
2599
|
+
z-index: 0;
|
|
2600
|
+
pointer-events: none;
|
|
2601
|
+
`;
|
|
2452
2602
|
var Wrapper10 = styled11.div`
|
|
2453
2603
|
${(props) => {
|
|
2454
2604
|
if (props.$pushContentDown && props.$verticalPosition === "top") {
|
|
2605
|
+
if (props.$opened) {
|
|
2606
|
+
return css6`
|
|
2607
|
+
position: fixed !important;
|
|
2608
|
+
width: 100%;
|
|
2609
|
+
top: 0 !important;
|
|
2610
|
+
bottom: auto !important;
|
|
2611
|
+
left: 0 !important;
|
|
2612
|
+
right: 0 !important;
|
|
2613
|
+
z-index: ${props.$zIndex !== void 0 ? props.$zIndex : props.theme.zIndex.modals};
|
|
2614
|
+
pointer-events: auto;
|
|
2615
|
+
padding-top: ${props.$topOffset !== void 0 ? 0 : props.theme.spacing.components.xsmall};
|
|
2616
|
+
background-color: transparent;
|
|
2617
|
+
${screens3.tablet} {
|
|
2618
|
+
width: auto !important;
|
|
2619
|
+
height: auto !important;
|
|
2620
|
+
min-height: auto !important;
|
|
2621
|
+
background-color: transparent;
|
|
2622
|
+
border: none;
|
|
2623
|
+
padding: 0;
|
|
2624
|
+
top: ${props.$topOffset !== void 0 ? typeof props.$topOffset === "number" ? `${props.$topOffset}px` : props.$topOffset : "0"} !important;
|
|
2625
|
+
bottom: auto !important;
|
|
2626
|
+
${props.$horizontalPosition === "right" ? css6`left: auto !important; right: 2.5rem !important;` : css6`left: 2.5rem !important; right: auto !important;`}
|
|
2627
|
+
}
|
|
2628
|
+
@media screen and (max-width: ${breakpoints3.tablet}px) {
|
|
2629
|
+
padding-top: 0 !important;
|
|
2630
|
+
top: 0 !important;
|
|
2631
|
+
height: 100vh;
|
|
2632
|
+
}
|
|
2633
|
+
`;
|
|
2634
|
+
}
|
|
2455
2635
|
return css6`
|
|
2456
|
-
position:
|
|
2636
|
+
position: fixed !important;
|
|
2457
2637
|
width: 100%;
|
|
2458
|
-
top: 0;
|
|
2638
|
+
top: 0 !important;
|
|
2639
|
+
bottom: auto !important;
|
|
2640
|
+
left: 0 !important;
|
|
2641
|
+
right: 0 !important;
|
|
2459
2642
|
z-index: ${props.$zIndex !== void 0 ? props.$zIndex : props.theme.zIndex.modals};
|
|
2460
|
-
pointer-events:
|
|
2461
|
-
|
|
2462
|
-
|
|
2643
|
+
pointer-events: auto;
|
|
2644
|
+
height: 32px !important;
|
|
2645
|
+
min-height: 32px !important;
|
|
2646
|
+
background-color: transparent;
|
|
2463
2647
|
${screens3.tablet} {
|
|
2464
|
-
width:
|
|
2465
|
-
|
|
2648
|
+
width: 100% !important;
|
|
2649
|
+
max-width: 100% !important;
|
|
2466
2650
|
border: none;
|
|
2467
2651
|
padding: 0;
|
|
2468
|
-
|
|
2469
|
-
right: ${(props2) => props2.theme.spacing.components.medium};
|
|
2470
|
-
` : css6`
|
|
2471
|
-
left: ${(props2) => props2.theme.spacing.components.medium};
|
|
2472
|
-
`}
|
|
2652
|
+
bottom: auto !important;
|
|
2473
2653
|
}
|
|
2474
|
-
|
|
2475
2654
|
@media screen and (max-width: ${breakpoints3.tablet}px) {
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
height: 100vh;
|
|
2479
|
-
` : css6`
|
|
2480
|
-
height: 32px;
|
|
2481
|
-
min-height: 32px;
|
|
2482
|
-
`}
|
|
2655
|
+
height: 32px !important;
|
|
2656
|
+
min-height: 32px !important;
|
|
2483
2657
|
}
|
|
2484
2658
|
`;
|
|
2485
2659
|
}
|
|
@@ -2516,18 +2690,18 @@ var Wrapper10 = styled11.div`
|
|
|
2516
2690
|
background-color: transparent;
|
|
2517
2691
|
border: none;
|
|
2518
2692
|
padding: 0;
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
` : css6`
|
|
2522
|
-
left: ${(props2) => props2.theme.spacing.components.medium};
|
|
2523
|
-
`}
|
|
2693
|
+
/* Top (portal): 2.5rem to match push-down bar; bottom: theme medium */
|
|
2694
|
+
${props.$horizontalPosition === "right" ? css6`right: ${props.$verticalPosition === "top" ? "2.5rem" : props.theme.spacing.components.medium}; left: auto;` : css6`left: ${props.$verticalPosition === "top" ? "2.5rem" : props.theme.spacing.components.medium}; right: auto;`}
|
|
2524
2695
|
}
|
|
2525
2696
|
`;
|
|
2526
2697
|
}}
|
|
2527
2698
|
`;
|
|
2528
2699
|
|
|
2529
2700
|
// src/components/ChatbotBar/index.tsx
|
|
2530
|
-
import React15 from "react";
|
|
2701
|
+
import React15, { useEffect as useEffect8, useState as useState10 } from "react";
|
|
2702
|
+
import { createPortal } from "react-dom";
|
|
2703
|
+
var PUSH_DOWN_ROW_BG_LIGHT = "rgb(230, 230, 230)";
|
|
2704
|
+
var PUSH_DOWN_ROW_BG_DARK = "rgb(0, 0, 0)";
|
|
2531
2705
|
var ChatbotBar = /* @__PURE__ */ __name(({
|
|
2532
2706
|
verticalPosition = "bottom",
|
|
2533
2707
|
horizontalPosition = "right",
|
|
@@ -2535,11 +2709,49 @@ var ChatbotBar = /* @__PURE__ */ __name(({
|
|
|
2535
2709
|
zIndex,
|
|
2536
2710
|
topOffset,
|
|
2537
2711
|
aboveHeader = false,
|
|
2538
|
-
pushContentDown = false
|
|
2712
|
+
pushContentDown = false,
|
|
2713
|
+
pushContentDownRowBackgroundLight = PUSH_DOWN_ROW_BG_LIGHT,
|
|
2714
|
+
pushContentDownRowBackgroundDark = PUSH_DOWN_ROW_BG_DARK
|
|
2539
2715
|
}) => {
|
|
2540
|
-
const { opened } = useChatbot_default();
|
|
2716
|
+
const { opened, theme } = useChatbot_default();
|
|
2717
|
+
const pushDownRowBackground = theme === "dark" ? pushContentDownRowBackgroundDark : pushContentDownRowBackgroundLight;
|
|
2718
|
+
const [portalContainer, setPortalContainer] = useState10(null);
|
|
2541
2719
|
const calculatedZIndex = aboveHeader ? 9999 : zIndex;
|
|
2542
|
-
|
|
2720
|
+
useEffect8(() => {
|
|
2721
|
+
if (verticalPosition === "top" && typeof document !== "undefined") {
|
|
2722
|
+
let container = document.getElementById("chatbot-portal-container");
|
|
2723
|
+
if (!container) {
|
|
2724
|
+
container = document.createElement("div");
|
|
2725
|
+
container.id = "chatbot-portal-container";
|
|
2726
|
+
container.style.width = "100%";
|
|
2727
|
+
container.style.margin = "0";
|
|
2728
|
+
container.style.padding = "0";
|
|
2729
|
+
container.style.boxSizing = "border-box";
|
|
2730
|
+
document.body.insertBefore(container, document.body.firstChild);
|
|
2731
|
+
}
|
|
2732
|
+
setPortalContainer(container);
|
|
2733
|
+
return () => {
|
|
2734
|
+
if (container?.parentNode) {
|
|
2735
|
+
container.parentNode.removeChild(container);
|
|
2736
|
+
}
|
|
2737
|
+
};
|
|
2738
|
+
} else {
|
|
2739
|
+
setPortalContainer(null);
|
|
2740
|
+
}
|
|
2741
|
+
}, [verticalPosition]);
|
|
2742
|
+
const usePushDown = pushContentDown && verticalPosition === "top";
|
|
2743
|
+
const content = /* @__PURE__ */ React15.createElement(React15.Fragment, null, usePushDown && /* @__PURE__ */ React15.createElement(
|
|
2744
|
+
"div",
|
|
2745
|
+
{
|
|
2746
|
+
style: {
|
|
2747
|
+
height: 33,
|
|
2748
|
+
minHeight: 33,
|
|
2749
|
+
width: "100%",
|
|
2750
|
+
backgroundColor: pushDownRowBackground
|
|
2751
|
+
},
|
|
2752
|
+
"aria-hidden": true
|
|
2753
|
+
}
|
|
2754
|
+
), /* @__PURE__ */ React15.createElement(
|
|
2543
2755
|
Wrapper10,
|
|
2544
2756
|
{
|
|
2545
2757
|
$verticalPosition: verticalPosition,
|
|
@@ -2550,24 +2762,30 @@ var ChatbotBar = /* @__PURE__ */ __name(({
|
|
|
2550
2762
|
$aboveHeader: aboveHeader,
|
|
2551
2763
|
$pushContentDown: pushContentDown
|
|
2552
2764
|
},
|
|
2765
|
+
usePushDown && !opened && /* @__PURE__ */ React15.createElement(PushDownRow, { $background: pushDownRowBackground, "aria-hidden": true }),
|
|
2553
2766
|
/* @__PURE__ */ React15.createElement(
|
|
2554
2767
|
BarContainer,
|
|
2555
2768
|
{
|
|
2556
2769
|
$horizontalPosition: horizontalPosition,
|
|
2770
|
+
$deviceHorizontalPosition: deviceHorizontalPosition,
|
|
2557
2771
|
$opened: opened,
|
|
2558
2772
|
$verticalPosition: verticalPosition,
|
|
2559
|
-
$pushContentDown:
|
|
2773
|
+
$pushContentDown: usePushDown
|
|
2560
2774
|
},
|
|
2561
2775
|
/* @__PURE__ */ React15.createElement(
|
|
2562
2776
|
ChatbotDevice_default,
|
|
2563
2777
|
{
|
|
2564
2778
|
verticalPosition,
|
|
2565
|
-
pushContentDown:
|
|
2779
|
+
pushContentDown: usePushDown,
|
|
2566
2780
|
horizontalPosition: deviceHorizontalPosition
|
|
2567
2781
|
}
|
|
2568
2782
|
)
|
|
2569
2783
|
)
|
|
2570
|
-
);
|
|
2784
|
+
));
|
|
2785
|
+
if (portalContainer) {
|
|
2786
|
+
return createPortal(content, portalContainer);
|
|
2787
|
+
}
|
|
2788
|
+
return content;
|
|
2571
2789
|
}, "ChatbotBar");
|
|
2572
2790
|
export {
|
|
2573
2791
|
ChatbotBar,
|