Disclaimer updated so text and background colors can be configured.

README.md

@@ -137,6 +137,12 @@ You can also customize chatbot with different configuration
       disclaimer: {
         title: 'Disclaimer',
         message: 'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>',
+        textColor: 'black',
+        buttonColor: '#3b82f6',
+        buttonText: 'Start Chatting',
+        buttonTextColor: 'white',
+        blurredBackgroundColor: 'rgba(0, 0, 0, 0.4)', //The color of the blurred background that overlays the chat interface
+        backgroundColor: 'white',
       },
       chatWindow: {
         showTitle: true,

dist/features/bubble/types.d.ts

@@ -92,7 +92,12 @@ export type autoWindowOpenTheme = {
 export type DisclaimerPopUpTheme = {
     title?: string;
     message?: string;
+    textColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
     buttonText?: string;
+    blurredBackgroundColor?: string;
+    backgroundColor?: string;
 };
 export type DateTimeToggleTheme = {
     date?: boolean;

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

@@ -4,6 +4,11 @@ export type DisclaimerPopupProps = {
     title?: string;
     message?: string;
     buttonText?: string;
+    blurredBackgroundColor?: string;
+    backgroundColor?: string;
+    buttonColor?: string;
+    textColor?: string;
+    buttonTextColor?: string;
 };
 export declare const DisclaimerPopup: (props: DisclaimerPopupProps) => import("solid-js").JSX.Element;
 //# sourceMappingURL=DisclaimerPopup.d.ts.map

src/components/Bot.tsx

@@ -1629,7 +1629,12 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
           onAccept={handleDisclaimerAccept}
           title={props.disclaimer?.title}
           message={props.disclaimer?.message}
+          textColor={props.disclaimer?.textColor}
+          buttonColor={props.disclaimer?.buttonColor}
           buttonText={props.disclaimer?.buttonText}
+          buttonTextColor={props.disclaimer?.buttonTextColor}
+          blurredBackgroundColor={props.disclaimer?.blurredBackgroundColor}
+          backgroundColor={props.disclaimer?.backgroundColor}
         />
       )}
     </>

src/features/bubble/types.ts

@@ -103,7 +103,12 @@ export type autoWindowOpenTheme = {
 export type DisclaimerPopUpTheme = {
   title?: string;
   message?: string;
+  textColor?: string;
+  buttonColor?: string;
+  buttonTextColor?: string;
   buttonText?: string;
+  blurredBackgroundColor?: string;
+  backgroundColor?: string;
 };
 
 export type DateTimeToggleTheme = {

src/features/popup/components/DisclaimerPopup.tsx

@@ -6,29 +6,53 @@ export type DisclaimerPopupProps = {
   title?: string;
   message?: string;
   buttonText?: string;
+  blurredBackgroundColor?: string;
+  backgroundColor?: string;
+  buttonColor?: string;
+  textColor?: string;
+  buttonTextColor?: string;
 };
 
 export const DisclaimerPopup = (props: DisclaimerPopupProps) => {
-  const [popupProps] = splitProps(props, ['onAccept', 'isOpen', 'title', 'message', 'buttonText']);
+  const [popupProps] = splitProps(props, [
+    'onAccept',
+    'isOpen',
+    'title',
+    'message',
+    'textColor',
+    'buttonColor',
+    'buttonText',
+    'buttonTextColor',    
+    'blurredBackgroundColor',    
+    'backgroundColor',
+  ]);
 
   const handleAccept = () => {
-    props.onAccept?.();
+    popupProps.onAccept?.();
   };
 
   return (
     <Show when={popupProps.isOpen}>
-      <div class="fixed inset-0 rounded-lg flex items-center justify-center bg-black bg-opacity-40 backdrop-blur-sm z-50">
-        <div class="bg-white p-10 rounded-lg shadow-lg max-w-md w-full text-center mx-4 font-sans">
-          <h2 class="text-2xl font-semibold mb-4 flex justify-center items-center">{popupProps.title ?? 'Disclaimer'}</h2>
+      <div
+        class="fixed inset-0 rounded-lg flex items-center justify-center backdrop-blur-sm z-50"
+        style={{ background: popupProps.blurredBackgroundColor || 'rgba(0, 0, 0, 0.4)' }} 
+      >
+        <div class="p-10 rounded-lg shadow-lg max-w-md w-full text-center mx-4 font-sans" 
+          style={{ background: popupProps.backgroundColor || 'white', color: popupProps.textColor || 'black' }}>
+          <h2 class="text-2xl font-semibold mb-4 flex justify-center items-center">
+            {popupProps.title ?? 'Disclaimer'}
+          </h2>
 
           <p
             class="text-gray-700 text-base mb-6"
-            innerHTML={popupProps.message ?? 'By using this chatbot, you acknowledge and accept these terms.'}
+            style={{ color: popupProps.textColor || 'black' }}
+            innerHTML={popupProps.message ?? 'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>.'}
           />
 
           <div class="flex justify-center">
             <button
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded focus:outline-none focus:shadow-outline"
+              class="font-bold py-2 px-6 rounded focus:outline-none focus:shadow-outline"
+              style={{ background: popupProps.buttonColor || '#3b82f6', color: popupProps.buttonTextColor || 'white' }}
               onClick={handleAccept}
             >
               {popupProps.buttonText ?? 'Start Chatting'}
@@ -38,4 +62,4 @@ export const DisclaimerPopup = (props: DisclaimerPopupProps) => {
       </div>
     </Show>
   );
-};
+};