update

TabbyML · May 27, 2024 · 63a0477 · 63a0477
1 parent edaebee
commit 63a0477
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 39 deletions.
diff --git a/ee/tabby-ui/app/chat/page.tsx b/ee/tabby-ui/app/chat/page.tsx
@@ -42,7 +42,14 @@ export default function ChatPage() {
   const maxWidth = isFromVSCode ? '5xl' : undefined
 
   useEffect(() => {
-    window.addEventListener('message', ({ data }) => {
+    const onMessage = ({
+      data
+    }: {
+      data: {
+        style?: string
+        themeClass?: string
+      }
+    }) => {
       // Sync with VSCode CSS variable
       if (data.style) {
         const styleWithHslValue = data.style
@@ -65,7 +72,35 @@ export default function ChatPage() {
       if (data.themeClass) {
         document.documentElement.className = data.themeClass
       }
-    })
+    }
+
+    window.addEventListener('message', onMessage)
+    return () => {
+      window.removeEventListener('message', onMessage)
+    }
+  }, [])
+
+  // VSCode bug: not support shortcuts like copy/paste
+  // @see - https://github.com/microsoft/vscode/issues/129178
+  useEffect(() => {
+    if (!isFromVSCode) return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.code === 'KeyC') {
+        document.execCommand('copy')
+      } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyX') {
+        document.execCommand('cut')
+      } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyV') {
+        document.execCommand('paste')
+      } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
+        document.execCommand('selectAll')
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
   }, [])
 
   const sendMessage = (message: ChatMessage) => {
@@ -99,22 +134,6 @@ export default function ChatPage() {
     server?.navigate(context)
   }
 
-  // VSCode bug: not support shortcuts like copy/paste
-  // @see - https://github.com/microsoft/vscode/issues/129178
-  const onInputKeyDown = isFromVSCode
-    ? (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if ((event.ctrlKey || event.metaKey) && event.code === 'KeyC') {
-          document.execCommand('copy')
-        } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyX') {
-          document.execCommand('cut')
-        } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyV') {
-          document.execCommand('paste')
-        } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
-          document.execCommand('selectAll')
-        }
-      }
-    : undefined
-
   if (!isInit || !fetcherOptions) return <></>
   const headers = {
     Authorization: `Bearer ${fetcherOptions.authorization}`
@@ -129,7 +148,6 @@ export default function ChatPage() {
       onNavigateToContext={onNavigateToContext}
       onLoaded={onChatLoaded}
       maxWidth={maxWidth}
-      onInputKeyDown={onInputKeyDown}
     />
   )
 }
diff --git a/ee/tabby-ui/components/chat/chat-panel.tsx b/ee/tabby-ui/components/chat/chat-panel.tsx
@@ -16,7 +16,6 @@ export interface ChatPanelProps
   onSubmit: (content: string) => Promise<any>
   reload: () => void
   chatMaxWidthClass: string
-  onInputKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
 }
 
 export function ChatPanel({
@@ -27,8 +26,7 @@ export function ChatPanel({
   setInput,
   className,
   onSubmit,
-  chatMaxWidthClass,
-  onInputKeyDown
+  chatMaxWidthClass
 }: ChatPanelProps) {
   const promptFormRef = React.useRef<PromptFormRef>(null)
   const { container, onClearMessages, qaPairs, isLoading } =
@@ -81,7 +79,6 @@ export function ChatPanel({
             input={input}
             setInput={setInput}
             isLoading={isLoading}
-            onInputKeyDown={onInputKeyDown}
           />
           <FooterText className="hidden sm:block" />
         </div>

diff --git a/ee/tabby-ui/components/chat/chat.tsx b/ee/tabby-ui/components/chat/chat.tsx
@@ -114,7 +114,6 @@ interface ChatProps extends React.ComponentProps<'div'> {
   docQuery?: boolean
   generateRelevantQuestions?: boolean
   maxWidth?: string
-  onInputKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
 }
 
 function ChatRenderer(
@@ -131,8 +130,7 @@ function ChatRenderer(
     fetcher,
     docQuery,
     generateRelevantQuestions,
-    maxWidth,
-    onInputKeyDown
+    maxWidth
   }: ChatProps,
   ref: React.ForwardedRef<ChatRef>
 ) {
@@ -402,7 +400,6 @@ function ChatRenderer(
             input={input}
             setInput={setInput}
             chatMaxWidthClass={chatMaxWidthClass}
-            onInputKeyDown={onInputKeyDown}
           />
         </div>
       </div>

diff --git a/ee/tabby-ui/components/chat/prompt-form.tsx b/ee/tabby-ui/components/chat/prompt-form.tsx
@@ -31,20 +31,17 @@ export interface PromptProps
   extends Pick<UseChatHelpers, 'input' | 'setInput'> {
   onSubmit: (value: string) => Promise<void>
   isLoading: boolean
-  onInputKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
 }
 
 export interface PromptFormRef {
   focus: () => void
 }
 
 function PromptFormRenderer(
-  { onSubmit, input, setInput, isLoading, onInputKeyDown }: PromptProps,
+  { onSubmit, input, setInput, isLoading }: PromptProps,
   ref: React.ForwardedRef<PromptFormRef>
 ) {
-  const { formRef, onKeyDown } = useEnterSubmit({
-    onKeyDown: onInputKeyDown
-  })
+  const { formRef, onKeyDown } = useEnterSubmit()
   const [queryCompletionUrl, setQueryCompletionUrl] = React.useState<
     string | null
   >(null)

diff --git a/ee/tabby-ui/lib/hooks/use-enter-submit.tsx b/ee/tabby-ui/lib/hooks/use-enter-submit.tsx
@@ -1,10 +1,6 @@
 import { useRef, type RefObject } from 'react'
 
-export function useEnterSubmit({
-  onKeyDown
-}: {
-  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
-}): {
+export function useEnterSubmit(): {
   formRef: RefObject<HTMLFormElement>
   onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
 } {
@@ -21,8 +17,6 @@ export function useEnterSubmit({
       formRef.current?.requestSubmit()
       event.preventDefault()
     }
-
-    onKeyDown?.(event)
   }
 
   return { formRef, onKeyDown: handleKeyDown }