isSubmitDisabled prop to disable the submit button

app/client/packages/design-system/widgets/src/components/AIChat/src/AIChat.tsx

@@ -6,6 +6,8 @@ import styles from "./styles.module.css";
 import { ThreadMessage } from "./ThreadMessage";
 import type { AIChatProps, ChatMessage } from "./types";
 
+const MIN_PROMPT_LENGTH = 3;
+
 const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
   const {
     // assistantName,
@@ -64,6 +66,7 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
       >
         <ChatInput
           isLoading={isWaitingForResponse}
+          isSubmitDisabled={prompt.length < MIN_PROMPT_LENGTH}
           onChange={onPromptChange}
           onSubmit={onSubmit}
           placeholder={promptInputPlaceholder}

app/client/packages/design-system/widgets/src/components/ChatInput/src/ChatInput.tsx

@@ -22,6 +22,7 @@ export function ChatInput(props: ChatInputProps) {
     isLoading,
     isReadOnly,
     isRequired,
+    isSubmitDisabled,
     label,
     onChange,
     onSubmit,
@@ -91,12 +92,14 @@ export function ChatInput(props: ChatInputProps) {
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (Boolean(isSubmitDisabled)) return;
+
       if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
         onSubmit?.();
       }
     },
-    [onSubmit],
+    [onSubmit, isSubmitDisabled],
   );
 
   useLayoutEffect(() => {
@@ -112,14 +115,18 @@ export function ChatInput(props: ChatInputProps) {
       return (
         <IconButton
           icon="player-stop-filled"
-          isDisabled={isDisabled}
+          isDisabled={Boolean(isDisabled) || Boolean(isSubmitDisabled)}
           onPress={onSubmit}
         />
       );
     }
 
     return (
-      <IconButton icon="arrow-up" isDisabled={isDisabled} onPress={onSubmit} />
+      <IconButton
+        icon="arrow-up"
+        isDisabled={Boolean(isDisabled) || Boolean(isSubmitDisabled)}
+        onPress={onSubmit}
+      />
     );
   })();
 

app/client/packages/design-system/widgets/src/components/ChatInput/src/types.ts

@@ -1,5 +1,8 @@
 import type { TextAreaProps } from "@appsmith/wds";
 
 export interface ChatInputProps extends TextAreaProps {
+  /** callback function when the user submits the chat input */
   onSubmit?: () => void;
+  /** flag for disable the submit button */
+  isSubmitDisabled?: boolean;
 }

app/client/packages/design-system/widgets/src/components/ChatInput/stories/ChatInput.stories.tsx

@@ -66,3 +66,9 @@ export const Validation: Story = {
     </Form>
   ),
 };
+
+export const SubmitDisabled: Story = {
+  args: {
+    isSubmitDisabled: true,
+  },
+};