fix: css and minor behaviour issues

Author: Guillermo Alejandro Gallardo Diez

website/src/components/FeedbackComponent.js

@@ -6,7 +6,8 @@ export function FeedbackComponent() {
   const [comment, setComment] = useState('');
   const [showComment, setShowComment] = useState(false);
 
-  const handleFeedback = (type) => {
+  const handleFeedback = (event, type) => {
+    event.preventDefault();
     setFeedback(type);
     setShowComment(true);
   };
@@ -34,38 +35,40 @@ export function FeedbackComponent() {
   };
 
   if (isSubmitted) {
-    return (
+    return <>
+      <hr style={{marginBottom: "1rem"}} />
       <div className="feedback-container">
         <div className="feedback-success">
           <span className="feedback-success-icon">✓</span>
           <span>Thanks for your feedback!</span>
         </div>
       </div>
-    );
+    </>
   }
 
-  return (
+  return <>
+    <hr style={{marginBottom: "1rem"}} />
     <div className="feedback-container">
       {!showComment ? (
         <div className="feedback-question">
           <span className="feedback-text">Was this page helpful?</span>
           <div className="feedback-buttons">
-            <button 
-              className="feedback-btn feedback-btn-yes"
-              onClick={() => handleFeedback('yes')}
-              title="Yes, this was helpful"
+            <a 
+              className="feedback-btn"
+              href="#"
+              onClick={(event) => handleFeedback(event, 'yes')}
+              // title="Yes, this was helpful"
             >
-              <span className="feedback-emoji">👍</span>
-              <span>Yes</span>
-            </button>
-            <button 
-              className="feedback-btn feedback-btn-no"
-              onClick={() => handleFeedback('no')}
-              title="No, this wasn't helpful"
+              👍 Yes
+            </a>
+            <a 
+              className="feedback-btn"
+              href="#"
+              onClick={(event) => handleFeedback(event, 'no')}
+              // title="No, this wasn't helpful"
             >
-              <span className="feedback-emoji">👎</span>
-              <span>No</span>
-            </button>
+              👎 No
+            </a>
           </div>
         </div>
       ) : (
@@ -93,5 +96,5 @@ export function FeedbackComponent() {
         </div>
       )}
     </div>
-  );
+  </>;
 }

website/src/theme/SearchBar/components/AIChatInSearch.tsx

@@ -134,7 +134,7 @@ export default function AIChatInSearch({
 
             <div className={styles.aiChatRow}>
               <div className={styles.aiChatRowContent}>
-                {turn.assistantText?.trim() ? (
+                {turn.assistantText? (
                   <div className={styles.aiChatAnswer}>
                     <MarkdownRenderer part={turn.assistantText} isDarkTheme={colorMode === 'dark'} />
                   </div>

website/src/theme/SearchBar/components/ChatbotTrigger.tsx

@@ -1,13 +1,45 @@
-import React, { useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { ArrowUp } from 'lucide-react';
 import { useLocation } from '@docusaurus/router';
+import { useWindowSize } from '@docusaurus/theme-common';
 import styles from '../styles.module.css';
 
 export default function ChatbotTrigger() {
   const [value, setValue] = useState('');
+  const [isStuck, setIsStuck] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const windowSize = useWindowSize();
   const { pathname } = useLocation();
 
+  useEffect(() => {
+    if (windowSize === 'mobile') {
+      setIsStuck(false);
+      return;
+    }
+
+    const updateStuckState = () => {
+      const element = containerRef.current;
+      if (!element) return;
+
+      const rect = element.getBoundingClientRect();
+      const stickyBottom = Number.parseFloat(getComputedStyle(element).bottom) || 0;
+      const viewportBottom = window.innerHeight;
+      const targetBottom = viewportBottom - stickyBottom;
+
+      setIsStuck(Math.abs(rect.bottom - targetBottom) < 1.5);
+    };
+
+    updateStuckState();
+    window.addEventListener('scroll', updateStuckState, { passive: true });
+    window.addEventListener('resize', updateStuckState);
+
+    return () => {
+      window.removeEventListener('scroll', updateStuckState);
+      window.removeEventListener('resize', updateStuckState);
+    };
+  }, [windowSize]);
+
   const getPageMdUrl = () => {
     const clean = pathname.replace(/\/$/, '');
     return `${clean}.md`;
@@ -30,17 +62,25 @@ export default function ChatbotTrigger() {
     }
   };
 
-  return (
-    <div className={styles.chatbotTrigger}>
+  if (windowSize === 'mobile') {
+    return null;
+  }
+
+  return <>
+    <hr />
+    <div
+      ref={containerRef}
+      className={`${styles.chatbotTrigger} ${isStuck ? styles.chatbotTriggerStuck : ''}`}
+    >
       <textarea
         ref={textareaRef}
         className={styles.chatbotTriggerTextarea}
-        placeholder="Ask a question..."
+        placeholder="Talk with this document..."
         value={value}
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={handleKeyDown}
         rows={2}
-        aria-label="Ask the AI assistant"
+        aria-label="Talk with this document"
       />
       <div className={styles.chatbotTriggerActions}>
         <button
@@ -55,5 +95,5 @@ export default function ChatbotTrigger() {
         </button>
       </div>
     </div>
-  );
+  </>;
 }

website/src/theme/SearchBar/components/useStreamingChat.ts

@@ -21,6 +21,8 @@ interface UseStreamingChatOptions {
 }
 
 const API_URL = 'https://docs-mcp-f18b.onrender.com/api/chat';
+// const API_URL = 'http://localhost:3001/api/chat';
+// const API_URL = 'http://localhost:3001/api/chat/mock';
 
 const metadataSchema = z.object({
   sources: z.array(z.object({ title: z.string(), path: z.string() })).optional(),
@@ -30,7 +32,7 @@ export function extractMessageText(message: ChatUIMessage): string {
   return message.parts
     .filter((p): p is { type: 'text'; text: string } => p.type === 'text')
     .map((p) => p.text)
-    .join('');
+    .join('\n\n');
 }
 
 export function useStreamingChat({ savedConversation, onSaveConversation }: UseStreamingChatOptions) {

website/src/theme/SearchBar/styles.module.css

@@ -790,8 +790,7 @@
   }
 
   .chatbotTrigger {
-    margin: 1rem 0 0.75rem 0;
-    width: 82%;
+    margin: 0 auto;
   }
 }
 
@@ -920,38 +919,46 @@
 
 .chatbotTrigger {
   position: sticky;
-  bottom: 1rem;
-  z-index: 10;
+  bottom: 2rem;
   display: flex;
-  align-items: flex-end;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  margin: 1rem 0 0.75rem 0;
-  background: var(--ifm-background-surface-color);
-  border-radius: 12px;
-  backdrop-filter: blur(8px);
+  padding: .5rem .8rem;
+  margin: 0 auto;
+  border-radius: 8px;
+  background-color: var(--ifm-background-surface-color);
   border: 1px solid var(--ifm-color-emphasis-200);
+  width: 100%;
+  max-width: 100%;
+  transition: max-width 0.2s ease;
+}
+
+.chatbotTriggerStuck {
+  max-width: 60%;
 }
 
 .chatbotTriggerTextarea {
   flex: 1;
   border: none;
   outline: none;
-  resize: none;
+  backdrop-filter: blur(4px);
   background: transparent;
+  resize: none;
   font-size: 0.9375rem;
-  color: var(--ifm-font-color-base);
   font-family: inherit;
   line-height: 1.5;
   padding: 0;
   margin: 0;
-  min-height: 1.5rem;
+  max-height: 1.5rem;
 }
 
 .chatbotTriggerTextarea::placeholder {
   color: var(--ifm-color-emphasis-500);
 }
 
+[data-theme='light'] .chatbotTriggerTextarea::placeholder {
+  color: var(--ifm-color-emphasis-700);
+  opacity: 1;
+}
+
 .chatbotTriggerActions {
   display: flex;
   align-items: center;
@@ -963,8 +970,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   border: none;
   border-radius: 50%;
   cursor: pointer;

website/static/css/custom.scss

@@ -661,10 +661,7 @@ video+p>em,img+p>em,img+em, .monaco+em {
 // ============================================================================
 
 .feedback-container {
-  margin: 2rem 0.8em 2rem 1.75rem;
-  padding: 1rem;
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 8px;
+  padding: 0 1rem 1rem 1rem;
   font-size: 0.9rem;
 }
 
@@ -681,14 +678,14 @@ video+p>em,img+p>em,img+em, .monaco+em {
 }
 
 .feedback-btn {
-  padding: 0.375rem 0.75rem;
+  padding: 0.1rem 0.75rem;
   border: 1px solid var(--ifm-color-emphasis-300);
   border-radius: 6px;
-  background-color: var(--ifm-background-surface-color);
   color: var(--ifm-color-content);
   font-size: 0.85rem;
   cursor: pointer;
   transition: all 0.2s ease;
+  text-decoration: none;
 }
 
 .feedback-btn:hover {