fix: improve business logic in prompt editor and fix cursor bugs in Plan mode (#867)

Noah Gregory committed 8 months ago

Commit f63cda21 parent b60a34e2 files · +50 −20Browse files

Unified · Split

2 files

apps/web/src/components/ChatView.tsx +32 −9
apps/web/src/components/ComposerPromptEditor.tsx +18 −11

apps/web/src/components/ChatView.tsx+32−9

@@ -633,23 +633,46 @@ export default function ChatView({ threadId }: ChatViewProps) { · 632 unmodified lines
633	pendingUserInputs.length > 0 \|\|	633	pendingUserInputs.length > 0 \|\|
634	(showPlanFollowUpPrompt && activeProposedPlan !== null);	634	(showPlanFollowUpPrompt && activeProposedPlan !== null);
635	const composerFooterHasWideActions = showPlanFollowUpPrompt \|\| activePendingProgress !== null;	635	const composerFooterHasWideActions = showPlanFollowUpPrompt \|\| activePendingProgress !== null;
		636	const lastSyncedPendingInputRef = useRef<{
		637	requestId: string \| null;
		638	questionId: string \| null;
		639	} \| null>(null);
636	useEffect(() => {	640	useEffect(() => {
637	if (!activePendingProgress) {	641	const nextCustomAnswer = activePendingProgress?.customAnswer;
		642	if (typeof nextCustomAnswer !== "string") {
		643	lastSyncedPendingInputRef.current = null;
638	return;	644	return;
639	}	645	}
640	promptRef.current = activePendingProgress.customAnswer;	646	const nextRequestId = activePendingUserInput?.requestId ?? null;
641	setComposerCursor(activePendingProgress.customAnswer.length);	647	const nextQuestionId = activePendingProgress?.activeQuestion?.id ?? null;
		648	const questionChanged =
		649	lastSyncedPendingInputRef.current?.requestId !== nextRequestId \|\|
		650	lastSyncedPendingInputRef.current?.questionId !== nextQuestionId;
		651	const textChangedExternally = promptRef.current !== nextCustomAnswer;
		652
		653	lastSyncedPendingInputRef.current = {
		654	requestId: nextRequestId,
		655	questionId: nextQuestionId,
		656	};
		657
		658	if (!questionChanged && !textChangedExternally) {
		659	return;
		660	}
		661
		662	promptRef.current = nextCustomAnswer;
		663	setComposerCursor(nextCustomAnswer.length);
642	setComposerTrigger(	664	setComposerTrigger(
643	detectComposerTrigger(	665	detectComposerTrigger(
644	activePendingProgress.customAnswer,	666	nextCustomAnswer,
645	expandCollapsedComposerCursor(	667	expandCollapsedComposerCursor(nextCustomAnswer, nextCustomAnswer.length),
646	activePendingProgress.customAnswer,
647	activePendingProgress.customAnswer.length,
648	),
649	),	668	),
650	);	669	);
651	setComposerHighlightedItemId(null);	670	setComposerHighlightedItemId(null);
652	}, [activePendingProgress, activePendingUserInput?.requestId]);	671	}, [
		672	activePendingProgress?.customAnswer,
		673	activePendingUserInput?.requestId,
		674	activePendingProgress?.activeQuestion?.id,
		675	]);
653	useEffect(() => {	676	useEffect(() => {
654	attachmentPreviewHandoffByMessageIdRef.current = attachmentPreviewHandoffByMessageId;	677	attachmentPreviewHandoffByMessageIdRef.current = attachmentPreviewHandoffByMessageId;
655	}, [attachmentPreviewHandoffByMessageId]);	678	}, [attachmentPreviewHandoffByMessageId]);

apps/web/src/components/ComposerPromptEditor.tsx+18−11

   const [editor] = useLexicalComposerContext();
   const onChangeRef = useRef(onChange);
   const snapshotRef = useRef({ value, cursor: clampCursor(value, cursor) });
+  const isApplyingControlledUpdateRef = useRef(false);
   useEffect(() => {
     onChangeRef.current = onChange;
       return;
     }
-    if (previousSnapshot.value !== value) {
-      editor.update(() => {
-        $setComposerEditorPrompt(value);
-      });
-    }
     snapshotRef.current = { value, cursor: normalizedCursor };
     const rootElement = editor.getRootElement();
-    if (!rootElement || document.activeElement !== rootElement) {
+    const isFocused = Boolean(rootElement && document.activeElement === rootElement);
+    if (previousSnapshot.value === value && !isFocused) {
       return;
     }
+    isApplyingControlledUpdateRef.current = true;
     editor.update(() => {
-      $setSelectionAtComposerOffset(normalizedCursor);
+      const valueChanged = previousSnapshot.value !== value;
+      if (previousSnapshot.value !== value) {
+        $setComposerEditorPrompt(value);
+      }
+      if (valueChanged || isFocused) {
+        $setSelectionAtComposerOffset(normalizedCursor);
+      }
+    });
+    queueMicrotask(() => {
+      isApplyingControlledUpdateRef.current = false;
     });
   }, [cursor, editor, value]);
       focus: () => {
         focusAt(snapshotRef.current.cursor);
       },
-      focusAt: (nextCursor: number) => {
+      focusAt,
-        focusAt(nextCursor);
-      },
       focusAtEnd: () => {
         focusAt(snapshotRef.current.value.length);
       },
       if (previousSnapshot.value === nextValue && previousSnapshot.cursor === nextCursor) {
         return;
       }
+      if (isApplyingControlledUpdateRef.current) {
+        return;
+      }
       snapshotRef.current = {
         value: nextValue,
         cursor: nextCursor,

fix: improve business logic in prompt editor and fix cursor bugs in Plan mode (#867)

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code