Stabilize composer editor callbacks

Cursor Agent committed 6 months ago

Commit 14ff38c1 parent 159f13c1 file · +43 −31Browse files

Unified · Split

apps/web/src/components/chat/ChatComposer.tsx+43−31

     // ------------------------------------------------------------------
     // Callbacks: command key
     // ------------------------------------------------------------------
-    const onComposerCommandKey = (
+    const onComposerCommandKey = useCallback(
-      key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab",
+      (key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab", event: KeyboardEvent) => {
-      event: KeyboardEvent,
+        if (key === "Tab" && event.shiftKey) {
-    ) => {
+          toggleInteractionMode();
-      if (key === "Tab" && event.shiftKey) {
-        toggleInteractionMode();
-        return true;
-      }
-      const { trigger } = resolveActiveComposerTrigger();
-      const menuIsActive = composerMenuOpenRef.current || trigger !== null;
-      if (menuIsActive) {
-        const currentItems = composerMenuItemsRef.current;
-        const selectedItem = activeComposerMenuItemRef.current ?? currentItems[0];
-        if (key === "ArrowDown" && currentItems.length > 0) {
-          nudgeComposerMenuHighlight("ArrowDown");
           return true;
         }
-        if (key === "ArrowUp" && currentItems.length > 0) {
+        const { trigger } = resolveActiveComposerTrigger();
-          nudgeComposerMenuHighlight("ArrowUp");
+        const menuIsActive = composerMenuOpenRef.current || trigger !== null;
-          return true;
+        if (menuIsActive) {
+          const currentItems = composerMenuItemsRef.current;
+          const selectedItem = activeComposerMenuItemRef.current ?? currentItems[0];
+          if (key === "ArrowDown" && currentItems.length > 0) {
+            nudgeComposerMenuHighlight("ArrowDown");
+            return true;
+          }
+          if (key === "ArrowUp" && currentItems.length > 0) {
+            nudgeComposerMenuHighlight("ArrowUp");
+            return true;
+          }
+          if ((key === "Enter" || key === "Tab") && selectedItem) {
+            onSelectComposerItem(selectedItem);
+            return true;
+          }
         }
-        if ((key === "Enter" || key === "Tab") && selectedItem) {
+        if (key === "Enter" && !event.shiftKey) {
-          onSelectComposerItem(selectedItem);
+          submitComposer();
           return true;
         }
-      }
+        return false;
-      if (key === "Enter" && !event.shiftKey) {
+      },
-        submitComposer();
+      [
-        return true;
+        nudgeComposerMenuHighlight,
-      }
+        onSelectComposerItem,
-      return false;
+        resolveActiveComposerTrigger,
-    };
+        submitComposer,
+        toggleInteractionMode,
+      ],
+    );
     // ------------------------------------------------------------------
     // Callbacks: images
     // ------------------------------------------------------------------
-    const addComposerImages = (files: File[]) => {
+    const addComposerImages = useCallback((files: File[]) => {
       if (!activeThreadId || files.length === 0) return;
       if (pendingUserInputs.length > 0) {
         toastManager.add({
         addComposerImagesToDraft(nextImages);
       }
       setThreadError(activeThreadId, error);
-    };
+    }, [
+      activeThreadId,
+      addComposerImage,
+      addComposerImagesToDraft,
+      pendingUserInputs.length,
+      setThreadError,
+    ]);
     const removeComposerImage = (imageId: string) => {
       removeComposerImageFromDraft(imageId);
     // ------------------------------------------------------------------
     // Callbacks: paste / drag
     // ------------------------------------------------------------------
-    const onComposerPaste = (event: React.ClipboardEvent<HTMLElement>) => {
+    const onComposerPaste = useCallback((event: React.ClipboardEvent<HTMLElement>) => {
       const files = Array.from(event.clipboardData.files);
       if (files.length === 0) return;
       const imageFiles = files.filter((file) => file.type.startsWith("image/"));
       if (imageFiles.length === 0) return;
       event.preventDefault();
       addComposerImages(imageFiles);
-    };
+    }, [addComposerImages]);
     const onComposerDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
       if (!event.dataTransfer.types.includes("Files")) return;