🎛️ refactor: Add keyboard command toggles & only trigger for the 1st character (#3566)

* refactor: Improve handling of key up events in useHandleKeyUp hook to only trigger for first char and fix linter issues

* refactor: Update Beta component styling with theme twcss variables

* refactor: theming for Settings, add toggle enable/disable keyboard commands

client/src/components/Nav/SettingsTabs/Beta/Beta.tsx

@@ -11,11 +11,11 @@ function Beta() {
       role="tabpanel"
       className="w-full md:min-h-[271px]"
     >
-      <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="flex flex-col gap-3 text-sm text-text-primary">
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
           <ModularChat />
         </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
           <LaTeXParsing />
         </div>
       </div>

client/src/components/Nav/SettingsTabs/Commands/AtCommandSwitch.tsx

@@ -0,0 +1,26 @@
+import { useRecoilState } from 'recoil';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function AtCommandSwitch() {
+  const [atCommand, setAtCommand] = useRecoilState<boolean>(store.atCommand);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setAtCommand(value);
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>{localize('com_nav_at_command_description')}</div>
+      <Switch
+        id="atCommand"
+        checked={atCommand}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4 mt-2"
+        data-testid="atCommand"
+      />
+    </div>
+  );
+}

client/src/components/Nav/SettingsTabs/Commands/Commands.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+import { SettingsTabValues } from 'librechat-data-provider';
+import SlashCommandSwitch from './SlashCommandSwitch';
+import PlusCommandSwitch from './PlusCommandSwitch';
+import AtCommandSwitch from './AtCommandSwitch';
+
+function Commands() {
+  return (
+    <Tabs.Content
+      value={SettingsTabValues.COMMANDS}
+      role="tabpanel"
+      className="w-full md:min-h-[271px]"
+    >
+      <div className="flex flex-col gap-3 text-sm text-text-primary">
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+          <AtCommandSwitch />
+        </div>
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+          <PlusCommandSwitch />
+        </div>
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+          <SlashCommandSwitch />
+        </div>
+      </div>
+    </Tabs.Content>
+  );
+}
+
+export default memo(Commands);

client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx

@@ -0,0 +1,26 @@
+import { useRecoilState } from 'recoil';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function PlusCommandSwitch() {
+  const [plusCommand, setPlusCommand] = useRecoilState<boolean>(store.plusCommand);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setPlusCommand(value);
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>{localize('com_nav_plus_command_description')}</div>
+      <Switch
+        id="plusCommand"
+        checked={plusCommand}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4 mt-2"
+        data-testid="plusCommand"
+      />
+    </div>
+  );
+}

client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx

@@ -0,0 +1,26 @@
+import { useRecoilState } from 'recoil';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function SlashCommandSwitch() {
+  const [slashCommand, setSlashCommand] = useRecoilState<boolean>(store.slashCommand);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setSlashCommand(value);
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>{localize('com_nav_slash_command_description')}</div>
+      <Switch
+        id="slashCommand"
+        checked={slashCommand}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4 mt-2"
+        data-testid="slashCommand"
+      />
+    </div>
+  );
+}

client/src/components/Nav/SettingsTabs/index.ts

@@ -3,6 +3,7 @@ export { default as Chat } from './Chat/Chat';
 export { ClearChatsButton } from './General/General';
 export { default as Data } from './Data/Data';
 export { default as Beta } from './Beta/Beta';
+export { default as Commands } from './Commands/Commands';
 export { RevokeKeysButton } from './Data/RevokeKeysButton';
 export { default as Account } from './Account/Account';
 export { default as Speech } from './Speech/Speech';