feat: upgrade to react-chatbotify v2.2.0 with compatibility improvements

- Update react-chatbotify to 2.2.0
- Add version announcement for debug builds
- Fix double-click issue in controlled component mode
- Implement changes from vg branch
- Remove planning files and build improvements

Author: bacalj

CHANGELOG.md

@@ -16,13 +16,18 @@
 - **Community Interest Targeting**: Community involvement question now only shown to users who provide contact information
 - **Anonymous Feedback Improvements**: Community interest field hidden from summary for anonymous submissions
 - **Focus Management**: Fixed keyboard focus jumping to previous questions; now properly targets current question only
+- **Q&A Response System**: Replaced unreliable `streamMessage` with direct API calls using `injectMessage` for consistent response display
 
 ### Fixed
+- **Critical Q&A Display Issue**: Fixed problem where Q&A responses stopped displaying after 3-4 questions due to react-chatbotify's `streamMessage` accumulating state
+- **Query ID Generation**: Implemented UUID-based query ID generation directly in QA flow to ensure proper feedback tracking
+- **Response Reliability**: Q&A responses now display consistently regardless of conversation length
 - Resolved form state persistence issues where previous session data would interfere with new submissions
 - Fixed multiple checkbox selection display in feedback summary (was showing only one selection)
 - Corrected timing issues with form context updates using chatState.userInput pattern
 - Fixed anonymous feedback showing previous contact information in summary
 - Improved keyboard accessibility for checkboxes with proper focus management
+- Removed broken fallback loop flow that used deprecated `streamMessage` approach
 
 ## [2.0.0-rc.1] - 2025-05-28
 

README.md

@@ -52,7 +52,6 @@ The bot supports several conversation flows:
 - Built-in feedback system with thumbs up/down options after each response
 - Automatic feedback tracking and analytics
 - Users can provide feedback or continue asking questions immediately
-- Negative feedback offers direct path to support ticket creation
 - Requires user to be logged in
 
 ### 🎫 Support Ticket Flows
@@ -238,7 +237,7 @@ REACT_APP_API_KEY=your-api-key-here
 
 The bot integrates with the ACCESS Q&A API and JSM (Jira Service Management) for ticket creation. Configure your backend endpoints to handle:
 
-- Q&A queries with streaming responses
+- Q&A queries with JSON responses
 - Support ticket creation with ProForma field mapping
 - File upload processing
 - User authentication and session management

build/static/js/main.js

@@ -1,6 +1,6 @@
 {
   "name": "@snf/access-qa-bot",
-  "version": "2.4.8-debug.0",
+  "version": "2.6.0-debug.3",
   "private": false,
   "homepage": ".",
   "description": "ACCESS Q&A Bot React Component with support ticket creation, feedback collection, and ProForma integration",
@@ -24,7 +24,7 @@
     "@rcb-plugins/html-renderer": "^0.3.1",
     "@rcb-plugins/input-validator": "^0.3.0",
     "@rcb-plugins/markdown-renderer": "^0.3.1",
-    "react-chatbotify": "^2.1.0",
+    "react-chatbotify": "^2.2.0",
     "uuid": "^11.1.0"
   },
   "peerDependencies": {
@@ -45,6 +45,7 @@
     "@eslint/js": "^9.31.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",

build/static/js/main.js.map

@@ -245,4 +245,24 @@ After the package is published to npm, users can install and use it in their pro
 npm install @snf/access-qa-bot
 ```
 
-For more detailed usage instructions and examples, refer to the README.md file.
+For more detailed usage instructions and examples, refer to the README.md file.
+
+## Simple Debug Releases Workflow
+
+For quick debug releases during development:
+
+```bash
+# Update version (e.g., 2.6.0-debug.0 to 2.6.0-debug.1)
+npm version 2.6.0-debug.1
+
+# Build the library
+npm run build:lib
+
+# Publish with debug tag
+npm publish --tag debug --access public
+```
+
+This workflow is useful for:
+- Quick iterations during development
+- Testing specific versions in integration environments
+- Publishing debug versions without affecting the main release process

package-lock.json

@@ -5,6 +5,7 @@ import terser from '@rollup/plugin-terser';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import replace from '@rollup/plugin-replace';
+import json from '@rollup/plugin-json';
 
 import { readFileSync } from 'fs';
 const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'));
@@ -29,6 +30,7 @@ export default [
     ],
     plugins: [
       peerDepsExternal(),
+      json(),
       postcss({
         extensions: ['.css'],
         minimize: true,
@@ -63,6 +65,7 @@ export default [
       globals: {}
     },
     plugins: [
+      json(),
       postcss({
         extensions: ['.css'],
         minimize: true,

package.json

@@ -23,19 +23,24 @@ const BotController = React.forwardRef(({
   const messages = useMessages();
   const chatWindow = useChatWindow();
 
-  const lastOpenRef = useRef(currentOpen);
+  const lastOpenRef = useRef(null); // Start with null to detect initial state
   const fromEventRef = useRef(false);
 
   useLoginStateTransition(isBotLoggedIn);
 
   // Sync open state with chat window when it changes (but not when change came from event)
   useEffect(() => {
     if (!embedded && chatWindow && chatWindow.toggleChatWindow) {
+      // Handle initial state and subsequent changes
       if (lastOpenRef.current !== currentOpen && !fromEventRef.current) {
-        if (chatWindow && chatWindow.toggleChatWindow) {
-          chatWindow.toggleChatWindow(currentOpen);
-          lastOpenRef.current = currentOpen;
-        }
+
+        // Use a small delay to ensure chatWindow is fully initialized
+        setTimeout(() => {
+          if (chatWindow && chatWindow.toggleChatWindow) {
+            chatWindow.toggleChatWindow(currentOpen);
+          }
+        }, 0);
+        lastOpenRef.current = currentOpen;
       }
       fromEventRef.current = false;
     }

publishing.md

@@ -7,15 +7,23 @@ import { v4 as uuidv4 } from 'uuid';
 import BotController from './BotController';
 import useThemeColors from '../hooks/useThemeColors';
 import useChatBotSettings from '../hooks/useChatBotSettings';
-import useHandleAIQuery from '../hooks/useHandleAIQuery';
 import useUpdateHeader from '../hooks/useUpdateHeader';
 import useRingEffect from '../hooks/useRingEffect';
 import useFocusableSendButton from '../hooks/useFocusableSendButton';
 import useKeyboardNavigation from '../hooks/useKeyboardNavigation';
 import { DEFAULT_CONFIG, buildWelcomeMessage } from '../config/constants';
 import { createBotFlow } from '../utils/create-bot-flow';
 import { FormProvider, useFormContext } from '../contexts/FormContext';
-
+import packageJson from '../../package.json';
+
+// Build signature for deployment verification (only if debug enabled)
+if (localStorage.getItem('QaBotDebug') === 'true') {
+  // eslint-disable-next-line no-console
+  console.info(
+    `%c🤖 ACCESS QA Bot | v${packageJson.version} | react-chatbotify v2.2.0 [${new Date().toISOString().slice(0,10)}]`,
+    'background: #107180; color: white; padding: 8px; border-radius: 3px; font-weight: bold;'
+  );
+}
 
 const generateSessionId = () => {
   return `qa_bot_session_${uuidv4()}`;
@@ -55,12 +63,11 @@ const QABotInternal = React.forwardRef((props, botRef) => {
     accessId
   } = props;
 
-  const finalApiKey = apiKey || ((typeof process !== 'undefined' && process.env) ? process.env.REACT_APP_API_KEY : null);
+  const finalApiKey = apiKey || process.env.REACT_APP_API_KEY || null;
 
   const [isBotLoggedIn, setIsBotLoggedIn] = useState(isLoggedIn !== undefined ? isLoggedIn : false);
   const sessionIdRef = useRef(getOrCreateSessionId());
   const sessionId = sessionIdRef.current;
-  const [currentQueryId, setCurrentQueryId] = useState(null);
 
   // Use Form Context instead of local state
   const { ticketForm, feedbackForm, updateTicketForm, updateFeedbackForm, resetTicketForm, resetFeedbackForm } = useFormContext();
@@ -72,9 +79,6 @@ const QABotInternal = React.forwardRef((props, botRef) => {
     }
   }, [isLoggedIn]);
 
-  // Initialize currentQueryId as null - will be set by useHandleAIQuery
-  // when actual queries are processed
-
   // Listen for chat window toggle events from react-chatbotify
   useEffect(() => {
     if (!embedded && onOpenChange) {
@@ -83,6 +87,7 @@ const QABotInternal = React.forwardRef((props, botRef) => {
           botRef.current._markAsUserInteraction();
         }
         const newOpenState = event.data.newState;
+
         onOpenChange(newOpenState);
       };
       window.addEventListener('rcb-toggle-chat-window', handleChatWindowToggle);
@@ -100,13 +105,11 @@ const QABotInternal = React.forwardRef((props, botRef) => {
   const chatBotSettings = useChatBotSettings({
     themeColors,
     embedded,
-    defaultOpen: open,
+    defaultOpen: false, // Always start closed for floating mode, controlled via BotController
     isLoggedIn: isBotLoggedIn,
     loginUrl
   });
 
-  const handleQuery = useHandleAIQuery(finalApiKey, sessionId, setCurrentQueryId);
-
   const formContext = useMemo(() => ({
     ticketForm: ticketForm || {},
     feedbackForm: feedbackForm || {},
@@ -116,13 +119,14 @@ const QABotInternal = React.forwardRef((props, botRef) => {
     resetFeedbackForm
   }), [ticketForm, feedbackForm, updateTicketForm, updateFeedbackForm, resetTicketForm, resetFeedbackForm]);
 
+  // loads plugins to be passed into chatbot, matching pattern in docs
+  const plugins = [HtmlRenderer(), MarkdownRenderer(), InputValidator()];
+
   const flow = useMemo(() => createBotFlow({
     welcomeMessage,
     isBotLoggedIn,
     loginUrl,
-    handleQuery,
     sessionId,
-    currentQueryId,
     ticketForm,
     setTicketForm: updateTicketForm,
     feedbackForm,
@@ -134,7 +138,7 @@ const QABotInternal = React.forwardRef((props, botRef) => {
       name: userName || null,
       accessId: accessId || null
     }
-  }), [welcomeMessage, isBotLoggedIn, loginUrl, handleQuery, sessionId, currentQueryId, ticketForm, feedbackForm, updateTicketForm, updateFeedbackForm, formContext, finalApiKey, userEmail, userName, accessId]);
+  }), [welcomeMessage, isBotLoggedIn, loginUrl, sessionId, ticketForm, feedbackForm, updateTicketForm, updateFeedbackForm, formContext, finalApiKey, userEmail, userName, accessId]);
 
   useUpdateHeader(isBotLoggedIn, containerRef);
   useRingEffect(ringEffect, containerRef);
@@ -177,7 +181,7 @@ const QABotInternal = React.forwardRef((props, botRef) => {
             key={`chatbot-${sessionId}-${isBotLoggedIn}`}
             settings={chatBotSettings}
             flow={flow}
-            plugins={[HtmlRenderer(), MarkdownRenderer(), InputValidator()]}
+            plugins={plugins}
           />
           {/* Live region for screen reader announcements */}
           <div