feat(generative-ai): update generative ai input to be resizable text area COMPASS-7940

packages/compass-generative-ai/src/components/generative-ai-input.tsx

@@ -1,12 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   Banner,
   BannerVariant,
   Button,
   Icon,
   IconButton,
   SpinLoader,
-  TextInput,
+  TextArea,
   css,
   cx,
   focusRing,
@@ -28,6 +35,7 @@ const containerStyles = css({
   width: '100%',
   flexDirection: 'column',
   gap: spacing[25],
+  padding: `0px ${spacing[100]}px`,
   marginBottom: spacing[300],
 });
 
@@ -123,11 +131,17 @@ const inputContainerStyles = css({
   position: 'relative',
 });
 
+const defaultTextAreaSize = spacing[400] + spacing[300];
 const textInputStyles = css({
   flexGrow: 1,
-  input: {
+  textarea: {
+    margin: 0,
+    padding: spacing[50] + spacing[25],
     paddingLeft: spacing[800],
     paddingRight: spacing[1600] * 2 + spacing[200],
+    height: defaultTextAreaSize, // Default height, overridden runtime.
+    minHeight: `${defaultTextAreaSize}px`,
+    maxHeight: spacing[1600] * 2,
   },
 });
 
@@ -216,6 +230,48 @@ const aiEntryContainerStyles = css({
   display: 'flex',
 });
 
+function adjustHeight(elementRef: React.RefObject<HTMLTextAreaElement>) {
+  if (elementRef.current) {
+    // Dynamically set the text area height based on the scroll height.
+    // We first set it to 0 so the correct scroll height is used.
+    elementRef.current.style.height = '0px';
+    let adjustedHeight = elementRef.current.scrollHeight;
+    if (adjustedHeight > defaultTextAreaSize) {
+      // When it's greater than one line, we add pixels so that
+      // we don't show a scrollbar when it's still under the maxHeight.
+      adjustedHeight += spacing[50];
+    }
+    elementRef.current.style.height = `${adjustedHeight}px`;
+  }
+}
+
+const VerticallyResizingTextArea = forwardRef(
+  function VerticallyResizingTextArea(
+    { value, ...props }: React.ComponentProps<typeof TextArea>,
+    forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
+  ) {
+    const ref = useRef<HTMLTextAreaElement | null>(null);
+
+    useLayoutEffect(() => adjustHeight(ref), []);
+    useEffect(() => adjustHeight(ref), [value]);
+
+    return (
+      <TextArea
+        ref={(node) => {
+          ref.current = node;
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        }}
+        value={value}
+        {...props}
+      />
+    );
+  }
+);
+
 const closeText = 'Close AI Helper';
 
 const SubmitArrowSVG = ({ darkMode }: { darkMode?: boolean }) => (
@@ -278,10 +334,10 @@ function GenerativeAIInput({
   isAggregationGeneratedFromQuery = false,
   onResetIsAggregationGeneratedFromQuery,
 }: GenerativeAIInputProps) {
-  const promptTextInputRef = useRef<HTMLInputElement>(null);
+  const promptTextInputRef = useRef<HTMLTextAreaElement>(null);
   const [showSuccess, setShowSuccess] = useState(false);
   const darkMode = useDarkMode();
-  const guideCueRef = useRef<HTMLInputElement>(null);
+  const guideCueRef = useRef<HTMLTextAreaElement>(null);
 
   const handleSubmit = useCallback(
     (aiPromptText: string) => {
@@ -292,8 +348,8 @@ function GenerativeAIInput({
   );
 
   const onTextInputKeyDown = useCallback(
-    (evt: React.KeyboardEvent<HTMLInputElement>) => {
-      if (evt.key === 'Enter') {
+    (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (evt.key === 'Enter' && !evt.shiftKey) {
         evt.preventDefault();
         if (!aiPromptText) {
           return;
@@ -341,24 +397,38 @@ function GenerativeAIInput({
       <div className={inputBarContainerStyles}>
         <div className={inputContainerStyles}>
           <div className={isFetching ? gradientAnimationStyles : undefined}>
-            <div
-              className={contentWrapperStyles}
-              data-testid="ai-user-text-input-wrapper"
-            >
-              <TextInput
+            <div className={contentWrapperStyles}>
+              <button
+                className={closeAIButtonStyles}
+                data-testid="close-ai-button"
+                aria-label={closeText}
+                title={closeText}
+                onClick={() => onClose()}
+              >
+                <AIGuideCue
+                  showGuideCue={isAggregationGeneratedFromQuery}
+                  onCloseGuideCue={() => {
+                    onResetIsAggregationGeneratedFromQuery?.();
+                  }}
+                  refEl={guideCueRef}
+                  title="Aggregation generated"
+                  description="Your query requires stages from MongoDB's aggregation framework. Continue to work on it in our Aggregation Pipeline Builder"
+                />
+                <span className={aiEntryContainerStyles} ref={guideCueRef}>
+                  <Icon glyph="Sparkle" />
+                </span>
+              </button>
+              <VerticallyResizingTextArea
                 className={cx(
                   textInputStyles,
                   isFetching && isFetchingOverrideTextInputStyles
                 )}
                 ref={promptTextInputRef}
-                sizeVariant="small"
                 data-testid="ai-user-text-input"
                 aria-label="Enter a plain text query that the AI will translate into MongoDB query language."
                 placeholder={placeholder}
                 value={aiPromptText}
-                onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-                  onChangeAIPromptText(evt.currentTarget.value)
-                }
+                onChange={(evt) => onChangeAIPromptText(evt.target.value)}
                 onKeyDown={onTextInputKeyDown}
               />
               <div className={floatingButtonsContainerStyles}>
@@ -424,26 +494,6 @@ function GenerativeAIInput({
                   )}
                 </Button>
               </div>
-              <button
-                className={closeAIButtonStyles}
-                data-testid="close-ai-button"
-                aria-label={closeText}
-                title={closeText}
-                onClick={() => onClose()}
-              >
-                <AIGuideCue
-                  showGuideCue={isAggregationGeneratedFromQuery}
-                  onCloseGuideCue={() => {
-                    onResetIsAggregationGeneratedFromQuery?.();
-                  }}
-                  refEl={guideCueRef}
-                  title="Aggregation generated"
-                  description="Your query requires stages from MongoDB's aggregation framework. Continue to work on it in our Aggregation Pipeline Builder"
-                />
-                <span className={aiEntryContainerStyles} ref={guideCueRef}>
-                  <Icon glyph="Sparkle" />
-                </span>
-              </button>
             </div>
           </div>
         </div>

packages/compass-query-bar/src/components/query-bar.tsx

@@ -91,10 +91,6 @@ const queryOptionsContainerStyles = css({
   gap: spacing[2],
 });
 
-const queryAIContainerStyles = css({
-  margin: `0px ${spacing[2]}px`,
-});
-
 const QueryOptionsToggle = connect(
   (state: RootState) => {
     return {
@@ -218,14 +214,12 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
       data-apply-id={applyId}
     >
       {isAIFeatureEnabled && (
-        <div className={queryAIContainerStyles}>
-          <QueryAI
-            onClose={() => {
-              onHideAIInputClick?.();
-            }}
-            show={isAIInputVisible}
-          />
-        </div>
+        <QueryAI
+          onClose={() => {
+            onHideAIInputClick?.();
+          }}
+          show={isAIInputVisible}
+        />
       )}
       <div className={queryBarFirstRowStyles}>
         {enableSavedAggregationsQueries && <QueryHistoryButtonPopover />}