@snf/qa-bot-core 0.2.4 → 0.2.5

package/README.md

@@ -26,6 +26,7 @@ function App() {
       apiKey="your-api-key"
       qaEndpoint="https://your-api.com/chat"
       welcomeMessage="Hello! How can I help you today?"
+      isLoggedIn={true}
     />
   );
 }
@@ -41,8 +42,12 @@ Customize appearance and behavior:
   ratingEndpoint="https://your-api.com/rating"
   welcomeMessage="Hello! How can I help you today?"
 
-  // Control
-  enabled={true}
+  // Authentication (required)
+  isLoggedIn={true}
+  allowAnonAccess={false}
+  loginUrl="/login"
+
+  // Window control
   open={false}
   onOpenChange={(isOpen) => console.log('Chat is now', isOpen ? 'open' : 'closed')}
 
@@ -77,6 +82,7 @@ const bot = qaBot({
   qaEndpoint: 'https://your-api.com/chat',
   ratingEndpoint: 'https://your-api.com/rating',
   welcomeMessage: "Hello! How can I help you today?",
+  isLoggedIn: true,
   primaryColor: '#24292e',
   secondaryColor: '#586069',
   botName: 'Demo Assistant',
@@ -102,6 +108,7 @@ bot.destroy();
     qaEndpoint: 'https://your-api.com/chat',
     ratingEndpoint: 'https://your-api.com/rating',
     welcomeMessage: "Hello! How can I help you today?",
+    isLoggedIn: true,
     primaryColor: '#24292e',
     secondaryColor: '#586069',
     botName: 'Demo Assistant',
@@ -119,9 +126,10 @@ bot.destroy();
 | `apiKey` | string | ✅ | API key for your Q&A service |
 | `qaEndpoint` | string | ✅ | Q&A API endpoint URL |
 | `welcomeMessage` | string | ✅ | Initial greeting message |
+| `isLoggedIn` | boolean | ✅ | Whether the user is logged in. Controls header icon and Q&A access gating |
 | `ratingEndpoint` | string | ❌ | Rating API endpoint URL (enables thumbs up/down) |
-| `enabled` | boolean | ❌ | Enable/disable chat input (default: `true`). When `false`, shows login button in header |
-| `loginUrl` | string | ❌ | Login URL to redirect to when chat is disabled (default: `/login`) |
+| `allowAnonAccess` | boolean | ❌ | Allow Q&A access even when not logged in (default: `false`) |
+| `loginUrl` | string | ❌ | Login URL for the login button when not logged in (default: `/login`) |
 | `open` | boolean | ❌ | Control chat window open/closed state |
 | `onOpenChange` | function | ❌ | Callback when chat window state changes: `(open: boolean) => void` |
 | `primaryColor` | string | ❌ | Main theme color (default: `#1a5b6e`) |
@@ -134,39 +142,55 @@ bot.destroy();
 | `embedded` | boolean | ❌ | Embedded mode (default: `false`) |
 | `footerText` | string | ❌ | Footer text |
 | `footerLink` | string | ❌ | Footer link URL |
+| `customFlow` | Flow | ❌ | Custom flow steps to merge with built-in Q&A flow (see Custom Flows section) |
 
 ## Features
 
 ### Login State Management
 
-The bot supports login/logout states through the `enabled` prop:
+The bot manages authentication state through the `isLoggedIn` prop:
 
-- **Enabled (`enabled={true}`)**: Shows user icon in header, chat input is active
-- **Disabled (`enabled={false}`)**: Shows login button in header, chat input is disabled
+- **Logged in (`isLoggedIn={true}`)**: Shows user icon in header, Q&A is fully accessible
+- **Not logged in (`isLoggedIn={false}`)**: Shows login button in header, Q&A is gated (prompts to log in)
 
 Example:
 ```jsx
-const [isLoggedIn, setIsLoggedIn] = useState(false);
+const [userLoggedIn, setUserLoggedIn] = useState(false);
 
 <QABot
   apiKey="your-api-key"
   qaEndpoint="https://your-api.com/chat"
   welcomeMessage="Hello! How can I help you today?"
-  enabled={isLoggedIn}
+  isLoggedIn={userLoggedIn}
   loginUrl="https://your-app.com/login"
 />
 ```
 
-When the user is not logged in (`enabled={false}`):
+When the user is not logged in (`isLoggedIn={false}`):
 - The login button appears in the chat header
 - Clicking it opens the `loginUrl` in a new tab
-- The chat input is disabled with the `errorMessage` shown as placeholder
+- Q&A flow is gated and prompts users to log in
 
-When the user is logged in (`enabled={true}`):
+When the user is logged in (`isLoggedIn={true}`):
 - A user icon appears in the chat header
-- The chat input becomes active
 - Users can ask questions normally
 
+#### Anonymous Access
+
+If you want to allow Q&A access without requiring login, use the `allowAnonAccess` prop:
+
+```jsx
+<QABot
+  apiKey="your-api-key"
+  qaEndpoint="https://your-api.com/chat"
+  welcomeMessage="Hello! How can I help you today?"
+  isLoggedIn={false}
+  allowAnonAccess={true}
+/>
+```
+
+This bypasses the login gate for Q&A while still showing the login button in the header. Note that custom flows (if any) are unaffected by this setting.
+
 ### Chat Window Control
 
 Control the chat window open/closed state programmatically:
@@ -178,6 +202,7 @@ const [chatOpen, setChatOpen] = useState(false);
   apiKey="your-api-key"
   qaEndpoint="https://your-api.com/chat"
   welcomeMessage="Hello! How can I help you today?"
+  isLoggedIn={true}
   open={chatOpen}
   onOpenChange={setChatOpen}
 />
@@ -203,6 +228,7 @@ const botRef = useRef();
   apiKey="your-api-key"
   qaEndpoint="https://your-api.com/chat"
   welcomeMessage="Hello! How can I help you today?"
+  isLoggedIn={true}
 />
 
 // Available methods:
@@ -236,6 +262,7 @@ Example of embedded mode:
     apiKey="your-api-key"
     qaEndpoint="https://your-api.com/chat"
     welcomeMessage="Hello! How can I help you today?"
+    isLoggedIn={true}
     embedded={true}
   />
 </div>
@@ -243,6 +270,67 @@ Example of embedded mode:
 
 **Note:** When `embedded={true}`, the `open` and `onOpenChange` props are ignored, and the imperative methods `openChat()`, `closeChat()`, and `toggleChat()` have no effect.
 
+### Custom Flows
+
+You can extend the bot with custom flow steps using the `customFlow` prop. This allows you to add ticket creation, feedback forms, or other interactive workflows that merge with the built-in Q&A flow.
+
+```jsx
+import QABot from '@snf/qa-bot-core';
+
+const myCustomFlow = {
+  submit_ticket: {
+    message: "I'll help you submit a ticket. What's the issue?",
+    path: "ticket_details"
+  },
+  ticket_details: {
+    message: "Thanks! Your ticket has been submitted.",
+    path: "start"
+  }
+};
+
+<QABot
+  apiKey="your-api-key"
+  qaEndpoint="https://your-api.com/chat"
+  welcomeMessage="Hello! How can I help you today?"
+  isLoggedIn={true}
+  customFlow={myCustomFlow}
+/>
+```
+
+Custom flows are merged into the flow object, so your custom steps can reference built-in steps and vice versa.
+
+#### Flow Settings Utility
+
+When building custom flows, you may encounter a react-chatbotify quirk where `chatDisabled` state persists across step transitions. The `applyFlowSettings` utility helps manage this:
+
+```javascript
+import { applyFlowSettings } from '@snf/qa-bot-core';
+
+const myFlow = {
+  choose_option: {
+    message: "Select an option:",
+    options: ["Option A", "Option B"],
+    path: "next_step"
+  },
+  next_step: {
+    message: "You selected an option!",
+    path: "start"
+  }
+};
+
+// Auto-disable chat input on steps with options/checkboxes
+const processedFlow = applyFlowSettings(myFlow, {
+  disableOnOptions: true
+});
+
+<QABot
+  // ...other props
+  customFlow={processedFlow}
+/>
+```
+
+The `disableOnOptions: true` setting automatically sets `chatDisabled: true` for steps that have `options` or `checkboxes`, and `chatDisabled: false` for steps without them (unless you've explicitly set `chatDisabled` yourself).
+
 ### Session Management
 
 The bot automatically manages conversation sessions with unique session IDs:
@@ -323,7 +411,7 @@ The demo runs at `http://localhost:3000` and includes:
 - Displays API endpoints for verification
 
 **Dynamic Props**
-- Toggle `enabled` prop to simulate login/logout states
+- Toggle `isLoggedIn` prop to simulate login/logout states
 - Toggle `open` prop to control chat window state
 - Toggle `embedded` prop to switch between floating and embedded modes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snf/qa-bot-core",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A configurable chatbot setup for quick integration of RAG-powered Q&A and rating system",
   "main": "./dist/qa-bot-core.umd.cjs",
   "module": "./dist/qa-bot-core.js",