@ibti-tech/chatbot 0.8.1 → 0.8.5

package/README.md

@@ -60,9 +60,17 @@ All public types (e.g. `ChatbotTypes`, `ChatbotBarProps`) and parameters are doc
 | `horizontalPosition`     | `'left' \| 'right'` | `'right'` | Bar alignment                       |
 | `deviceHorizontalPosition`| `'left' \| 'right' \| 'center' \| string` | — | Device position on desktop (or e.g. `'20px'`, `'calc(100% - 200px)'`) |
 | `pushContentDown`         | `boolean` | `false`  | If `true` and `verticalPosition="top"`, widget pushes content down instead of overlaying |
+| `pushContentDownBarHeight`| `number`  | `32`     | Height in px of the bar when pushContentDown (24–120). |
 | `zIndex`, `topOffset`, `aboveHeader` | — | — | Optional layout/stacking           |
 
-When using `pushContentDown={true}` with `verticalPosition="top"`, render `ChatbotBar` **before** your header/main content so it appears at the top.
+When using `pushContentDown={true}` with `verticalPosition="top"`, the bar is fixed at the top and the widget adds the class `ibti-chatbot-push-down` and CSS variable `--ibti-chatbot-bar-height` (default 32px) to `body`. To avoid extra vertical scroll and keep your content below the bar, reserve the top space in your layout, for example:
+
+```css
+body.ibti-chatbot-push-down .your-main-content {
+  padding-top: var(--ibti-chatbot-bar-height, 32px);
+  min-height: calc(100vh - var(--ibti-chatbot-bar-height, 32px));
+}
+```
 
 ### Types (`ChatbotTypes`)
 

package/dist/index.d.ts

@@ -85,12 +85,16 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/index' {
       pushContentDownRowBackgroundLight?: string;
       /** Background of the push-content-down full-width row (dark theme). Hex or rgb(). Default: rgb(0, 0, 0). */
       pushContentDownRowBackgroundDark?: string;
+      /** Height in px of the bar when pushContentDown is true (closed state). Default: 32. */
+      pushContentDownBarHeight?: number;
   };
-  export const ChatbotBar: ({ verticalPosition, horizontalPosition, deviceHorizontalPosition, zIndex, topOffset, aboveHeader, pushContentDown, pushContentDownRowBackgroundLight, pushContentDownRowBackgroundDark, }: ChatbotBarProps) => React.JSX.Element;
+  /** Bar height in px when pushContentDown (closed state). Used for body class and CSS variable. */
+  export const PUSH_DOWN_BAR_HEIGHT_PX = 32;
+  export const ChatbotBar: ({ verticalPosition, horizontalPosition, deviceHorizontalPosition, zIndex, topOffset, aboveHeader, pushContentDown, pushContentDownRowBackgroundLight, pushContentDownRowBackgroundDark, pushContentDownBarHeight, }: ChatbotBarProps) => React.JSX.Element;
   //# sourceMappingURL=index.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBar/index.d.ts' {
-  {"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;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACrC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC/D,2GAA2G;IAC3G,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sIAAsI;IACtI,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,wGAAwG;IACxG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mHAAmH;IACnH,iCAAiC,CAAC,EAAE,MAAM,CAAA;IAC1C,4GAA4G;IAC5G,gCAAgC,CAAC,EAAE,MAAM,CAAA;CAC1C,CAAA;AAKD,eAAO,MAAM,UAAU,GAAI,2LAUxB,eAAe,sBAuFjB,CAAA"}
+  {"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;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACnC,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACrC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC/D,2GAA2G;IAC3G,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sIAAsI;IACtI,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,wGAAwG;IACxG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mHAAmH;IACnH,iCAAiC,CAAC,EAAE,MAAM,CAAA;IAC1C,4GAA4G;IAC5G,gCAAgC,CAAC,EAAE,MAAM,CAAA;IACzC,wFAAwF;IACxF,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC,CAAA;AAKD,kGAAkG;AAClG,eAAO,MAAM,uBAAuB,KAAK,CAAA;AAKzC,eAAO,MAAM,UAAU,GAAI,qNAWxB,eAAe,sBAgGjB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
   import { breakpoints } from '@ibti-tech/ui';
@@ -107,6 +111,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
   /** Full-width row strip (pushContentDown + top). Background only; device sits on top with theme styles. */
   export const PushDownRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
       $background: string;
+      $barHeight: number;
   }>> & string;
   export const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
       $verticalPosition: "top" | "bottom";
@@ -116,11 +121,12 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
       $topOffset?: string | number;
       $aboveHeader?: boolean;
       $pushContentDown?: boolean;
+      $pushContentDownBarHeight?: number;
   }>> & string;
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBar/styles.d.ts' {
-  {"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"}
+  {"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;gBAAc,MAAM;YAS9E,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;gCACE,MAAM;YAgInC,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBody/index' {
   import React from 'react';
@@ -153,13 +159,15 @@ declare module '@ibti-tech/chatbot/components/ChatbotDevice/index' {
        * Default: undefined (uses parent container positioning)
        */
       horizontalPosition?: 'left' | 'right' | 'center' | string;
+      /** Height in px of the bar when pushContentDown (closed state). Default: 32. */
+      pushContentDownBarHeight?: number;
   };
-  export const ChatbotDevice: ({ verticalPosition, pushContentDown, horizontalPosition, }: ChatbotDeviceProps) => React.JSX.Element;
+  export const ChatbotDevice: ({ verticalPosition, pushContentDown, horizontalPosition, pushContentDownBarHeight, }: ChatbotDeviceProps) => React.JSX.Element;
   export default ChatbotDevice;
   //# sourceMappingURL=index.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotDevice/index.d.ts' {
-  {"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"}
+  {"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;IACzD,gFAAgF;IAChF,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC,CAAA;AAID,eAAO,MAAM,aAAa,GAAI,sFAK3B,kBAAkB,sBAyBpB,CAAA;AAED,eAAe,aAAa,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles' {
   export const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
@@ -167,11 +175,12 @@ declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles' {
       $verticalPosition: "top" | "bottom";
       $pushContentDown?: boolean;
       $horizontalPosition?: "left" | "right" | "center" | string;
+      $pushContentDownBarHeight?: number;
   }>> & string;
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotDevice/styles.d.ts' {
-  {"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"}
+  {"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;gCAC9B,MAAM;YAyOnC,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotFooter/index' {
   import React from 'react';
@@ -240,13 +249,15 @@ declare module '@ibti-tech/chatbot/components/ChatbotToggle/index' {
       verticalPosition?: 'top' | 'bottom';
       opened?: boolean;
       pushContentDown?: boolean;
+      /** Height in px of the bar when closed (pushContentDown or bottom). Default: 32. */
+      pushContentDownBarHeight?: number;
   };
-  export const ChatbotToggle: ({ verticalPosition, opened: openedProp, pushContentDown, }: ChatbotToggleProps) => React.JSX.Element;
+  export const ChatbotToggle: ({ verticalPosition, opened: openedProp, pushContentDown, pushContentDownBarHeight, }: ChatbotToggleProps) => React.JSX.Element;
   export default ChatbotToggle;
   //# sourceMappingURL=index.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotToggle/index.d.ts' {
-  {"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"}
+  {"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;IACzB,oFAAoF;IACpF,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC,CAAA;AAID,eAAO,MAAM,aAAa,GAAI,sFAK3B,kBAAkB,sBAmCpB,CAAA;AAED,eAAe,aAAa,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles' {
   export const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
@@ -254,11 +265,12 @@ declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles' {
       $verticalPosition: "top" | "bottom";
       $pushContentDown?: boolean;
       $themeMode?: "light" | "dark";
+      $barHeight?: number;
   }>> & string;
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotToggle/styles.d.ts' {
-  {"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"}
+  {"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;iBAChB,MAAM;YAwEpB,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/MessageBalloon/index' {
   import React from 'react';
@@ -632,6 +644,18 @@ declare module '@ibti-tech/chatbot/embed' {
       icon?: string;
       /** Custom UI texts per locale: { 'pt-BR': CustomTexts, 'en': CustomTexts }. */
       texts?: ChatbotTypes.Texts;
+      /** When true and position is top-*, the bar pushes page content down (no overlay). Avoids extra scroll when combined with body class .ibti-chatbot-push-down. */
+      pushContentDown?: boolean;
+      /** Offset from top (e.g. '64px', 80). Use to sit below a fixed header. */
+      topOffset?: string | number;
+      /** When true, sets z-index to 9999 so the chatbot appears above header elements. */
+      aboveHeader?: boolean;
+      /** Bar background when pushContentDown (light theme). Default rgb(230,230,230). */
+      pushContentDownRowBackgroundLight?: string;
+      /** Bar background when pushContentDown (dark theme). Default rgb(0,0,0). */
+      pushContentDownRowBackgroundDark?: string;
+      /** Height in px of the bar when pushContentDown is true. Default: 32. Clamped between 24 and 120. */
+      pushContentDownBarHeight?: number;
   }
   global {
       interface Window {
@@ -646,7 +670,7 @@ declare module '@ibti-tech/chatbot/embed' {
   //# sourceMappingURL=embed.d.ts.map
 }
 declare module '@ibti-tech/chatbot/embed.d.ts' {
-  {"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/embed.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAA;IAClB,gDAAgD;IAChD,MAAM,CAAC,EAAE,YAAY,CAAC,MAAM,CAAA;IAC5B,iDAAiD;IACjD,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAA;IACpE,uHAAuH;IACvH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oFAAoF;IACpF,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,CAAA;IAClC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;CAC3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,iBAAiB,CAAC,EAAE,sBAAsB,CAAA;QAC1C,gBAAgB,CAAC,EAAE;YACjB,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,sBAAsB,KAAK,IAAI,CAAA;YAC/C,OAAO,EAAE,MAAM,IAAI,CAAA;SACpB,CAAA;KACF;CACF;AAyID,wBAAgB,UAAU,SAEzB"}
+  {"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../../../home/runner/work/ibti-chatbot/ibti-chatbot/src/embed.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAA;IAClB,gDAAgD;IAChD,MAAM,CAAC,EAAE,YAAY,CAAC,MAAM,CAAA;IAC5B,iDAAiD;IACjD,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAA;IACpE,uHAAuH;IACvH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oFAAoF;IACpF,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,CAAA;IAClC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,CAAA;IAC1B,iKAAiK;IACjK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,iCAAiC,CAAC,EAAE,MAAM,CAAA;IAC1C,4EAA4E;IAC5E,gCAAgC,CAAC,EAAE,MAAM,CAAA;IACzC,qGAAqG;IACrG,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,iBAAiB,CAAC,EAAE,sBAAsB,CAAA;QAC1C,gBAAgB,CAAC,EAAE;YACjB,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,sBAAsB,KAAK,IAAI,CAAA;YAC/C,OAAO,EAAE,MAAM,IAAI,CAAA;SACpB,CAAA;KACF;CACF;AAmJD,wBAAgB,UAAU,SAEzB"}
 }
 declare module '@ibti-tech/chatbot/events/assistant-answer' {
   export const dispatchAssitantAnswer: () => void;

package/dist/index.mjs

@@ -1019,10 +1019,11 @@ var Wrapper = styled.div`
   
   /* Default height - will be overridden by specific states */
   ${(props) => {
+  const barH = props.$pushContentDownBarHeight ?? 32;
   if (props.$pushContentDown && props.$verticalPosition === "top") {
     if (!props.$opened) {
       return css`
-          height: 32px;
+          height: ${barH}px;
         `;
     }
     return css`
@@ -1080,12 +1081,13 @@ var Wrapper = styled.div`
   ${screens.tablet} {
     /* Height when closed with pushContentDown vs opened */
     ${(props) => {
+  const barH = props.$pushContentDownBarHeight ?? 32;
   if (props.$pushContentDown && props.$verticalPosition === "top") {
     if (!props.$opened) {
       return css`
-            height: 32px !important;
-            max-height: 32px !important;
-            min-height: 32px !important;
+            height: ${barH}px !important;
+            max-height: ${barH}px !important;
+            min-height: ${barH}px !important;
           `;
     } else {
       return css`
@@ -1131,18 +1133,20 @@ var Wrapper = styled.div`
   }
 
   /* Closed state styles */
-  ${(props) => !props.$opened && (props.$verticalPosition === "top" ? css`
+  ${(props) => {
+  const barH = props.$pushContentDownBarHeight ?? 32;
+  return !props.$opened && (props.$verticalPosition === "top" ? css`
           ${props.$pushContentDown ? css`
                 /* Push content down mode: show only toggle button - based on commit 8379cc8 */
-                height: 32px !important;
-                max-height: 32px !important;
-                min-height: 32px !important;
+                height: ${barH}px !important;
+                max-height: ${barH}px !important;
+                min-height: ${barH}px !important;
                 transform: none !important;
                 overflow: visible !important;
                 ${screens.tablet} {
-                  height: 32px !important;
-                  max-height: 32px !important;
-                  min-height: 32px !important;
+                  height: ${barH}px !important;
+                  max-height: ${barH}px !important;
+                  min-height: ${barH}px !important;
                   transform: none !important;
                 }
                 > *:not(:last-child) {
@@ -1150,9 +1154,9 @@ var Wrapper = styled.div`
                 }
                 > *:last-child {
                   flex-shrink: 0 !important;
-                  min-height: 32px !important;
-                  height: 32px !important;
-                  max-height: 32px !important;
+                  min-height: ${barH}px !important;
+                  height: ${barH}px !important;
+                  max-height: ${barH}px !important;
                   width: 100% !important;
                   min-width: 100% !important;
                   max-width: 100% !important;
@@ -1161,11 +1165,11 @@ var Wrapper = styled.div`
                 }
               ` : css`
                 /* Overlay mode: translate up to show only toggle button - based on commit 8379cc8 */
-                transform: translateY(calc(-100% + 32px));
+                transform: translateY(calc(-100% + ${barH}px));
               `}
         ` : css`
           /* Bottom position: translate down to show only toggle button */
-          transform: translateY(calc(100% - 32px));
+          transform: translateY(calc(100% - ${barH}px));
           width: 100%;
           
           ${screens.tablet} {
@@ -1180,11 +1184,12 @@ var Wrapper = styled.div`
           
           > *:last-child {
             flex-shrink: 0;
-            min-height: 32px;
-            height: 32px;
+            min-height: ${barH}px;
+            height: ${barH}px;
             width: 100%;
           }
-        `)}
+        `);
+}}
   
   /* Opened state styles when pushContentDown is true - must come after closed state */
   /* Chat overlays (Bar is fixed); same internal layout as overlay — no display overrides */
@@ -2530,9 +2535,9 @@ var ChatbotFooter_default = ChatbotFooter;
 import { screens as screens2 } from "@ibti-tech/ui";
 import { css as css4, styled as styled9 } from "styled-components";
 var ButtonWrapper = styled9.button`
-  height: 32px !important;
-  min-height: 32px !important;
-  max-height: 32px !important;
+  height: ${(p) => p.$barHeight ?? 32}px !important;
+  min-height: ${(p) => p.$barHeight ?? 32}px !important;
+  max-height: ${(p) => p.$barHeight ?? 32}px !important;
   width: 100% !important;
   min-width: 100% !important;
   max-width: 100% !important;
@@ -2561,8 +2566,8 @@ var ButtonWrapper = styled9.button`
   ${(props) => !props.$opened && props.$verticalPosition === "bottom" && css4`
       background-color: ${props.theme.colors.layers[1].background};
       cursor: pointer;
-      min-height: 32px;
-      height: 32px;
+      min-height: ${props.$barHeight ?? 32}px;
+      height: ${props.$barHeight ?? 32}px;
       width: 100%;
       flex-shrink: 0;
       box-sizing: border-box;
@@ -2595,10 +2600,12 @@ var ButtonWrapper = styled9.button`
 // src/components/ChatbotToggle/index.tsx
 import React12 from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "@ibti-tech/ui/dist/icons";
+var DEFAULT_BAR_HEIGHT = 32;
 var ChatbotToggle = /* @__PURE__ */ __name(({
   verticalPosition = "bottom",
   opened: openedProp,
-  pushContentDown = false
+  pushContentDown = false,
+  pushContentDownBarHeight = DEFAULT_BAR_HEIGHT
 }) => {
   const { opened: openedContext, openedToggle, theme: themeMode } = useChatbot_default();
   const opened = openedProp ?? openedContext;
@@ -2612,7 +2619,8 @@ var ChatbotToggle = /* @__PURE__ */ __name(({
       $opened: opened,
       $verticalPosition: verticalPosition,
       $pushContentDown: pushContentDown,
-      $themeMode: themeMode
+      $themeMode: themeMode,
+      $barHeight: pushContentDownBarHeight
     },
     /* @__PURE__ */ React12.createElement(BotIcon, null),
     /* @__PURE__ */ React12.createElement("span", null, toggleText),
@@ -2852,20 +2860,24 @@ var useChatFeedbackBox = /* @__PURE__ */ __name(() => {
 }, "useChatFeedbackBox");
 
 // src/components/ChatbotDevice/index.tsx
+var DEFAULT_PUSH_DOWN_BAR_HEIGHT = 32;
 var ChatbotDevice = /* @__PURE__ */ __name(({
   verticalPosition = "bottom",
   pushContentDown = false,
-  horizontalPosition
+  horizontalPosition,
+  pushContentDownBarHeight = DEFAULT_PUSH_DOWN_BAR_HEIGHT
 }) => {
   const { opened } = useChatbot_default();
   const chatFeedbackBox = useChatFeedbackBox();
+  const barH = pushContentDownBarHeight;
   return /* @__PURE__ */ React14.createElement(
     Wrapper,
     {
       $opened: opened,
       $verticalPosition: verticalPosition,
       $pushContentDown: pushContentDown,
-      $horizontalPosition: horizontalPosition
+      $horizontalPosition: horizontalPosition,
+      $pushContentDownBarHeight: barH
     },
     /* @__PURE__ */ React14.createElement(ChatUserFeedbackRating, { chatFeedbackBox }),
     /* @__PURE__ */ React14.createElement(ChatbotHeader_default, { chatFeedbackBox }),
@@ -2876,7 +2888,8 @@ var ChatbotDevice = /* @__PURE__ */ __name(({
       {
         verticalPosition,
         opened,
-        pushContentDown
+        pushContentDown,
+        pushContentDownBarHeight: barH
       }
     )
   );
@@ -2954,20 +2967,22 @@ var PushDownRow = styled11.div`
   position: absolute;
   inset: 0;
   width: 100%;
-  height: 32px;
-  min-height: 32px;
+  height: ${(p) => p.$barHeight}px;
+  min-height: ${(p) => p.$barHeight}px;
   background-color: ${(p) => p.$background};
   z-index: 0;
   pointer-events: none;
 `;
 var Wrapper10 = styled11.div`
   ${(props) => {
+  const barH = props.$pushContentDownBarHeight ?? 32;
+  const topVal = props.$topOffset !== void 0 ? typeof props.$topOffset === "number" ? `${props.$topOffset}px` : props.$topOffset : "0";
   if (props.$pushContentDown && props.$verticalPosition === "top") {
     if (props.$opened) {
       return css6`
           position: fixed !important;
           width: 100%;
-          top: 0 !important;
+          top: ${topVal} !important;
           bottom: auto !important;
           left: 0 !important;
           right: 0 !important;
@@ -2982,13 +2997,13 @@ var Wrapper10 = styled11.div`
             background-color: transparent;
             border: none;
             padding: 0;
-            top: ${props.$topOffset !== void 0 ? typeof props.$topOffset === "number" ? `${props.$topOffset}px` : props.$topOffset : "0"} !important;
+            top: ${topVal} !important;
             bottom: auto !important;
             ${props.$horizontalPosition === "right" ? css6`left: auto !important; right: 2.5rem !important;` : css6`left: 2.5rem !important; right: auto !important;`}
           }
           @media screen and (max-width: ${breakpoints3.tablet}px) {
             padding-top: 0 !important;
-            top: 0 !important;
+            top: ${topVal} !important;
             height: 100vh;
           }
         `;
@@ -2996,14 +3011,14 @@ var Wrapper10 = styled11.div`
     return css6`
         position: fixed !important;
         width: 100%;
-        top: 0 !important;
+        top: ${topVal} !important;
         bottom: auto !important;
         left: 0 !important;
         right: 0 !important;
         z-index: ${props.$zIndex !== void 0 ? props.$zIndex : props.theme.zIndex.modals};
         pointer-events: auto;
-        height: 32px !important;
-        min-height: 32px !important;
+        height: ${barH}px !important;
+        min-height: ${barH}px !important;
         background-color: transparent;
         ${screens3.tablet} {
           width: 100% !important;
@@ -3011,10 +3026,12 @@ var Wrapper10 = styled11.div`
           border: none;
           padding: 0;
           bottom: auto !important;
+          top: ${topVal} !important;
         }
         @media screen and (max-width: ${breakpoints3.tablet}px) {
-          height: 32px !important;
-          min-height: 32px !important;
+          height: ${barH}px !important;
+          min-height: ${barH}px !important;
+          top: ${topVal} !important;
         }
       `;
   }
@@ -3063,6 +3080,9 @@ import React15, { useEffect as useEffect8, useState as useState10 } from "react"
 import { createPortal } from "react-dom";
 var PUSH_DOWN_ROW_BG_LIGHT = "rgb(230, 230, 230)";
 var PUSH_DOWN_ROW_BG_DARK = "rgb(0, 0, 0)";
+var PUSH_DOWN_BAR_HEIGHT_PX = 32;
+var BODY_CLASS_PUSH_DOWN = "ibti-chatbot-push-down";
+var BODY_CSS_VAR_BAR_HEIGHT = "--ibti-chatbot-bar-height";
 var ChatbotBar = /* @__PURE__ */ __name(({
   verticalPosition = "bottom",
   horizontalPosition = "right",
@@ -3072,8 +3092,10 @@ var ChatbotBar = /* @__PURE__ */ __name(({
   aboveHeader = false,
   pushContentDown = false,
   pushContentDownRowBackgroundLight = PUSH_DOWN_ROW_BG_LIGHT,
-  pushContentDownRowBackgroundDark = PUSH_DOWN_ROW_BG_DARK
+  pushContentDownRowBackgroundDark = PUSH_DOWN_ROW_BG_DARK,
+  pushContentDownBarHeight = PUSH_DOWN_BAR_HEIGHT_PX
 }) => {
+  const barHeightPx = Math.max(24, Math.min(120, pushContentDownBarHeight));
   const { opened, theme } = useChatbot_default();
   const pushDownRowBackground = theme === "dark" ? pushContentDownRowBackgroundDark : pushContentDownRowBackgroundLight;
   const [portalContainer, setPortalContainer] = useState10(null);
@@ -3101,18 +3123,17 @@ var ChatbotBar = /* @__PURE__ */ __name(({
     }
   }, [verticalPosition]);
   const usePushDown = pushContentDown && verticalPosition === "top";
-  const content = /* @__PURE__ */ React15.createElement(React15.Fragment, null, usePushDown && /* @__PURE__ */ React15.createElement(
-    "div",
-    {
-      style: {
-        height: 33,
-        minHeight: 33,
-        width: "100%",
-        backgroundColor: pushDownRowBackground
-      },
-      "aria-hidden": true
-    }
-  ), /* @__PURE__ */ React15.createElement(
+  useEffect8(() => {
+    if (!usePushDown || typeof document === "undefined") return;
+    const body = document.body;
+    body.classList.add(BODY_CLASS_PUSH_DOWN);
+    body.style.setProperty(BODY_CSS_VAR_BAR_HEIGHT, `${barHeightPx}px`);
+    return () => {
+      body.classList.remove(BODY_CLASS_PUSH_DOWN);
+      body.style.removeProperty(BODY_CSS_VAR_BAR_HEIGHT);
+    };
+  }, [usePushDown, barHeightPx]);
+  const content = /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
     Wrapper10,
     {
       $verticalPosition: verticalPosition,
@@ -3121,9 +3142,17 @@ var ChatbotBar = /* @__PURE__ */ __name(({
       $zIndex: calculatedZIndex,
       $topOffset: topOffset,
       $aboveHeader: aboveHeader,
-      $pushContentDown: pushContentDown
+      $pushContentDown: pushContentDown,
+      $pushContentDownBarHeight: barHeightPx
     },
-    usePushDown && !opened && /* @__PURE__ */ React15.createElement(PushDownRow, { $background: pushDownRowBackground, "aria-hidden": true }),
+    usePushDown && !opened && /* @__PURE__ */ React15.createElement(
+      PushDownRow,
+      {
+        $background: pushDownRowBackground,
+        $barHeight: barHeightPx,
+        "aria-hidden": true
+      }
+    ),
     /* @__PURE__ */ React15.createElement(
       BarContainer,
       {
@@ -3138,7 +3167,8 @@ var ChatbotBar = /* @__PURE__ */ __name(({
         {
           verticalPosition,
           pushContentDown: usePushDown,
-          horizontalPosition: deviceHorizontalPosition
+          horizontalPosition: deviceHorizontalPosition,
+          pushContentDownBarHeight: barHeightPx
         }
       )
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibti-tech/chatbot",
-  "version": "0.8.1",
+  "version": "0.8.5",
   "description": "Chatbot system developed to be embedded in any website",
   "packageManager": "yarn@3.6.4",
   "main": "./dist/index.mjs",