Replace hotkey scopes by focus stack (Part 5 - Form field Inputs, Pages, Dialog ...) (#13106)

# Replace hotkey scopes by focus stack (Part 5 - Form field Inputs,
Pages, Dialog ...)

This PR is the 5th part of a refactoring aiming to deprecate the hotkey
scopes api in favor of the new focus stack api which is more robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673
Part 2: https://github.com/twentyhq/twenty/pull/12798
Part 3: https://github.com/twentyhq/twenty/pull/12910
Part 4: https://github.com/twentyhq/twenty/pull/12933

In this part, all the last components using hotkey scopes were
refactored.
In the 6th and final part of this refactoring we will be able to
completely remove the hotkey scopes from the codebase.

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useAgentChat.ts

@@ -1,10 +1,10 @@
 import { InputHotkeyScope } from '@/ui/input/types/InputHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useCallback, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useScrollWrapperElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperElement';
 import { AgentChatMessageRole } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/constants/agent-chat-message-role';
 import { v4 } from 'uuid';
@@ -117,17 +117,21 @@ export const useAgentChat = (agentId: string) => {
     await sendChatMessage(content);
   };
 
-  useScopedHotkeys(
-    [Key.Enter],
-    (event) => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Enter],
+    callback: (event: KeyboardEvent) => {
       if (!event.ctrlKey && !event.metaKey) {
         event.preventDefault();
         handleSendMessage();
       }
     },
-    InputHotkeyScope.TextInput,
-    [agentChatInput, isLoading],
-  );
+    focusId: `${agentId}-chat-input`,
+    scope: InputHotkeyScope.TextInput,
+    dependencies: [agentChatInput, isLoading],
+    options: {
+      enableOnFormTags: true,
+    },
+  });
 
   return {
     handleInputChange: (value: string) => setAgentChatInput(value),

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx

@@ -285,6 +285,7 @@ export const WorkflowEditActionFormBuilder = ({
 
                           <FormFieldInputRowContainer>
                             <FormFieldInputInnerContainer
+                              formFieldInputInstanceId={field.id}
                               hasRightElement={false}
                               onClick={() => {
                                 handleFieldClick(field.id);
@@ -358,6 +359,7 @@ export const WorkflowEditActionFormBuilder = ({
             <FormFieldInputContainer>
               <FormFieldInputRowContainer>
                 <FormFieldInputInnerContainer
+                  formFieldInputInstanceId="add-field-button"
                   hasRightElement={false}
                   onClick={() => {
                     const { label, name } = getDefaultFormFieldSettings(

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormEmptyMessage.tsx

@@ -47,7 +47,10 @@ export const WorkflowFormEmptyMessage = () => {
     <StyledMessageContainer>
       <FormFieldInputContainer>
         <FormFieldInputRowContainer multiline maxHeight={124}>
-          <FormFieldInputInnerContainer hasRightElement={false}>
+          <FormFieldInputInnerContainer
+            formFieldInputInstanceId="empty-form-message"
+            hasRightElement={false}
+          >
             <StyledFieldContainer>
               <StyledMessageContentContainer>
                 <StyledMessageTitle data-testid="empty-form-message-title">