@ibti-tech/chatbot 0.5.8 → 0.6.2

package/README.md

@@ -10,6 +10,7 @@ A modern and customizable React chatbot component developed by IBTI Soluções e
 - ⚡ **Optimized performance**: Built with ESBuild for maximum performance
 - 🔌 **Easy integration**: Simple React component to use
 - 📱 **Responsive**: Works perfectly on desktop and mobile
+- 📍 **Flexible positioning**: Precise horizontal positioning with predefined values or custom CSS units (px, %, rem, calc, etc.)
 
 ## 📦 Installation
 
@@ -78,7 +79,115 @@ Main component that displays the chatbot bar with toggle button and conversation
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | `verticalPosition` | `'top' \| 'bottom'` | ❌ | Vertical position of the chatbot. Default: `'bottom'` |
-| `horizontalPosition` | `'left' \| 'right'` | ❌ | Horizontal position of the chatbot. Default: `'right'` |
+| `horizontalPosition` | `'left' \| 'right'` | ❌ | Horizontal position of the chatbot bar container. Default: `'right'` |
+| `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. |
+| `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 |
+| `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 |
+| `aboveHeader` | `boolean` | ❌ | Convenient prop to position the chatbot above header elements. When true, sets z-index to 9999 and allows topOffset configuration. Default: `false` |
+| `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` |
+
+#### Examples
+
+**Positioning above header elements:**
+
+```jsx
+// Option 1: Using aboveHeader prop (recommended)
+<ChatbotBar 
+  verticalPosition="top"
+  aboveHeader={true}
+  topOffset={120} // Adjust based on your header height
+/>
+
+// Option 2: Using custom zIndex
+<ChatbotBar 
+  verticalPosition="top"
+  zIndex={9999}
+  topOffset="120px"
+/>
+
+// Option 3: Using CSS units for topOffset
+<ChatbotBar 
+  verticalPosition="top"
+  aboveHeader={true}
+  topOffset="8rem" // Using rem units for better scalability
+/>
+
+// Option 4: Push content down instead of overlaying (only works with verticalPosition="top")
+// When pushContentDown is true, the chatbot occupies full width and pushes header content down
+<ChatbotBar 
+  verticalPosition="top"
+  pushContentDown={true}
+/>
+
+// ✅ CORRECT - Component at the beginning
+function App() {
+  return (
+    <ChatbotProvider ...>
+      <ChatbotBar verticalPosition="top" pushContentDown={true} />
+      <header>...</header>
+      <main>...</main>
+    </ChatbotProvider>
+  )
+}
+
+// ❌ WRONG - Component at the end (will appear at bottom even with pushContentDown)
+function App() {
+  return (
+    <ChatbotProvider ...>
+      <header>...</header>
+      <main>...</main>
+      <ChatbotBar verticalPosition="top" pushContentDown={true} />
+    </ChatbotProvider>
+  )
+}
+```
+
+**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.
+
+**⚠️ 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}`.
+
+**Precise horizontal positioning on desktop:**
+
+```jsx
+// Using predefined values
+<ChatbotBar 
+  deviceHorizontalPosition="left"   // Aligns to left
+/>
+<ChatbotBar 
+  deviceHorizontalPosition="right" // Aligns to right (default behavior)
+/>
+<ChatbotBar 
+  deviceHorizontalPosition="center" // Centers the device
+/>
+
+// Using custom values with any CSS unit
+<ChatbotBar 
+  deviceHorizontalPosition="20px"  // 20 pixels from left
+/>
+<ChatbotBar 
+  deviceHorizontalPosition="10%"   // 10% from left edge
+/>
+<ChatbotBar 
+  deviceHorizontalPosition="2rem"  // 2rem from left edge
+/>
+<ChatbotBar 
+  deviceHorizontalPosition="calc(100% - 200px)" // 200px from right edge
+/>
+
+// Combining with other positioning props
+<ChatbotBar 
+  verticalPosition="bottom"
+  horizontalPosition="right"        // Bar container alignment
+  deviceHorizontalPosition="50px"  // Device positioned 50px from left
+/>
+```
+
+**Important notes about `deviceHorizontalPosition`:**
+- Only affects desktop/tablet view (mobile always uses full width)
+- Custom values are applied as the `left` CSS property
+- Predefined values (`'left'`, `'right'`, `'center'`) use margin-based alignment
+- When using custom values, the device maintains its fixed width to prevent button shrinking
+- This prop provides precise control over the ChatbotDevice position, independent of the bar container alignment
 
 ### `ChatbotDevice`
 
@@ -89,6 +198,8 @@ Alternative component that can be used to display the chatbot on different devic
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | `verticalPosition` | `'top' \| 'bottom'` | ❌ | Vertical position of the chatbot. Default: `'bottom'` |
+| `pushContentDown` | `boolean` | ❌ | When true and verticalPosition is 'top', the chatbot will push content down instead of overlaying it. Default: `false` |
+| `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. |
 
 ## 🎨 Themes
 
@@ -208,6 +319,7 @@ function MyApp() {
         <ChatbotBar 
           verticalPosition="bottom"
           horizontalPosition="right"
+          deviceHorizontalPosition="right"
         />
       </ChatbotProvider>
     </div>
@@ -230,16 +342,42 @@ You can control the position of the chatbot using the `ChatbotBar` component pro
 // Top right
 <ChatbotBar verticalPosition="top" />
 
-// Bottom left
+// Bottom left (bar container aligned left)
 <ChatbotBar horizontalPosition="left" />
 
-// Top left
+// Top left (bar container aligned left)
 <ChatbotBar 
   verticalPosition="top" 
   horizontalPosition="left" 
 />
+
+// Precise horizontal positioning on desktop
+<ChatbotBar 
+  deviceHorizontalPosition="center"  // Centers the device
+/>
+
+<ChatbotBar 
+  deviceHorizontalPosition="50px"   // 50px from left edge
+/>
+
+<ChatbotBar 
+  deviceHorizontalPosition="calc(100% - 250px)"  // 250px from right edge
+/>
+
+// Combining bar container and device positioning
+<ChatbotBar 
+  horizontalPosition="right"         // Bar container on right
+  deviceHorizontalPosition="20px"   // Device 20px from left (within container)
+/>
 ```
 
+**Understanding the positioning props:**
+- `horizontalPosition`: Controls the alignment of the bar container (`'left'` or `'right'`)
+- `deviceHorizontalPosition`: Provides precise control over the ChatbotDevice position on desktop:
+  - Predefined values: `'left'`, `'right'`, `'center'` (use margin-based alignment)
+  - Custom values: Any CSS unit string (e.g., `'20px'`, `'10%'`, `'calc(100% - 200px)'`) applied as the `left` property
+  - Only affects desktop/tablet view; mobile always uses full width
+
 ### Controlling Initial State
 
 Use the `isOpen` prop to control whether the chatbot starts open or closed:

package/dist/index.d.ts

@@ -44,12 +44,53 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/index' {
   export type ChatbotBarProps = {
       verticalPosition?: 'top' | 'bottom';
       horizontalPosition?: 'left' | 'right';
+      /**
+       * Horizontal position of the ChatbotDevice on desktop.
+       * Can be a predefined value ('left', 'right', 'center') or a custom value with any 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.
+       */
+      deviceHorizontalPosition?: 'left' | 'right' | 'center' | string;
+      /**
+       * Custom z-index value. If not provided, uses theme.zIndex.modals
+       * Useful when you need the chatbot to appear above specific elements like headers
+       */
+      zIndex?: 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
+       */
+      topOffset?: string | number;
+      /**
+       * Convenient prop to position the chatbot above header elements
+       * When true, sets z-index to 9999 and allows topOffset configuration
+       */
+      aboveHeader?: 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.
+       */
+      pushContentDown?: boolean;
+      /**
+       * Background color of the push-content-down row (full-width bar) for light theme.
+       * Does not affect the chatbot button. Accepts rgb(), hex (e.g. #e6e6e6), etc.
+       * Default: rgb(230, 230, 230)
+       */
+      pushContentDownRowBackgroundLight?: string;
+      /**
+       * Background color of the push-content-down row (full-width bar) for dark theme.
+       * Does not affect the chatbot button. Accepts rgb(), hex (e.g. #000000), etc.
+       * Default: rgb(0, 0, 0)
+       */
+      pushContentDownRowBackgroundDark?: string;
   };
-  export const ChatbotBar: ({ verticalPosition, horizontalPosition, }: ChatbotBarProps) => React.JSX.Element;
+  export const ChatbotBar: ({ verticalPosition, horizontalPosition, deviceHorizontalPosition, zIndex, topOffset, aboveHeader, pushContentDown, pushContentDownRowBackgroundLight, pushContentDownRowBackgroundDark, }: 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,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;CACtC,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,2CAGxB,eAAe,sBAkBjB,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,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"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
   import { breakpoints } from '@ibti-tech/ui';
@@ -58,18 +99,28 @@ declare module '@ibti-tech/chatbot/components/ChatbotBar/styles' {
       variant?: keyof typeof breakpoints;
   } & import("@ibti-tech/ui").HTMLStyleAttributes, {
       $horizontalPosition: "left" | "right";
+      $deviceHorizontalPosition?: "left" | "right" | "center" | string;
       $opened: boolean;
       $verticalPosition: "top" | "bottom";
+      $pushContentDown?: boolean;
   }>> & string & Omit<({ children, className, style, variant, }: import("@ibti-tech/ui").ContainerProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+  /** 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;
+  }>> & 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";
       $horizontalPosition: "left" | "right";
       $opened: boolean;
+      $zIndex?: number;
+      $topOffset?: string | number;
+      $aboveHeader?: boolean;
+      $pushContentDown?: boolean;
   }>> & 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;;oBAGH,kBACnB;;yBAHoB,MAAM,GAAG,OAAO;aAC5B,OAAO;uBACG,KAAK,GAAG,QAAQ;iMAgCpC,CAAA;AAED,eAAO,MAAM,OAAO;uBACC,KAAK,GAAG,QAAQ;yBACd,MAAM,GAAG,OAAO;aAC5B,OAAO;YAwCjB,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;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"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBody/index' {
   import React from 'react';
@@ -88,29 +139,39 @@ declare module '@ibti-tech/chatbot/components/ChatbotBody/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotBody/styles.d.ts' {
-  {"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,iOAQxB,CAAA;AAED,eAAO,MAAM,OAAO,6NAsCnB,CAAA"}
+  {"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"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotDevice/index' {
   import React from 'react';
   export type ChatbotDeviceProps = {
       verticalPosition?: 'top' | 'bottom';
+      pushContentDown?: boolean;
+      /**
+       * Horizontal position on desktop.
+       * Can be a predefined value ('left', 'right', 'center') or a custom value with any 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)
+       */
+      horizontalPosition?: 'left' | 'right' | 'center' | string;
   };
-  export const ChatbotDevice: ({ verticalPosition, }: ChatbotDeviceProps) => React.JSX.Element;
+  export const ChatbotDevice: ({ verticalPosition, pushContentDown, horizontalPosition, }: 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;CACpC,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,uBAE3B,kBAAkB,sBAapB,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;CAC1D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,4DAI3B,kBAAkB,sBAsBpB,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>, {
       $opened: boolean;
       $verticalPosition: "top" | "bottom";
+      $pushContentDown?: boolean;
+      $horizontalPosition?: "left" | "right" | "center" | string;
   }>> & 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;YA0EpC,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;YAqO3D,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotFooter/index' {
   import React from 'react';
@@ -129,7 +190,7 @@ declare module '@ibti-tech/chatbot/components/ChatbotFooter/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/ChatbotFooter/styles.d.ts' {
-  {"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,mOA+EhB,CAAA;AAED,eAAO,MAAM,OAAO,6NAYnB,CAAA"}
+  {"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"}
 }
 declare module '@ibti-tech/chatbot/components/ChatbotHeader/index' {
   import React from 'react';
@@ -178,23 +239,26 @@ declare module '@ibti-tech/chatbot/components/ChatbotToggle/index' {
   export type ChatbotToggleProps = {
       verticalPosition?: 'top' | 'bottom';
       opened?: boolean;
+      pushContentDown?: boolean;
   };
-  export const ChatbotToggle: ({ verticalPosition, opened: openedProp, }: ChatbotToggleProps) => React.JSX.Element;
+  export const ChatbotToggle: ({ verticalPosition, opened: openedProp, pushContentDown, }: 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;CACjB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,2CAG3B,kBAAkB,sBAgCpB,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;CAC1B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,4DAI3B,kBAAkB,sBAkCpB,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>, {
       $opened: boolean;
       $verticalPosition: "top" | "bottom";
+      $pushContentDown?: boolean;
+      $themeMode?: "light" | "dark";
   }>> & 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;YAgDpC,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;YAwE9B,CAAA"}
 }
 declare module '@ibti-tech/chatbot/components/MessageBalloon/index' {
   import React from 'react';
@@ -244,7 +308,7 @@ declare module '@ibti-tech/chatbot/components/MessageBalloon/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/MessageBalloon/styles.d.ts' {
-  {"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;YAiB9E,CAAA;AAED,eAAO,MAAM,gBAAgB;WAAuB,UAAU,GAAG,MAAM;YAmBtE,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;YAkB7D,CAAA"}
+  {"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"}
 }
 declare module '@ibti-tech/chatbot/components/SuggestedQuestions/index' {
   import React from 'react';
@@ -265,7 +329,7 @@ declare module '@ibti-tech/chatbot/components/SuggestedQuestions/styles' {
   //# sourceMappingURL=styles.d.ts.map
 }
 declare module '@ibti-tech/chatbot/components/SuggestedQuestions/styles.d.ts' {
-  {"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,6NAYnB,CAAA"}
+  {"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"}
 }
 declare module '@ibti-tech/chatbot/components/WritingIndicator/index' {
   import React from 'react';
@@ -308,12 +372,13 @@ declare module '@ibti-tech/chatbot/contexts/Chatbot/context' {
       suggestedQuestions: ReturnType<typeof useChatbotSuggestedQuestions>;
       apiURL: string;
       texts?: ChatbotTypes.Texts;
+      theme: ChatbotTypes.Theme;
   };
   export const ChatbotContext: React.Context<ChatbotContextProps>;
   //# sourceMappingURL=context.d.ts.map
 }
 declare module '@ibti-tech/chatbot/contexts/Chatbot/context.d.ts' {
-  {"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;CAC3B,CAAA;AAED,eAAO,MAAM,cAAc,oCAAiD,CAAA"}
+  {"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"}
 }
 declare module '@ibti-tech/chatbot/contexts/Chatbot/provider' {
   import React, { ReactNode } from 'react';
@@ -330,7 +395,7 @@ declare module '@ibti-tech/chatbot/contexts/Chatbot/provider' {
   //# sourceMappingURL=provider.d.ts.map
 }
 declare module '@ibti-tech/chatbot/contexts/Chatbot/provider.d.ts' {
-  {"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,sBAuDtB,CAAA"}
+  {"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"}
 }
 declare module '@ibti-tech/chatbot/contexts/Chatbot/useChatFeedbackBox' {
   type SendUserRatingProps = {

package/dist/index.mjs

@@ -712,7 +712,8 @@ var ChatbotProvider = /* @__PURE__ */ __name(({
         apiConnectionError,
         suggestedQuestions,
         apiURL,
-        texts
+        texts,
+        theme
       }
     },
     /* @__PURE__ */ React3.createElement(ThemeProvider, { theme: themes[theme] }, children)
@@ -726,6 +727,7 @@ import React14 from "react";
 import { breakpoints, screens } from "@ibti-tech/ui";
 import { css, styled } from "styled-components";
 var Wrapper = styled.div`
+  /* Base styles */
   width: 100%;
   background-color: ${(props) => props.theme.colors.layers[1].background};
   border: 1px solid ${(props) => props.theme.colors.layers[1].border};
@@ -734,10 +736,28 @@ var Wrapper = styled.div`
   transition: ${(props) => props.theme.transitionDurations.fast};
   overflow: hidden;
   pointer-events: all;
-  height: 100vh;
-  max-height: calc(100vh - 45px);
   box-sizing: border-box;
   position: relative;
+  
+  /* Default height - will be overridden by specific states */
+  ${(props) => {
+  if (props.$pushContentDown && props.$verticalPosition === "top") {
+    if (!props.$opened) {
+      return css`
+          height: 32px;
+        `;
+    }
+    return css`
+        height: auto;
+      `;
+  }
+  return css`
+      height: 100vh;
+      max-height: calc(100vh - 45px);
+    `;
+}}
+  
+  /* Typography */
   font-family: 'Montserrat', sans-serif !important;
   font-weight: 600 !important;
 
@@ -749,38 +769,137 @@ var Wrapper = styled.div`
     font-weight: 600 !important;
   }
 
+  /* Mobile styles */
   @media screen and (max-width: ${breakpoints.tablet}px) {
+    ${(props) => props.$opened && props.$verticalPosition === "top" && css`
+      max-height: 100vh !important;
+      height: 100vh !important;
+    `}
+    
     ${(props) => props.$opened && props.$verticalPosition === "bottom" ? css`
             max-height: 100vh;
           ` : ""}
+    
+    ${(props) => props.$opened && props.$verticalPosition === "top" ? css`
+            max-height: 100vh !important;
+            height: 100vh !important;
+            width: 100% !important;
+            transform: none !important;
+            position: relative !important;
+          ` : ""}
   }
 
+  /* Border radius based on vertical position */
   ${(props) => props.$verticalPosition === "top" ? css`
-          border-end-end-radius: ${(props2) => props2.theme.borderRadius.medium};
-          border-end-start-radius: ${(props2) => props2.theme.borderRadius.medium};
+          border-end-end-radius: ${props.theme.borderRadius.medium};
+          border-end-start-radius: ${props.theme.borderRadius.medium};
         ` : css`
-          border-start-end-radius: ${(props2) => props2.theme.borderRadius.medium};
-          border-start-start-radius: ${(props2) => props2.theme.borderRadius.medium};
+          border-start-end-radius: ${props.theme.borderRadius.medium};
+          border-start-start-radius: ${props.theme.borderRadius.medium};
         `}
 
+  /* Desktop styles */
   ${screens.tablet} {
-    height: 500px;
+    /* Height when closed with pushContentDown vs opened */
+    ${(props) => {
+  if (props.$pushContentDown && props.$verticalPosition === "top") {
+    if (!props.$opened) {
+      return css`
+            height: 32px !important;
+            max-height: 32px !important;
+            min-height: 32px !important;
+          `;
+    } else {
+      return css`
+            height: 500px !important;
+            max-height: 500px !important;
+          `;
+    }
+  }
+  return css`
+        height: 500px;
+      `;
+}}
+    
     max-width: ${breakpoints.mobileL}px;
+    
+    /* Horizontal positioning on desktop - same for overlay and pushContentDown */
+    ${(props) => {
+  if (!props.$horizontalPosition) return "";
+  if (props.$horizontalPosition === "left") {
+    return css`
+          margin-left: 0;
+          margin-right: auto;
+        `;
+  }
+  if (props.$horizontalPosition === "right") {
+    return css`
+          margin-left: auto;
+          margin-right: 0;
+        `;
+  }
+  if (props.$horizontalPosition === "center") {
+    return css`
+          margin-left: auto;
+          margin-right: auto;
+        `;
+  }
+  return css`
+        left: ${props.$horizontalPosition};
+        width: ${breakpoints.mobileL}px;
+        min-width: ${breakpoints.mobileL}px;
+      `;
+}}
   }
 
+  /* Closed state styles */
   ${(props) => !props.$opened && (props.$verticalPosition === "top" ? css`
-          transform: translateY(calc(-100% + 32px));
+          ${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;
+                transform: none !important;
+                overflow: visible !important;
+                ${screens.tablet} {
+                  height: 32px !important;
+                  max-height: 32px !important;
+                  min-height: 32px !important;
+                  transform: none !important;
+                }
+                > *:not(:last-child) {
+                  display: none !important;
+                }
+                > *:last-child {
+                  flex-shrink: 0 !important;
+                  min-height: 32px !important;
+                  height: 32px !important;
+                  max-height: 32px !important;
+                  width: 100% !important;
+                  min-width: 100% !important;
+                  max-width: 100% !important;
+                  pointer-events: all !important;
+                  cursor: pointer !important;
+                }
+              ` : css`
+                /* Overlay mode: translate up to show only toggle button - based on commit 8379cc8 */
+                transform: translateY(calc(-100% + 32px));
+              `}
         ` : css`
+          /* Bottom position: translate down to show only toggle button */
           transform: translateY(calc(100% - 32px));
           width: 100%;
+          
           ${screens.tablet} {
             width: ${breakpoints.mobileL}px;
             max-width: ${breakpoints.mobileL}px;
             min-width: ${breakpoints.mobileL}px;
           }
+          
           > *:not(:last-child) {
             display: none;
           }
+          
           > *:last-child {
             flex-shrink: 0;
             min-height: 32px;
@@ -788,6 +907,27 @@ var Wrapper = styled.div`
             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 */
+  ${(props) => props.$opened && props.$pushContentDown && props.$verticalPosition === "top" && css`
+      overflow: hidden !important;
+      transform: none !important;
+      
+      ${screens.tablet} {
+        height: 500px !important;
+        max-height: 500px !important;
+        min-height: 500px !important;
+        overflow: hidden !important;
+      }
+      
+      @media screen and (max-width: ${breakpoints.tablet}px) {
+        height: 100vh !important;
+        max-height: 100vh !important;
+        min-height: 100vh !important;
+        overflow: hidden !important;
+      }
+    `}
 `;
 
 // src/components/ChatbotHeader/index.tsx
@@ -1042,11 +1182,16 @@ var MessagesList = styled4.ul`
   display: flex;
   flex-direction: column;
   gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  list-style: none;
+  margin: 0;
 `;
 var Wrapper4 = styled4.div`
-  overflow: hidden;
+  overflow-x: hidden;
   overflow-y: auto;
   flex: 1;
+  min-width: 0;
   height: 100%;
   padding-right: ${(props) => props.theme.spacing.components.small};
   font-family: 'Montserrat', sans-serif !important;
@@ -1277,6 +1422,8 @@ var BalloonAndActionsWrapper = styled5.div`
   flex-direction: column;
   gap: 2px;
   margin-bottom: ${(props) => props.theme.spacing.components.medium};
+  min-width: 0;
+  width: 100%;
 
   ${({ $type }) => {
   switch ($type) {
@@ -1294,6 +1441,7 @@ var BalloonContainer = styled5.div`
   position: relative;
   width: max-content;
   max-width: 100%;
+  min-width: 0;
 
   ${({ $type }) => {
   switch ($type) {
@@ -1420,6 +1568,9 @@ var Wrapper5 = styled5.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
 
   ${(props) => {
   switch (props.$type) {
@@ -1765,6 +1916,9 @@ var Title = styled7.span`
 `;
 var Wrapper7 = styled7.div`
   padding: ${(props) => props.theme.spacing.components.medium};
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   font-family: 'Montserrat', sans-serif !important;
   font-weight: 600 !important;
 
@@ -1850,18 +2004,24 @@ var LoadingSuggestedQuestions = styled8.span`
 `;
 var Form = styled8.form`
   display: flex;
+  align-items: flex-end;
   gap: ${(props) => props.theme.spacing.components.small};
+  width: 100%;
+  min-width: 0;
 
   /* Remove border from submit button */
   button[type='submit'] {
     border: none !important;
     outline: none !important;
     box-shadow: none !important;
+    flex-shrink: 0 !important;
   }
 
   /* Chatbot textarea styles */
   .textareaField {
     font-family: 'Montserrat', sans-serif !important;
+    flex: 1 !important;
+    min-width: 0 !important;
 
     &,
     *,
@@ -1930,6 +2090,9 @@ var Form = styled8.form`
 `;
 var Wrapper8 = styled8.div`
   padding: ${(props) => props.theme.spacing.components.small};
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   font-family: 'Montserrat', sans-serif !important;
   font-weight: 600 !important;
 
@@ -2015,8 +2178,12 @@ 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;
-  width: 100%;
+  height: 32px !important;
+  min-height: 32px !important;
+  max-height: 32px !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
   background: transparent;
   color: ${(props) => props.theme.colors.palette.primary.normal};
   padding: ${(props) => props.theme.spacing.components.small};
@@ -2036,7 +2203,8 @@ var ButtonWrapper = styled9.button`
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
-  flex-shrink: 0;
+  flex-shrink: 0 !important;
+  box-sizing: border-box;
 
   ${(props) => !props.$opened && props.$verticalPosition === "bottom" && css4`
       background-color: ${props.theme.colors.layers[1].background};
@@ -2049,6 +2217,19 @@ var ButtonWrapper = styled9.button`
       border-radius: ${(props2) => props2.theme.borderRadius.medium} ${(props2) => props2.theme.borderRadius.medium} 0 0;
     `}
 
+  ${(props) => !props.$opened && props.$verticalPosition === "top" && props.$pushContentDown && css4`
+      background-color: ${props.theme.colors.layers[1].background};
+      cursor: pointer;
+      border-radius: ${(props2) => props2.theme.borderRadius.medium};
+      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)"};
+      pointer-events: auto;
+      color: ${(props2) => props2.theme.colors.palette.primary.normal};
+      &:hover {
+        background-color: ${(props2) => props2.theme.colors.layers[1].hoveredBackground};
+        color: ${(props2) => props2.theme.colors.palette.primary.normal};
+      }
+    `}
+
   ${screens2.tablet} {
     transition: ${(props) => props.theme.transitionDurations.default};
 
@@ -2064,9 +2245,10 @@ import React12 from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "@ibti-tech/ui/dist/icons";
 var ChatbotToggle = /* @__PURE__ */ __name(({
   verticalPosition = "bottom",
-  opened: openedProp
+  opened: openedProp,
+  pushContentDown = false
 }) => {
-  const { opened: openedContext, openedToggle } = useChatbot_default();
+  const { opened: openedContext, openedToggle, theme: themeMode } = useChatbot_default();
   const opened = openedProp ?? openedContext;
   const texts = useChatbotTexts();
   const toggleText = (opened ? texts.CHATBOT_BAR.CLOSE : texts.CHATBOT_BAR.OPEN).replace("{{CHATBOT_NAME}}", texts.CHATBOT_NAME);
@@ -2076,7 +2258,9 @@ var ChatbotToggle = /* @__PURE__ */ __name(({
     {
       onClick: openedToggle,
       $opened: opened,
-      $verticalPosition: verticalPosition
+      $verticalPosition: verticalPosition,
+      $pushContentDown: pushContentDown,
+      $themeMode: themeMode
     },
     /* @__PURE__ */ React12.createElement(BotIcon, null),
     /* @__PURE__ */ React12.createElement("span", null, toggleText),
@@ -2308,11 +2492,33 @@ var useChatFeedbackBox = /* @__PURE__ */ __name(() => {
 
 // src/components/ChatbotDevice/index.tsx
 var ChatbotDevice = /* @__PURE__ */ __name(({
-  verticalPosition = "bottom"
+  verticalPosition = "bottom",
+  pushContentDown = false,
+  horizontalPosition
 }) => {
   const { opened } = useChatbot_default();
   const chatFeedbackBox = useChatFeedbackBox();
-  return /* @__PURE__ */ React14.createElement(Wrapper, { $opened: opened, $verticalPosition: verticalPosition }, /* @__PURE__ */ React14.createElement(ChatUserFeedbackRating, { chatFeedbackBox }), /* @__PURE__ */ React14.createElement(ChatbotHeader_default, { chatFeedbackBox }), /* @__PURE__ */ React14.createElement(ChatbotBody_default, null), /* @__PURE__ */ React14.createElement(ChatbotFooter_default, null), /* @__PURE__ */ React14.createElement(ChatbotToggle_default, { verticalPosition, opened }));
+  return /* @__PURE__ */ React14.createElement(
+    Wrapper,
+    {
+      $opened: opened,
+      $verticalPosition: verticalPosition,
+      $pushContentDown: pushContentDown,
+      $horizontalPosition: horizontalPosition
+    },
+    /* @__PURE__ */ React14.createElement(ChatUserFeedbackRating, { chatFeedbackBox }),
+    /* @__PURE__ */ React14.createElement(ChatbotHeader_default, { chatFeedbackBox }),
+    /* @__PURE__ */ React14.createElement(ChatbotBody_default, null),
+    /* @__PURE__ */ React14.createElement(ChatbotFooter_default, null),
+    /* @__PURE__ */ React14.createElement(
+      ChatbotToggle_default,
+      {
+        verticalPosition,
+        opened,
+        pushContentDown
+      }
+    )
+  );
 }, "ChatbotDevice");
 var ChatbotDevice_default = ChatbotDevice;
 
@@ -2334,77 +2540,252 @@ var BarContainer = styled11(Container)`
 
   @media screen and (max-width: ${breakpoints3.tablet}px) {
     padding: 0;
+    ${(props) => props.$opened && props.$verticalPosition === "top" && css6`
+      width: 100% !important;
+      max-width: 100% !important;
+    `}
+    /* pushContentDown + top closed, mobile: Wrapper full width → keep margin for lateral position */
+    ${(props) => props.$pushContentDown && props.$verticalPosition === "top" && !props.$opened ? css6`
+            width: ${breakpoints3.mobileL}px !important;
+            max-width: ${breakpoints3.mobileL}px !important;
+            min-width: ${breakpoints3.mobileL}px !important;
+            position: relative;
+            z-index: 1;
+            padding-left: 0;
+            padding-right: 0;
+            ${props.$horizontalPosition === "right" ? css6`margin-left: auto !important; margin-right: 2.5rem !important;` : css6`margin-left: 2.5rem !important; margin-right: auto !important;`}
+          ` : ""}
   }
 
   ${screens3.tablet} {
     display: flex;
-    justify-content: ${(props) => props.$horizontalPosition === "right" ? "flex-end" : "flex-start"};
+    justify-content: ${(props) => {
+  const pos = props.$deviceHorizontalPosition ?? props.$horizontalPosition;
+  if (pos === "center") return "center";
+  if (pos === "right") return "flex-end";
+  if (pos === "left") return "flex-start";
+  if (typeof pos === "string") return "flex-start";
+  return props.$horizontalPosition === "right" ? "flex-end" : "flex-start";
+}};
+    
+    ${(props) => !props.$opened && props.$verticalPosition === "bottom" && !props.$pushContentDown ? css6`
+            width: ${breakpoints3.mobileL}px;
+            max-width: ${breakpoints3.mobileL}px;
+            min-width: ${breakpoints3.mobileL}px;
+            padding-left: 0;
+            padding-right: 0;
+          ` : ""}
     
-    ${(props) => !props.$opened && props.$verticalPosition === "bottom" ? css6`
+    /* pushContentDown + top closed: mobileL bar + 2.5rem lateral margin */
+    ${(props) => props.$pushContentDown && props.$verticalPosition === "top" && !props.$opened ? css6`
             width: ${breakpoints3.mobileL}px;
             max-width: ${breakpoints3.mobileL}px;
             min-width: ${breakpoints3.mobileL}px;
             padding-left: 0;
+            padding-right: 0;
+            position: relative;
+            z-index: 1;
+            ${props.$horizontalPosition === "right" ? css6`margin-left: auto; margin-right: 2.5rem;` : css6`margin-left: 2.5rem; margin-right: auto;`}
           ` : ""}
   }
 `;
-var Wrapper10 = styled11.div`
-  position: fixed;
+var PushDownRow = styled11.div`
+  position: absolute;
+  inset: 0;
   width: 100%;
-  z-index: ${(props) => props.theme.zIndex.modals};
+  height: 32px;
+  min-height: 32px;
+  background-color: ${(p) => p.$background};
+  z-index: 0;
   pointer-events: none;
-
-  ${(props) => props.$verticalPosition === "top" ? css6`
-          top: 0;
-          padding-top: ${(props2) => props2.theme.spacing.components.xsmall};
-        ` : css6`
-          bottom: 0;
-          padding-bottom: ${(props2) => props2.theme.spacing.components.xsmall};
-          
+`;
+var Wrapper10 = styled11.div`
+  ${(props) => {
+  if (props.$pushContentDown && props.$verticalPosition === "top") {
+    if (props.$opened) {
+      return css6`
+          position: fixed !important;
+          width: 100%;
+          top: 0 !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;
+          padding-top: ${props.$topOffset !== void 0 ? 0 : props.theme.spacing.components.xsmall};
+          background-color: transparent;
+          ${screens3.tablet} {
+            width: auto !important;
+            height: auto !important;
+            min-height: auto !important;
+            background-color: transparent;
+            border: none;
+            padding: 0;
+            top: ${props.$topOffset !== void 0 ? typeof props.$topOffset === "number" ? `${props.$topOffset}px` : props.$topOffset : "0"} !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) {
-            ${props.$opened ? css6`
-                  padding-bottom: 0;
-                ` : ""}
+            padding-top: 0 !important;
+            top: 0 !important;
+            height: 100vh;
           }
-        `}
-
-  ${screens3.tablet} {
-    width: auto;
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    ${(props) => props.$horizontalPosition === "right" ? css6`
-            right: ${(props2) => props2.theme.spacing.components.medium};
+        `;
+    }
+    return css6`
+        position: fixed !important;
+        width: 100%;
+        top: 0 !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;
+        background-color: transparent;
+        ${screens3.tablet} {
+          width: 100% !important;
+          max-width: 100% !important;
+          border: none;
+          padding: 0;
+          bottom: auto !important;
+        }
+        @media screen and (max-width: ${breakpoints3.tablet}px) {
+          height: 32px !important;
+          min-height: 32px !important;
+        }
+      `;
+  }
+  return css6`
+      position: fixed;
+      width: 100%;
+      z-index: ${props.$zIndex !== void 0 ? props.$zIndex : props.theme.zIndex.modals};
+      pointer-events: none;
+
+      ${props.$verticalPosition === "top" ? css6`
+            top: ${props.$topOffset !== void 0 ? typeof props.$topOffset === "number" ? `${props.$topOffset}px` : props.$topOffset : "0"};
+            padding-top: ${props.$topOffset !== void 0 ? 0 : props.theme.spacing.components.xsmall};
+            
+            @media screen and (max-width: ${breakpoints3.tablet}px) {
+              ${props.$opened ? css6`
+                    padding-top: 0 !important;
+                    top: 0 !important;
+                    height: 100vh;
+                  ` : ""}
+            }
           ` : css6`
-            left: ${(props2) => props2.theme.spacing.components.medium};
+            bottom: 0;
+            padding-bottom: ${(props2) => props2.theme.spacing.components.xsmall};
+            
+            @media screen and (max-width: ${breakpoints3.tablet}px) {
+              ${props.$opened ? css6`
+                    padding-bottom: 0;
+                  ` : ""}
+            }
           `}
-  }
+
+      ${screens3.tablet} {
+        width: auto;
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        /* Top (portal): 2.5rem to match push-down bar; bottom: theme medium */
+        ${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;`}
+      }
+    `;
+}}
 `;
 
 // src/components/ChatbotBar/index.tsx
-import React15 from "react";
+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 ChatbotBar = /* @__PURE__ */ __name(({
   verticalPosition = "bottom",
-  horizontalPosition = "right"
+  horizontalPosition = "right",
+  deviceHorizontalPosition,
+  zIndex,
+  topOffset,
+  aboveHeader = false,
+  pushContentDown = false,
+  pushContentDownRowBackgroundLight = PUSH_DOWN_ROW_BG_LIGHT,
+  pushContentDownRowBackgroundDark = PUSH_DOWN_ROW_BG_DARK
 }) => {
-  const { opened } = useChatbot_default();
-  return /* @__PURE__ */ React15.createElement(
+  const { opened, theme } = useChatbot_default();
+  const pushDownRowBackground = theme === "dark" ? pushContentDownRowBackgroundDark : pushContentDownRowBackgroundLight;
+  const [portalContainer, setPortalContainer] = useState10(null);
+  const calculatedZIndex = aboveHeader ? 9999 : zIndex;
+  useEffect8(() => {
+    if (verticalPosition === "top" && typeof document !== "undefined") {
+      let container = document.getElementById("chatbot-portal-container");
+      if (!container) {
+        container = document.createElement("div");
+        container.id = "chatbot-portal-container";
+        container.style.width = "100%";
+        container.style.margin = "0";
+        container.style.padding = "0";
+        container.style.boxSizing = "border-box";
+        document.body.insertBefore(container, document.body.firstChild);
+      }
+      setPortalContainer(container);
+      return () => {
+        if (container?.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+      };
+    } else {
+      setPortalContainer(null);
+    }
+  }, [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(
     Wrapper10,
     {
       $verticalPosition: verticalPosition,
       $horizontalPosition: horizontalPosition,
-      $opened: opened
+      $opened: opened,
+      $zIndex: calculatedZIndex,
+      $topOffset: topOffset,
+      $aboveHeader: aboveHeader,
+      $pushContentDown: pushContentDown
     },
+    usePushDown && !opened && /* @__PURE__ */ React15.createElement(PushDownRow, { $background: pushDownRowBackground, "aria-hidden": true }),
     /* @__PURE__ */ React15.createElement(
       BarContainer,
       {
         $horizontalPosition: horizontalPosition,
+        $deviceHorizontalPosition: deviceHorizontalPosition,
         $opened: opened,
-        $verticalPosition: verticalPosition
+        $verticalPosition: verticalPosition,
+        $pushContentDown: usePushDown
       },
-      /* @__PURE__ */ React15.createElement(ChatbotDevice_default, { verticalPosition })
+      /* @__PURE__ */ React15.createElement(
+        ChatbotDevice_default,
+        {
+          verticalPosition,
+          pushContentDown: usePushDown,
+          horizontalPosition: deviceHorizontalPosition
+        }
+      )
     )
-  );
+  ));
+  if (portalContainer) {
+    return createPortal(content, portalContainer);
+  }
+  return content;
 }, "ChatbotBar");
 export {
   ChatbotBar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibti-tech/chatbot",
-  "version": "0.5.8",
+  "version": "0.6.2",
   "description": "Chatbot developed for IBTI products",
   "packageManager": "yarn@3.6.4",
   "main": "./dist/index.mjs",