feat: Enhance AI Chat Widget functionality and styling (#398)

* feat: Enhance AI Chat Widget functionality and styling

- Implement dynamic visibility for the AI chat button based on API health checks.
- Inject CSS styles to control button display on different screen sizes.
- Update health check logic to manage button visibility more effectively.
- Remove redundant CSS rules related to button visibility, streamlining the code.

* style: dark mode ghost/outlined button for AI chat buttons

* add /test to gitignore

---------

Co-authored-by: Jenks <jenks@babylonlabs.io>

Author: kkkk666

src/components/ChatWidget.css

@@ -200,6 +200,21 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
+/* Dark mode: ghost/outlined style */
+[data-theme='dark'] .chat-trigger-btn {
+  background: transparent;
+  color: rgb(var(--docs-color-primary-100));
+  border: 1px solid rgb(var(--docs-color-primary-100));
+}
+
+[data-theme='dark'] .chat-trigger-btn:hover {
+  transform: scale(1.05);
+  border-color: rgb(var(--docs-color-primary-200));
+  color: #33C5CE;
+  background: transparent;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
 /* Send Button Styles */
 .chat-input button[type="submit"] {
   border: none !important;

src/components/ChatWidget.tsx

@@ -172,33 +172,65 @@ export default function ChatWidget() {
 
   const apiBaseUrl = siteConfig.customFields?.apiBaseUrl || '/api';
 
-  // Check API health on mount
+  // Style tag ID for AI button visibility
+  const STYLE_TAG_ID = 'babylon-ai-button-style';
+
+  // Check API health on mount - inject style tag to show button when API is available
   useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // Inject or remove style tag to control button visibility
+    const setButtonVisible = (visible: boolean) => {
+      let styleTag = document.getElementById(STYLE_TAG_ID) as HTMLStyleElement | null;
+      
+      if (visible) {
+        // Create style tag if it doesn't exist
+        if (!styleTag) {
+          styleTag = document.createElement('style');
+          styleTag.id = STYLE_TAG_ID;
+          document.head.appendChild(styleTag);
+        }
+        // CSS to show the button - this overrides the default display:none
+        styleTag.textContent = `
+          .header-ai-chat-link { display: flex !important; }
+          .navbar-sidebar .header-ai-chat-link { display: inline-flex !important; }
+          @media (max-width: 768px) {
+            .navbar__items .header-ai-chat-link { display: none !important; }
+          }
+        `;
+      } else {
+        // Remove style tag to hide button (falls back to CSS default: display:none)
+        if (styleTag) {
+          styleTag.remove();
+        }
+      }
+    };
+
     const checkHealth = async () => {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 5000);
+      
       try {
-        const response = await fetch(`${apiBaseUrl}/health`);
-        if (response.ok) {
-          setIsApiHealthy(true);
-          // Show header AI button
-          document.body.classList.add('ai-chat-available');
-        } else {
-          setIsApiHealthy(false);
-          // Hide header AI button
-          document.body.classList.remove('ai-chat-available');
-        }
+        const response = await fetch(`${apiBaseUrl}/health`, {
+          signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        
+        const healthy = response.ok;
+        setIsApiHealthy(healthy);
+        setButtonVisible(healthy);
       } catch (error) {
+        clearTimeout(timeoutId);
         console.error('Health check failed:', error);
         setIsApiHealthy(false);
-        // Hide header AI button
-        document.body.classList.remove('ai-chat-available');
+        setButtonVisible(false);
       }
     };
+
     checkHealth();
-    
-    // Cleanup on unmount
-    return () => {
-      document.body.classList.remove('ai-chat-available');
-    };
+
+    // Cleanup: remove style tag when component unmounts (optional, keeps it clean)
+    // Note: We don't remove it because we want the button to stay visible across navigations
   }, [apiBaseUrl]);
 
   // Fetch token limits on mount (only if API is healthy)

src/css/custom.css

@@ -1158,7 +1158,6 @@ details p {
   @apply !text-xs;
 }
 
-/* Hide AI header button on small screens, keep on desktop */
 @media (max-width: 768px) {
   .navbar__items .header-ai-chat-link,
   .navbar-sidebar .header-ai-chat-link {
@@ -1257,6 +1256,10 @@ article ul {
   content: url('data:image/svg+xml,<svg class="sidebar-icon-header ___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.76 6.43a2 2 0 1 1 2.82 2.82 2 2 0 0 1-2.82-2.82Zm2.11.7a1 1 0 1 0-1.4 1.41 1 1 0 0 0 1.4-1.4ZM9.44 13.6l.6.6a1.5 1.5 0 0 0 1.71.3l1.12 1.12c.2.2.51.2.7 0L15 14.2c.86-.86.96-2.17.31-3.14l.85-.85a6.3 6.3 0 0 0 1.56-6.33 2.43 2.43 0 0 0-1.6-1.6A6.3 6.3 0 0 0 9.8 3.86l-.85.85A2.5 2.5 0 0 0 5.8 5L4.38 6.43a.5.5 0 0 0 0 .7L5.5 8.27a1.5 1.5 0 0 0 .3 1.7l.6.61-1.21.73a.5.5 0 0 0-.1.78l2.83 2.83a.5.5 0 0 0 .79-.1l.73-1.21Zm7.32-9.42a5.3 5.3 0 0 1-1.3 5.33l-4 4a.5.5 0 0 1-.7 0l-1.07-1.07-2.12-2.12L6.5 9.24a.5.5 0 0 1 0-.7l3.99-4a5.3 5.3 0 0 1 5.33-1.3c.44.13.8.48.93.93ZM5.8 14.91a.5.5 0 0 0-.7-.7l-1.77 1.76a.5.5 0 1 0 .7.7l1.77-1.76ZM4.4 12.79c.2.2.2.5 0 .7l-.7.71a.5.5 0 1 1-.72-.7l.71-.71c.2-.2.51-.2.71 0Zm2.83 3.53a.5.5 0 1 0-.7-.7l-.72.7a.5.5 0 1 0 .71.71l.71-.7Z" fill="currentColor"></path></svg>');
 }
 
+.networks_sidebar_header > div > a::before {
+  @apply mt-1 mr-2;
+  content: url('data:image/svg+xml,<svg class="sidebar-icon-header ___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5c0-.28.22-.5.5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5Zm0 10c0-.83.67-1.5 1.5-1.5h13a1.5 1.5 0 0 1 0 3h-13A1.5 1.5 0 0 1 2 14.5ZM3 8a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H3Z" fill="currentColor"></path></svg>');
+}
 
 .research_sidebar_header > div > a::before {
   @apply mt-1 mr-2;
@@ -1310,6 +1313,10 @@ html[data-theme='dark'] .the_launch_sidebar_header > div > a::before {
   content: url('data:image/svg+xml,<svg fill="currentColor" class="sidebar-icon-header ___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.76 6.43a2 2 0 1 1 2.82 2.82 2 2 0 0 1-2.82-2.82Zm2.11.7a1 1 0 1 0-1.4 1.41 1 1 0 0 0 1.4-1.4ZM9.44 13.6l.6.6a1.5 1.5 0 0 0 1.71.3l1.12 1.12c.2.2.51.2.7 0L15 14.2c.86-.86.96-2.17.31-3.14l.85-.85a6.3 6.3 0 0 0 1.56-6.33 2.43 2.43 0 0 0-1.6-1.6A6.3 6.3 0 0 0 9.8 3.86l-.85.85A2.5 2.5 0 0 0 5.8 5L4.38 6.43a.5.5 0 0 0 0 .7L5.5 8.27a1.5 1.5 0 0 0 .3 1.7l.6.61-1.21.73a.5.5 0 0 0-.1.78l2.83 2.83a.5.5 0 0 0 .79-.1l.73-1.21Zm7.32-9.42a5.3 5.3 0 0 1-1.3 5.33l-4 4a.5.5 0 0 1-.7 0l-1.07-1.07-2.12-2.12L6.5 9.24a.5.5 0 0 1 0-.7l3.99-4a5.3 5.3 0 0 1 5.33-1.3c.44.13.8.48.93.93ZM5.8 14.91a.5.5 0 0 0-.7-.7l-1.77 1.76a.5.5 0 1 0 .7.7l1.77-1.76ZM4.4 12.79c.2.2.2.5 0 .7l-.7.71a.5.5 0 1 1-.72-.7l.71-.71c.2-.2.51-.2.71 0Zm2.83 3.53a.5.5 0 1 0-.7-.7l-.72.7a.5.5 0 1 0 .71.71l.71-.7Z" fill="white"></path></svg>');
 }
 
+html[data-theme='dark'] .networks_sidebar_header > div > a::before {
+  @apply mt-1 mr-2;
+  content: url('data:image/svg+xml,<svg fill="currentColor" class="sidebar-icon-header ___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5c0-.28.22-.5.5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5Zm0 10c0-.83.67-1.5 1.5-1.5h13a1.5 1.5 0 0 1 0 3h-13A1.5 1.5 0 0 1 2 14.5ZM3 8a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H3Z" fill="white"></path></svg>');
+}
 
 
 html[data-theme='dark'] .architecture_sidebar_header > div > a::before {
@@ -1794,12 +1801,12 @@ div:has(> .openapi-tabs__schema-container) {
 /* CSS for hello bar ends*/
 
 
-/* AI Header Button Styles - Updated Override */
+/* AI Header Button Styles - Hidden by default, shown via injected style when API available */
 .header-ai-chat-link {
-  display: none; /* Hidden by default until health check passes */
+  display: none; /* Hidden by default */
   align-items: center;
   padding: 0.4rem 1rem !important;
-  background-color: var(--ifm-color-primary) !important; /* Match Ask Babylon AI */
+  background-color: var(--ifm-color-primary) !important;
   color: #fff !important;
   border-radius: 8px !important;
   font-weight: 700;
@@ -1809,10 +1816,7 @@ div:has(> .openapi-tabs__schema-container) {
   border: none !important;
 }
 
-/* Show AI chat button only when API is healthy */
-body.ai-chat-available .header-ai-chat-link {
-  display: flex;
-}
+/* Note: Button visibility is controlled by dynamically injected <style> tag in ChatWidget.tsx */
 
 .header-ai-chat-link:hover {
   filter: brightness(0.9); /* Simple darkening for hover */
@@ -1822,6 +1826,23 @@ body.ai-chat-available .header-ai-chat-link {
   box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
 }
 
+/* Dark mode: ghost/outlined button style */
+html[data-theme='dark'] .header-ai-chat-link {
+  background-color: transparent !important;
+  color: rgb(var(--docs-color-primary-100)) !important;
+  border: 1px solid rgb(var(--docs-color-primary-100)) !important;
+  box-shadow: none !important;
+}
+
+html[data-theme='dark'] .header-ai-chat-link:hover {
+  filter: none !important;
+  border-color: rgb(var(--docs-color-primary-200)) !important;
+  color: #33C5CE !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  transform: none;
+}
+
 .header-ai-chat-link::before {
   content: '';
   width: 20px;
@@ -1867,9 +1888,8 @@ body.ai-chat-available .header-ai-chat-link {
   }
 }
 
-/* Mobile sidebar menu - show button with text */
-body.ai-chat-available .navbar-sidebar .header-ai-chat-link {
-  display: inline-flex;
+/* Mobile sidebar menu - styles only, visibility controlled by injected style */
+.navbar-sidebar .header-ai-chat-link {
   align-items: center;
   justify-content: center;
   width: auto;

src/theme/ThemedImage/index.js

@@ -18,10 +18,20 @@ export default function ThemedImage(props) {
   const { colorMode } = useColorMode();
   const curSrc = getSrcFromThemedImageProps(props, colorMode);
   const { isLogo, ...restProps } = props;
-  // Exclude navbar logo from Zoom effect
-  if (isLogo || (typeof props.src === 'string' && props.src.includes('logo'))) {
+  
+  // Exclude navbar/footer logo from Zoom effect
+  // Check multiple sources for 'logo' in path
+  const isLogoImage = 
+    isLogo ||
+    (typeof props.src === 'string' && props.src.includes('logo')) ||
+    (props.sources?.light && props.sources.light.includes('logo')) ||
+    (props.sources?.dark && props.sources.dark.includes('logo')) ||
+    (typeof curSrc === 'string' && curSrc.includes('logo'));
+  
+  if (isLogoImage) {
     return <OriginalThemedImage {...restProps} />;
   }
+  
   return (
     <Zoom key={curSrc + colorMode}>
       <OriginalThemedImage {...restProps} />