Merge pull request #97876 from FitseTLT/fix/96902-agent-instructions-markdown

Fix - Add react-native-live-markdown to the Custom Agent Instructions input

Author: roryabraham

src/pages/settings/Agents/AddAgentPage.tsx

@@ -1,7 +1,7 @@
 import AvatarButtonWithIcon from '@components/AvatarButtonWithIcon';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
-import type {FormOnyxValues} from '@components/Form/types';
+import type {FormOnyxValues, FormRef} from '@components/Form/types';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -37,6 +37,8 @@ import type NewAgentTemplate from '@src/types/onyx/NewAgentTemplate';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
+import type {TextInputKeyPressEvent} from 'react-native';
+
 import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 
@@ -63,6 +65,18 @@ function AddAgentPageContent({route, template}: AddAgentPageContentProps) {
     const [avatarDraft, avatarDraftMetadata] = useOnyx(ONYXKEYS.AGENT_NEW_AVATAR_DRAFT);
     const isDraftLoading = isLoadingOnyxValue(avatarDraftMetadata);
     const hasSubmittedRef = useRef(false);
+    const formRef = useRef<FormRef>(null);
+
+    const submitFormOnModEnter = (event: TextInputKeyPressEvent | KeyboardEvent) => {
+        if (!('key' in event)) {
+            return;
+        }
+        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            // The markdown input inserts a line break for any Enter keydown whose default is not already prevented, so the submit combo has to claim it first.
+            event.preventDefault();
+            formRef.current?.submit();
+        }
+    };
 
     const uploadedAvatar = avatarDraft?.uploadedAvatar;
     const selectedPresetID = avatarDraft?.customExpensifyAvatarID && AGENT_AVATARS.isAvatarID(avatarDraft.customExpensifyAvatarID) ? avatarDraft.customExpensifyAvatarID : undefined;
@@ -150,6 +164,7 @@ function AddAgentPageContent({route, template}: AddAgentPageContentProps) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_AGENTS_NEW.getRoute(policyID ? {policyID} : undefined))}
             />
             <FormProvider
+                ref={formRef}
                 formID={ONYXKEYS.FORMS.ADD_AGENT_FORM}
                 onSubmit={handleSubmit}
                 validate={validate}
@@ -192,6 +207,9 @@ function AddAgentPageContent({route, template}: AddAgentPageContentProps) {
                             label={translate('addAgentPage.instructions')}
                             accessibilityLabel={translate('addAgentPage.instructions')}
                             role={CONST.ROLE.PRESENTATION}
+                            type="markdown"
+                            excludedMarkdownStyles={['mentionReport']}
+                            onKeyPress={submitFormOnModEnter}
                             defaultValue={defaultPrompt}
                             multiline
                             containerStyles={[styles.flex1]}

src/pages/settings/Agents/Fields/EditPromptPage.tsx

@@ -99,6 +99,8 @@ function EditPromptPage({route}: EditPromptPageProps) {
                         label={translate('editAgentPage.instructions')}
                         accessibilityLabel={translate('editAgentPage.instructions')}
                         role={CONST.ROLE.PRESENTATION}
+                        type="markdown"
+                        excludedMarkdownStyles={['mentionReport']}
                         defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
                         multiline
                         containerStyles={[styles.flex1]}

src/pages/settings/Profile/AgentAIPromptSection.tsx

@@ -203,6 +203,8 @@ function AgentAIPromptSection({accountID, parentScrollViewRef}: AgentAIPromptSec
     const handleKeyPress = (e: TextInputKeyPressEvent) => {
         const event = e as unknown as KeyboardEvent;
         if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            // The markdown input inserts a line break for any Enter keydown whose default is not already prevented, so the submit combo has to claim it first.
+            event.preventDefault();
             handleSave();
         }
     };
@@ -221,6 +223,8 @@ function AgentAIPromptSection({accountID, parentScrollViewRef}: AgentAIPromptSec
                     ref={inputRef}
                     label={translate('profilePage.aiPromptSection.prompt')}
                     accessibilityLabel={translate('profilePage.aiPromptSection.prompt')}
+                    type="markdown"
+                    excludedMarkdownStyles={['mentionReport']}
                     value={draftPrompt}
                     onChangeText={handleChangeText}
                     onKeyPress={handleKeyPress}

src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx

@@ -43,6 +43,8 @@ function AddAgentRuleWriteTab({onSave}: AddAgentRuleWriteTabProps) {
             return;
         }
         if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            // The markdown input inserts a line break for any Enter keydown whose default is not already prevented, so the submit combo has to claim it first.
+            event.preventDefault();
             formRef.current?.submit();
         }
     };
@@ -89,6 +91,8 @@ function AddAgentRuleWriteTab({onSave}: AddAgentRuleWriteTabProps) {
                         label={describeRuleLabel}
                         accessibilityLabel={describeRuleLabel}
                         role={CONST.ROLE.PRESENTATION}
+                        type="markdown"
+                        excludedMarkdownStyles={['mentionReport']}
                         onKeyPress={submitFormOnModEnter}
                         multiline
                         shouldSaveDraft

src/pages/workspace/rules/AgentRules/EditAgentRulePage.tsx

@@ -60,6 +60,8 @@ function EditAgentRulePage({
             return;
         }
         if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            // The markdown input inserts a line break for any Enter keydown whose default is not already prevented, so the submit combo has to claim it first.
+            event.preventDefault();
             formRef.current?.submit();
         }
     };
@@ -158,6 +160,8 @@ function EditAgentRulePage({
                                 label={describeRuleLabel}
                                 accessibilityLabel={describeRuleLabel}
                                 role={CONST.ROLE.PRESENTATION}
+                                type="markdown"
+                                excludedMarkdownStyles={['mentionReport']}
                                 onKeyPress={submitFormOnModEnter}
                                 defaultValue={agentRule.prompt}
                                 multiline