Update AutoBot to use new user guide URL and improve mobile UX (#353)

* Initial plan

* Update AutoBot instructions and improve mobile responsiveness

Co-authored-by: MohabMohie <19201898+MohabMohie@users.noreply.github.com>

* Address code review feedback - improve AI instruction clarity and simplify CSS

Co-authored-by: MohabMohie <19201898+MohabMohie@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: MohabMohie <19201898+MohabMohie@users.noreply.github.com>

Author: Copilot

src/components/AutoBot/index.tsx

@@ -34,25 +34,33 @@ SHAFT is an award-winning, all-in-one test automation framework that:
 - Has 40,000+ active users worldwide
 
 CRITICAL RULES - You MUST follow these strictly:
-1. ONLY use information from these verified sources:
-   - SHAFT official documentation: https://shafthq.github.io
-   - SHAFT GitHub repository: https://github.com/shafthq/SHAFT_ENGINE
-2. DO NOT fetch or reference code from any other internet sources
-3. DO NOT make up information, features, or capabilities that are not documented
-4. DO NOT be creative with answers - stick to factual, documented information only
-5. If you don't have verified information about something, you MUST say:
-   "I don't have verified information about this in SHAFT's official documentation. Please check:
-   - Documentation: https://shafthq.github.io
-   - GitHub Issues: https://github.com/shafthq/SHAFT_ENGINE/issues
-   - GitHub Discussions: https://github.com/shafthq/SHAFT_ENGINE/discussions"
+1. BEFORE responding to ANY question, you MUST search your knowledge of the full official SHAFT user guide at https://shaftengine.netlify.app/ to find relevant information.
+2. ONLY use information from these verified sources:
+   - SHAFT official user guide: https://shaftengine.netlify.app/ (PRIMARY SOURCE - search this first)
+   - SHAFT GitHub repository: https://github.com/shafthq/SHAFT_ENGINE (for source code only)
+3. DO NOT fetch or reference code from any other internet sources
+4. DO NOT make up information, features, or capabilities that are not documented
+5. DO NOT be creative with answers - stick to factual, documented information only
+6. ALWAYS share exact links to your sources when providing information
+7. THINK THOROUGHLY before answering - take your time to validate information
+8. ALWAYS validate information from multiple sections of the documentation if possible
+9. When you are NOT 90% or more confident in your answer, you MUST mention your approximate certainty level (e.g., "I'm approximately 70% confident that...")
+10. If you don't have verified information about something, you MUST say:
+    "I don't have verified information about this in SHAFT's official documentation. Please check:
+    - User Guide: https://shaftengine.netlify.app/
+    - GitHub Issues: https://github.com/shafthq/SHAFT_ENGINE/issues
+    - GitHub Discussions: https://github.com/shafthq/SHAFT_ENGINE/discussions"
 
 When answering questions:
-1. Be concise and provide only verified information
-2. Provide code examples ONLY if they exist in official documentation or repository (use proper Java syntax)
-3. Always reference the official documentation at https://shafthq.github.io
-4. Suggest checking the GitHub repository at https://github.com/ShaftHQ/SHAFT_ENGINE for source code
-5. Be friendly but prioritize accuracy over appearing helpful
-6. Never guess or speculate - if unsure, admit it and point to official resources
+1. FIRST, search the entire user guide at https://shaftengine.netlify.app/
+2. Be thorough and deliberate in your research before responding
+3. Provide code examples ONLY if they exist in official documentation or repository (use proper Java syntax)
+4. ALWAYS include the exact link to the relevant page in the user guide where you found the information
+5. For source code references, provide the exact GitHub URL to the relevant file or line
+6. If information comes from multiple pages, cite all relevant sources
+7. Be friendly but prioritize accuracy over appearing helpful
+8. Never guess or speculate - if unsure, admit it and state your confidence level
+9. Take time to validate your answer before providing it
 
 Focus on helping users with:
 - Getting started with SHAFT
@@ -63,7 +71,12 @@ Focus on helping users with:
 - Understanding SHAFT features and capabilities
 - Differences between SHAFT and native Selenium/Appium
 
-Remember: Accuracy is more important than appearing knowledgeable. When in doubt, direct users to official resources.`;
+Remember: 
+- Accuracy is more important than appearing knowledgeable
+- Always cite your exact sources with links
+- Think carefully and validate before answering
+- State your confidence level if less than 90% certain
+- The official user guide at https://shaftengine.netlify.app/ is your PRIMARY source`;
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -152,7 +165,7 @@ Remember: Accuracy is more important than appearing knowledgeable. When in doubt
       console.error('[AutoBot] Error calling Gemini API:', error);
       const errorMessage: Message = {
         role: 'assistant',
-        content: (error as Error).message || 'Sorry, I encountered an error. Please try again or check the documentation at https://shafthq.github.io',
+        content: (error as Error).message || 'Sorry, I encountered an error. Please try again or check the user guide at https://shaftengine.netlify.app/',
         timestamp: new Date(),
       };
       setMessages((prev) => [...prev, errorMessage]);

src/components/AutoBot/styles.module.css

@@ -367,22 +367,121 @@
 
 /* Responsive Design */
 @media (max-width: 768px) {
+  .autoBotContainer {
+    bottom: 16px;
+    right: 16px;
+  }
+
+  .chatButton {
+    width: 56px;
+    height: 56px;
+  }
+
   .chatWindow {
+    position: fixed;
     width: 100vw;
-    height: 100vh;
     border-radius: 0;
     bottom: 0;
     right: 0;
+    left: 0;
+    top: 0;
   }
 
-  .autoBotContainer {
-    bottom: 16px;
-    right: 16px;
+  .chatHeader {
+    padding: 12px 16px;
+  }
+
+  .headerText h3 {
+    font-size: 16px;
+  }
+
+  .statusIndicator {
+    font-size: 11px;
+  }
+
+  .chatMessages {
+    padding: 12px;
+    /* Ensure proper scrolling on mobile */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .messageContent {
+    max-width: 90%;
+  }
+
+  .messageBubble {
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  .messageBubble p {
+    font-size: 14px;
+  }
+
+  .chatInput {
+    padding: 10px 12px;
+  }
+
+  .inputField {
+    font-size: 16px; /* Prevents zoom on iOS */
+    padding: 8px 10px;
+  }
+
+  .sendButton {
+    width: 36px;
+    height: 36px;
+  }
+
+  .chatFooter {
+    padding: 6px 12px;
+    font-size: 10px;
   }
 
+  /* Improve touch targets */
+  .iconButton {
+    width: 36px;
+    height: 36px;
+    min-width: 36px;
+    min-height: 36px;
+  }
+}
+
+/* Additional mobile optimization for smaller screens */
+@media (max-width: 480px) {
   .chatButton {
-    width: 56px;
-    height: 56px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .badge {
+    font-size: 9px;
+    padding: 2px 5px;
+  }
+
+  .headerIcon {
+    font-size: 20px;
+  }
+
+  .headerText h3 {
+    font-size: 15px;
+  }
+
+  .messageAvatar {
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
+  }
+
+  .messageBubble {
+    padding: 7px 10px;
+  }
+
+  .messageBubble p {
+    font-size: 13px;
+  }
+
+  .messageTime {
+    font-size: 9px;
   }
 }