Implemented keyboard shortcut to stop chat (#4528)

ChatGPTNextWeb · Apr 27, 2024 · 8642d27 · 8642d27
1 parent 506c17a
commit 8642d27
Show file tree

Hide file tree

Showing 3 changed files with 11,378 additions and 1,116 deletions.
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -340,6 +340,7 @@ function ChatAction(props: {
   text: string;
   icon: JSX.Element;
   onClick: () => void;
+  stopShortcut?: string;
 }) {
   const iconRef = useRef<HTMLDivElement>(null);
   const textRef = useRef<HTMLDivElement>(null);
@@ -348,6 +349,25 @@ function ChatAction(props: {
     icon: 16,
   });
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        props.stopShortcut &&
+        event.key === props.stopShortcut &&
+        event.ctrlKey
+      ) {
+        props.onClick();
+        setTimeout(updateWidth, 1);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [props.onClick, props.stopShortcut]);
+
   function updateWidth() {
     if (!iconRef.current || !textRef.current) return;
     const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
@@ -495,6 +515,7 @@ export function ChatActions(props: {
           onClick={stopAll}
           text={Locale.Chat.InputActions.Stop}
           icon={<StopIcon />}
+          stopShortcut="c"
         />
       )}
       {!props.hitBottom && (