feat: add hotkey to toggle chat modes (#1274) (#995) (#1284)

src/components/ChatModeSelector.tsx

@@ -13,6 +13,7 @@ import {
 import { useSettings } from "@/hooks/useSettings";
 import type { ChatMode } from "@/lib/schemas";
 import { cn } from "@/lib/utils";
+import { detectIsMac } from "@/hooks/useChatModeToggle";
 
 export function ChatModeSelector() {
   const { settings, updateSettings } = useSettings();
@@ -35,6 +36,7 @@ export function ChatModeSelector() {
         return "Build";
     }
   };
+  const isMac = detectIsMac();
 
   return (
     <Select value={selectedMode} onValueChange={handleModeChange}>
@@ -53,7 +55,14 @@ export function ChatModeSelector() {
             <SelectValue>{getModeDisplayName(selectedMode)}</SelectValue>
           </MiniSelectTrigger>
         </TooltipTrigger>
-        <TooltipContent>Open mode menu</TooltipContent>
+        <TooltipContent>
+          <div className="flex flex-col">
+            <span>Open mode menu</span>
+            <span className="text-xs text-gray-200 dark:text-gray-500">
+              {isMac ? "⌘ + ." : "Ctrl + ."} to toggle
+            </span>
+          </div>
+        </TooltipContent>
       </Tooltip>
       <SelectContent align="start" onCloseAutoFocus={(e) => e.preventDefault()}>
         <SelectItem value="build">

src/components/chat/ChatInput.tsx

@@ -65,6 +65,7 @@ import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
 import { SelectedComponentDisplay } from "./SelectedComponentDisplay";
 import { useCheckProblems } from "@/hooks/useCheckProblems";
 import { LexicalChatInput } from "./LexicalChatInput";
+import { useChatModeToggle } from "@/hooks/useChatModeToggle";
 
 const showTokenBarAtom = atom(false);
 
@@ -107,6 +108,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
     refreshProposal,
   } = useProposal(chatId);
   const { proposal, messageId } = proposalResult ?? {};
+  useChatModeToggle();
 
   const lastMessage = messages.at(-1);
   const disableSendButton =

src/components/chat/HomeChatInput.tsx

@@ -12,6 +12,7 @@ import { usePostHog } from "posthog-js/react";
 import { HomeSubmitOptions } from "@/pages/home";
 import { ChatInputControls } from "../ChatInputControls";
 import { LexicalChatInput } from "./LexicalChatInput";
+import { useChatModeToggle } from "@/hooks/useChatModeToggle";
 export function HomeChatInput({
   onSubmit,
 }: {
@@ -23,6 +24,7 @@ export function HomeChatInput({
   const { isStreaming } = useStreamChat({
     hasChatId: false,
   }); // eslint-disable-line @typescript-eslint/no-unused-vars
+  useChatModeToggle();
 
   // Use the attachments hook
   const {

src/hooks/useChatModeToggle.ts

+import { useCallback, useMemo } from "react";
+import { useSettings } from "./useSettings";
+import { useShortcut } from "./useShortcut";
+import { usePostHog } from "posthog-js/react";
+import { ChatModeSchema } from "../lib/schemas";
+
+export function useChatModeToggle() {
+  const { settings, updateSettings } = useSettings();
+  const posthog = usePostHog();
+
+  // Detect if user is on mac
+  const isMac = useIsMac();
+
+  // Memoize the modifiers object to prevent re-registration
+  const modifiers = useMemo(
+    () => ({
+      ctrl: !isMac,
+      meta: isMac,
+    }),
+    [isMac],
+  );
+
+  // Function to toggle between ask and build chat modes
+  const toggleChatMode = useCallback(() => {
+    if (!settings || !settings.selectedChatMode) return;
+
+    const currentMode = settings.selectedChatMode;
+    const modes = ChatModeSchema.options;
+    const currentIndex = modes.indexOf(settings.selectedChatMode);
+    const newMode = modes[(currentIndex + 1) % modes.length];
+
+    updateSettings({ selectedChatMode: newMode });
+    posthog.capture("chat:mode_toggle", {
+      from: currentMode,
+      to: newMode,
+      trigger: "keyboard_shortcut",
+    });
+  }, [settings, updateSettings, posthog]);
+
+  // Add keyboard shortcut with memoized modifiers
+  useShortcut(
+    ".",
+    modifiers,
+    toggleChatMode,
+    true, // Always enabled since we're not dependent on component selector
+  );
+
+  return { toggleChatMode, isMac };
+}
+
+// Add this function at the top
+type NavigatorWithUserAgentData = Navigator & {
+  userAgentData?: {
+    platform?: string;
+  };
+};
+
+export function detectIsMac(): boolean {
+  const nav = navigator as NavigatorWithUserAgentData;
+  // Try modern API first
+  if ("userAgentData" in nav && nav.userAgentData?.platform) {
+    return nav.userAgentData.platform.toLowerCase().includes("mac");
+  }
+
+  // Fallback to user agent check
+  return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+}
+// Export the utility function and hook for use elsewhere
+export function useIsMac(): boolean {
+  return useMemo(() => detectIsMac(), []);
+}