perf: memoize input box components

Author: sestinj

gui/src/components/mainInput/ContinueInputBox.tsx

@@ -1,6 +1,6 @@
 import { Editor, JSONContent } from "@tiptap/react";
 import { ContextItemWithId, InputModifiers, RuleWithSource } from "core";
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { defaultBorderRadius, vscBackground } from "..";
 import { useAppSelector } from "../../redux/hooks";
 import { selectSlashCommandComboBoxInputs } from "../../redux/selectors";
@@ -69,16 +69,20 @@ function ContinueInputBox(props: ContinueInputBoxProps) {
   const historyKey = isInEdit ? "edit" : "chat";
   const placeholder = isInEdit ? "Edit selected code" : undefined;
 
-  const toolbarOptions: ToolbarOptions = isInEdit
-    ? {
+  const toolbarOptions: ToolbarOptions = useMemo(() => {
+    if (isInEdit) {
+      return {
         hideAddContext: false,
         hideImageUpload: false,
         hideUseCodebase: true,
         hideSelectModel: false,
         enterText:
           editModeState.applyState.status === "done" ? "Retry" : "Edit",
-      }
-    : {};
+      } as ToolbarOptions;
+    }
+    // Stable empty object to avoid re-renders from identity changes
+    return {} as ToolbarOptions;
+  }, [isInEdit, editModeState.applyState.status]);
 
   const { appliedRules = [], contextItems = [] } = props;
 
@@ -123,4 +127,4 @@ function ContinueInputBox(props: ContinueInputBoxProps) {
   );
 }
 
-export default ContinueInputBox;
+export default memo(ContinueInputBox);

gui/src/components/mainInput/InputToolbar.tsx

@@ -9,7 +9,7 @@ import {
   modelSupportsImages,
   modelSupportsReasoning,
 } from "core/llm/autodetect";
-import { useContext, useRef } from "react";
+import { memo, useContext, useRef } from "react";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { selectUseActiveFile } from "../../redux/selectors";
@@ -242,4 +242,24 @@ function InputToolbar(props: InputToolbarProps) {
   );
 }
 
-export default InputToolbar;
+function shallowToolbarOptionsEqual(a?: ToolbarOptions, b?: ToolbarOptions) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.hideAddContext === b.hideAddContext &&
+    a.hideImageUpload === b.hideImageUpload &&
+    a.hideUseCodebase === b.hideUseCodebase &&
+    a.hideSelectModel === b.hideSelectModel &&
+    a.enterText === b.enterText
+  );
+}
+
+export default memo(
+  InputToolbar,
+  (prev, next) =>
+    prev.hidden === next.hidden &&
+    prev.disabled === next.disabled &&
+    prev.isMainInput === next.isMainInput &&
+    prev.activeKey === next.activeKey &&
+    shallowToolbarOptionsEqual(prev.toolbarOptions, next.toolbarOptions),
+);

gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx

@@ -1,7 +1,14 @@
 import { Editor, EditorContent, JSONContent } from "@tiptap/react";
 import { ContextProviderDescription, InputModifiers } from "core";
 import { modelSupportsImages } from "core/llm/autodetect";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import useIsOSREnabled from "../../../hooks/useIsOSREnabled";
 import useUpdatingRef from "../../../hooks/useUpdatingRef";
@@ -38,7 +45,7 @@ export interface TipTapEditorProps {
 
 export const TIPPY_DIV_ID = "tippy-js-div";
 
-export function TipTapEditor(props: TipTapEditorProps) {
+function TipTapEditorInner(props: TipTapEditorProps) {
   const dispatch = useAppDispatch();
   const mainEditorContext = useMainEditor();
 
@@ -72,12 +79,13 @@ export function TipTapEditor(props: TipTapEditorProps) {
       return;
     }
     const placeholder = getPlaceholderText(props.placeholder, historyLength);
-
-    editor.extensionManager.extensions.filter(
-      (extension) => extension.name === "placeholder",
-    )[0].options["placeholder"] = placeholder;
-
-    editor.view.dispatch(editor.state.tr);
+    const placeholderExt = editor.extensionManager.extensions.find(
+      (e) => e.name === "placeholder",
+    ) as any;
+    if (placeholderExt) {
+      placeholderExt.options["placeholder"] = placeholder;
+      editor.view.dispatch(editor.state.tr);
+    }
   }, [editor, props.placeholder, historyLength]);
 
   useEffect(() => {
@@ -281,3 +289,37 @@ export function TipTapEditor(props: TipTapEditorProps) {
     </InputBoxDiv>
   );
 }
+
+function toolbarOptionsEqual(a?: ToolbarOptions, b?: ToolbarOptions) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.hideAddContext === b.hideAddContext &&
+    a.hideImageUpload === b.hideImageUpload &&
+    a.hideUseCodebase === b.hideUseCodebase &&
+    a.hideSelectModel === b.hideSelectModel &&
+    a.enterText === b.enterText
+  );
+}
+
+const MemoInner = memo(
+  TipTapEditorInner,
+  (prev, next) =>
+    prev.isMainInput === next.isMainInput &&
+    prev.placeholder === next.placeholder &&
+    prev.historyKey === next.historyKey &&
+    prev.inputId === next.inputId &&
+    toolbarOptionsEqual(prev.toolbarOptions, next.toolbarOptions) &&
+    (prev.availableContextProviders?.length || 0) ===
+      (next.availableContextProviders?.length || 0) &&
+    (prev.availableSlashCommands?.length || 0) ===
+      (next.availableSlashCommands?.length || 0),
+);
+
+export function TipTapEditor(props: TipTapEditorProps) {
+  return (
+    <div className="relative w-full">
+      <MemoInner {...props} />
+    </div>
+  );
+}