@ibti-tech/chatbot 0.5.8 → 0.6.0
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 +39 -0
- package/dist/index.d.ts +51 -7
- package/dist/index.mjs +204 -41
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -79,6 +79,45 @@ Main component that displays the chatbot bar with toggle button and conversation
|
|
|
79
79
|
|------|------|----------|-------------|
|
|
80
80
|
| `verticalPosition` | `'top' \| 'bottom'` | ❌ | Vertical position of the chatbot. Default: `'bottom'` |
|
|
81
81
|
| `horizontalPosition` | `'left' \| 'right'` | ❌ | Horizontal position of the chatbot. Default: `'right'` |
|
|
82
|
+
| `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
|
+
| `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
|
+
| `aboveHeader` | `boolean` | ❌ | Convenient prop to position the chatbot above header elements. When true, sets z-index to 9999 and allows topOffset configuration. Default: `false` |
|
|
85
|
+
| `pushContentDown` | `boolean` | ❌ | When true and verticalPosition is 'top', the chatbot will push content down instead of overlaying it. The chatbot will occupy space in the document flow. When false, the chatbot will be fixed and overlay the content. Default: `false` |
|
|
86
|
+
|
|
87
|
+
#### Examples
|
|
88
|
+
|
|
89
|
+
**Positioning above header elements:**
|
|
90
|
+
|
|
91
|
+
```jsx
|
|
92
|
+
// Option 1: Using aboveHeader prop (recommended)
|
|
93
|
+
<ChatbotBar
|
|
94
|
+
verticalPosition="top"
|
|
95
|
+
aboveHeader={true}
|
|
96
|
+
topOffset={120} // Adjust based on your header height
|
|
97
|
+
/>
|
|
98
|
+
|
|
99
|
+
// Option 2: Using custom zIndex
|
|
100
|
+
<ChatbotBar
|
|
101
|
+
verticalPosition="top"
|
|
102
|
+
zIndex={9999}
|
|
103
|
+
topOffset="120px"
|
|
104
|
+
/>
|
|
105
|
+
|
|
106
|
+
// Option 3: Using CSS units for topOffset
|
|
107
|
+
<ChatbotBar
|
|
108
|
+
verticalPosition="top"
|
|
109
|
+
aboveHeader={true}
|
|
110
|
+
topOffset="8rem" // Using rem units for better scalability
|
|
111
|
+
/>
|
|
112
|
+
|
|
113
|
+
// Option 4: Push content down instead of overlaying (only works with verticalPosition="top")
|
|
114
|
+
<ChatbotBar
|
|
115
|
+
verticalPosition="top"
|
|
116
|
+
pushContentDown={true}
|
|
117
|
+
/>
|
|
118
|
+
```
|
|
119
|
+
|
|
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.
|
|
82
121
|
|
|
83
122
|
### `ChatbotDevice`
|
|
84
123
|
|
package/dist/index.d.ts
CHANGED
|
@@ -44,12 +44,41 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/index' {
|
|
|
44
44
|
export type ChatbotBarProps = {
|
|
45
45
|
verticalPosition?: 'top' | 'bottom';
|
|
46
46
|
horizontalPosition?: 'left' | 'right';
|
|
47
|
+
/**
|
|
48
|
+
* Horizontal position of the ChatbotDevice on desktop.
|
|
49
|
+
* Can be a predefined value ('left', 'right', 'center') or a custom value with any unit (e.g., '20px', '10%', '2rem', 'calc(100% - 200px)').
|
|
50
|
+
* When using a custom value, it will be applied as the 'left' property.
|
|
51
|
+
* If not provided, the device will use the parent container's positioning.
|
|
52
|
+
*/
|
|
53
|
+
deviceHorizontalPosition?: 'left' | 'right' | 'center' | string;
|
|
54
|
+
/**
|
|
55
|
+
* Custom z-index value. If not provided, uses theme.zIndex.modals
|
|
56
|
+
* Useful when you need the chatbot to appear above specific elements like headers
|
|
57
|
+
*/
|
|
58
|
+
zIndex?: number;
|
|
59
|
+
/**
|
|
60
|
+
* Offset from the top when verticalPosition is 'top'
|
|
61
|
+
* Can be a number (in pixels) or a string (e.g., '100px', '10rem')
|
|
62
|
+
* Useful to position the chatbot below a fixed header
|
|
63
|
+
*/
|
|
64
|
+
topOffset?: string | number;
|
|
65
|
+
/**
|
|
66
|
+
* Convenient prop to position the chatbot above header elements
|
|
67
|
+
* When true, sets z-index to 9999 and allows topOffset configuration
|
|
68
|
+
*/
|
|
69
|
+
aboveHeader?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* When true and verticalPosition is 'top', the chatbot will push content down
|
|
72
|
+
* instead of overlaying it. The chatbot will occupy space in the document flow.
|
|
73
|
+
* When false, the chatbot will be fixed and overlay the content.
|
|
74
|
+
*/
|
|
75
|
+
pushContentDown?: boolean;
|
|
47
76
|
};
|
|
48
|
-
export const ChatbotBar: ({ verticalPosition, horizontalPosition, }: ChatbotBarProps) => React.JSX.Element;
|
|
77
|
+
export const ChatbotBar: ({ verticalPosition, horizontalPosition, deviceHorizontalPosition, zIndex, topOffset, aboveHeader, pushContentDown, }: ChatbotBarProps) => React.JSX.Element;
|
|
49
78
|
//# sourceMappingURL=index.d.ts.map
|
|
50
79
|
}
|
|
51
80
|
declare module '@ibti-tech/chatbot/components/ChatbotBar/index.d.ts' {
|
|
52
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/components/ChatbotBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,eAAe,GAAG;IAC5B,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;
|
|
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,KAAK,MAAM,OAAO,CAAA;AAGzB,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;CAC1B,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,sHAQxB,eAAe,sBA8BjB,CAAA"}
|
|
53
82
|
}
|
|
54
83
|
declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
|
|
55
84
|
import { breakpoints } from '@ibti-tech/ui';
|
|
@@ -60,16 +89,21 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
|
|
|
60
89
|
$horizontalPosition: "left" | "right";
|
|
61
90
|
$opened: boolean;
|
|
62
91
|
$verticalPosition: "top" | "bottom";
|
|
92
|
+
$pushContentDown?: boolean;
|
|
63
93
|
}>> & string & Omit<({ children, className, style, variant, }: import("@ibti-tech/ui").ContainerProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
64
94
|
export const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
65
95
|
$verticalPosition: "top" | "bottom";
|
|
66
96
|
$horizontalPosition: "left" | "right";
|
|
67
97
|
$opened: boolean;
|
|
98
|
+
$zIndex?: number;
|
|
99
|
+
$topOffset?: string | number;
|
|
100
|
+
$aboveHeader?: boolean;
|
|
101
|
+
$pushContentDown?: boolean;
|
|
68
102
|
}>> & string;
|
|
69
103
|
//# sourceMappingURL=styles.d.ts.map
|
|
70
104
|
}
|
|
71
105
|
declare module '@ibti-tech/chatbot/components/ChatbotBar/styles.d.ts' {
|
|
72
|
-
{"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;;oBAGH,kBACnB;;yBAHoB,MAAM,GAAG,OAAO;aAC5B,OAAO;uBACG,KAAK,GAAG,QAAQ;
|
|
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;;oBAGH,kBACnB;;yBAHoB,MAAM,GAAG,OAAO;aAC5B,OAAO;uBACG,KAAK,GAAG,QAAQ;uBAChB,OAAO;iMAmC3B,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;YAqG3B,CAAA"}
|
|
73
107
|
}
|
|
74
108
|
declare module '@ibti-tech/chatbot/components/ChatbotBody/index' {
|
|
75
109
|
import React from 'react';
|
|
@@ -94,23 +128,33 @@ declare module '@ibti-tech/chatbot/components/ChatbotDevice/index' {
|
|
|
94
128
|
import React from 'react';
|
|
95
129
|
export type ChatbotDeviceProps = {
|
|
96
130
|
verticalPosition?: 'top' | 'bottom';
|
|
131
|
+
pushContentDown?: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* Horizontal position on desktop.
|
|
134
|
+
* Can be a predefined value ('left', 'right', 'center') or a custom value with any unit (e.g., '20px', '10%', '2rem', 'calc(100% - 200px)').
|
|
135
|
+
* When using a custom value, it will be applied as the 'left' property.
|
|
136
|
+
* Default: undefined (uses parent container positioning)
|
|
137
|
+
*/
|
|
138
|
+
horizontalPosition?: 'left' | 'right' | 'center' | string;
|
|
97
139
|
};
|
|
98
|
-
export const ChatbotDevice: ({ verticalPosition, }: ChatbotDeviceProps) => React.JSX.Element;
|
|
140
|
+
export const ChatbotDevice: ({ verticalPosition, pushContentDown, horizontalPosition, }: ChatbotDeviceProps) => React.JSX.Element;
|
|
99
141
|
export default ChatbotDevice;
|
|
100
142
|
//# sourceMappingURL=index.d.ts.map
|
|
101
143
|
}
|
|
102
144
|
declare module '@ibti-tech/chatbot/components/ChatbotDevice/index.d.ts' {
|
|
103
|
-
{"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;
|
|
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,sBAkBpB,CAAA;AAED,eAAe,aAAa,CAAA"}
|
|
104
146
|
}
|
|
105
147
|
declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles' {
|
|
106
148
|
export const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
107
149
|
$opened: boolean;
|
|
108
150
|
$verticalPosition: "top" | "bottom";
|
|
151
|
+
$pushContentDown?: boolean;
|
|
152
|
+
$horizontalPosition?: "left" | "right" | "center" | string;
|
|
109
153
|
}>> & string;
|
|
110
154
|
//# sourceMappingURL=styles.d.ts.map
|
|
111
155
|
}
|
|
112
156
|
declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles.d.ts' {
|
|
113
|
-
{"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;
|
|
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;YAqK3D,CAAA"}
|
|
114
158
|
}
|
|
115
159
|
declare module '@ibti-tech/chatbot/components/ChatbotFooter/index' {
|
|
116
160
|
import React from 'react';
|
|
@@ -194,7 +238,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles' {
|
|
|
194
238
|
//# sourceMappingURL=styles.d.ts.map
|
|
195
239
|
}
|
|
196
240
|
declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles.d.ts' {
|
|
197
|
-
{"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;
|
|
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;YAmDpC,CAAA"}
|
|
198
242
|
}
|
|
199
243
|
declare module '@ibti-tech/chatbot/components/MessageBalloon/index' {
|
|
200
244
|
import React from 'react';
|
package/dist/index.mjs
CHANGED
|
@@ -726,6 +726,7 @@ import React14 from "react";
|
|
|
726
726
|
import { breakpoints, screens } from "@ibti-tech/ui";
|
|
727
727
|
import { css, styled } from "styled-components";
|
|
728
728
|
var Wrapper = styled.div`
|
|
729
|
+
/* Base styles */
|
|
729
730
|
width: 100%;
|
|
730
731
|
background-color: ${(props) => props.theme.colors.layers[1].background};
|
|
731
732
|
border: 1px solid ${(props) => props.theme.colors.layers[1].border};
|
|
@@ -738,6 +739,8 @@ var Wrapper = styled.div`
|
|
|
738
739
|
max-height: calc(100vh - 45px);
|
|
739
740
|
box-sizing: border-box;
|
|
740
741
|
position: relative;
|
|
742
|
+
|
|
743
|
+
/* Typography */
|
|
741
744
|
font-family: 'Montserrat', sans-serif !important;
|
|
742
745
|
font-weight: 600 !important;
|
|
743
746
|
|
|
@@ -749,38 +752,114 @@ var Wrapper = styled.div`
|
|
|
749
752
|
font-weight: 600 !important;
|
|
750
753
|
}
|
|
751
754
|
|
|
755
|
+
/* Mobile styles */
|
|
752
756
|
@media screen and (max-width: ${breakpoints.tablet}px) {
|
|
757
|
+
${(props) => props.$opened && props.$verticalPosition === "top" && css`
|
|
758
|
+
max-height: 100vh !important;
|
|
759
|
+
height: 100vh !important;
|
|
760
|
+
`}
|
|
761
|
+
|
|
753
762
|
${(props) => props.$opened && props.$verticalPosition === "bottom" ? css`
|
|
754
763
|
max-height: 100vh;
|
|
755
764
|
` : ""}
|
|
765
|
+
|
|
766
|
+
${(props) => props.$opened && props.$verticalPosition === "top" ? css`
|
|
767
|
+
max-height: 100vh !important;
|
|
768
|
+
height: 100vh !important;
|
|
769
|
+
width: 100% !important;
|
|
770
|
+
transform: none !important;
|
|
771
|
+
position: relative !important;
|
|
772
|
+
` : ""}
|
|
756
773
|
}
|
|
757
774
|
|
|
775
|
+
/* Border radius based on vertical position */
|
|
758
776
|
${(props) => props.$verticalPosition === "top" ? css`
|
|
759
|
-
border-end-end-radius: ${
|
|
760
|
-
border-end-start-radius: ${
|
|
777
|
+
border-end-end-radius: ${props.theme.borderRadius.medium};
|
|
778
|
+
border-end-start-radius: ${props.theme.borderRadius.medium};
|
|
761
779
|
` : css`
|
|
762
|
-
border-start-end-radius: ${
|
|
763
|
-
border-start-start-radius: ${
|
|
780
|
+
border-start-end-radius: ${props.theme.borderRadius.medium};
|
|
781
|
+
border-start-start-radius: ${props.theme.borderRadius.medium};
|
|
764
782
|
`}
|
|
765
783
|
|
|
784
|
+
/* Desktop styles */
|
|
766
785
|
${screens.tablet} {
|
|
767
|
-
|
|
786
|
+
/* Height when closed with pushContentDown vs opened */
|
|
787
|
+
${(props) => props.$pushContentDown && !props.$opened ? css`
|
|
788
|
+
height: 32px !important;
|
|
789
|
+
max-height: 32px !important;
|
|
790
|
+
` : css`
|
|
791
|
+
height: 500px;
|
|
792
|
+
`}
|
|
793
|
+
|
|
768
794
|
max-width: ${breakpoints.mobileL}px;
|
|
795
|
+
|
|
796
|
+
/* Horizontal positioning on desktop */
|
|
797
|
+
${(props) => {
|
|
798
|
+
if (!props.$horizontalPosition) return "";
|
|
799
|
+
if (props.$horizontalPosition === "left") {
|
|
800
|
+
return css`
|
|
801
|
+
margin-left: 0;
|
|
802
|
+
margin-right: auto;
|
|
803
|
+
`;
|
|
804
|
+
}
|
|
805
|
+
if (props.$horizontalPosition === "right") {
|
|
806
|
+
return css`
|
|
807
|
+
margin-left: auto;
|
|
808
|
+
margin-right: 0;
|
|
809
|
+
`;
|
|
810
|
+
}
|
|
811
|
+
if (props.$horizontalPosition === "center") {
|
|
812
|
+
return css`
|
|
813
|
+
margin-left: auto;
|
|
814
|
+
margin-right: auto;
|
|
815
|
+
`;
|
|
816
|
+
}
|
|
817
|
+
return css`
|
|
818
|
+
left: ${props.$horizontalPosition};
|
|
819
|
+
width: ${breakpoints.mobileL}px;
|
|
820
|
+
min-width: ${breakpoints.mobileL}px;
|
|
821
|
+
`;
|
|
822
|
+
}}
|
|
769
823
|
}
|
|
770
824
|
|
|
825
|
+
/* Closed state styles */
|
|
771
826
|
${(props) => !props.$opened && (props.$verticalPosition === "top" ? css`
|
|
772
|
-
|
|
827
|
+
${props.$pushContentDown ? css`
|
|
828
|
+
/* Push content down mode: show only toggle button */
|
|
829
|
+
height: 32px !important;
|
|
830
|
+
max-height: 32px !important;
|
|
831
|
+
${screens.tablet} {
|
|
832
|
+
height: 32px !important;
|
|
833
|
+
max-height: 32px !important;
|
|
834
|
+
}
|
|
835
|
+
> *:not(:last-child) {
|
|
836
|
+
display: none;
|
|
837
|
+
}
|
|
838
|
+
> *:last-child {
|
|
839
|
+
flex-shrink: 0;
|
|
840
|
+
min-height: 32px;
|
|
841
|
+
height: 32px;
|
|
842
|
+
width: 100%;
|
|
843
|
+
}
|
|
844
|
+
` : css`
|
|
845
|
+
/* Overlay mode: translate up to show only toggle button */
|
|
846
|
+
transform: translateY(calc(-100% + 32px));
|
|
847
|
+
`}
|
|
773
848
|
` : css`
|
|
849
|
+
/* Bottom position: translate down to show only toggle button */
|
|
774
850
|
transform: translateY(calc(100% - 32px));
|
|
775
851
|
width: 100%;
|
|
852
|
+
|
|
776
853
|
${screens.tablet} {
|
|
777
854
|
width: ${breakpoints.mobileL}px;
|
|
778
855
|
max-width: ${breakpoints.mobileL}px;
|
|
779
856
|
min-width: ${breakpoints.mobileL}px;
|
|
780
857
|
}
|
|
858
|
+
|
|
781
859
|
> *:not(:last-child) {
|
|
782
860
|
display: none;
|
|
783
861
|
}
|
|
862
|
+
|
|
784
863
|
> *:last-child {
|
|
785
864
|
flex-shrink: 0;
|
|
786
865
|
min-height: 32px;
|
|
@@ -2017,6 +2096,8 @@ import { css as css4, styled as styled9 } from "styled-components";
|
|
|
2017
2096
|
var ButtonWrapper = styled9.button`
|
|
2018
2097
|
height: 32px;
|
|
2019
2098
|
width: 100%;
|
|
2099
|
+
min-width: auto;
|
|
2100
|
+
max-width: 100%;
|
|
2020
2101
|
background: transparent;
|
|
2021
2102
|
color: ${(props) => props.theme.colors.palette.primary.normal};
|
|
2022
2103
|
padding: ${(props) => props.theme.spacing.components.small};
|
|
@@ -2037,6 +2118,7 @@ var ButtonWrapper = styled9.button`
|
|
|
2037
2118
|
outline: none !important;
|
|
2038
2119
|
box-shadow: none !important;
|
|
2039
2120
|
flex-shrink: 0;
|
|
2121
|
+
box-sizing: border-box;
|
|
2040
2122
|
|
|
2041
2123
|
${(props) => !props.$opened && props.$verticalPosition === "bottom" && css4`
|
|
2042
2124
|
background-color: ${props.theme.colors.layers[1].background};
|
|
@@ -2308,11 +2390,26 @@ var useChatFeedbackBox = /* @__PURE__ */ __name(() => {
|
|
|
2308
2390
|
|
|
2309
2391
|
// src/components/ChatbotDevice/index.tsx
|
|
2310
2392
|
var ChatbotDevice = /* @__PURE__ */ __name(({
|
|
2311
|
-
verticalPosition = "bottom"
|
|
2393
|
+
verticalPosition = "bottom",
|
|
2394
|
+
pushContentDown = false,
|
|
2395
|
+
horizontalPosition
|
|
2312
2396
|
}) => {
|
|
2313
2397
|
const { opened } = useChatbot_default();
|
|
2314
2398
|
const chatFeedbackBox = useChatFeedbackBox();
|
|
2315
|
-
return /* @__PURE__ */ React14.createElement(
|
|
2399
|
+
return /* @__PURE__ */ React14.createElement(
|
|
2400
|
+
Wrapper,
|
|
2401
|
+
{
|
|
2402
|
+
$opened: opened,
|
|
2403
|
+
$verticalPosition: verticalPosition,
|
|
2404
|
+
$pushContentDown: pushContentDown,
|
|
2405
|
+
$horizontalPosition: horizontalPosition
|
|
2406
|
+
},
|
|
2407
|
+
/* @__PURE__ */ React14.createElement(ChatUserFeedbackRating, { chatFeedbackBox }),
|
|
2408
|
+
/* @__PURE__ */ React14.createElement(ChatbotHeader_default, { chatFeedbackBox }),
|
|
2409
|
+
/* @__PURE__ */ React14.createElement(ChatbotBody_default, null),
|
|
2410
|
+
/* @__PURE__ */ React14.createElement(ChatbotFooter_default, null),
|
|
2411
|
+
/* @__PURE__ */ React14.createElement(ChatbotToggle_default, { verticalPosition, opened })
|
|
2412
|
+
);
|
|
2316
2413
|
}, "ChatbotDevice");
|
|
2317
2414
|
var ChatbotDevice_default = ChatbotDevice;
|
|
2318
2415
|
|
|
@@ -2334,13 +2431,17 @@ var BarContainer = styled11(Container)`
|
|
|
2334
2431
|
|
|
2335
2432
|
@media screen and (max-width: ${breakpoints3.tablet}px) {
|
|
2336
2433
|
padding: 0;
|
|
2434
|
+
${(props) => props.$opened && props.$verticalPosition === "top" && css6`
|
|
2435
|
+
width: 100% !important;
|
|
2436
|
+
max-width: 100% !important;
|
|
2437
|
+
`}
|
|
2337
2438
|
}
|
|
2338
2439
|
|
|
2339
2440
|
${screens3.tablet} {
|
|
2340
2441
|
display: flex;
|
|
2341
2442
|
justify-content: ${(props) => props.$horizontalPosition === "right" ? "flex-end" : "flex-start"};
|
|
2342
2443
|
|
|
2343
|
-
${(props) => !props.$opened && props.$verticalPosition === "bottom" ? css6`
|
|
2444
|
+
${(props) => !props.$opened && props.$verticalPosition === "bottom" && !props.$pushContentDown ? css6`
|
|
2344
2445
|
width: ${breakpoints3.mobileL}px;
|
|
2345
2446
|
max-width: ${breakpoints3.mobileL}px;
|
|
2346
2447
|
min-width: ${breakpoints3.mobileL}px;
|
|
@@ -2349,60 +2450,122 @@ var BarContainer = styled11(Container)`
|
|
|
2349
2450
|
}
|
|
2350
2451
|
`;
|
|
2351
2452
|
var Wrapper10 = styled11.div`
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2453
|
+
${(props) => {
|
|
2454
|
+
if (props.$pushContentDown && props.$verticalPosition === "top") {
|
|
2455
|
+
return css6`
|
|
2456
|
+
position: relative;
|
|
2457
|
+
width: 100%;
|
|
2458
|
+
top: 0;
|
|
2459
|
+
z-index: ${props.$zIndex !== void 0 ? props.$zIndex : props.theme.zIndex.modals};
|
|
2460
|
+
pointer-events: none;
|
|
2461
|
+
clear: both;
|
|
2462
|
+
|
|
2463
|
+
${screens3.tablet} {
|
|
2464
|
+
width: auto;
|
|
2465
|
+
background-color: transparent;
|
|
2466
|
+
border: none;
|
|
2467
|
+
padding: 0;
|
|
2468
|
+
${props.$horizontalPosition === "right" ? css6`
|
|
2469
|
+
right: ${(props2) => props2.theme.spacing.components.medium};
|
|
2470
|
+
` : css6`
|
|
2471
|
+
left: ${(props2) => props2.theme.spacing.components.medium};
|
|
2472
|
+
`}
|
|
2473
|
+
}
|
|
2474
|
+
|
|
2475
|
+
@media screen and (max-width: ${breakpoints3.tablet}px) {
|
|
2476
|
+
${props.$opened ? css6`
|
|
2477
|
+
padding-top: 0 !important;
|
|
2478
|
+
height: 100vh;
|
|
2479
|
+
` : css6`
|
|
2480
|
+
height: 32px;
|
|
2481
|
+
min-height: 32px;
|
|
2482
|
+
`}
|
|
2483
|
+
}
|
|
2484
|
+
`;
|
|
2485
|
+
}
|
|
2486
|
+
return css6`
|
|
2487
|
+
position: fixed;
|
|
2488
|
+
width: 100%;
|
|
2489
|
+
z-index: ${props.$zIndex !== void 0 ? props.$zIndex : props.theme.zIndex.modals};
|
|
2490
|
+
pointer-events: none;
|
|
2491
|
+
|
|
2492
|
+
${props.$verticalPosition === "top" ? css6`
|
|
2493
|
+
top: ${props.$topOffset !== void 0 ? typeof props.$topOffset === "number" ? `${props.$topOffset}px` : props.$topOffset : "0"};
|
|
2494
|
+
padding-top: ${props.$topOffset !== void 0 ? 0 : props.theme.spacing.components.xsmall};
|
|
2495
|
+
|
|
2496
|
+
@media screen and (max-width: ${breakpoints3.tablet}px) {
|
|
2497
|
+
${props.$opened ? css6`
|
|
2498
|
+
padding-top: 0 !important;
|
|
2499
|
+
top: 0 !important;
|
|
2500
|
+
height: 100vh;
|
|
2501
|
+
` : ""}
|
|
2502
|
+
}
|
|
2378
2503
|
` : css6`
|
|
2379
|
-
|
|
2504
|
+
bottom: 0;
|
|
2505
|
+
padding-bottom: ${(props2) => props2.theme.spacing.components.xsmall};
|
|
2506
|
+
|
|
2507
|
+
@media screen and (max-width: ${breakpoints3.tablet}px) {
|
|
2508
|
+
${props.$opened ? css6`
|
|
2509
|
+
padding-bottom: 0;
|
|
2510
|
+
` : ""}
|
|
2511
|
+
}
|
|
2380
2512
|
`}
|
|
2381
|
-
|
|
2513
|
+
|
|
2514
|
+
${screens3.tablet} {
|
|
2515
|
+
width: auto;
|
|
2516
|
+
background-color: transparent;
|
|
2517
|
+
border: none;
|
|
2518
|
+
padding: 0;
|
|
2519
|
+
${props.$horizontalPosition === "right" ? css6`
|
|
2520
|
+
right: ${(props2) => props2.theme.spacing.components.medium};
|
|
2521
|
+
` : css6`
|
|
2522
|
+
left: ${(props2) => props2.theme.spacing.components.medium};
|
|
2523
|
+
`}
|
|
2524
|
+
}
|
|
2525
|
+
`;
|
|
2526
|
+
}}
|
|
2382
2527
|
`;
|
|
2383
2528
|
|
|
2384
2529
|
// src/components/ChatbotBar/index.tsx
|
|
2385
2530
|
import React15 from "react";
|
|
2386
2531
|
var ChatbotBar = /* @__PURE__ */ __name(({
|
|
2387
2532
|
verticalPosition = "bottom",
|
|
2388
|
-
horizontalPosition = "right"
|
|
2533
|
+
horizontalPosition = "right",
|
|
2534
|
+
deviceHorizontalPosition,
|
|
2535
|
+
zIndex,
|
|
2536
|
+
topOffset,
|
|
2537
|
+
aboveHeader = false,
|
|
2538
|
+
pushContentDown = false
|
|
2389
2539
|
}) => {
|
|
2390
2540
|
const { opened } = useChatbot_default();
|
|
2541
|
+
const calculatedZIndex = aboveHeader ? 9999 : zIndex;
|
|
2391
2542
|
return /* @__PURE__ */ React15.createElement(
|
|
2392
2543
|
Wrapper10,
|
|
2393
2544
|
{
|
|
2394
2545
|
$verticalPosition: verticalPosition,
|
|
2395
2546
|
$horizontalPosition: horizontalPosition,
|
|
2396
|
-
$opened: opened
|
|
2547
|
+
$opened: opened,
|
|
2548
|
+
$zIndex: calculatedZIndex,
|
|
2549
|
+
$topOffset: topOffset,
|
|
2550
|
+
$aboveHeader: aboveHeader,
|
|
2551
|
+
$pushContentDown: pushContentDown
|
|
2397
2552
|
},
|
|
2398
2553
|
/* @__PURE__ */ React15.createElement(
|
|
2399
2554
|
BarContainer,
|
|
2400
2555
|
{
|
|
2401
2556
|
$horizontalPosition: horizontalPosition,
|
|
2402
2557
|
$opened: opened,
|
|
2403
|
-
$verticalPosition: verticalPosition
|
|
2558
|
+
$verticalPosition: verticalPosition,
|
|
2559
|
+
$pushContentDown: pushContentDown && verticalPosition === "top"
|
|
2404
2560
|
},
|
|
2405
|
-
/* @__PURE__ */ React15.createElement(
|
|
2561
|
+
/* @__PURE__ */ React15.createElement(
|
|
2562
|
+
ChatbotDevice_default,
|
|
2563
|
+
{
|
|
2564
|
+
verticalPosition,
|
|
2565
|
+
pushContentDown: pushContentDown && verticalPosition === "top",
|
|
2566
|
+
horizontalPosition: deviceHorizontalPosition
|
|
2567
|
+
}
|
|
2568
|
+
)
|
|
2406
2569
|
)
|
|
2407
2570
|
);
|
|
2408
2571
|
}, "ChatbotBar");
|