Merge pull request #287 from amansoni7477030/main

Deny button functionality in Desclaimer

Author: HenryHengZJ

README.md

@@ -143,6 +143,8 @@ You can also customize chatbot with different configuration
         buttonTextColor: 'white',
         blurredBackgroundColor: 'rgba(0, 0, 0, 0.4)', //The color of the blurred background that overlays the chat interface
         backgroundColor: 'white',
+        denyButtonText: 'Cancel',
+        denyButtonBgColor: '#ef4444',
       },
       customCSS: ``, // Add custom CSS styles. Use !important to override default styles
       chatWindow: {

dist/components/Bot.d.ts

@@ -102,6 +102,7 @@ export type BotProps = {
     disclaimer?: DisclaimerPopUpTheme;
     dateTimeToggle?: DateTimeToggleTheme;
     renderHTML?: boolean;
+    closeBot?: () => void;
 };
 export type LeadsConfig = {
     status: boolean;

dist/features/bubble/types.d.ts

@@ -101,6 +101,8 @@ export type DisclaimerPopUpTheme = {
     buttonText?: string;
     blurredBackgroundColor?: string;
     backgroundColor?: string;
+    denyButtonBgColor?: string;
+    denyButtonText?: string;
 };
 export type DateTimeToggleTheme = {
     date?: boolean;

dist/features/popup/components/DisclaimerPopup.d.ts

@@ -1,14 +1,18 @@
 export type DisclaimerPopupProps = {
     isOpen?: boolean;
+    isFullPage?: boolean;
     onAccept?: () => void;
+    onDeny?: () => void;
     title?: string;
     message?: string;
     buttonText?: string;
+    denyButtonText?: string;
     blurredBackgroundColor?: string;
     backgroundColor?: string;
     buttonColor?: string;
     textColor?: string;
     buttonTextColor?: string;
+    denyButtonBgColor?: string;
 };
 export declare const DisclaimerPopup: (props: DisclaimerPopupProps) => import("solid-js").JSX.Element;
 //# sourceMappingURL=DisclaimerPopup.d.ts.map

dist/web.js

@@ -155,6 +155,7 @@ export type BotProps = {
   disclaimer?: DisclaimerPopUpTheme;
   dateTimeToggle?: DateTimeToggleTheme;
   renderHTML?: boolean;
+  closeBot?: () => void;
 };
 
 export type LeadsConfig = {
@@ -1640,6 +1641,10 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
           buttonTextColor={props.disclaimer?.buttonTextColor}
           blurredBackgroundColor={props.disclaimer?.blurredBackgroundColor}
           backgroundColor={props.disclaimer?.backgroundColor}
+          denyButtonBgColor={props.disclaimer?.denyButtonBgColor}
+          denyButtonText={props.disclaimer?.denyButtonText}
+          onDeny={props.closeBot}
+          isFullPage={props.isFullPage}
         />
       )}
     </>

src/components/Bot.tsx

@@ -97,7 +97,7 @@ export const Bubble = (props: BubbleProps) => {
           'background-repeat': 'no-repeat',
           'z-index': 42424242,
           bottom: `${Math.min(buttonPosition().bottom + buttonSize + 10, window.innerHeight - chatWindowBottom)}px`,
-          right: `${Math.min(buttonPosition().right, window.innerWidth - 410)}px`,
+          right: `${Math.max(0, Math.min(buttonPosition().right, window.innerWidth - (bubbleProps.theme?.chatWindow?.width ?? 410) - 10))}px`,
         }}
         class={
           `fixed sm:right-5 rounded-lg w-full sm:w-[400px] max-h-[704px]` +
@@ -153,6 +153,7 @@ export const Bubble = (props: BubbleProps) => {
               disclaimer={bubbleProps.theme?.disclaimer}
               dateTimeToggle={bubbleProps.theme?.chatWindow?.dateTimeToggle}
               renderHTML={props.theme?.chatWindow?.renderHTML}
+              closeBot={closeBot}
             />
           </div>
         </Show>

src/features/bubble/components/Bubble.tsx

@@ -112,6 +112,8 @@ export type DisclaimerPopUpTheme = {
   buttonText?: string;
   blurredBackgroundColor?: string;
   backgroundColor?: string;
+  denyButtonBgColor?: string;
+  denyButtonText?: string;
 };
 
 export type DateTimeToggleTheme = {