tweak(ui): show hotkey menu only not focus debug input

ui/src/modules/app_builder/Canvas/index.tsx

@@ -41,6 +41,7 @@ export interface BuilderCanvasProps {
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   interaction?: InteractionInfo
   errorInteraction?: ErrorInteraction
+  toobarFocusedRef: React.RefObject<boolean>
   onNodeDragStop: NodeDragHandler
   onNodesDelete: OnNodesDelete
   onAddNode: (n: Node<BlockNodeProps>[]) => void
@@ -62,6 +63,7 @@ export const BuilderCanvas: React.FC<BuilderCanvasProps> = ({
   metadata,
   interaction,
   errorInteraction,
+  toobarFocusedRef,
   onClick,
   onNodeDragStop,
   onNodesDelete,
@@ -154,7 +156,13 @@ export const BuilderCanvas: React.FC<BuilderCanvasProps> = ({
   )
 
   // hot keys
-  const { events: paneEvents, hotKeyMenuOpened, setHotKeyMenuOpened, menuPosition, menuStatus } = useHotKeyMenu()
+  const {
+    events: paneEvents,
+    hotKeyMenuOpened,
+    setHotKeyMenuOpened,
+    menuPosition,
+    menuStatus
+  } = useHotKeyMenu(toobarFocusedRef)
 
   useHotkeys([
     [

ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts

@@ -1,7 +1,7 @@
 import { getHotkeyHandler } from '@mantine/hooks'
 import { useEffect, useRef, useState } from 'react'
 
-export const useHotKeyMenu = () => {
+export const useHotKeyMenu = (toobarFocusedRef: React.RefObject<boolean>) => {
   const [menuPosition, setMenuPosition] = useState([0, 0])
   const [hotKeyMenuOpened, setHotKeyMenuOpened] = useState(false)
   const menuStatus = useRef({
@@ -29,7 +29,7 @@ export const useHotKeyMenu = () => {
   }
 
   const showHotKeyMenu = () => {
-    if (!menuStatus.current.inPane) {
+    if (!menuStatus.current.inPane || toobarFocusedRef.current) {
       return
     }
     setMenuPosition([menuStatus.current.mouseX, menuStatus.current.mouseY])
@@ -50,6 +50,7 @@ export const useHotKeyMenu = () => {
     const showHotKeyMenuHandler = getHotkeyHandler([['Space', showHotKeyMenu]])
     document.body.addEventListener('keyup', showHotKeyMenuHandler)
     return () => document.body.removeEventListener('keyup', showHotKeyMenuHandler)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return {

ui/src/modules/app_builder/index.tsx

@@ -14,7 +14,7 @@ import {
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import download from 'downloadjs'
 import yaml from 'js-yaml'
-import { useDebouncedValue, useDisclosure, useHotkeys } from '@mantine/hooks'
+import { useDebouncedValue, useDisclosure, useFocusWithin, useHotkeys } from '@mantine/hooks'
 import { ReactFlowProvider, useNodesInitialized, useReactFlow } from 'reactflow'
 import { FormProvider, useForm, useFormContext } from 'react-hook-form'
 import { ApplicationInfo, ApplicationVersionInfo, InteractionInfo, VersionMetadata } from '@api/linguflow.schemas'
@@ -96,6 +96,12 @@ const AppBuilder: React.FC = () => {
   const containerElem = useRef<HTMLDivElement>(null)
   const [menuOpened, setMenuOpened] = useState(false)
   const [toolbarPaneOpened, setToolbarPaneOpened] = useState(false)
+  const { ref: focusRef, focused: toolbarFocused } = useFocusWithin()
+  const toobarFocusedRef = useRef(toolbarFocused)
+
+  useEffect(() => {
+    toobarFocusedRef.current = toolbarFocused
+  }, [toolbarFocused])
 
   const [currentInteraction, setCurrentInteraction] = useState<InteractionInfo>()
   const [errorInteraction, setErrorInteraction] = useState<ErrorInteraction>()
@@ -223,6 +229,7 @@ const AppBuilder: React.FC = () => {
             metadata={verMetadata}
             interaction={currentInteraction}
             errorInteraction={errorInteraction}
+            toobarFocusedRef={toobarFocusedRef}
             onClick={() => setMenuOpened(false)}
             onNodeDragStop={() => setCanUpdate(true)}
             onRelayout={() => setCanUpdate(true)}
@@ -239,15 +246,17 @@ const AppBuilder: React.FC = () => {
             onCanSave={() => setCanSave(true)}
           />
         </Box>
-        <Toolbar
-          app={appData?.application}
-          ver={verData?.version}
-          toolbarPaneOpened={toolbarPaneOpened}
-          setToolbarPaneOpened={setToolbarPaneOpened}
-          isCreatingVersion={isCreatingVersion}
-          onUpdateCurrentInteraction={setCurrentInteraction}
-          onInteractionError={setErrorInteraction}
-        />
+        <div ref={focusRef}>
+          <Toolbar
+            app={appData?.application}
+            ver={verData?.version}
+            toolbarPaneOpened={toolbarPaneOpened}
+            setToolbarPaneOpened={setToolbarPaneOpened}
+            isCreatingVersion={isCreatingVersion}
+            onUpdateCurrentInteraction={setCurrentInteraction}
+            onInteractionError={setErrorInteraction}
+          />
+        </div>
       </Box>
     </ContainerElemProvider>
   )