Improve Chat Input with Auto-Sizing Textarea

examples/server/webui/src/components/ChatScreen.tsx

@@ -1,11 +1,13 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { CallbackGeneratedChunk, useAppContext } from '../utils/app.context';
 import ChatMessage from './ChatMessage';
 import { CanvasType, Message, PendingMessage } from '../utils/types';
 import { classNames, cleanCurrentUrl, throttle } from '../utils/misc';
 import CanvasPyInterpreter from './CanvasPyInterpreter';
 import StorageUtils from '../utils/storage';
 import { useVSCodeContext } from '../utils/llama-vscode';
+import { useAutosizeTextarea, AutosizeTextareaApi } from './useAutosizeTextarea.ts';
+
 
 /**
  * A message display is a message node with additional information for rendering.
@@ -90,6 +92,7 @@ const scrollToBottom = throttle(
 );
 
 export default function ChatScreen() {
+
   const {
     viewingChat,
     sendMessage,
@@ -99,7 +102,7 @@ export default function ChatScreen() {
     canvasData,
     replaceMessageAndGenerate,
   } = useAppContext();
-  const textarea = useOptimizedTextarea(prefilledMsg.content());
+  const textarea: AutosizeTextareaApi = useAutosizeTextarea(prefilledMsg.content());
 
   const { extraContext, clearExtraContext } = useVSCodeContext(textarea);
   // TODO: improve this when we have "upload file" feature
@@ -248,36 +251,37 @@ export default function ChatScreen() {
         </div>
 
         {/* chat input */}
-        <div className="flex flex-row items-center pt-8 pb-6 sticky bottom-0 bg-base-100">
-          <textarea
-            className="textarea textarea-bordered w-full"
-            placeholder="Type a message (Shift+Enter to add a new line)"
-            ref={textarea.ref}
-            onKeyDown={(e) => {
-              if (e.nativeEvent.isComposing || e.keyCode === 229) return;
-              if (e.key === 'Enter' && e.shiftKey) return;
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendNewMessage();
-              }
-            }}
-            id="msg-input"
-            dir="auto"
-          ></textarea>
-          {isGenerating(currConvId ?? '') ? (
-            <button
-              className="btn btn-neutral ml-2"
-              onClick={() => stopGenerating(currConvId ?? '')}
-            >
-              Stop
-            </button>
-          ) : (
-            <button className="btn btn-primary ml-2" onClick={sendNewMessage}>
-              Send
-            </button>
-          )}
-        </div>
-      </div>
+          <div className="flex flex-row items-start pt-8 pb-6 sticky bottom-0 bg-base-100">
+            <textarea
+              className="textarea textarea-bordered w-full resize-none max-h-48 overflow-y-auto" 
+              placeholder="Type a message (Shift+Enter to add a new line)"
+              ref={textarea.ref}  
+              onInput={textarea.onInput} 
+              onKeyDown={(e) => {
+                if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();  
+                  sendNewMessage();
+                }
+              }}
+              id="msg-input"
+              dir="auto"
+              rows={1}  
+            ></textarea>
+            {isGenerating(currConvId ?? '') ? (
+              <button
+                className="btn btn-neutral ml-2"
+                onClick={() => stopGenerating(currConvId ?? '')}
+              >
+                Stop
+              </button>
+            ) : (
+              <button className="btn btn-primary ml-2" onClick={sendNewMessage}>
+                Send
+              </button>
+            )}
+          </div>
+		 </div> 
       <div className="w-full sticky top-[7em] h-[calc(100vh-9em)]">
         {canvasData?.type === CanvasType.PY_INTERPRETER && (
           <CanvasPyInterpreter />
@@ -286,43 +290,3 @@ export default function ChatScreen() {
     </div>
   );
 }
-
-export interface OptimizedTextareaValue {
-  value: () => string;
-  setValue: (value: string) => void;
-  focus: () => void;
-  ref: React.RefObject<HTMLTextAreaElement>;
-}
-
-// This is a workaround to prevent the textarea from re-rendering when the inner content changes
-// See https://github.com/ggml-org/llama.cpp/pull/12299
-function useOptimizedTextarea(initValue: string): OptimizedTextareaValue {
-  const [savedInitValue, setSavedInitValue] = useState<string>(initValue);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (textareaRef.current && savedInitValue) {
-      textareaRef.current.value = savedInitValue;
-      setSavedInitValue('');
-    }
-  }, [textareaRef, savedInitValue, setSavedInitValue]);
-
-  return {
-    value: () => {
-      return textareaRef.current?.value ?? savedInitValue;
-    },
-    setValue: (value: string) => {
-      if (textareaRef.current) {
-        textareaRef.current.value = value;
-      }
-    },
-    focus: () => {
-      if (textareaRef.current) {
-        // focus and move the cursor to the end
-        textareaRef.current.focus();
-        textareaRef.current.selectionStart = textareaRef.current.value.length;
-      }
-    },
-    ref: textareaRef,
-  };
-}

examples/server/webui/src/components/useAutosizeTextarea.ts

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+  if (!textarea) {
+    return;
+  }
+
+  const computedStyle = window.getComputedStyle(textarea);
+  const currentMaxHeight = computedStyle.maxHeight;
+
+  textarea.style.maxHeight = 'none';
+  textarea.style.height = 'auto';  
+
+  const scrollH = textarea.scrollHeight;  
+
+  textarea.style.height = `${scrollH}px`;  
+  textarea.style.maxHeight = currentMaxHeight;  
+};
+
+export interface AutosizeTextareaApi {
+  value: () => string;
+  setValue: (value: string) => void;
+  focus: () => void;
+  ref: React.RefObject<HTMLTextAreaElement>;
+  onInput: (event: React.FormEvent<HTMLTextAreaElement>) => void;  
+}
+
+export function useAutosizeTextarea(initValue: string): AutosizeTextareaApi {
+  const [savedInitValue, setSavedInitValue] = useState<string>(initValue);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      if (typeof savedInitValue === 'string' && savedInitValue.length > 0) {
+        textarea.value = savedInitValue;
+        setTimeout(() => adjustTextareaHeight(textarea), 0);
+        setSavedInitValue('');
+      } else {
+         setTimeout(() => adjustTextareaHeight(textarea), 0);
+      }
+    } 
+  }, [textareaRef, savedInitValue]);
+
+  const handleInput = useCallback((event: React.FormEvent<HTMLTextAreaElement>) => {
+    adjustTextareaHeight(event.currentTarget);
+  }, []);  
+
+  return {
+    value: () => {
+      return textareaRef.current?.value ?? '';
+    },
+    setValue: (value: string) => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.value = value;
+            setTimeout(() => adjustTextareaHeight(textarea), 0);
+        }
+    },
+    focus: () => {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+      }
+    },
+    ref: textareaRef,
+    onInput: handleInput,  
+  };
+}