From 06fef43b581741fc9e9872a2512ef45e6394a6a5 Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Wed, 25 Feb 2026 19:15:36 -0300
Subject: [PATCH 1/3] feat: update chatbot

---
 website/src/theme/DocItem/Layout/index.js     |   2 +
 .../SearchBar/components/AIChatInSearch.tsx   |  16 +-
 .../SearchBar/components/ChatbotTrigger.tsx   |  59 ++++++
 .../SearchBar/components/useStreamingChat.ts  |   3 +-
 website/src/theme/SearchBar/index.tsx         |  18 +-
 website/src/theme/SearchBar/styles.module.css | 184 +++++++++++++++++-
 6 files changed, 276 insertions(+), 6 deletions(-)
 create mode 100644 website/src/theme/SearchBar/components/ChatbotTrigger.tsx

diff --git a/website/src/theme/DocItem/Layout/index.js b/website/src/theme/DocItem/Layout/index.js
index 873fecb1f36..489c6838da0 100644
--- a/website/src/theme/DocItem/Layout/index.js
+++ b/website/src/theme/DocItem/Layout/index.js
@@ -15,6 +15,7 @@ import styles from './styles.module.css';
 
 
 import { FeedbackComponent } from '../../../components/FeedbackComponent';
+import ChatbotTrigger from '../../SearchBar/components/ChatbotTrigger';
 
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
@@ -57,6 +58,7 @@ export default function DocItemLayout({ children }) {
             <DocItemContent>{children}</DocItemContent>
           </article>
           {!isMain && <>
+            <ChatbotTrigger />
             <FeedbackComponent />
             <DocItemPaginator />
             <DocItemFooter />
diff --git a/website/src/theme/SearchBar/components/AIChatInSearch.tsx b/website/src/theme/SearchBar/components/AIChatInSearch.tsx
index 40769cf6eb4..1b0438d3642 100644
--- a/website/src/theme/SearchBar/components/AIChatInSearch.tsx
+++ b/website/src/theme/SearchBar/components/AIChatInSearch.tsx
@@ -15,6 +15,11 @@ interface AIChatInSearchProps {
   onSaveConversation?: (data: SavedConversation) => void;
   onClearConversation?: () => void;
   savedConversation?: SavedConversation | null;
+  initialMessage?: string | null;
+}
+
+function getDisplayText(text: string): string {
+  return text.replace(/\n\n\[Page:[^\]]*\]$/, '').trim();
 }
 
 const SUGGESTIONS = [
@@ -29,6 +34,7 @@ export default function AIChatInSearch({
   onSaveConversation,
   onClearConversation,
   savedConversation,
+  initialMessage,
 }: AIChatInSearchProps) {
   const { colorMode } = useColorMode();
 
@@ -42,6 +48,14 @@ export default function AIChatInSearch({
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const initialMessageSentRef = useRef(false);
+
+  useEffect(() => {
+    if (initialMessage && !initialMessageSentRef.current) {
+      initialMessageSentRef.current = true;
+      sendMessage(initialMessage);
+    }
+  }, [initialMessage, sendMessage]);
 
   const prevIsLoadingRef = useRef(false);
   useEffect(() => {
@@ -113,7 +127,7 @@ export default function AIChatInSearch({
             {index > 0 && <hr className={styles.aiChatDelimiter} />}
 
             <div className={styles.aiChatRow}>
-              <p className={styles.aiChatUserQuery}>{turn.userText}</p>
+              <p className={styles.aiChatUserQuery}>{getDisplayText(turn.userText)}</p>
             </div>
 
             <hr className={styles.aiChatDelimiter} />
diff --git a/website/src/theme/SearchBar/components/ChatbotTrigger.tsx b/website/src/theme/SearchBar/components/ChatbotTrigger.tsx
new file mode 100644
index 00000000000..5531d1065ad
--- /dev/null
+++ b/website/src/theme/SearchBar/components/ChatbotTrigger.tsx
@@ -0,0 +1,59 @@
+import React, { useState, useRef } from 'react';
+import { ArrowUp } from 'lucide-react';
+import { useLocation } from '@docusaurus/router';
+import styles from '../styles.module.css';
+
+export default function ChatbotTrigger() {
+  const [value, setValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { pathname } = useLocation();
+
+  const getPageMdUrl = () => {
+    const clean = pathname.replace(/\/$/, '');
+    return `${clean}.md`;
+  };
+
+  const submit = () => {
+    const text = value.trim();
+    if (!text) return;
+    setValue('');
+    const message = `${text}\n\n[Page: ${getPageMdUrl()}]`;
+    console.log(message);
+    
+    window.dispatchEvent(new CustomEvent('open-chatbot', { detail: { message } }));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  };
+
+  return (
+    <div className={styles.chatbotTrigger}>
+      <textarea
+        ref={textareaRef}
+        className={styles.chatbotTriggerTextarea}
+        placeholder="Ask a question..."
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        rows={2}
+        aria-label="Ask the AI assistant"
+      />
+      <div className={styles.chatbotTriggerActions}>
+        <button
+          type="button"
+          className={`${styles.chatbotTriggerIconBtn} ${styles.chatbotTriggerIconBtnGreen}`}
+          onClick={submit}
+          disabled={!value.trim()}
+          aria-label="Send message"
+          title="Send message"
+        >
+          <ArrowUp size={15} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/theme/SearchBar/components/useStreamingChat.ts b/website/src/theme/SearchBar/components/useStreamingChat.ts
index 809524f517f..2fe420cd36c 100644
--- a/website/src/theme/SearchBar/components/useStreamingChat.ts
+++ b/website/src/theme/SearchBar/components/useStreamingChat.ts
@@ -19,8 +19,7 @@ interface UseStreamingChatOptions {
   savedConversation?: SavedConversation | null;
   onSaveConversation?: (data: SavedConversation) => void;
 }
-
-const API_URL = 'https://docs-mcp-f18b.onrender.com/api/chat';
+const API_URL = 'http://localhost:3001/api/chat';
 
 const metadataSchema = z.object({
   sources: z.array(z.object({ title: z.string(), path: z.string() })).optional(),
diff --git a/website/src/theme/SearchBar/index.tsx b/website/src/theme/SearchBar/index.tsx
index a126ae11f85..cc77563f26b 100644
--- a/website/src/theme/SearchBar/index.tsx
+++ b/website/src/theme/SearchBar/index.tsx
@@ -66,6 +66,7 @@ export default function SearchBar(): JSX.Element {
   const [client, setClient] = useState<MeiliSearch | null>(null);
   const [mode, setMode] = useState<'search' | 'askDocs'>('search');
   const [savedConversation, setSavedConversation] = useState<SavedConversation | null>(null);
+  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
@@ -81,6 +82,7 @@ export default function SearchBar(): JSX.Element {
     setIsOpen(false);
     setQuery('');
     setMode('search');
+    setPendingMessage(null);
   }, []);
 
   useEffect(() => {
@@ -96,6 +98,17 @@ export default function SearchBar(): JSX.Element {
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [closeModal]);
 
+  useEffect(() => {
+    const handleOpenChatbot = (e: Event) => {
+      const { message } = (e as CustomEvent<{ message: string }>).detail;
+      setPendingMessage(message);
+      setMode('askDocs');
+      setIsOpen(true);
+    };
+    window.addEventListener('open-chatbot', handleOpenChatbot);
+    return () => window.removeEventListener('open-chatbot', handleOpenChatbot);
+  }, []);
+
   useEffect(() => {
     if (isOpen) setTimeout(() => inputRef.current?.focus(), 100);
   }, [isOpen]);
@@ -236,7 +249,7 @@ export default function SearchBar(): JSX.Element {
             </div>
 
             {mode === 'search' && (
-              <>
+              <div className={styles.searchContent}>
                 <div className={styles.results} ref={resultsRef}>
                   {results.length === 0 && query && !loading && (
                     <div className={styles.noResults}>
@@ -285,7 +298,7 @@ export default function SearchBar(): JSX.Element {
                     ))}
                   </div>
                 </div>
-              </>
+              </div>
             )}
 
             {mode === 'askDocs' && (
@@ -293,6 +306,7 @@ export default function SearchBar(): JSX.Element {
                 savedConversation={savedConversation}
                 onSaveConversation={setSavedConversation}
                 onClearConversation={() => setSavedConversation(null)}
+                initialMessage={pendingMessage}
               />
             )}
           </div>
diff --git a/website/src/theme/SearchBar/styles.module.css b/website/src/theme/SearchBar/styles.module.css
index 213916803d9..0769fca3202 100644
--- a/website/src/theme/SearchBar/styles.module.css
+++ b/website/src/theme/SearchBar/styles.module.css
@@ -53,7 +53,7 @@
 .dialogOverlay {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 9999;
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -252,6 +252,11 @@
   transform: translateY(-1px);
 }
 
+/* Search content wrapper */
+.searchContent {
+  display: contents;
+}
+
 /* Results */
 .results {
   max-height: 400px;
@@ -681,6 +686,114 @@
   transform: none;
 }
 
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .dialogOverlay {
+    align-items: stretch;
+    padding-top: 0;
+  }
+
+  .modal {
+    margin: 0;
+    border-radius: 0;
+    max-width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Header: fila 1 = input + X, fila 2 = toggle centrado */
+  .searchHeader {
+    flex-wrap: wrap;
+    padding: 0.875rem 1rem 0;
+    gap: 0;
+    border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  }
+
+  .searchHeaderContent {
+    order: 1;
+    flex: 1;
+    min-height: 40px;
+  }
+
+  .closeButton {
+    order: 2;
+  }
+
+  .modeToggle {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+    padding: 0.625rem 0 0.875rem;
+    background: transparent;
+  }
+
+  .modeToggleBtn {
+    flex: 1;
+    justify-content: center;
+    max-width: 160px;
+  }
+
+  /* Search content wrapper ocupa espacio restante */
+  .searchContent {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* Results toma todo el espacio disponible */
+  .results {
+    max-height: unset;
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Footer (categorías) siempre abajo */
+  .footer {
+    flex-shrink: 0;
+  }
+
+  /* Ocultar scrollbar en categorías */
+  .categoryFilters {
+    scrollbar-width: none;
+  }
+
+  .categoryFilters::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Sugerencias centradas verticalmente */
+  .aiChatMessages {
+    flex: 1;
+    min-height: 0;
+    justify-content: center;
+  }
+
+  .aiChatSuggestions {
+    padding: 1.5rem 1rem;
+  }
+
+  .aiChatSuggestionChip {
+    width: 100%;
+    text-align: left;
+    border-radius: 12px;
+  }
+
+  .aiChatContainer {
+    height: unset;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .chatbotTrigger {
+    margin: 1rem 0 0.75rem 0;
+  }
+}
+
 /* Dark mode - AI Chat */
 [data-theme='dark'] .modeToggleBtnActive {
   background: var(--ifm-color-emphasis-300);
@@ -803,3 +916,72 @@
 [data-theme='dark'] .aiChatSourceLink:hover {
   background: rgba(0, 204, 163, 0.15) !important;
 }
+
+.chatbotTrigger {
+  position: sticky;
+  bottom: 1rem;
+  z-index: 10;
+  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);
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.chatbotTriggerTextarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  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;
+}
+
+.chatbotTriggerTextarea::placeholder {
+  color: var(--ifm-color-emphasis-500);
+}
+
+.chatbotTriggerActions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.375rem;
+}
+
+.chatbotTriggerIconBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  color: white;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.chatbotTriggerIconBtn:hover:not(:disabled) {
+  transform: scale(1.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.chatbotTriggerIconBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.chatbotTriggerIconBtnGreen {
+  background: var(--ifm-color-primary);
+}

From b64822dba7b38d7b1323cdf39ed1ba3d04b7327d Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Wed, 25 Feb 2026 19:16:46 -0300
Subject: [PATCH 2/3] feat: update chatbot

---
 website/src/theme/SearchBar/components/useStreamingChat.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/theme/SearchBar/components/useStreamingChat.ts b/website/src/theme/SearchBar/components/useStreamingChat.ts
index 2fe420cd36c..809524f517f 100644
--- a/website/src/theme/SearchBar/components/useStreamingChat.ts
+++ b/website/src/theme/SearchBar/components/useStreamingChat.ts
@@ -19,7 +19,8 @@ interface UseStreamingChatOptions {
   savedConversation?: SavedConversation | null;
   onSaveConversation?: (data: SavedConversation) => void;
 }
-const API_URL = 'http://localhost:3001/api/chat';
+
+const API_URL = 'https://docs-mcp-f18b.onrender.com/api/chat';
 
 const metadataSchema = z.object({
   sources: z.array(z.object({ title: z.string(), path: z.string() })).optional(),

From 20e14bcb9ffe653ca2b1bda7af3b946baa0cbb8a Mon Sep 17 00:00:00 2001
From: Guillermo Alejandro Gallardo Diez <gagdiez@iR2.local>
Date: Thu, 26 Feb 2026 15:15:47 +0100
Subject: [PATCH 3/3] fix: css and minor behaviour issues

---
 website/src/components/FeedbackComponent.js   | 41 ++++++++-------
 .../SearchBar/components/AIChatInSearch.tsx   |  2 +-
 .../SearchBar/components/ChatbotTrigger.tsx   | 52 ++++++++++++++++---
 .../SearchBar/components/useStreamingChat.ts  |  4 +-
 website/src/theme/SearchBar/styles.module.css | 39 ++++++++------
 website/static/css/custom.scss                |  9 ++--
 6 files changed, 98 insertions(+), 49 deletions(-)

diff --git a/website/src/components/FeedbackComponent.js b/website/src/components/FeedbackComponent.js
index 6077e2fad48..11437c5fe1d 100644
--- a/website/src/components/FeedbackComponent.js
+++ b/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>
-  );
+  </>;
 }
diff --git a/website/src/theme/SearchBar/components/AIChatInSearch.tsx b/website/src/theme/SearchBar/components/AIChatInSearch.tsx
index 1b0438d3642..95478c6ba6d 100644
--- a/website/src/theme/SearchBar/components/AIChatInSearch.tsx
+++ b/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>
diff --git a/website/src/theme/SearchBar/components/ChatbotTrigger.tsx b/website/src/theme/SearchBar/components/ChatbotTrigger.tsx
index 5531d1065ad..420e230de41 100644
--- a/website/src/theme/SearchBar/components/ChatbotTrigger.tsx
+++ b/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>
-  );
+  </>;
 }
diff --git a/website/src/theme/SearchBar/components/useStreamingChat.ts b/website/src/theme/SearchBar/components/useStreamingChat.ts
index 809524f517f..3c2773391a9 100644
--- a/website/src/theme/SearchBar/components/useStreamingChat.ts
+++ b/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) {
diff --git a/website/src/theme/SearchBar/styles.module.css b/website/src/theme/SearchBar/styles.module.css
index d0b9fc1708c..da3f8bcd183 100644
--- a/website/src/theme/SearchBar/styles.module.css
+++ b/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;
diff --git a/website/static/css/custom.scss b/website/static/css/custom.scss
index ea80938e562..a77e7061c4e 100644
--- a/website/static/css/custom.scss
+++ b/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 {