Merge pull request #24 from necyberteam/simplifications

remove web-component option, consolidate CSS, pare down props, add ratings, add query/session headers

Author: bacalj

README.md

@@ -1,7 +1,9 @@
 interface QABotProps {
   apiKey?: string;
-  /** Whether the chat window is open by default (floating mode only, ignored for embedded) */
-  defaultOpen?: boolean;
+  /** Whether the chat window is open (floating mode only, ignored for embedded) */
+  open?: boolean;
+  /** Callback when chat window open state changes */
+  onOpenChange?: (open: boolean) => void;
   /** Whether the bot is embedded in the page (always open when embedded) */
   embedded?: boolean;
   isLoggedIn?: boolean;
@@ -10,35 +12,29 @@ interface QABotProps {
   [key: string]: any; // Allow additional props
 }
 
-// Note: To control the chat window externally, use the useChatWindow hook from react-chatbotify:
-// import { useChatWindow } from 'react-chatbotify';
-// const { toggleChatWindow } = useChatWindow();
+// Note: The React component uses controlled mode - manage state in your parent component:
+//
+// const [isOpen, setIsOpen] = useState(false);
+// const [userLoggedIn, setUserLoggedIn] = useState(false);
+// <QABot open={isOpen} onOpenChange={setIsOpen} isLoggedIn={userLoggedIn} />
+//
+// To send messages programmatically, use the ref:
+// const botRef = useRef();
+// botRef.current?.addMessage("Hello World!");
 
 // React component
 export const QABot: React.ForwardRefExoticComponent<
   QABotProps & React.RefAttributes<{
     addMessage: (message: string) => void;
-    setBotIsLoggedIn: (status: boolean) => void;
-    openChat: () => void;
-    closeChat: () => void;
-    toggleChat: () => void;
   }>
 >;
 
-// Web Component class (available in the standalone build)
-export class WebComponentQABot extends HTMLElement {
-  static observedAttributes: string[];
-  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-}
-
-// Function for non-React integration
+// Function for non-React integration (now React-backed for everything)
 interface QABotConfig extends QABotProps {
   target: HTMLElement;
 }
 
-// Main function for programmatic usage (works with React or Web Component)
+// Main function for programmatic usage (now React-backed for all usage)
 export function qaBot(config: QABotConfig): {
   addMessage: (message: string) => void;
   setBotIsLoggedIn: (status: boolean) => void;
@@ -48,23 +44,5 @@ export function qaBot(config: QABotConfig): {
   destroy: () => void;
 };
 
-// Web Component specific function (exposed in the standalone bundle)
-export function webComponentQABot(config: QABotConfig): () => void;
-
 // Default export (React component)
 export default QABot;
-
-// Augment the HTMLElementTagNameMap to include our custom element
-declare global {
-  interface HTMLElementTagNameMap {
-    'qa-bot': WebComponentQABot;
-  }
-
-  // Global object for standalone usage
-  interface Window {
-    qaBot?: typeof webComponentQABot;
-  }
-
-  // Global function available without window prefix
-  var qaBot: typeof webComponentQABot;
-}

build/static/css/main.css

@@ -56,13 +56,11 @@ function updateBotLoginStatus(isLoggedIn) {
 function setupLoginCheckbox() {
     const loginCheckbox = document.getElementById('user-logged-in');
     if (loginCheckbox) {
-        // Initialize checkbox state based on current cookie
         loginCheckbox.checked = isUserLoggedIn();
 
         loginCheckbox.addEventListener('change', (e) => {
             setAuthCookie(e.target.checked);
             updateBotLoginStatus(e.target.checked);
-            console.log('| user logged in:', e.target.checked);
         });
     }
 }

build/static/css/main.css.map

@@ -1,9 +1,9 @@
 {
   "name": "@snf/access-qa-bot",
-  "version": "2.0.0",
+  "version": "2.1.0-rc.7",
   "private": false,
   "homepage": ".",
-  "description": "ACCESS Q&A Bot React Component and Web Component",
+  "description": "ACCESS Q&A Bot React Component",
   "main": "./dist/access-qa-bot.umd.cjs",
   "module": "./dist/access-qa-bot.js",
   "exports": {
@@ -21,7 +21,8 @@
     "index.d.ts"
   ],
   "dependencies": {
-    "react-chatbotify": "^2.0.0-beta.38"
+    "react-chatbotify": "^2.0.0-beta.38",
+    "uuid": "^11.1.0"
   },
   "peerDependencies": {
     "preact": "^10.0.0",

build/static/js/main.js

@@ -51,28 +51,21 @@ export default [
     external: Object.keys(pkg.peerDependencies || {})
   },
 
-  // UMD build with React bundled for standalone use
+  // UMD build with React bundled for standalone use - now React-backed
   {
-    input: 'src/web-component.js',
+    input: 'src/standalone.js',
     output: {
       file: './dist/access-qa-bot.standalone.js',
       format: 'umd',
       name: 'qaBot',
       sourcemap: true,
-      exports: 'named',
-      globals: {
-        // We don't need globals since React is bundled
-      }
+      exports: 'default',
+      globals: {}
     },
     plugins: [
       postcss({
         extensions: ['.css'],
         minimize: true,
-        // For web components, extract the CSS to inject it in shadow DOM
-        extract: false,
-        modules: false,
-        autoModules: false,
-        // This ensures the CSS is injected into JS properly for shadow DOM
         inject: {
           insertAt: 'top',
         },