chore: update shortcut, put focus in textarea on first load

concord-consortium · Nov 25, 2024 · 21c83f0 · 21c83f0
1 parent 2dfe3b9
commit 21c83f0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/src/components/chat-input.tsx b/src/components/chat-input.tsx
@@ -90,12 +90,8 @@ export const ChatInputComponent = ({keyboardShortcutEnabled, onKeyboardShortcut,
   // };
 
   const addShortcutListener = useCallback((context: Window) => {
-    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
     const handler = (event: KeyboardEvent) => {
-      if (
-        (isMac && event.metaKey && event.ctrlKey && event.key === "a") || // Ctrl + Cmd + a on macOS
-        (!isMac && event.ctrlKey && event.altKey && event.key === "a")   // Ctrl + Alt + a on Windows/Linux
-      ) {
+      if (event.ctrlKey && event.shiftKey && event.key === "/") {
         const activeElement = context.document.activeElement;
         if (isInputElement(activeElement)) return;
 
@@ -136,6 +132,11 @@ export const ChatInputComponent = ({keyboardShortcutEnabled, onKeyboardShortcut,
     };
   }, [addShortcutListener, keyboardShortcutEnabled]);
 
+  // Place focus on the textarea when the component mounts.
+  useEffect(() => {
+    textAreaRef.current?.focus();
+  }, []);
+
   return (
     <div className="chat-input" data-testid="chat-input">
       <form onSubmit={handleSubmit}>

diff --git a/src/components/keyboard-shortcut-controls.tsx b/src/components/keyboard-shortcut-controls.tsx
@@ -1,44 +1,44 @@
-import React, { FormEvent, useState } from "react";
+import React from "react";
 
 import "./keyboard-shortcut-controls.scss";
 
 interface IProps {
   shortcutEnabled: boolean;
-  shortcutKeys: string;
+  shortcutKeys?: string;
   onCustomizeShortcut?: (shortcut: string) => void;
   onToggleShortcut: () => void;
 }
 
 export const KeyboardShortcutControls = (props: IProps) => {
-  const { shortcutEnabled, shortcutKeys, onCustomizeShortcut, onToggleShortcut } = props;
+  const { shortcutEnabled, onToggleShortcut } = props;
   const toggleButtonLabel = shortcutEnabled ? "Disable Keyboard Shortcut" : "Enable Keyboard Shortcut";
-  const [showError, setShowError] = useState(false);
+  // const [showError, setShowError] = useState(false);
 
   const handleToggleShortcut = () => {
     onToggleShortcut();
   };
 
-  const handleCustomizeShortcut = (event: FormEvent) => {
-    event.preventDefault();
-    const form = event.target as HTMLInputElement;
-    // get the text value from the form's input element
-    const shortcut = form.querySelector("input")?.value;
-    console.log("Customizing shortcut to", shortcut);
-    if (shortcut) {
-      onCustomizeShortcut?.(shortcut);
-      setShowError(false);
-    } else {
-      setShowError(true);
-    }
-  };
+  // const handleCustomizeShortcut = (event: FormEvent) => {
+  //   event.preventDefault();
+  //   const form = event.target as HTMLInputElement;
+  //   // get the text value from the form's input element
+  //   const shortcut = form.querySelector("input")?.value;
+  //   console.log("Customizing shortcut to", shortcut);
+  //   if (shortcut) {
+  //     onCustomizeShortcut?.(shortcut);
+  //     setShowError(false);
+  //   } else {
+  //     setShowError(true);
+  //   }
+  // };
 
   return (
     <div className="keyboard-shortcut-controls">
       <h3>Keyboard Shortcut</h3>
       <button onClick={handleToggleShortcut}>
         {toggleButtonLabel}
       </button>
-      <form onSubmit={handleCustomizeShortcut}>
+      {/* <form onSubmit={handleCustomizeShortcut}>
         <fieldset disabled={!shortcutEnabled}>
           <label htmlFor="custom-keyboard-shortcut">Customize Keyboard Shortcut</label>
           <input
@@ -61,7 +61,7 @@ export const KeyboardShortcutControls = (props: IProps) => {
             </div>
           }
         </fieldset>
-      </form>
+      </form> */}
     </div>
   );
 };