Allow multiline text on the AI homepage (#308)

JakeSCahill · coderabbitai[bot] · web-flow · commit cef9cf82fc2f · 2025-07-02T18:14:36.000+01:00
* Allow multiline text on the AI homepage * 📝 Add docstrings to `ai-textarea` (#309) Docstrings generation was requested by @JakeSCahill. * #308 (comment) The following files were modified: * `src/js/react/components/ChatInterface.jsx` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
diff --git a/src/css/home.css b/src/css/home.css
@@ -44,6 +44,7 @@ body.article.home {
 
 .home .chat-footer-wrapper.fixed-bottom .chat-card {
   height: 100px;
+  overflow-y: auto;
 }
 
 .home .chat-container {
@@ -175,21 +176,32 @@ body.article.home {
 .home .chat-card {
   display: flex;
   flex-direction: column;
-  height: 140px;
+  align-items: stretch; /* allow content to stretch it */
+  max-height: 280px;
+  min-height: 140px;
   border-radius: var(--border-radius-radius-lg);
   background-color: var(--input-color);
   box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.12);
+  transition: height 0.2s ease;
+  overflow-y: auto;
 }
 
 .home .chat-content {
   display: flex;
   align-items: flex-start;
   gap: var(--spacings-spacing-xs);
   padding: var(--spacings-spacing-lg);
-  flex: 1;
+  flex: 1 1 auto;
 }
 
 .home .chat-input {
+  width: 100%;
+  resize: none;
+  overflow: auto;
+  min-height: 40px;
+  max-height: 200px;
+  padding: 10px;
+  line-height: 1.4;
   flex: 1;
   border: none;
   outline: none;
@@ -541,7 +553,7 @@ body.article.home {
   display: flex;
   flex-direction: column;
   padding: 1rem;
-  align-items: start;
+  align-items: flex-start;
   background-color: var(--chip-color);
 }
 
diff --git a/src/js/react/components/ChatInterface.jsx b/src/js/react/components/ChatInterface.jsx
@@ -141,7 +141,11 @@ function ActionButtons({ onReset, onCopy, setCopyToast }) {
   )
 }
 
-// ——— Main ChatInterface ————————————————————————————————————————————————————
+/**
+ * Renders the main chat interface, providing a conversational UI with markdown-rendered answers, feedback and copy/reset actions, animated loading states, and responsive suggestion chips.
+ *
+ * Manages user input, conversation state, and UI responsiveness for both desktop and mobile. Handles dynamic textarea resizing, scroll-to-bottom behavior, and conditional display of header/footer elements based on user interaction. Integrates with the chat backend via the `useChat` hook to submit queries, stop or reset conversations, and display AI-generated suggestions. Also manages inline toast notifications for copy and feedback actions.
+ */
 export default function ChatInterface() {
   const [message, setMessage]               = useState('')
   const [dots, setDots]                     = useState('')
@@ -151,6 +155,12 @@ export default function ChatInterface() {
   const [hasInteracted, setHasInteracted]   = useState(false)
   const [copyToast, setCopyToast]           = useState(null)
   const [feedbackToast, setFeedbackToast]   = useState(null)
+  const textareaRef = useRef(null)
+
+  const resetTextareaHeight = () => {
+    if (!textareaRef.current) return
+    textareaRef.current.style.height = 'unset'
+  }
 
   // Detect mobile vs. desktop breakpoint
   const [isMobile, setIsMobile]         = useState(window.innerWidth < 1150)
@@ -280,6 +290,7 @@ export default function ChatInterface() {
   const handleSubmit = (e) => {
     e.preventDefault()
     doQuery(message)
+    resetTextareaHeight()
   }
 
   const handleReset = () => {
@@ -290,6 +301,7 @@ export default function ChatInterface() {
     setShowScrollDown(false)
     window.scrollTo({ top: 0, behavior: 'smooth' })
     setDropdownOpen(false)
+    resetTextareaHeight()
   }
 
   const handleCopy = async () => {
@@ -458,14 +470,28 @@ export default function ChatInterface() {
           <form onSubmit={handleSubmit}>
             <div className="chat-card">
               <div className="chat-content">
-                <input
-                  className="chat-input"
-                  type="text"
-                  placeholder="How can we help you with Redpanda today?"
-                  value={message}
-                  onChange={(e) => setMessage(e.target.value)}
-                  disabled={isGeneratingAnswer || isPreparingAnswer}
-                />
+              <textarea
+                ref={textareaRef}
+                id="chat-message"
+                name="chat-message"
+                className="chat-input"
+                placeholder="How can we help you with Redpanda today?"
+                value={message}
+                onChange={(e) => {
+                  setMessage(e.target.value)
+
+                  const el = e.target
+                  el.style.height = 'auto'
+                  el.style.height = Math.min(el.scrollHeight, 200) + 'px'
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault()
+                    handleSubmit(e)
+                  }
+                }}
+                disabled={isGeneratingAnswer || isPreparingAnswer}
+              />
               </div>
               <div className="chat-footer">
                 {isPreparingAnswer || isGeneratingAnswer ? (
