chore(compass-components): update ai input styles COMPASS-7039 (#4741)

Author: Anemy

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

@@ -33,6 +33,11 @@ const inputContainerStyles = css({
 
 const textInputStyles = css({
   flexGrow: 1,
+  // Override LeafyGreen input's padding to space for our robot.
+  input: {
+    paddingLeft: spacing[5],
+    paddingRight: spacing[6] * 2 + spacing[2],
+  },
 });
 
 const errorSummaryContainer = css({
@@ -108,14 +113,10 @@ const buttonResetStyles = css({
   cursor: 'pointer',
 });
 
-const closeAIButtonStyles = css(
-  buttonResetStyles,
-  {
-    padding: spacing[1],
-    display: 'inline-flex',
-  },
-  focusRing
-);
+const closeAIButtonStyles = css(buttonResetStyles, focusRing, {
+  padding: spacing[1],
+  position: 'absolute',
+});
 
 const closeText = 'Close AI Helper';
 
@@ -177,6 +178,9 @@ function GenerativeAIInput({
     (evt: React.KeyboardEvent<HTMLInputElement>) => {
       if (evt.key === 'Enter') {
         evt.preventDefault();
+        if (!aiPromptText) {
+          return;
+        }
         onSubmitText(aiPromptText);
       } else if (evt.key === 'Escape') {
         isFetching ? onCancelRequest() : onClose();
@@ -232,22 +236,51 @@ function GenerativeAIInput({
             }
             onKeyDown={onTextInputKeyDown}
           />
+          <button
+            className={closeAIButtonStyles}
+            data-testid="close-ai-button"
+            aria-label={closeText}
+            title={closeText}
+            onClick={() => onClose()}
+          >
+            <RobotSVG />
+          </button>
           <div className={floatingButtonsContainerStyles}>
-            {aiPromptText && (
-              <IconButton
-                aria-label="Clear prompt"
-                onClick={() => onChangeAIPromptText('')}
-                data-testid="ai-text-clear-prompt"
-              >
-                <Icon glyph="X" />
-              </IconButton>
+            {isFetching ? (
+              <div className={loaderContainerStyles}>
+                <SpinLoader />
+              </div>
+            ) : showSuccess ? (
+              <div className={loaderContainerStyles}>
+                <Icon
+                  className={
+                    darkMode
+                      ? successIndicatorDarkModeStyles
+                      : successIndicatorLightModeStyles
+                  }
+                  glyph="CheckmarkWithCircle"
+                />
+              </div>
+            ) : (
+              <>
+                {aiPromptText && (
+                  <IconButton
+                    aria-label="Clear prompt"
+                    onClick={() => onChangeAIPromptText('')}
+                    data-testid="ai-text-clear-prompt"
+                  >
+                    <Icon glyph="X" />
+                  </IconButton>
+                )}
+              </>
             )}
             <Button
               size="small"
               className={cx(
                 generateButtonStyles,
                 !darkMode && generateButtonLightModeStyles
               )}
+              disabled={!aiPromptText}
               data-testid="ai-generate-button"
               onClick={() =>
                 isFetching ? onCancelRequest() : onSubmitText(aiPromptText)
@@ -274,32 +307,6 @@ function GenerativeAIInput({
                 </>
               )}
             </Button>
-            {isFetching ? (
-              <div className={loaderContainerStyles}>
-                <SpinLoader />
-              </div>
-            ) : showSuccess ? (
-              <div className={loaderContainerStyles}>
-                <Icon
-                  className={
-                    darkMode
-                      ? successIndicatorDarkModeStyles
-                      : successIndicatorLightModeStyles
-                  }
-                  glyph="CheckmarkWithCircle"
-                />
-              </div>
-            ) : (
-              <button
-                className={closeAIButtonStyles}
-                data-testid="close-ai-button"
-                aria-label={closeText}
-                title={closeText}
-                onClick={() => onClose()}
-              >
-                {isFetching ? <SpinLoader /> : <RobotSVG />}
-              </button>
-            )}
           </div>
         </div>
         {didSucceed && <AIFeedback onSubmitFeedback={onSubmitFeedback} />}

packages/compass-preferences-model/src/feature-flags.ts

@@ -33,7 +33,7 @@ export const featureFlags: Required<{
     stage: 'development',
     description: {
       short: 'AI Query Generator',
-      long: 'Use AI to generate queries with a natural language text input on the query bar.',
+      long: 'Use AI to generate queries with a natural language text input on the query bar. Do not use this feature with sensitive data.',
     },
   },