Component-architecture

index.html

@@ -22,22 +22,22 @@ <h3>Bot Configuration</h3>
             <label for="user-logged-in">User logged in</label>
             <i>(toggle to control the bots login state)</i>
         </div>
-        
+
         <div class="form-group">
             <label for="user-email">User Email:</label>
             <input type="email" id="user-email" placeholder="[email protected]" />
         </div>
-        
+
         <div class="form-group">
             <label for="user-name">User Name:</label>
             <input type="text" id="user-name" placeholder="John Doe" />
         </div>
-        
+
         <div class="form-group">
             <label for="accessId">ACCESS ID:</label>
             <input type="text" id="accessId" placeholder="johndoe123" />
         </div>
-        
+
         <button id="update-bot" class="update-button">Update Bot Configuration</button>
         <p class="help-text">Enter user information above and click "Update Bot Configuration" to test pre-populated ticket forms when logged in.</p>
     </div>

local-demo.js

@@ -91,11 +91,11 @@ function recreateBots() {
         bot2Controller.destroy();
         bot2Controller = null;
     }
-    
+
     // Clear containers
     document.getElementById('qa-bot').innerHTML = '';
     document.getElementById('custom-qa-bot').innerHTML = '';
-    
+
     // Recreate with new user info
     initializeQABot();
     initializeEmbeddedBot();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snf/access-qa-bot",
-  "version": "2.4.7",
+  "version": "2.5.1-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": {

src/components/QABot.js

@@ -16,6 +16,10 @@ import { DEFAULT_CONFIG, buildWelcomeMessage } from '../config/constants';
 import { createBotFlow } from '../utils/create-bot-flow';
 import { FormProvider, useFormContext } from '../contexts/FormContext';
 
+// Build signature for deployment verification
+console.info(
+  `%c🤖 ACCESS QA Bot v2.5.1-debug.3 - Header Components Restored + Built-in File Upload + File Validation [${new Date().toISOString().slice(0,10)}]`
+);
 
 const generateSessionId = () => {
   return `qa_bot_session_${uuidv4()}`;
@@ -61,7 +65,7 @@ const QABotInternal = React.forwardRef((props, botRef) => {
   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();
 
@@ -107,15 +111,15 @@ const QABotInternal = React.forwardRef((props, botRef) => {
 
   const handleQuery = useHandleAIQuery(finalApiKey, sessionId, setCurrentQueryId);
 
-  const formContext = useMemo(() => ({ 
-    ticketForm: ticketForm || {}, 
-    feedbackForm: feedbackForm || {}, 
-    updateTicketForm, 
-    updateFeedbackForm, 
-    resetTicketForm, 
-    resetFeedbackForm 
+  const formContext = useMemo(() => ({
+    ticketForm: ticketForm || {},
+    feedbackForm: feedbackForm || {},
+    updateTicketForm,
+    updateFeedbackForm,
+    resetTicketForm,
+    resetFeedbackForm
   }), [ticketForm, feedbackForm, updateTicketForm, updateFeedbackForm, resetTicketForm, resetFeedbackForm]);
-  
+
   const flow = useMemo(() => createBotFlow({
     welcomeMessage,
     isBotLoggedIn,
@@ -159,8 +163,8 @@ const QABotInternal = React.forwardRef((props, botRef) => {
   }, []);
 
   return (
-    <div 
-      className={`qa-bot ${embedded ? "embedded-qa-bot" : ""}`} 
+    <div
+      className={`qa-bot ${embedded ? "embedded-qa-bot" : ""}`}
       ref={containerRef}
       role="region"
       aria-label="Ask ACCESS tool"
@@ -180,18 +184,18 @@ const QABotInternal = React.forwardRef((props, botRef) => {
             plugins={[HtmlRenderer(), MarkdownRenderer(), InputValidator()]}
           />
           {/* Live region for screen reader announcements */}
-          <div 
-            aria-live="polite" 
+          <div
+            aria-live="polite"
             aria-label="Bot response updates"
             className="sr-only"
             id="bot-live-region"
           />
-          
+
           {/* Accessibility help text */}
           <div id="chat-input-help" className="sr-only">
             Type your message and press Enter to send. Use arrow keys to navigate through response options. Press Enter or Space to select an option.
           </div>
-          
+
           {/* Keyboard navigation instructions */}
           <div id="keyboard-help" className="sr-only">
             Available keyboard shortcuts: Arrow keys to navigate options, Enter or Space to select, Tab to move between interactive elements, Escape to close dialogs.

src/hooks/useChatBotSettings.js

@@ -23,11 +23,11 @@ const useChatBotSettings = ({
   loginUrl
 }) => {
   const isBotLoggedIn = isLoggedIn;
-  
+
   // Check if tooltip has been shown in this session
   const hasShownTooltip = sessionStorage.getItem('qa_bot_tooltip_shown');
   const tooltipMode = hasShownTooltip ? 'NEVER' : 'START';
-  
+
   const settings = useMemo(() => {
     return {
       general: {
@@ -94,18 +94,24 @@ const useChatBotSettings = ({
       emoji: {
         disabled: true,
       },
-      fileAttachment: {
-        disabled: true,
-      },
       notification: {
         disabled: true,
       },
       footer: {
         text: (<div key="footer-text"><a href="https://support.access-ci.org/tools/access-qa-tool">About this tool</a>.</div>),
         buttons: [
+          Button.FILE_ATTACHMENT_BUTTON,
+          Button.EMOJI_PICKER_BUTTON,
           <NewChatButton key="new-chat-button" />
         ]
       },
+      fileAttachment: {
+        disabled: false,
+        multiple: true,
+        accept: ".pdf,.png,.jpg,.jpeg,.gif,.doc,.docx,.txt,.csv,.zip",
+        sendFileName: true,
+        showMediaDisplay: false
+      },
       event: {
         rcbToggleChatWindow: true // Enable chat window toggle event
       }