Add HTML error handling in AgentAIPromptSection and adjust styling in AIRulesSection

Author: NicolasBonet

src/pages/settings/Profile/AgentAIPromptSection.tsx

@@ -56,6 +56,7 @@ function AgentAIPromptSection({accountID, parentScrollViewRef}: AgentAIPromptSec
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const [draftPrompt, setDraftPrompt] = useState('');
     const [showEmptyError, setShowEmptyError] = useState(false);
+    const [showHtmlError, setShowHtmlError] = useState(false);
     const [showSavedConfirmation, setShowSavedConfirmation] = useState(false);
     const [isUserInitiatedSave, setIsUserInitiatedSave] = useState(false);
     const inputRef = useRef<BaseTextInputRef>(null);
@@ -70,7 +71,7 @@ function AgentAIPromptSection({accountID, parentScrollViewRef}: AgentAIPromptSec
     let errorText = '';
     if (showEmptyError) {
         errorText = translate('profilePage.aiPromptSection.promptCannotBeEmpty');
-    } else if (hasHtmlTag) {
+    } else if (showHtmlError && hasHtmlTag) {
         errorText = translate('common.error.invalidCharacter');
     }
     const storedPrompt = Str.htmlDecode(agentPrompt?.prompt ?? '');
@@ -166,6 +167,7 @@ function AgentAIPromptSection({accountID, parentScrollViewRef}: AgentAIPromptSec
             return;
         }
         if (containsHtmlTag(trimmed)) {
+            setShowHtmlError(true);
             inputRef.current?.focus();
             return;
         }
@@ -186,6 +188,9 @@ function AgentAIPromptSection({accountID, parentScrollViewRef}: AgentAIPromptSec
         if (showEmptyError && text.trim()) {
             setShowEmptyError(false);
         }
+        if (showHtmlError && !containsHtmlTag(text)) {
+            setShowHtmlError(false);
+        }
     };
 
     const handleKeyPress = (e: TextInputKeyPressEvent) => {
@@ -227,7 +232,7 @@ function AgentAIPromptSection({accountID, parentScrollViewRef}: AgentAIPromptSec
                 icon={showSavedConfirmation ? icons.Checkmark : undefined}
                 onPress={handleSave}
                 isLoading={isSaving && isUserInitiatedSave}
-                isDisabled={hasHtmlTag || (isSaving && isUserInitiatedSave)}
+                isDisabled={isSaving && isUserInitiatedSave}
                 style={[styles.alignSelfStart]}
                 testID="save-prompt-button"
             />

src/pages/workspace/rules/AIRulesSection.tsx

@@ -80,7 +80,7 @@ function AIRulesSection({policyID, canWriteRules, showReadOnlyModal}: AIRulesSec
                                     <MenuItemWithTopDescription
                                         title={(rule.title ?? rule.prompt).replaceAll(/\s+/g, ' ').trim()}
                                         numberOfLinesTitle={1}
-                                        wrapperStyle={[styles.borderedContentCard, styles.ph4, styles.pv4]}
+                                        wrapperStyle={[styles.borderedContentCard, styles.ph4, styles.pv2]}
                                         shouldShowRightIcon
                                         onPress={() => {
                                             if (!canWriteRules) {