Update SidePanel.tsx

Add shortcut to trigger inpainting from negative prompt text box by pressing ctrl/meta+enter

lama_cleaner/app/src/components/SidePanel/SidePanel.tsx

@@ -1,13 +1,20 @@
 import React, { FormEvent, useState } from 'react'
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { useToggle } from 'react-use'
-import { negativePropmtState, SDSampler, settingState } from '../../store/Atoms'
+import {
+  isInpaintingState,
+  negativePropmtState,
+  propmtState,
+  SDSampler,
+  settingState,
+} from '../../store/Atoms'
 import NumberInputSetting from '../Settings/NumberInputSetting'
 import SettingBlock from '../Settings/SettingBlock'
 import Selector from '../shared/Selector'
 import { Switch, SwitchThumb } from '../shared/Switch'
 import TextAreaInput from '../shared/Textarea'
+import emitter, { EVENT_PROMPT } from '../../event'
 
 const INPUT_WIDTH = 30
 
@@ -17,6 +24,8 @@ const SidePanel = () => {
   const [setting, setSettingState] = useRecoilState(settingState)
   const [negativePrompt, setNegativePrompt] =
     useRecoilState(negativePropmtState)
+  const isInpainting = useRecoilValue(isInpaintingState)
+  const prompt = useRecoilValue(propmtState)
 
   const handleOnInput = (evt: FormEvent<HTMLTextAreaElement>) => {
     evt.preventDefault()
@@ -25,6 +34,17 @@ const SidePanel = () => {
     setNegativePrompt(target.value)
   }
 
+  const onKeyUp = (e: React.KeyboardEvent) => {
+    if (
+      e.key === 'Enter' &&
+      (e.ctrlKey || e.metaKey) &&
+      prompt.length !== 0 &&
+      !isInpainting
+    ) {
+      emitter.emit(EVENT_PROMPT)
+    }
+  }
+
   return (
     <div className="side-panel">
       <PopoverPrimitive.Root open={open}>
@@ -203,6 +223,7 @@ const SidePanel = () => {
                   className="negative-prompt"
                   value={negativePrompt}
                   onInput={handleOnInput}
+                  onKeyUp={onKeyUp}
                   placeholder=""
                 />
               }